/* ============================================================
   ACS Omega Sport București — appwright.us/acs-omega
   Design system: "matchday-poster editorial"
   Ground = light concrete · punch-bands = poster black
   Device = the skewed score-plate · Mark = Ω
   Tokens: _design/tokens.json · Manifest: _design/design-manifest.md
   ============================================================ */
@import url("fonts.css");

:root {
  --ground: #EFEDEA;
  --surface: #FFFFFF;
  --ink: #141312;
  --muted: #5D5955;
  --accent: #E1121D;
  --accent-deep: #B60D16;
  --plate: #0E0D0C;
  --ink-dark: #F7F5F2;
  --muted-dark: #B7B2AC;
  --line: #D8D4CE;
  --line-dark: #2A2826;
  --gold: #C9A227;

  --f-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --f-body: "Archivo", system-ui, sans-serif;

  --fs-display-xl: clamp(2.55rem, 6.2vw, 4.3rem);
  --fs-display-lg: clamp(1.9rem, 4.4vw, 3.1rem);
  --fs-display-md: clamp(1.45rem, 3vw, 2.05rem);

  --sh-card: 0 1px 2px rgba(14,13,12,.06), 0 8px 24px rgba(14,13,12,.09);
  --sh-lift: 0 2px 4px rgba(14,13,12,.10), 0 16px 40px rgba(14,13,12,.16);

  --ease-snap: cubic-bezier(.2,.85,.25,1.04);
  --skew: -4deg;
  --bar-h: 64px;
  --mbar-h: 0px;
  --wrap: 1180px;
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 85% -5%, rgba(225,18,29,.05), transparent 60%),
    var(--ground);
  padding-bottom: var(--mbar-h);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
button { font: inherit; cursor: pointer; }
input, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: #fff; }
[id] { scroll-margin-top: calc(var(--bar-h) + 16px); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--plate); color: var(--ink-dark); padding: 10px 16px;
}
.skip:focus { left: 8px; top: 8px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }

/* ---------- type ---------- */
.d-xl, .d-lg, .d-md, .d-sm {
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: 1.12;
  text-wrap: balance;
}
.d-xl { font-size: var(--fs-display-xl); }
.d-lg { font-size: var(--fs-display-lg); }
.d-md { font-size: var(--fs-display-md); }
.d-sm { font-size: 1.22rem; }
.lead { font-size: 1.115rem; color: var(--muted); max-width: 62ch; text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- the score-plate device ---------- */
.plate {
  display: inline-block;
  background: var(--plate);
  color: var(--ink-dark);
  transform: skewX(var(--skew));
  padding: .34em .85em .3em;
  position: relative;
}
.plate > * , .plate.p-txt > span { display: inline-block; transform: skewX(4deg); }
.plate::before {
  content: ""; position: absolute; left: -9px; top: 0; bottom: 0; width: 5px;
  background: var(--accent);
}
.plate--red { background: var(--accent); }
.plate--red::before { background: var(--plate); }
.plate--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--plate); }
.eyebrow {
  font-family: var(--f-display); text-transform: uppercase;
  font-size: .82rem; letter-spacing: .14em;
}

/* section header pattern */
.sec { padding-block: clamp(56px, 8vw, 96px); position: relative; }
.sec-head { margin-bottom: clamp(28px, 4vw, 44px); }
.sec-head .plate { margin-bottom: 14px; }
.sec-head h2 { font-size: var(--fs-display-lg); font-family: var(--f-display); text-transform: uppercase; line-height: 1.1; }
.sec-head .lead { margin-top: 12px; }

