/* ===========================================================
   Tactique Mondiale — pages.css
   Hero + page-specific blocks
   =========================================================== */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 12%, rgba(79,216,255,.16), transparent 45%),
    radial-gradient(circle at 12% 88%, rgba(79,134,255,.18), transparent 42%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero h1 { margin-bottom: 1.1rem; }
.hero h1 em {
  font-style: normal;
  color: var(--bp-cyan);
  position: relative;
}
.hero__lead { font-size: 1.18rem; color: var(--bp-muted); max-width: 52ch; }
.hero__cta { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 1.8rem; }

.hero__panel {
  position: relative;
  border: 1px solid var(--bp-line-strong);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 0%, rgba(79,216,255,.10), transparent 60%),
    linear-gradient(160deg, var(--bp-navy-700), var(--bp-navy-900));
  padding: 1.8rem 1.8rem 2.2rem;
}
.hero__panel-label {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bp-muted-dim); margin-bottom: 1.2rem;
}
.hero__panel-label span:last-child { color: var(--bp-cyan); }

@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__panel { max-width: 420px; }
}

/* ---------- Page header (interior) ---------- */
.page-hero {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--bp-line);
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 0%, rgba(79,216,255,.12), transparent 50%);
  pointer-events: none;
}
.page-hero .container { position: relative; }
.page-hero h1 { max-width: 18ch; }
.page-hero p { color: var(--bp-muted); max-width: 60ch; font-size: 1.12rem; }
.breadcrumb {
  font-family: var(--font-display);
  font-size: .8rem; letter-spacing: .05em;
  color: var(--bp-muted-dim);
  margin-bottom: 1.2rem;
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.breadcrumb a { color: var(--bp-muted); }
.breadcrumb span { color: var(--bp-muted-dim); }

/* ---------- Formation cards (squad page) ---------- */
.form-card {
  border: 1px solid var(--bp-line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--bp-navy-700), var(--bp-navy-800));
  padding: 1.7rem;
}
.form-card__pitch { margin: 1.4rem 0; }
.form-card h3 { display: flex; align-items: baseline; gap: .6rem; }
.form-card h3 .form-code { color: var(--bp-cyan); font-size: 1.4rem; }
.form-card p { color: var(--bp-muted); font-size: .96rem; }
.form-card ul { color: var(--bp-muted); font-size: .94rem; }

/* ---------- Final matches ---------- */
.match-card {
  border: 1px solid var(--bp-line);
  border-radius: var(--radius);
  padding: 1.7rem;
  background: rgba(16, 29, 73, 0.4);
  margin-bottom: 1.6rem;
}
.match-card__top {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem; margin-bottom: 1rem;
}
.match-score {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700;
}
.match-score em { font-style: normal; color: var(--bp-cyan); padding: 0 .5rem; }
.match-card__meta { color: var(--bp-muted-dim); font-size: .85rem; font-family: var(--font-display); letter-spacing: .05em; }
.match-card p { color: var(--bp-muted); margin-bottom: 0; }

/* ---------- About values ---------- */
.value-card { text-align: left; }
.value-card .card__icon { margin-bottom: 1rem; }

.editor-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap);
}
.editor {
  border: 1px solid var(--bp-line);
  border-radius: var(--radius);
  padding: 1.6rem;
  background: rgba(16, 29, 73, 0.35);
  text-align: center;
}
.editor__avatar {
  width: 78px; height: 78px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.6rem;
  color: var(--bp-navy-900);
  background: linear-gradient(135deg, var(--bp-cyan), var(--bp-blue));
}
.editor h3 { font-size: 1.15rem; margin-bottom: .2rem; }
.editor .editor__role { color: var(--bp-cyan); font-size: .85rem; font-family: var(--font-display); letter-spacing: .05em; }
.editor p { color: var(--bp-muted); font-size: .92rem; margin-top: .7rem; }

/* ---------- Legal / prose pages ---------- */
.legal-body { max-width: 760px; }
.legal-body h2 { margin-top: 2.2rem; font-size: 1.5rem; }
.legal-body h3 { margin-top: 1.6rem; color: var(--bp-blue-bright); font-size: 1.15rem; }
.legal-body ul { color: var(--bp-muted); }
.legal-meta { color: var(--bp-muted-dim); font-size: .9rem; margin-bottom: 2rem; }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0;
  font-size: .94rem;
}
.legal-table th, .legal-table td {
  text-align: left;
  padding: .8rem 1rem;
  border: 1px solid var(--bp-line);
}
.legal-table th { background: rgba(79,134,255,.10); color: var(--bp-white); font-family: var(--font-display); font-weight: 500; }
.legal-table td { color: var(--bp-muted); vertical-align: top; }

/* ---------- Trend bars ---------- */
.trend-bar { margin-bottom: 1.4rem; }
.trend-bar__label { display: flex; justify-content: space-between; font-size: .92rem; margin-bottom: .4rem; }
.trend-bar__label strong { color: var(--bp-white); }
.trend-bar__label span { color: var(--bp-cyan); font-family: var(--font-display); }
.trend-bar__track { height: 10px; border-radius: 999px; background: rgba(79,134,255,.14); overflow: hidden; }
.trend-bar__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--bp-blue), var(--bp-cyan)); width: 0; transition: width 1.1s cubic-bezier(.4,0,.2,1); }

/* ---------- Flag chips ---------- */
.flag-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.flag-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--bp-line-strong);
  border-radius: 999px; padding: .4rem .9rem;
  font-family: var(--font-display); font-size: .85rem; color: var(--bp-muted);
  background: rgba(16, 29, 73, 0.35);
}
.flag-chip .dotmark { width: 9px; height: 9px; border-radius: 50%; background: var(--bp-cyan); }

/* ---------- Photography ---------- */
/* Hero background photo + dark scrim to keep light text readable */
.hero--photo { isolation: isolate; }
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,11,29,.72), rgba(6,11,29,.86)),
    linear-gradient(90deg, rgba(6,11,29,.78), rgba(6,11,29,.42));
}

/* Page-hero background photo */
.page-hero--photo .page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.page-hero--photo .page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.page-hero--photo .page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,11,29,.78), rgba(6,11,29,.9));
}

/* Photo inside the feature media slot */
.feat-card__media--photo { padding: 0; }
.feat-card__media--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Generic framed photo (sections, cards) */
.photo-frame {
  position: relative;
  border: 1px solid var(--bp-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bp-navy-800);
}
.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-frame--wide { aspect-ratio: 16 / 7; }
.photo-frame--card { aspect-ratio: 4 / 3; }
.photo-frame--square { aspect-ratio: 1 / 1; }

/* Card thumbnail that sits above card text */
.card__thumb {
  position: relative;
  z-index: 1;
  margin: -1.7rem -1.7rem 1.2rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--bp-line);
}
.card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-med);
}
.card:hover .card__thumb img { transform: scale(1.04); }

/* Photo strip / mini gallery */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: 1.6rem;
}
.photo-strip .photo-frame { aspect-ratio: 4 / 3; }
@media (max-width: 720px) {
  .photo-strip { grid-template-columns: 1fr 1fr; }
}