/* ============================================================
   FOOTBALL NETWORK V5 — Wydad-fidelity home + footer blocks.
   Loaded after v5-design.css. Namespaced .fnwv5-*.
   ============================================================ */

/* ---- Featured news split (image + black panel) ---- */
.fnwv5-feat {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  border-radius: var(--fnwv5-radius);
  overflow: hidden;
  text-decoration: none;
  min-height: clamp(360px, 46vw, 560px);
  box-shadow: var(--fnwv5-shadow);
}
.fnwv5-feat__media { position: relative; overflow: hidden; background: var(--fnwv5-surface); }
.fnwv5-feat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--fnwv5-ease); }
.fnwv5-feat:hover .fnwv5-feat__media img { transform: scale(1.04); }
.fnwv5-feat__panel {
  background: var(--fnwv5-primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: clamp(28px, 4vw, 64px);
}
.fnwv5-feat__title {
  font-family: var(--fnwv5-font-display);
  text-transform: none;
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 3rem);
  line-height: 1.04;
  margin: 0;
  color: #fff;
}
.fnwv5-feat__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fnwv5-font-body);
  font-weight: 600;
  color: #fff;
}
.fnwv5-feat__more span {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%;
}
.fnwv5-feat:hover .fnwv5-feat__more span { background: var(--fnwv5-theme); border-color: var(--fnwv5-theme); }

/* ---- News strip (tiles + arrow) ---- */
.fnwv5-news-strip { position: relative; margin-top: var(--fnwv5-gap); }
.fnwv5-news-strip__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--fnwv5-gap)) / 4);
  gap: var(--fnwv5-gap);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.fnwv5-news-strip__track::-webkit-scrollbar { display: none; }
.fnwv5-news-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--fnwv5-radius);
  overflow: hidden;
  text-decoration: none;
  scroll-snap-align: start;
  background: var(--fnwv5-surface);
}
.fnwv5-news-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--fnwv5-ease); }
.fnwv5-news-tile:hover img { transform: scale(1.06); }
.fnwv5-news-tile__title {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 16px 14px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82));
  color: #fff;
  font-family: var(--fnwv5-font-heading);
  font-size: 0.9rem; font-weight: 600; line-height: 1.2;
}
.fnwv5-strip-arrow {
  position: absolute; top: 50%; right: -10px; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--fnwv5-secondary); color: var(--fnwv5-ink);
  border: 1px solid var(--fnwv5-line); box-shadow: var(--fnwv5-shadow);
  display: grid; place-items: center; cursor: pointer; z-index: 3;
  transition: background 0.2s var(--fnwv5-ease), color 0.2s var(--fnwv5-ease);
}
.fnwv5-strip-arrow:hover { background: var(--fnwv5-theme); color: #fff; }

/* ---- Section head on dark/red sections ---- */
.fnwv5-sec-head--light .fnwv5-h2 { color: #fff; }
.fnwv5-sec-link--light { color: #fff !important; }

/* ---- MATCHES (red section + cards) ---- */
.fnwv5-home-matches {
  position: relative;
  padding-block: var(--fnwv5-section-y);
  /* dark top-fade layered over the radial so the bright green blends from the dark
     section above (news) instead of a hard horizontal seam */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 16%),
    linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 14%),
    radial-gradient(120% 120% at 50% -10%, var(--fnwv5-primary-hi), var(--fnwv5-primary) 45%, var(--fnwv5-primary-deep) 100%);
  color: #fff;
  overflow: hidden;
}
/* Desktop: tighten the Matches block's top/bottom space to the same etalon gap as the
   other home sections. Defined here (after the base rule) so it wins the cascade.
   Mobile keeps the larger section padding. */
@media (min-width: 901px) {
  /* ×1.5 of the etalon gap: more breathing room above the MATCHES heading and below the
     cards (before the Results line). Mobile keeps the larger default section padding. */
  /* Top gap = etalon; bottom gap doubled so the club-colour (primary) field under the
     fixture cards reads larger before the results section. */
  .fnwv5-home-matches { padding-top: clamp(15px, 2.1vw, 30px); padding-bottom: clamp(30px, 4.2vw, 60px); }
}
.fnwv5-mcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fnwv5-gap); }
/* Empty state — shown when there are no upcoming fixtures (off-season / not scheduled yet).
   Deliberately unlike the vibrant match cards: a translucent dashed placeholder on the
   club-colour field, so it reads as "nothing scheduled" rather than a live fixture. */