/* dark band sections */
.band {
  background:
    radial-gradient(900px 420px at 12% 108%, rgba(225,18,29,.28), transparent 62%),
    radial-gradient(700px 300px at 96% -10%, rgba(225,18,29,.12), transparent 60%),
    var(--plate);
  color: var(--ink-dark);
}
.band .lead { color: var(--muted-dark); }
.band .plate { background: var(--ink-dark); color: var(--plate); }
.band .plate::before { background: var(--accent); }
.band .plate--red { background: var(--accent); color: #fff; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--f-display); text-transform: uppercase; letter-spacing: .06em;
  font-size: .98rem; line-height: 1;
  padding: 15px 22px 13px;
  background: var(--accent); color: #fff;
  border: 0; text-decoration: none;
  transform: skewX(var(--skew));
  transition: transform .16s var(--ease-snap), background .16s, box-shadow .16s;
  min-height: 44px;
}
.btn > span, .btn > svg { transform: skewX(4deg); }
.btn:hover { background: var(--accent-deep); transform: skewX(var(--skew)) translateY(-2px); box-shadow: 5px 6px 0 rgba(14,13,12,.9); }
.btn:active { transform: skewX(var(--skew)) translateY(0); box-shadow: none; }
.btn--dark { background: var(--plate); color: var(--ink-dark); }
.btn--dark:hover { background: #000; box-shadow: 5px 6px 0 rgba(225,18,29,.85); }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--plate); }
.btn--line:hover { background: var(--plate); color: var(--ink-dark); }
.band .btn--line { color: var(--ink-dark); box-shadow: inset 0 0 0 2px var(--ink-dark); }
.band .btn--line:hover { background: var(--ink-dark); color: var(--plate); }
.btn svg { width: 18px; height: 18px; flex: none; }
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; text-decoration: none;
  background: transparent; color: inherit; border-radius: 8px;
  transition: background .16s, color .16s;
}
.iconbtn:hover { background: rgba(225,18,29,.12); color: var(--accent-deep); }
.iconbtn svg { width: 22px; height: 22px; }

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  min-height: var(--bar-h);
  display: flex; align-items: center;
}
.topbar .wrap { display: flex; align-items: center; gap: 18px; width: 100%; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand img { width: 46px; height: 36px; }
.brand b {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: 1.06rem; letter-spacing: .04em; line-height: 1;
  display: block;
}
.brand small { display: block; font-size: .68rem; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; }
.nav { display: flex; gap: 4px; }
.nav a {
  text-decoration: none; font-weight: 600; font-size: .92rem; color: var(--ink);
  padding: 10px 11px; border-radius: 6px; transition: color .15s, background .15s;
}
.nav a:hover { color: var(--accent-deep); background: rgba(225,18,29,.07); }
.nav a[aria-current="true"] { color: var(--accent-deep); }
.topbar .btn { padding: 12px 18px 10px; font-size: .9rem; min-height: 40px; }
.menu-t { display: none; }

@media (max-width: 1020px) {
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--ground); border-bottom: 1px solid var(--line);
    padding: 8px clamp(16px, 4vw, 32px) 16px;
    box-shadow: var(--sh-lift);
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 10px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .menu-t {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; background: none; border: 0;
  }
  .menu-t i { display: block; height: 2px; background: var(--ink); transition: transform .2s var(--ease-snap), opacity .2s; }
  .menu-t[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-t[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
  .menu-t[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 560px) {
  .brand small { display: none; }
  .topbar .btn { padding-inline: 13px; }
  .topbar .wrap { gap: 8px; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: clip; padding-block: clamp(52px, 7vw, 84px) 0; }
.hero .wrap { position: relative; z-index: 2; }
.hero-omega {
  /* anchored to the top-left black zone behind the headline — the only area that stays
     black no matter how high the owner raises the photo strip */
  position: absolute; z-index: 0; left: -4%; top: -14%;
  width: min(42vw, 520px); opacity: .06; pointer-events: none;
  filter: invert(1);
}
.hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 5vw, 64px); align-items: start;
}
.hero h1 {
  font-family: var(--f-display); text-transform: uppercase;
  font-size: var(--fs-display-xl); line-height: 1.08;
  margin: 18px 0 16px; max-width: 24ch;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lead { color: var(--muted-dark); max-width: 52ch; }
.hero-eyebrow-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(247,245,242,.09); color: var(--ink-dark);
  border: 1px solid var(--line-dark);
}
.hero-cta { display: flex; gap: 14px; margin-top: 28px; align-items: center; flex-wrap: nowrap; }
.hero-strip { position: relative; margin-top: calc(clamp(40px, 6vw, 64px) - var(--hs-up, 0) * 1px); height: max(70px, calc(clamp(130px, 17vw, 210px) + var(--hs-up, 0) * 1px - var(--hs-pb, 0) * 1px)); }
.hero-strip img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: saturate(.82) contrast(1.03) brightness(.97); }
.hero-strip::before {
  /* the dark-to-photo fade is owner-tunable from /edit: --hs-fs = where the dark starts
     diluting, --hs-fe = where it is fully gone (both % of the strip, saved as meta hs::*) */
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* ONE sheet of black: the top of the overlay is SOLID plate — identical to the hero's own
     background, so the section boundary is invisible — then a single eased dissolve.
     --hs-fs = până unde ține negrul plin, --hs-fe = unde a dispărut complet. */
  background: linear-gradient(180deg,
    var(--plate) 0%,
    var(--plate) calc(var(--hs-fs, 8) * 1%),
    rgba(14,13,12,.82) calc((var(--hs-fs, 8) + (var(--hs-fe, 70) - var(--hs-fs, 8)) * .16) * 1%),
    rgba(14,13,12,.6) calc((var(--hs-fs, 8) + (var(--hs-fe, 70) - var(--hs-fs, 8)) * .32) * 1%),
    rgba(14,13,12,.4) calc((var(--hs-fs, 8) + (var(--hs-fe, 70) - var(--hs-fs, 8)) * .48) * 1%),
    rgba(14,13,12,.24) calc((var(--hs-fs, 8) + (var(--hs-fe, 70) - var(--hs-fs, 8)) * .64) * 1%),
    rgba(14,13,12,.11) calc((var(--hs-fs, 8) + (var(--hs-fe, 70) - var(--hs-fs, 8)) * .8) * 1%),
    rgba(14,13,12,.03) calc((var(--hs-fs, 8) + (var(--hs-fe, 70) - var(--hs-fs, 8)) * .92) * 1%),
    rgba(14,13,12,0) calc(var(--hs-fe, 70) * 1%),
    rgba(14,13,12,.08) 100%);
  pointer-events: none;
}

/* scoreboard */
.board {
  background: #131110;
  border: 1px solid var(--line-dark);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 6px rgba(247,245,242,.03);
  padding: 18px 18px 16px;
  position: relative;
}
.board::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent);
}
.board-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.board-head .plate { font-size: .8rem; }
.board-round { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-dark); font-weight: 600; }
.board-teams { display: grid; gap: 8px; }
.board-team {
  display: flex; align-items: center; gap: 12px;
  background: rgba(247,245,242,.045);
  border: 1px solid var(--line-dark);
  padding: 11px 14px;
}
/* both crests ride a white medallion — harvested PNGs vanish on the dark plate otherwise */
.board-team .crest, .board-team .crest-dot {
  width: 40px; height: 40px; flex: none; border-radius: 50%; margin: 0;
  background: #F7F5F2; box-sizing: border-box; border: 0;
  box-shadow: 0 0 0 1px rgba(247,245,242,.16), 0 2px 8px rgba(0,0,0,.4);
}
.board-team .crest { padding: 6px; object-fit: contain; }
.board-team .crest-dot {
  display: grid; place-items: center;
  font-family: var(--f-display); font-size: 1rem; color: #141312;
}
.board-team b { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 1.12rem; letter-spacing: .03em; }
.board-team small { margin-left: auto; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-dark); font-weight: 600; }
.board-vs { display: flex; align-items: center; gap: 10px; color: var(--muted-dark); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }
.board-vs::before, .board-vs::after { content: ""; height: 1px; flex: 1; background: var(--line-dark); }
.board-when { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.board-when .plate { font-size: .88rem; }
.board-note { margin-top: 10px; font-size: .8rem; color: var(--muted-dark); }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.countdown[hidden] { display: none; } /* the class's display:grid used to beat the hidden attribute — empty dashes showed on „Ultimul meci” */
.cd-cell { background: rgba(247,245,242,.05); border: 1px solid var(--line-dark); text-align: center; padding: 9px 4px 7px; }
.cd-cell b {
  display: block; font-family: var(--f-display); font-weight: 400;
  font-size: 1.65rem; line-height: 1; color: var(--ink-dark);
  font-variant-numeric: tabular-nums;
}
.cd-cell span { font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted-dark); font-weight: 600; }
.board-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 14px; font-size: .72rem; color: var(--muted-dark); }
.board-foot .pos { color: var(--ink-dark); font-weight: 700; }
.board-live { color: #4ade80; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; }
/* the board's LIVE state: the countdown cells give way to one pulsing button — the red dot is
   the broadcast idiom everyone reads without a label */
.btn--live { width: 100%; margin-top: 14px; gap: 12px; }
.btn--live[hidden] { display: none; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; flex: none; box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
@media (prefers-reduced-motion: no-preference) {
  .live-dot { animation: live-pulse 1.4s ease-out infinite; }
  @keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.75); } 100% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } }
}
.board-yt { margin-top: 10px; font-size: .8rem; color: var(--muted-dark); display: flex; align-items: center; gap: 8px; }
.board-yt a { color: var(--ink-dark); font-weight: 700; }
.board-yt svg { width: 16px; height: 16px; color: #FF0000; flex: none; }
.board-yt[hidden] { display: none; }
/* result letter on the board's held score */
.board-when .res { width: 30px; height: 30px; font-size: 1rem; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .board { max-width: 560px; }
}
@media (max-width: 560px) {
  .hero-eyebrow-row { gap: 8px; }
  .chip { font-size: .68rem; padding: 6px 9px; letter-spacing: .03em; }
  .hero-cta { flex-wrap: nowrap; }
  .hero-cta .btn { padding-inline: 14px; font-size: .88rem; }
}

/* ---------- LIVE (YouTube stream, shown only while the club is broadcasting) ---------- */
.live { padding-block: clamp(28px, 4vw, 44px) clamp(40px, 5vw, 64px); border-top: 4px solid var(--accent); }
.live[hidden] { display: none; }
.live-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.live-head h2 { font-family: var(--f-display); text-transform: uppercase; font-size: var(--fs-display-md); line-height: 1.1; }
.live-head .plate--red > span { display: inline-flex; align-items: center; gap: 9px; }
.live-head .live-dot { width: 9px; height: 9px; }
.live-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr); gap: clamp(18px, 3vw, 36px); align-items: start; }
.live-player { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: clip; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.live-player iframe, .live-player img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.live-player img { filter: brightness(.55) saturate(.9); }
.live-play {
  position: absolute; inset: 0; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; color: #fff;
}
.live-play span {
  display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px 14px;
  background: var(--accent); font-family: var(--f-display); text-transform: uppercase; letter-spacing: .06em; font-size: 1.05rem;
  transform: skewX(var(--skew)); box-shadow: 6px 6px 0 rgba(14,13,12,.9); transition: transform .16s var(--ease-snap);
}
.live-play span > * { transform: skewX(4deg); }
.live-play:hover span { transform: skewX(var(--skew)) translateY(-2px); }
.live-play svg { width: 22px; height: 22px; }
.live-aside .lead { font-size: 1rem; }
.live-aside .live-title { font-family: var(--f-display); text-transform: uppercase; font-size: 1.25rem; line-height: 1.15; margin: 0 0 10px; }
.live-aside .btn { margin-top: 16px; }
.live-aside .live-note { margin-top: 14px; font-size: .78rem; color: var(--muted-dark); }
@media (max-width: 900px) { .live-grid { grid-template-columns: 1fr; } }

/* ---------- sponsors bands ---------- */
/* partner strip = slim, quiet row on the concrete ground. The label is the site's ONE
   plate device, untouched; the hero's red line above is all the accent this strip needs. */
.sponsors { background: var(--plate); border-top: 4px solid var(--accent); }
.sponsors .sponsor-cta { color: var(--ink-dark); }
.sponsors .sponsor-cta:hover { color: #fff; }
.sponsors .sponsor-band .plate { background: var(--ink-dark); color: var(--plate); }
.sponsors .sponsor-band .plate::before { background: var(--accent); }
/* ALL bands share ONE title column (sized by the longest title), so every band's logo track
   starts at the same x no matter how long its own title is — each band is a subgrid row.
   Several bands stack COMPACT: no rule between them, a hair of air only (owner's call). */
#sponsor-bands { display: grid; grid-template-columns: max-content 1fr; row-gap: 2px; }
.sponsor-band { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; gap: clamp(30px, 5vw, 72px); padding-block: 2px; }
.sponsor-band .plate { font-size: .8rem; white-space: nowrap; }
.sponsor-track {
  display: flex; align-items: center; gap: clamp(22px, 4vw, 48px);
  overflow-x: auto; scrollbar-width: none;
  padding: 3px 4px; /* overflow-x:auto also clips vertically — room for the hover lift */
}
.sponsor-track::-webkit-scrollbar { display: none; }
.sponsor-logo { flex: none; display: flex; align-items: center; text-decoration: none; }
.sponsor-logo img {
  height: calc(55px * var(--lscale, 1)); width: auto; max-width: 240px; object-fit: contain;
  transition: transform .2s var(--ease-snap);
}
.sponsor-logo:hover img { transform: translateY(-2px); }
.sponsor-cta {
  flex: none; font-size: .84rem; font-weight: 700; color: var(--accent-deep);
  text-decoration: none; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
}
.sponsor-cta:hover { text-decoration: underline; }
@media (max-width: 640px) {
  #sponsor-bands { display: block; }
  .sponsor-band { display: grid; grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- cifre (one row, every width) ---------- */
.cifre { background: var(--ground); }
.cifre-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 2vw, 20px); }
.cifra { background: var(--plate); color: var(--ink-dark); transform: skewX(var(--skew)); padding: clamp(12px, 2.4vw, 26px) 6px; text-align: center; position: relative; }
.cifra::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--accent); }
.cifra > div { transform: skewX(4deg); }
.cifra b { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.3rem, 4.6vw, 3rem); line-height: 1.05; font-variant-numeric: tabular-nums; }
.cifra span { display: block; font-size: clamp(.56rem, 1.4vw, .78rem); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-dark); font-weight: 600; margin-top: 6px; }
.cifre-note { text-align: center; color: var(--muted); font-size: .92rem; margin-top: 22px; }
/* the season's key points open the story: same poster plates, gold-edged like the wins */
.cifre-mini { padding-block: clamp(32px, 4.5vw, 54px); }
.cifre-row--poveste { margin-bottom: 0; }
.cifre-row--poveste .cifra::before { background: var(--gold); }

/* ---------- palmares ---------- */
.palmares-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.trophy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.trophy-list li { display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: start; }
.trophy-list li:first-child { padding-top: 0; }
.t-mark {
  width: 40px; height: 40px; transform: skewX(var(--skew));
  background: var(--plate); display: grid; place-items: center; position: relative; margin-top: 3px;
}
.t-mark::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gold); }
.t-mark svg { width: 20px; height: 20px; color: var(--gold); transform: skewX(4deg); }
.trophy-list h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 1.18rem; letter-spacing: .02em; }
.trophy-list p { color: var(--muted); font-size: .95rem; margin: 5px 0 0; }
.quote-plate { margin-top: 28px; background: var(--surface); border-left: 5px solid var(--accent); box-shadow: var(--sh-card); padding: 20px 24px; }
.quote-plate blockquote { margin: 0; font-size: 1.02rem; font-weight: 500; }
.quote-plate cite { display: block; margin-top: 10px; font-style: normal; font-size: .82rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.palmares-photo { position: relative; }
.palmares-photo .frame { aspect-ratio: 3 / 3.7; overflow: clip; box-shadow: var(--sh-lift); }
.palmares-photo img { width: 100%; height: 100%; object-fit: cover; }
.palmares-photo figcaption { margin-top: 10px; font-size: .82rem; color: var(--muted); }
@media (max-width: 900px) { .palmares-grid { grid-template-columns: 1fr; } .palmares-photo { max-width: 440px; } }

/* ---------- juniori (dark band) ---------- */
.juniori { padding-block: 0 clamp(56px, 8vw, 96px); }
.juniori-banner { position: relative; height: clamp(180px, 26vw, 320px); overflow: clip; }
.juniori-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.juniori-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(14,13,12,.55) 0%, rgba(14,13,12,0) 34%, rgba(14,13,12,.88) 92%, var(--plate) 100%); }
.juniori .wrap { position: relative; margin-top: -40px; z-index: 2; }
.uchips { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0 4px; }
.uchip {
  font-family: var(--f-display); font-size: .95rem; letter-spacing: .06em;
  padding: 8px 14px 6px; background: rgba(247,245,242,.07);
  border: 1px solid var(--line-dark); color: var(--ink-dark);
}
.uchip--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.juniori-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 60px); align-items: start; margin-top: 26px; }
.partner-card {
  background: rgba(247,245,242,.05); border: 1px solid var(--line-dark);
  padding: 22px; display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center;
}
.partner-card img { width: 64px; height: 64px; border-radius: 50%; }
.partner-card b { display: block; font-size: 1rem; }
.partner-card p { color: var(--muted-dark); font-size: .9rem; margin: 4px 0 0; }
.juniori-cta { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
@media (max-width: 900px) { .juniori-grid { grid-template-columns: 1fr; } }

/* ---------- poveste (timeline) ---------- */
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 114px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl li { display: grid; grid-template-columns: 84px 1fr; gap: 64px; padding: 14px 0; position: relative; }
.tl li::before {
  content: ""; position: absolute; left: 110px; top: 21px; width: 12px; height: 12px;
  background: var(--accent); transform: rotate(45deg);
}
.tl time { font-family: var(--f-display); font-size: 1.05rem; color: var(--accent-deep); text-align: right; line-height: 1.5; }
.tl time small {
  display: block; font-family: var(--f-body); font-weight: 700; font-size: .6rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); line-height: 1.3;
}
.tl-win time, .tl-next time { padding-top: 11px; }
/* rows labeled with a "Sezonul" kicker: the VALUE sits on the title line, the kicker floats above */
.tl time:has(small) { margin-top: -12px; }
.tl h3 { font-weight: 700; font-size: 1.02rem; font-family: var(--f-body); line-height: 1.5; }
.tl p { color: var(--muted); font-size: .95rem; margin: 2px 0 0; }
.mission {
  margin-top: 34px; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
  background: var(--surface); box-shadow: var(--sh-card); padding: 24px 28px;
}
.mission img { width: 52px; height: 41px; }
.mission blockquote { margin: 0; font-size: 1.05rem; font-style: italic; }
.mission cite { display: block; font-style: normal; margin-top: 8px; font-size: .82rem; color: var(--muted); }
.poveste-close { margin-top: 40px; text-align: center; }
.poveste-close .plate { font-size: clamp(1.15rem, 2.6vw, 1.7rem); }
/* roadmap merge: povestea's time-left spine + palmares' icons.
   Wins ride the line as gold-marked plates with a lifted card; the next milestone is dashed. */