.fnwv5-matches-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center;
  padding: clamp(30px, 5vw, 60px) 24px;
  border: 2px dashed rgba(255, 255, 255, 0.5);
  border-radius: var(--fnwv5-radius);
  /* Transparent on purpose: let the club-colour (lime) section field show through — it colours
     the page nicely — instead of covering it with a dark panel. Just a dashed frame + message. */
  background: transparent;
  color: #fff;
}
.fnwv5-matches-empty__icon { width: 46px; height: 46px; opacity: 0.85; }
.fnwv5-matches-empty__title {
  margin: 0; font-family: var(--fnwv5-font-display); text-transform: uppercase;
  font-size: clamp(1.05rem, 1.9vw, 1.45rem); line-height: 1.1; letter-spacing: 0.02em;
}
.fnwv5-mcard {
  position: relative;
  border-radius: var(--fnwv5-radius);
  overflow: hidden;
  background: linear-gradient(160deg, var(--fnwv5-theme-dark), var(--fnwv5-primary));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.fnwv5-mcard::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(70% 60% at 50% 40%, rgba(255, 255, 255, 0.10), transparent 70%);
}
.fnwv5-mcard__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px; padding: clamp(26px, 3vw, 44px) 22px;
}
.fnwv5-mcard__comp-logo { width: 46px; height: 46px; object-fit: contain; }
.fnwv5-mcard__comp { font-family: var(--fnwv5-font-body); font-size: 0.78rem; color: rgba(255, 255, 255, 0.82); }
.fnwv5-mcard__title { font-family: var(--fnwv5-font-display); text-transform: uppercase; font-size: clamp(1.1rem, 1.5vw, 1.5rem); line-height: 1.05; color: var(--fnwv5-on-primary); }
.fnwv5-mcard__teams { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 6px 0; }
.fnwv5-mcard__crest { width: 60px; height: 60px; display: grid; place-items: center; }
.fnwv5-mcard__crest img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fnwv5-mcard__vs { font-family: var(--fnwv5-font-display); font-size: 1.3rem; color: rgba(255, 255, 255, 0.85); }
.fnwv5-mcard__score { font-family: var(--fnwv5-font-display); font-size: 1.6rem; color: var(--fnwv5-on-primary); background: rgba(0, 0, 0, 0.25); padding: 4px 14px; border-radius: 10px; }
.fnwv5-mcard__date { font-family: var(--fnwv5-font-body); font-size: 0.9rem; color: var(--fnwv5-on-primary); font-weight: 600; }
.fnwv5-mcard__btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  background: #fff; color: var(--fnwv5-primary);
  font-family: var(--fnwv5-font-heading); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.78rem; font-weight: 700; padding: 10px 22px; border-radius: var(--fnwv5-radius-pill);
  text-decoration: none; transition: transform 0.2s var(--fnwv5-ease);
}
.fnwv5-mcard__btn:hover { transform: translateY(-2px); }