.tl-ico {
  position: absolute; left: 99px; top: 17px; z-index: 1;
  width: 34px; height: 34px; transform: skewX(var(--skew));
  background: linear-gradient(140deg, #F0D67E 0%, #D9B33A 36%, #C9A227 56%, #8F730F 100%);
  box-shadow:
    2px 3px 0 rgba(14,13,12,.85),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 1px 0 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(94,73,8,.55);
  display: grid; place-items: center; overflow: hidden;
}
.tl-ico::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.42) 10%, rgba(255,255,255,0) 46%);
}
.tl-ico svg {
  width: 19px; height: 19px; color: #fff; transform: skewX(4deg);
  filter: drop-shadow(0 1px 1px rgba(94,73,8,.65));
}
.tl li.tl-win::before, .tl li.tl-next::before { display: none; }
.tl-win > div {
  background: var(--surface); box-shadow: var(--sh-card);
  border-left: 4px solid var(--gold); padding: 11px 18px 13px;
  transform: skewX(var(--skew));
}
.tl-win > div > *, .tl-next > div > * { transform: skewX(4deg); }
.tl li.tl-win, .tl li.tl-next { padding-block: 10px; }
.tl-stats { display: flex; flex-wrap: wrap; gap: 5px 18px; margin-top: 10px; }
.tl-stats span { font-size: .8rem; color: var(--muted); font-weight: 600; }
.tl-stats b { font-family: var(--f-display); font-weight: 400; font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 5px; }
.tl-src { display: block; margin-top: 8px; font-size: .74rem; color: var(--muted); }
.tl-next time { color: var(--muted); }
.tl-next .tl-ico { background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); }
.tl-next .tl-ico::after { display: none; }
.tl-next .tl-ico svg { filter: none; }
.tl-next .tl-ico svg { color: var(--accent); }
.tl-next > div { border: 2px dashed var(--line); padding: 11px 18px 13px; transform: skewX(var(--skew)); background: var(--surface); }
.tl-next a { font-weight: 700; color: var(--accent-deep); }
#palmares .tl { max-width: 800px; margin-inline: auto; }
@media (max-width: 640px) {
  .tl::before { left: 89px; }
  .tl li { grid-template-columns: 64px 1fr; gap: 48px; }
  .tl li::before { left: 84px; }
  .tl time { font-size: .9rem; }
  .tl-ico { left: 73px; }
}

/* ---------- echipa (roster poster cards) ---------- */
.roster-group + .roster-group { margin-top: 44px; }
.roster-label { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; }
.roster-label .plate { font-size: .84rem; }
/* the muted annotation is ONLY the plain note next to the plate — never the plate's own text
   (a bare `span` descendant selector also repainted the plate's inner span gray-on-black) */
.roster-label > span:not(.plate) { color: var(--muted); font-size: .86rem; }
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: clamp(12px, 2vw, 20px); }
.pcard {
  position: relative; aspect-ratio: 3 / 4; overflow: clip;
  background:
    radial-gradient(120% 90% at 80% 110%, rgba(225,18,29,.5), transparent 60%),
    linear-gradient(160deg, #191715 0%, #0E0D0C 70%);
  box-shadow: var(--sh-card);
  transition: transform .18s var(--ease-snap), box-shadow .18s;
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.pcard-photo { position: absolute; inset: 0; }
.pcard-photo img { width: 100%; height: 100%; object-fit: cover; }
.pcard-omega {
  position: absolute; right: -18%; bottom: -6%; width: 75%; opacity: .14;
  pointer-events: none; filter: invert(1);
}
.pcard-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(14,13,12,0) 42%, rgba(14,13,12,.88) 100%); }
/* POSTER-LOCKED info block: every datum has a fixed slot — row 1 = name + age at its right,
   row 2 = position plate + shirt number. Both rows are always laid out (min-height on the meta
   row), so a card with missing data keeps its name at exactly the same height as its neighbours. */
.pcard-info { position: absolute; left: 12px; right: 12px; bottom: 12px; color: var(--ink-dark); }
/* the name PLATE spans the full row; the name itself NEVER wraps (ellipsis guard), and the age
   sits as a second, quieter line INSIDE the same plate */
.pcard-name {
  display: block; background: var(--plate); color: var(--ink-dark);
  transform: skewX(var(--skew)); padding: 6px 12px 4px; position: relative;
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: 1.02rem; letter-spacing: .03em;
}
.pcard-name::before { content: ""; position: absolute; left: -6px; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.pcard-name > span { display: inline-block; transform: skewX(4deg); }
.pcard-name > span:first-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.pcard-meta { display: flex; margin-top: 8px; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; }
/* age = broadcast stat opposite the position plate: Anton numeral + quiet caps label */
.pcard-age {
  display: flex; align-items: baseline; gap: 3px; white-space: nowrap; flex: none;
  font-family: var(--f-body); font-size: .54rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(247,245,242,.72);
}
.pcard-age b {
  font-family: var(--f-display); font-weight: 400; font-size: .95rem;
  letter-spacing: .02em; color: var(--ink-dark); font-variant-numeric: tabular-nums;
}
.pcard-role {
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--accent); color: #fff; padding: 4px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto;
}
/* shirt number = a mini SCORE PLATE in the top-left corner — same brand device as the name
   plate and the hero board: skewed dark plate, red edge bar, Anton digits (counter-skewed) */
.pcard-num {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  background: var(--plate); color: var(--ink-dark);
  transform: skewX(var(--skew));
  font-family: var(--f-display); font-size: 1.05rem; line-height: 1;
  padding: 6px 9px 4px; letter-spacing: .02em; white-space: nowrap;
}
.pcard-num::before { content: ""; position: absolute; left: -6px; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.pcard-num > span { display: inline-block; transform: skewX(4deg); }
/* generic side-scroll rail (staff + news): overflow slides sideways, the overflowing side
   fades out, and red prev/next arrows appear only when there is content in that direction. */
.rail, .news-grid.rail, .roster.rail {
  display: flex; overflow-x: auto;
  scroll-snap-type: x proximity; padding-bottom: 12px;
  scrollbar-width: thin; scrollbar-color: rgba(14,13,12,.3) transparent;
}
.rail > * { scroll-snap-align: start; }
/* both roster rows (lot + staff) ride ONE column matrix; touch swipes natively, a pointer can
   drag the row, arrows nudge it — the vertical wheel is never hijacked */
.roster.rail { overscroll-behavior-x: contain; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; gap: clamp(12px, 2vw, 20px); }
.roster.rail > .pcard { flex: 0 0 var(--railw, clamp(186px, 21vw, 228px)); }
.roster.rail.rail-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.roster.rail.rail-dragging > .pcard { pointer-events: none; }
.roster.rail:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
/* editing: every card must be reachable at once — the row unrolls into the wrapped grid */
body.aw-editing .roster.rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); overflow: visible; -webkit-mask-image: none; mask-image: none; }
body.aw-editing .roster.rail > .pcard { flex: none; }
body.aw-editing .roster-group .rail-nudge { display: none; }
/* the full-squad page lays the same cards out as a multi-row grid */
.roster.roster--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: clamp(12px, 2vw, 20px); }
.roster-label .roster-count { color: var(--muted); font-size: .86rem; font-weight: 600; }
.roster-label .btn { margin-left: auto; padding: 11px 16px 9px; font-size: .84rem; min-height: 38px; }
@media (max-width: 560px) { .roster-label { flex-wrap: wrap; } .roster-label .btn { margin-left: 0; } }
.roster-page-head { padding: clamp(28px, 4vw, 44px) 0 clamp(18px, 3vw, 30px); }
.roster-page-head h1 { font-family: var(--f-display); text-transform: uppercase; font-size: var(--fs-display-lg); line-height: 1.1; margin-top: 14px; }
.roster-page-head .lead { margin-top: 10px; }
#news-grid.rail > .news-card { flex: 0 0 calc((100% - 2 * clamp(16px, 2.5vw, 28px)) / 3); }
@media (max-width: 900px) { #news-grid.rail > .news-card { flex: 0 0 86%; } }
.rail.rail-more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 88px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 88px), transparent); }
.rail.rail-more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 88px); mask-image: linear-gradient(90deg, transparent, #000 88px); }
.rail.rail-more-l.rail-more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 88px, #000 calc(100% - 88px), transparent); mask-image: linear-gradient(90deg, transparent, #000 88px, #000 calc(100% - 88px), transparent); }
.rail-host { position: relative; }
.rail-nudge {
  position: absolute; right: -8px; top: 50%; z-index: 2;
  width: 44px; height: 44px; border: 0; cursor: pointer; border-radius: 999px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; box-shadow: var(--sh-lift);
  translate: 0 -50%;
}
.roster-group.rail-host .rail-nudge { top: calc(50% + 14px); }
.rail-nudge.rail-prev { right: auto; left: -8px; }
.rail-nudge.rail-prev svg { transform: scaleX(-1); }
.rail-nudge svg { width: 18px; height: 18px; }
.rail-nudge[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .rail-nudge { animation: rail-bob 1.7s ease-in-out infinite; }
  .rail-nudge.rail-prev { animation-name: rail-bob-l; }
  .rail-nudge:hover { animation-play-state: paused; }
  @keyframes rail-bob { 0%, 100% { translate: 0 -50%; } 50% { translate: 7px -50%; } }
  @keyframes rail-bob-l { 0%, 100% { translate: 0 -50%; } 50% { translate: -7px -50%; } }
}

/* harvested team crests (flashscore badges, self-hosted in data/crests/) */
.crest { display: inline-block; width: 20px; height: 20px; object-fit: contain; vertical-align: -4px; margin-right: 8px; }
.match-list .crest { width: 18px; height: 18px; vertical-align: -3px; margin-right: 7px; }
.crest-dot img { width: 27px; height: 27px; object-fit: contain; }
/* the season break is a SEPARATOR, not a match: a black plate (black = facts, in this site's
   colour grammar) with an archive glyph, and a rule that runs out to the edge — no card chrome */
.match-list li.res-divider {
  display: flex; align-items: center; gap: 14px;
  background: transparent; border: 0; box-shadow: none; padding: 14px 0 6px; min-height: 0; margin-bottom: 8px;
}
.res-divider .plate { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--f-display); white-space: nowrap; }
.res-divider .plate > span { display: inline-flex; align-items: center; gap: 8px; }
.res-divider .plate svg { width: 15px; height: 15px; color: var(--accent); }
.res-divider i { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }
@media (max-width: 560px) { .roster, .roster.roster--grid, body.aw-editing .roster.rail { grid-template-columns: repeat(2, 1fr); } .pcard-name { font-size: .88rem; } }