/* ---- PALMARÈS (trophy cards) ---- */
.fnwv5-pcard {
  position: relative; overflow: hidden;
  border-radius: var(--fnwv5-radius);
  padding: 30px 26px 28px;
  text-align: center;
  /* same club-colour ramp as the home fixtures block (see v5-design.css panels): animated,
     dark wash for legibility, drop shadow */
  background:
    linear-gradient(160deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.46)),
    linear-gradient(135deg, var(--fnwv5-primary-deep), var(--fnwv5-primary) 50%, var(--fnwv5-primary-hi));
  background-size: 100% 100%, 220% 220%;
  animation: fnwv5-move-gradient 16s ease-in-out infinite;
  color: #fff;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.30);
}
@media (prefers-reduced-motion: reduce) { .fnwv5-pcard { animation: none; } }
.fnwv5-pcard__hex { position: relative; width: 92px; height: 104px; margin: 4px auto 18px; }
.fnwv5-pcard__icon {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: radial-gradient(circle at 50% 35%, rgba(247, 200, 90, 0.20), rgba(0, 0, 0, 0.18));
  color: var(--fnwv5-gold);
}
.fnwv5-pcard__icon svg { width: 46px; height: 46px; }
.fnwv5-pcard__badge {
  position: absolute; right: 6px; bottom: 4px;
  min-width: 30px; height: 30px; padding: 0 6px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.5); color: #fff;
  border-radius: 999px; font-family: var(--fnwv5-font-display); font-size: 0.92rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.fnwv5-pcard__title { margin: 0 0 10px; font-family: var(--fnwv5-font-heading); font-size: 1.2rem; color: #fff; }
.fnwv5-pcard__desc { margin: 0; font-family: var(--fnwv5-font-body); font-size: 0.86rem; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }

/* ---- SPONSORS (watermark word + marquee) ---- */
.fnwv5-sponsors { position: relative; text-align: center; overflow: hidden; }
.fnwv5-sponsors__bgword {
  position: absolute; top: 6%; left: 50%; transform: translateX(-50%);
  font-family: var(--fnwv5-font-display); text-transform: none;
  font-size: clamp(5rem, 16vw, 16rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(17, 17, 17, 0.06);
  pointer-events: none; user-select: none; z-index: 0; white-space: nowrap;
}
.fnwv5-sponsors__head { position: relative; z-index: 1; max-width: 760px; margin: 0 auto 48px; }
.fnwv5-sponsors__title { font-family: var(--fnwv5-font-display); text-transform: none; font-weight: 400; font-size: clamp(2rem, 4vw, 3.4rem); color: var(--fnwv5-ink); margin: 0 0 14px; }
.fnwv5-sponsors__lead { font-family: var(--fnwv5-font-body); color: var(--fnwv5-muted); line-height: 1.6; margin: 0; }
.fnwv5-sponsors__cta { position: relative; z-index: 1; }
.fnwv5-sponsor { display: inline-grid; place-items: center; height: 70px; flex-shrink: 0; }
.fnwv5-sponsor img { max-height: 64px; max-width: 150px; object-fit: contain; }

/* ---- FOOTER big self-drawing word ---- */
/* padding-inline = the ~1cm side gap the word must keep in every language; JS
   (footer.php) shrinks the text to fit the viewBox width so long / Thai / Cyrillic
   names never overflow and short names stay bold. */
.fnwv5-bigword { background: var(--fnwv5-shell); padding: 10px 1cm 6px; overflow: hidden; }
.fnwv5-bigword__svg { display: block; width: 100%; height: clamp(90px, 16vw, 230px); }
.fnwv5-bigword__text {
  font-family: var(--fnwv5-font-display);
  font-size: 150px;
  font-weight: 700;
  letter-spacing: 0.02em;
  fill: url(#fnwv5-bw-grad);
  stroke: var(--fnwv5-primary);
  stroke-width: 1.2;
  paint-order: stroke fill;
  stroke-dasharray: 1400;
  stroke-dashoffset: 0;
  animation: fnwv5-draw-word 9s ease-in-out infinite;
}
@keyframes fnwv5-draw-word {
  0%   { stroke-dashoffset: 1400; fill-opacity: 0; }
  8%   { fill-opacity: 0; }
  45%  { stroke-dashoffset: 0; fill-opacity: 1; }
  82%  { stroke-dashoffset: 0; fill-opacity: 1; }
  100% { stroke-dashoffset: 1400; fill-opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fnwv5-bigword__text { animation: none; stroke-dashoffset: 0; fill-opacity: 1; }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .fnwv5-feat { grid-template-columns: 1fr; min-height: 0; }
  .fnwv5-feat__media { aspect-ratio: 16 / 9; }
  .fnwv5-mcards { grid-template-columns: 1fr; }
  .fnwv5-news-strip__track { grid-auto-columns: 70%; }
}
@media (max-width: 600px) {
  .fnwv5-news-strip__track { grid-auto-columns: 82%; }
  .fnwv5-strip-arrow { display: none; }
}

/* ---- HONOURS showcase (silhouette + carousel + big circle) ---- */
/* Fixed reserved geometry: nothing reflows when slides change. */
.fnwv5-honors {
  position: relative;
  overflow: hidden;
  background: var(--fnwv5-bg);
  padding-block: clamp(56px, 8vw, 110px);
  min-height: clamp(520px, 52vw, 640px);
  display: flex;
  align-items: center;
}
.fnwv5-honors__silhouette {
  position: absolute; left: 1%; top: 50%; transform: translateY(-50%);
  width: clamp(160px, 22vw, 320px); color: var(--fnwv5-ink);
  opacity: 0.06; pointer-events: none; z-index: 0;
}
.fnwv5-honors__silhouette svg { width: 100%; height: auto; }
/* Big club-colour circle. Glow is a soft radial halo (fades out) so it never
   shows a hard clipped edge against the section bounds. */
.fnwv5-honors__circle {
  position: absolute; right: -7%; top: 50%; transform: translateY(-50%);
  width: clamp(300px, 38vw, 520px); height: clamp(300px, 38vw, 520px);
  border-radius: 50%; background: var(--fnwv5-primary);
  display: flex; align-items: center; justify-content: center; gap: 2%;
  z-index: 0;
}
.fnwv5-honors__circle::before {
  content: ""; position: absolute; inset: -26%; border-radius: 50%;
  background: radial-gradient(circle, var(--fnwv5-glow) 0%, transparent 62%);
  z-index: -1; pointer-events: none;
}
.fnwv5-honors__circle-trophy { width: clamp(70px, 9vw, 128px); color: var(--fnwv5-gold); flex-shrink: 0; }
.fnwv5-honors__circle-trophy svg { width: 100%; height: auto; filter: drop-shadow(0 6px 12px rgba(0,0,0,.25)); }
.fnwv5-honors__circle-num {
  font-family: var(--fnwv5-font-display); color: var(--fnwv5-on-primary);
  font-size: clamp(3.5rem, 9vw, 7.5rem); line-height: 1;
}
.fnwv5-honors__inner { position: relative; z-index: 2; max-width: 760px; width: 100%; }
.fnwv5-honors__heading {
  font-family: var(--fnwv5-font-display); text-transform: none; font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.6rem); color: var(--fnwv5-primary); margin: 0 0 32px;
}
.fnwv5-honors__body { display: flex; align-items: center; gap: clamp(18px, 3vw, 48px); }
.fnwv5-honors__arrows { display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; }
.fnwv5-honors__arrow {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--fnwv5-primary); border: none; box-shadow: var(--fnwv5-shadow-sm);
  color: var(--fnwv5-on-primary); display: grid; place-items: center; cursor: pointer;
  transition: background 0.2s var(--fnwv5-ease), color 0.2s var(--fnwv5-ease);
}
.fnwv5-honors__arrow:hover { background: var(--fnwv5-primary-dark); color: var(--fnwv5-on-primary); }
/* Slides stacked absolutely inside a fixed-height box → zero layout jump. */
.fnwv5-honors__slides { position: relative; flex: 1; min-height: clamp(230px, 30vh, 290px); }
.fnwv5-honors__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.55s var(--fnwv5-ease), transform 0.55s var(--fnwv5-ease);
  pointer-events: none;
}
.fnwv5-honors__slide.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.fnwv5-honors__comp {
  font-family: var(--fnwv5-font-display); text-transform: none; font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.6rem); color: var(--fnwv5-ink); margin: 0 0 16px;
}
.fnwv5-honors__desc { font-family: var(--fnwv5-font-body); color: var(--fnwv5-muted); line-height: 1.6; margin: 0 0 24px; max-width: 46ch; }
.fnwv5-honors__years-label {
  font-family: var(--fnwv5-font-heading); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.72rem; color: var(--fnwv5-muted); margin-bottom: 6px;
}
.fnwv5-honors__years { font-family: var(--fnwv5-font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--fnwv5-ink); }
.fnwv5-honors__dots { display: flex; gap: 8px; flex-shrink: 0; align-self: center; }
.fnwv5-honors__dot { width: 26px; height: 4px; border-radius: 2px; background: var(--fnwv5-line); cursor: pointer; transition: background 0.2s var(--fnwv5-ease); }
.fnwv5-honors__dot.is-active { background: var(--fnwv5-primary); }
@media (max-width: 900px) {
  /* Keep the DESKTOP composition on mobile: a big ROUND club-colour circle that clips the
     right screen edge with its soft glow (inherits the desktop absolute position + ::before
     glow). Slide text stays to the LEFT of the circle; the up/down switch buttons sit in a
     vertical column to the RIGHT of the text (never over it). Dots are hidden on mobile
     (they collided with the year copy) — the arrows drive switching. */
  .fnwv5-honors { min-height: clamp(420px, 100vw, 560px); padding-block: clamp(44px, 10vw, 68px); }
  /* Circle clips the right edge; trophy + number pinned to the circle's LEFT so they stay
     visible. */
  .fnwv5-honors__circle { width: clamp(250px, 76vw, 360px); height: clamp(250px, 76vw, 360px); right: -22%;
    justify-content: center; padding-left: 0; }
  .fnwv5-honors__circle-num { font-size: clamp(3rem, 13vw, 4.6rem); }
  .fnwv5-honors__silhouette { display: none; }
  /* Left text column (clear of the circle). Everything below stacks NEATLY in this column:
     slide copy → a horizontal arrows row → the indicator dots. Nothing overlaps the circle. */
  .fnwv5-honors__inner { max-width: 64%; }
  .fnwv5-honors__comp { font-size: 1.05rem; line-height: 1.3; margin-bottom: 10px; }
  .fnwv5-honors__body { flex-direction: column; align-items: flex-start; gap: 18px; }
  .fnwv5-honors__slides { order: 1; width: 100%; min-height: clamp(150px, 42vw, 220px); }
  /* dots (indicator) above, switch arrows below — swapped per owner */
  .fnwv5-honors__dots { display: flex; order: 2; }
  .fnwv5-honors__arrows { order: 3; flex-direction: row; gap: 12px; }
}