/* ---------- program & clasament ---------- */
.prog-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.match-list { list-style: none; margin: 0; padding: 0; }
.match-list li {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  padding: 13px 16px; margin-bottom: 10px; box-shadow: var(--sh-card);
  min-height: 84px;
}
.match-list .rnd { font-family: var(--f-display); font-size: .88rem; color: var(--accent-deep); text-transform: uppercase; line-height: 1.2; }
.match-list .who b { font-weight: 700; font-size: .98rem; display: block; }
.match-list .who small { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.match-list .when {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  text-align: right; font-size: .85rem; color: var(--muted); font-weight: 600; white-space: nowrap;
}
.match-list .when-time { font-family: var(--f-display); font-weight: 400; font-size: .98rem; color: var(--ink); letter-spacing: .02em; }
.match-list .when-tag {
  background: var(--plate); color: var(--ink-dark); font-family: var(--f-display); font-weight: 400;
  font-size: .9rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px 2px; transform: skewX(var(--skew));
}
.match-list .when-tag > span { display: inline-block; transform: skewX(4deg); }
.match-list .score {
  font-family: var(--f-display); font-size: 1.3rem;
  background: var(--plate); color: var(--ink-dark); padding: 5px 12px 3px;
  transform: skewX(var(--skew)); white-space: nowrap;
}
.match-list .score > span { display: inline-block; transform: skewX(4deg); }
/* result semantics = the universal football form letters (V / E / Î), colour-coded the way every
   scoreboard in the world does it: green win, grey draw, red loss. The score plate itself stays
   neutral black so the letter is the ONE thing carrying meaning. */
/* score, then the letter: the letter is the fixed right-hand column, a wider score grows leftwards */
.match-list .tail { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.res {
  position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
  font-family: var(--f-display); font-size: .92rem; line-height: 1; color: #fff; cursor: default;
  transform: skewX(var(--skew)); box-shadow: 2px 2px 0 rgba(14,13,12,.85);
}
.res > span { display: block; transform: skewX(4deg); }
.res-w { background: #1F8F4E; }
.res-d { background: #6E6963; }
.res-l { background: #B60D16; }
.res:focus { outline: 0; }
.res:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* the letter explains itself: a tooltip in the site's own plate language — black tile, red edge,
   Anton caps — rising in from below on hover, keyboard focus or a tap (the badge is focusable) */
.res::after, .res::before {
  position: absolute; left: 50%; z-index: 6; pointer-events: none; opacity: 0;
  transition: opacity .14s var(--ease-snap), transform .14s var(--ease-snap);
}
.res::after {
  content: attr(data-tip); bottom: calc(100% + 10px);
  transform: translate(-50%, 5px) skewX(4deg);
  background: var(--plate); color: var(--ink-dark); border-left: 3px solid var(--accent);
  font-family: var(--f-display); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 11px 5px; white-space: nowrap; box-shadow: 0 10px 24px rgba(14,13,12,.28);
}
.res::before {
  content: ""; bottom: calc(100% + 5px);
  transform: translate(-50%, 5px) skewX(4deg);
  border: 5px solid transparent; border-top-color: var(--plate); border-bottom: 0;
}
.res:hover::after, .res:hover::before, .res:focus-visible::after, .res:focus-visible::before, .res:focus::after, .res:focus::before {
  opacity: 1; transform: translate(-50%, 0) skewX(4deg); transition-delay: .06s;
}
.match-list li:has(.res:hover), .match-list li:has(.res:focus) { z-index: 3; position: relative; }
.match-list .score.w { background: var(--plate); color: var(--ink-dark); }
.res-note { font-size: .85rem; color: var(--muted); margin-top: 14px; }
.standings { margin-top: clamp(36px, 5vw, 56px); }
.standings-tablewrap { overflow-x: auto; background: var(--surface); box-shadow: var(--sh-card); border: 1px solid var(--line); }
table.clasament { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 640px; }
.clasament thead th {
  background: var(--plate); color: var(--ink-dark);
  font-family: var(--f-display); font-weight: 400; letter-spacing: .08em; font-size: .78rem;
  text-transform: uppercase; padding: 10px 10px; text-align: center;
}
.clasament thead th:nth-child(2) { text-align: left; }
.clasament td { padding: 9px 10px; border-top: 1px solid var(--line); text-align: center; font-variant-numeric: tabular-nums; }
.clasament td:nth-child(2) { text-align: left; font-weight: 600; }
.clasament tr.us td { background: #FDEBEC; border-top-color: #F4C2C5; font-weight: 700; }
.clasament tr.us td:first-child { position: relative; }
.clasament tr.us td:first-child::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.standings-meta { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; color: var(--muted); margin-top: 10px; flex-wrap: wrap; }
@media (max-width: 900px) { .prog-cols { grid-template-columns: 1fr; } }

/* ---------- știri (blog cards) ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); }
.news-card {
  background: var(--surface); box-shadow: var(--sh-card); text-decoration: none; color: inherit;
  display: flex; flex-direction: column; overflow: clip;
  transition: transform .18s var(--ease-snap), box-shadow .18s;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
/* 16:9 everywhere a story is previewed — home cards, blog list, article cover — so the grid reads
   as one system whatever shape the uploaded photo has (it is cropped to fill, never letterboxed) */
.news-card .frame { aspect-ratio: 16 / 9; overflow: clip; position: relative; background: var(--plate); }
/* the photo is taken OUT OF FLOW: in normal flow a portrait image forces the box taller and the
   frame's aspect-ratio is silently ignored (that is why tall covers used to break the grid).
   Absolutely positioned, the 16:9 box always wins and the photo is cropped to fill it. */
.news-card .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease-snap); }
.news-card:hover .frame img { transform: scale(1.04); }
.news-card time {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--plate); color: var(--ink-dark);
  font-family: var(--f-display); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 12px 4px;
}
.news-card .draft-badge {
  position: absolute; right: 0; top: 0; z-index: 2;
  background: var(--gold); color: var(--plate);
  font-family: var(--f-display); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 12px 4px;
}
.news-card h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 1.12rem; line-height: 1.2; padding: 16px 18px 0; }
.news-card p { color: var(--muted); font-size: .92rem; padding: 10px 18px 18px; margin: 0; }
.news-more { margin-top: 28px; }
@media (max-width: 900px) { .news-grid:not(.rail) { grid-template-columns: 1fr; max-width: 560px; } }

/* ---------- galerie ---------- */
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gal button { padding: 0; border: 0; background: none; overflow: clip; position: relative; aspect-ratio: 1 / 1; }
.gal button.wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease-snap), filter .3s; }
.gal button:hover img { transform: scale(1.045); }
.gal .credit {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(14,13,12,.72); color: var(--ink-dark); padding: 3px 8px;
}
.gal-close { margin-top: 36px; background: var(--plate); color: var(--ink-dark); padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.gal-close .d-md { max-width: 22ch; }
@media (max-width: 900px) { .gal { grid-template-columns: repeat(2, 1fr); } }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 120; background: rgba(10,9,8,.94); display: none; align-items: center; justify-content: center; }
.lb.open { display: flex; }
.lb img { max-width: min(92vw, 1100px); max-height: 84vh; width: auto; height: auto; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lb figcaption { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: var(--muted-dark); font-size: .85rem; }
.lb-btn {
  position: absolute; display: grid; place-items: center;
  width: 48px; height: 48px; border: 0; background: rgba(247,245,242,.08); color: var(--ink-dark);
  transition: background .15s;
}
.lb-btn:hover { background: var(--accent); }
.lb-btn svg { width: 22px; height: 22px; }
.lb-x { top: 16px; right: 16px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }

/* ---------- unde jucăm (coverage) ---------- */
.map-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.map-frame { aspect-ratio: 4 / 3.4; overflow: clip; position: relative; box-shadow: var(--sh-card); border: 1px solid var(--line); background: #E8E6E1; }
.map-frame .leaflet-container { width: 100%; height: 100%; background: #E8E6E1; font: inherit; }
.map-attr {
  position: absolute; right: 8px; bottom: 8px; z-index: 500;
  background: rgba(247,245,242,.9); color: var(--muted); font-size: .64rem;
  padding: 3px 8px; border-radius: 999px;
}
.where-cards { display: grid; gap: 18px; }
.where-card { background: var(--surface); box-shadow: var(--sh-card); border: 1px solid var(--line); padding: 22px 24px; }
.where-card h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 1.08rem; margin-bottom: 12px; }
.where-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wchip { font-size: .82rem; font-weight: 600; padding: 7px 12px; background: var(--ground); border: 1px solid var(--line); border-radius: 999px; }
.wchip--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.where-card p { color: var(--muted); font-size: .93rem; }
@media (max-width: 900px) { .map-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
/* social icons under the hero CTAs — each in its brand colour */
.hero-social { display: flex; gap: 8px; margin-top: 16px; }
.hero-social .iconbtn { color: #fff; border-radius: 50%; width: 40px; height: 40px; }
.hero-social .iconbtn[data-social="facebook"] { background: #1877F2; }
.hero-social .iconbtn[data-social="facebook"]:hover { background: #3b8bf4; color: #fff; }
.hero-social .iconbtn[href^="mailto"] { background: #EA4335; }
.hero-social .iconbtn[href^="mailto"]:hover { background: #ef6154; color: #fff; }
.hero-social .iconbtn[data-wa] { background: #25D366; }
.hero-social .iconbtn[data-wa]:hover { background: #3fe07c; color: #fff; }
.hero-social .iconbtn[data-social="youtube"] { background: #FF0000; }
.hero-social .iconbtn[data-social="youtube"]:hover { background: #ff3b3b; color: #fff; }
.channel--wa .ic { background: #25D366; border-color: #25D366; color: #fff; }
.form-alt { margin-top: 14px; font-size: .84rem; color: var(--muted-dark); }
.form-alt a { color: var(--ink-dark); font-weight: 700; }
.hero-social .iconbtn svg { width: 19px; height: 19px; }

/* FAQ lives in a modal opened from the Juniori section */
.faq-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 18px; }
.faq-modal[hidden] { display: none; }
.faq-backdrop { position: absolute; inset: 0; background: rgba(14,13,12,.66); backdrop-filter: blur(3px); }
.faq-panel {
  position: relative; width: min(680px, 100%); max-height: min(86vh, 900px); overflow: auto;
  background: var(--ground); box-shadow: var(--sh-lift);
  padding: clamp(20px, 4vw, 36px);
}
.faq-head { margin-bottom: 20px; padding-right: 48px; }
.faq-head h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin: 10px 0 0; }
.faq-x {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; cursor: pointer;
  background: var(--plate); color: var(--ink-dark); font-size: 22px; line-height: 1;
  transform: skewX(var(--skew));
}
.faq-foot { margin-top: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .faq-modal:not([hidden]) .faq-panel { animation: faq-pop .22s var(--ease-snap); }
  @keyframes faq-pop { from { transform: translateY(14px); opacity: 0; } }
}

.faq { max-width: 820px; }
.faq details { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-card); margin-bottom: 10px; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  padding: 17px 20px; font-weight: 700; font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: ""; flex: none; width: 10px; height: 10px; background: var(--accent);
  transform: rotate(45deg); transition: transform .2s var(--ease-snap);
}
.faq details[open] summary::before { transform: rotate(225deg); }
.faq .faq-a { padding: 0 20px 18px 44px; color: var(--muted); }

/* ---------- parteneriat (pachete informative) ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.5vw, 24px); align-items: stretch; }
.tier {
  background: var(--ground); border: 1px solid var(--line); border-top: 4px solid var(--plate);
  padding: 22px 22px 26px; display: flex; flex-direction: column;
}
.tier--lead { border-top-color: var(--accent); }
.tier h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 1.35rem; margin: 14px 0 2px; }
.tier > p { color: var(--muted); font-size: .95rem; margin: 4px 0 0; }
.tier ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.tier li { padding-left: 24px; position: relative; color: var(--ink); font-size: .95rem; }
.tier li::before {
  content: ""; position: absolute; left: 1px; top: .46em; width: 11px; height: 7px;
  border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg);
}
/* CTA rides beside the section headline, saving vertical span */
#parteneriat .wrap { display: grid; grid-template-columns: 1.2fr .8fr; column-gap: clamp(28px, 4vw, 56px); align-items: start; }
#parteneriat .sec-head { grid-column: 1; }
#parteneriat .tier-grid { grid-column: 1 / -1; }
.tier-cta { grid-column: 2; grid-row: 1; margin-top: 10px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
@media (max-width: 900px) {
  #parteneriat .wrap { grid-template-columns: 1fr; }
  .tier-cta { grid-column: 1; grid-row: auto; margin-top: 24px; }
}
.tier-note { color: var(--muted); font-size: .9rem; max-width: 52ch; }
.tier-note a { font-weight: 700; color: var(--accent-deep); }
@media (max-width: 900px) { .tier-grid { grid-template-columns: 1fr; max-width: 560px; } }

/* ---------- contact ---------- */
/* the form is the RIGHT column of the whole section, its top on the HEADLINE's top line (the
   eyebrow plate sits alone in row 1, so the form starts where the h2 starts, not where the plate does) */
#contact .wrap { display: grid; grid-template-columns: .9fr 1.1fr; grid-template-rows: auto auto auto; column-gap: clamp(28px, 4vw, 56px); align-items: start; }
#contact .sec-eyebrow { grid-column: 1; grid-row: 1; justify-self: start; margin-bottom: 14px; }
#contact .sec-head { grid-column: 1; grid-row: 2; }
#contact .contact-grid { grid-column: 1; grid-row: 3; }
#contact .form-card { grid-column: 2; grid-row: 2 / 4; }
.contact-grid { display: block; }
.channel { display: grid; grid-template-columns: 46px 1fr; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line-dark); text-decoration: none; }
.channel:hover b { color: #fff; text-decoration: underline; }
.channel .ic { width: 44px; height: 44px; display: grid; place-items: center; background: rgba(247,245,242,.07); border: 1px solid var(--line-dark); }
.channel .ic svg { width: 20px; height: 20px; }
.channel b { display: block; font-size: .98rem; color: var(--ink-dark); overflow-wrap: anywhere; }
.channel small { color: var(--muted-dark); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.contact-note { margin-top: 18px; font-size: .9rem; color: var(--muted-dark); }
.form-card { background: #131110; border: 1px solid var(--line-dark); padding: clamp(20px, 3vw, 32px); position: relative; }
.form-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); }
.form-card label.f-label { display: block; font-weight: 700; font-size: .9rem; margin: 18px 0 8px; color: var(--ink-dark); }
.form-card label.f-label:first-child { margin-top: 0; }
.f-in {
  width: 100%; background: rgba(247,245,242,.06); border: 1px solid var(--line-dark);
  color: var(--ink-dark); padding: 13px 14px; border-radius: 0;
}
.f-in:focus { border-color: var(--accent); outline: none; }
textarea.f-in { min-height: 96px; resize: vertical; }
.chips-radio { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.chips-radio input { position: absolute; opacity: 0; pointer-events: none; }
.chips-radio label {
  display: grid; place-items: center; padding: 10px 6px; cursor: pointer;
  background: rgba(247,245,242,.06); border: 1px solid var(--line-dark);
  font-family: var(--f-display); font-size: .95rem; letter-spacing: .05em; color: var(--ink-dark);
  transition: background .15s, border-color .15s;
  min-height: 44px;
}
.chips-radio label.wide2 { grid-column: span 3; font-size: .8rem; }
.chips-radio label.wide1 { grid-column: span 2; font-size: .8rem; }
.chips-radio label:hover { border-color: var(--accent); }
.chips-radio input:checked + label { background: var(--accent); border-color: var(--accent); color: #fff; }
.chips-radio input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.form-actions { margin-top: 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.f-status { font-size: .84rem; color: var(--muted-dark); }
@media (max-width: 980px) {
  #contact .wrap { grid-template-columns: 1fr; grid-template-rows: auto; }
  #contact .form-card { grid-column: 1; grid-row: 4; margin-top: 26px; }
}
@media (max-width: 460px) {
  .chips-radio { grid-template-columns: repeat(3, 1fr); }
  .chips-radio label.wide2 { grid-column: span 3; }
  .chips-radio label.wide1 { grid-column: span 3; }
}

/* ---------- footer ---------- */
.footer { background: var(--plate); color: var(--ink-dark); padding: clamp(48px, 6vw, 72px) 0 26px; position: relative; overflow: clip; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--accent); }
.footer-omega { position: absolute; right: -4%; bottom: -18%; width: 340px; opacity: .06; filter: invert(1); pointer-events: none; }
.footer-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: clamp(24px, 4vw, 56px); position: relative; z-index: 1; }
.footer .brand b { color: var(--ink-dark); }
.footer .brand small { color: var(--muted-dark); }
.footer-nap { color: var(--muted-dark); font-size: .92rem; margin-top: 14px; }
.footer-nap a { color: var(--ink-dark); }
.footer h4 { font-family: var(--f-display); font-weight: 400; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-dark); margin-bottom: 14px; }
.footer-nav { display: grid; gap: 8px; }
.footer-nav a { color: var(--ink-dark); text-decoration: none; font-size: .94rem; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }
.social-row { display: flex; gap: 8px; margin-top: 4px; }
.social-row .iconbtn { color: var(--ink-dark); background: rgba(247,245,242,.07); border-radius: 8px; }
.social-row .iconbtn:hover { background: var(--accent); color: #fff; }
.footer-sign { margin-top: clamp(32px, 5vw, 48px); position: relative; z-index: 1; }
.footer-sign .plate { background: var(--accent); color: #fff; font-size: 1.3rem; }
.footer-legal {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  font-size: .82rem; color: var(--muted-dark); position: relative; z-index: 1;
}
.footer-legal a { color: var(--muted-dark); text-decoration: none; }
.footer-legal a:hover { color: var(--ink-dark); text-decoration: underline; }
.sal-badge { margin-left: auto; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr; gap: 30px; } .footer-credit { margin-left: 0; } }

/* ---------- mobile action bar ---------- */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; grid-template-columns: 1fr 1fr;
  background: var(--plate); border-top: 1px solid var(--line-dark);
  padding-bottom: env(safe-area-inset-bottom);
}
.mbar a {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 8px; text-decoration: none; color: var(--ink-dark);
  font-family: var(--f-display); text-transform: uppercase; letter-spacing: .05em; font-size: .92rem;
}
.mbar a svg { width: 18px; height: 18px; }
.mbar a.hot { background: var(--accent); color: #fff; }
@media (max-width: 767px) {
  .mbar { display: grid; }
  body { --mbar-h: 58px; }
}

/* ---------- ANPC SAL badge ---------- */
/* SAL: pictograma + linkul stau în rândul legal al footerului — NU fixate peste pagină */
.sal-badge { display: inline-flex; align-items: center; gap: 8px; }
.sal-badge img { height: 28px; width: auto; }

/* ---------- entrances ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateX(-18px); }
  .rv.in { opacity: 1; transform: none; transition: opacity .38s var(--ease-snap), transform .38s var(--ease-snap); transition-delay: calc(var(--rvi, 0) * 70ms); }
  .board .flipin { animation: rowflip .5s var(--ease-snap) both; animation-delay: calc(var(--rvi, 0) * 140ms); transform-origin: 50% 0; }
  @keyframes rowflip { 0% { opacity: 0; transform: perspective(600px) rotateX(-58deg); } 100% { opacity: 1; transform: perspective(600px) rotateX(0); } }
  .cd-cell b.tick { animation: cdtick .32s var(--ease-snap); }
  @keyframes cdtick { 0% { transform: perspective(300px) rotateX(-70deg); } 100% { transform: perspective(300px) rotateX(0); } }
}

/* ---------- blog (listing + article pages) ---------- */
.crumbs { padding: 18px 0 0; font-size: .88rem; }
.crumbs a { color: var(--accent-deep); text-decoration: none; font-weight: 700; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { color: var(--muted); }
.blog-hero { padding: clamp(36px, 5vw, 56px) 0 clamp(24px, 3vw, 36px); }
.blog-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); padding-bottom: clamp(56px, 8vw, 96px); }
@media (max-width: 900px) { .blog-list { grid-template-columns: 1fr; max-width: 560px; } }
.article { max-width: 760px; margin-inline: auto; padding-bottom: clamp(56px, 8vw, 96px); }
.article-head { margin: clamp(24px, 4vw, 40px) 0 26px; }
.article-head h1 { font-family: var(--f-display); text-transform: uppercase; font-size: var(--fs-display-lg); line-height: 1.1; margin-top: 14px; text-wrap: balance; }
.article-cover { margin: 0 0 30px; }
/* the frame is a <span>: an inline box has NO height for aspect-ratio to act on (the cover was
   rendering 760×0 on every article) — it must be a block for the 16:9 box to exist */
.article-cover .frame { display: block; aspect-ratio: 16 / 9; overflow: clip; box-shadow: var(--sh-card); position: relative; background: var(--plate); }
.article-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article-cover figcaption { margin-top: 8px; font-size: .82rem; color: var(--muted); }
.article-body { font-size: 1.06rem; line-height: 1.75; }
.article-body h2 { font-family: var(--f-display); text-transform: uppercase; font-size: var(--fs-display-md); margin: 1.4em 0 .5em; line-height: 1.12; }
.article-body p { margin: 0 0 1.1em; }
.article-body blockquote {
  margin: 1.4em 0; padding: 18px 24px; background: var(--surface);
  border-left: 5px solid var(--accent); box-shadow: var(--sh-card);
  font-weight: 600; font-size: 1.08rem;
}
.article-body blockquote cite { display: block; margin-top: 8px; font-style: normal; font-weight: 600; font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.article-body figure.a-img { margin: 1.6em 0; position: relative; }
.article-body figure.a-img img { width: 100%; height: auto; box-shadow: var(--sh-card); }
.article-body figure.a-img .credit {
  position: absolute; right: 8px; bottom: 8px;
  font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(14,13,12,.72); color: var(--ink-dark); padding: 3px 8px;
}
.a-embed { margin: 1.6em 0; background: var(--plate); position: relative; }
.a-embed iframe { display: block; width: 100%; border: 0; }
.a-embed--video iframe { aspect-ratio: 16 / 9; height: auto; }
/* VERTICAL embeds (reels, TikTok, FB posts) are portrait content: stretched across the 760px
   article column they become a letterboxed slab. Constrained to a phone-ish column and centred,
   they read the way the platform intends. */
.a-embed--tall { max-width: 420px; margin-inline: auto; background: transparent; }
.a-embed--tall iframe { height: 720px; }
@media (max-width: 460px) { .a-embed--tall iframe { height: 660px; } }
.a-embed .eb-src { font-size: .7rem; color: var(--muted); padding: 6px 2px 0; display: block; position: absolute; top: 100%; right: 0; }
.article-foot { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ---------- print sanity ---------- */
@media print { .topbar, .mbar, .sal-badge { display: none !important; } }