/* =========================================================
   Fonturi (auto-găzduite — v. assets/fonts/, nu mai depindem
   de fonts.googleapis.com la runtime)
   ========================================================= */
@font-face{
  font-family:"Big Shoulders Display"; font-style:normal; font-weight:500 900; font-display:swap;
  src:url("../assets/fonts/big-shoulders-display-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Big Shoulders Display"; font-style:normal; font-weight:500 900; font-display:swap;
  src:url("../assets/fonts/big-shoulders-display-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Public Sans"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("../assets/fonts/public-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Public Sans"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("../assets/fonts/public-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* =========================================================
   Academia Junior Ploiești — design tokens
   ========================================================= */
:root{
  --ink: #0F1B2B;
  --ink-soft: #16283F;
  --ink-softer: #1D3450;
  --court-blue: #1C5EA8;
  --signal-yellow: #F5C518;
  --ember: #E8572A;
  --chalk: #F7F6F2;
  --paper: #FFFFFF;
  --line: #D9D4C8;
  --muted: #5B6472;
  --muted-on-dark: rgba(247,246,242,.66);

  --font-display: "Big Shoulders Display", sans-serif;
  --font-body: "Public Sans", sans-serif;

  --container: 1200px;
  --radius: 14px;
  --section-pad: 112px;
}

@media (max-width: 760px){
  :root{ --section-pad: 64px; }
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin:0;
  font-family: var(--font-body);
  background: var(--chalk);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3{
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  line-height: 0.96;
  margin: 0;
  letter-spacing: 0.002em;
}

p{ margin: 0; }

a{ color: inherit; text-decoration: none; }

img,svg{ display:block; max-width:100%; }

.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--chalk);
  padding: 10px 16px; z-index: 999; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{
  outline: 3px solid var(--signal-yellow);
  outline-offset: 2px;
}

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(15,27,43,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(247,246,242,.08);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
/* Home page: no bar — the header floats over the hero photo and only turns
   solid once the page scrolls (js/main.js toggles .is-scrolled) */
.header-overlay{
  position: fixed; left:0; right:0;
  background: transparent; backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background .3s ease, border-color .3s ease;
}
.header-overlay .nav-link{ color: rgba(247,246,242,.88); text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.header-overlay.is-scrolled,
.header-overlay:has(.site-nav.open){
  background: rgba(15,27,43,.92); backdrop-filter: blur(8px);
  border-bottom-color: rgba(247,246,242,.08);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ width:40px; height:52px; flex:none; object-fit:contain; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; color: var(--chalk); }
.brand-name{ font-family: var(--font-display); font-weight:800; text-transform:uppercase; font-size:1.05rem; letter-spacing: .01em; }
.brand-place{ font-family: var(--font-display); font-weight:600; text-transform:uppercase; font-size: .72rem; color: var(--signal-yellow); letter-spacing: .08em; }

.site-nav{ display:flex; align-items:center; gap: 28px; }
.nav-link{
  color: var(--muted-on-dark); font-weight:600; font-size: .95rem;
  padding: 6px 2px; position:relative;
}
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background: var(--signal-yellow); transform: scaleX(0); transform-origin:left;
  transition: transform .2s ease;
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-link.active{ color: var(--chalk); }
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.active::after{ transform: scaleX(1); }

.nav-cta{
  background: var(--ember); color: var(--chalk); font-weight:700;
  padding: 10px 20px; border-radius: 999px; font-size:.92rem;
  transition: background .2s ease, transform .2s ease;
}
.nav-cta:hover{ background:#ff6a39; transform: translateY(-1px); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:none; border:0; cursor:pointer; padding:0;
}
.nav-toggle span{ width:100%; height:2px; background: var(--chalk); border-radius:2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 880px){
  .nav-toggle{ display:flex; }
  .site-nav{
    position:absolute; top:76px; left:0; right:0;
    background: var(--ink);
    flex-direction:column; align-items:stretch; gap:0;
    max-height:0; overflow:hidden; transition: max-height .25s ease;
    border-bottom: 1px solid rgba(247,246,242,.08);
  }
  .site-nav.open{ max-height: 420px; }
  .nav-link{ padding: 16px 24px; border-top:1px solid rgba(247,246,242,.08); }
  .nav-link::after{ display:none; }
  .nav-cta{ margin: 16px 24px; text-align:center; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  background: var(--ink);
  color: var(--chalk);
  position:relative;
  overflow:hidden;
}

/* Photos and copy live in .hero-stage, which ends where the stats bar
   starts — so the bar never covers the bottom of a photo */
.hero-stage{ position:relative; }

/* Background photos, cross-faded every 3s by js/main.js */
.hero-slides{ position:absolute; inset:0; z-index:0; }
.hero-slide{
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  /* --focus is set per photo in index.html so the kids stay in frame */
  object-fit:cover; object-position: center var(--focus, 50%);
  opacity:0; transition: opacity 1.2s ease;
}
.hero-slide.is-active{ opacity:1; }
/* Darken the photos so the copy (and the see-through header) stay readable */
.hero-stage::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(15,27,43,.7) 0%, rgba(15,27,43,0) 170px),
    linear-gradient(90deg, rgba(15,27,43,.88) 0%, rgba(15,27,43,.62) 45%, rgba(15,27,43,.25) 100%),
    linear-gradient(0deg, rgba(15,27,43,.7) 0%, rgba(15,27,43,0) 35%);
}

/* Fills the first screen (minus the stats bar); the header floats over it */
.hero-inner{
  position:relative; z-index:3;
  display:flex; align-items:center;
  min-height: clamp(600px, calc(100svh - 120px), 980px);
  padding: 148px 24px 88px;
}
.hero-copy h1{
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  color: var(--chalk);
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.hero-lead{
  margin-top: 22px; max-width: 46ch;
  font-size: 1.1rem; color: rgba(247,246,242,.86);
}
.hero-actions{ display:flex; gap:16px; margin-top: 32px; flex-wrap:wrap; }

/* Copy rises in on load; after the intro it waits for the logo to clear */
.hero-copy > *{ animation: heroCopyIn .7s cubic-bezier(.2,.7,.2,1) both; }
.hero-copy > :nth-child(1){ animation-delay: .1s; }
.hero-copy > :nth-child(2){ animation-delay: .25s; }
.hero-copy > :nth-child(3){ animation-delay: .4s; }
.intro-on .hero-copy > :nth-child(1){ animation-delay: 1.9s; }
.intro-on .hero-copy > :nth-child(2){ animation-delay: 2.05s; }
.intro-on .hero-copy > :nth-child(3){ animation-delay: 2.2s; }
@keyframes heroCopyIn{ from{ opacity:0; transform: translateY(18px); } to{ opacity:1; transform:none; } }

/* =========================================================
   Logo intro (home page, once per session)
   The logo spins, then settles back as the hero's first background — under
   the copy (z-index -1 inside .hero-inner) — while the header, copy and
   stats come in over it. js/main.js later fades it out as the photos arrive.
   Only transform and opacity are animated, so phones run it on the GPU
   without repainting (a filter here made the spin stutter on mobile).
   ========================================================= */
.hero-logo{ display:none; }
.intro-on .hero-logo{
  display:grid; place-items:center;
  position:absolute; inset:0; z-index:-1;
  perspective: 1200px;
  pointer-events:none;
}
.hero-logo.is-leaving{ animation: introReveal 1.2s ease forwards; }
.hero-logo-img{
  width: min(38vw, 260px); height:auto;
  will-change: transform, opacity;
  animation:
    introSpin 1.6s cubic-bezier(.15,.75,.25,1) both,
    introSettle 1s cubic-bezier(.45,0,.55,1) 1.6s forwards;
}
@keyframes introSpin{
  from{ opacity:0; transform: rotateY(0deg) scale(.55); }
  25%{ opacity:1; }
  to{ opacity:1; transform: rotateY(720deg) scale(1); }
}
/* Steps back into the background and stays there, dimmed, behind the copy */
@keyframes introSettle{
  from{ opacity:1; transform: rotateY(720deg) translateZ(0); }
  to{ opacity:.5; transform: rotateY(720deg) translateZ(-260px); }
}
/* Everything in the intro holds on its first frame until js/main.js has the
   logo decoded and adds .intro-play, so the spin never starts half-loaded */
.intro-on:not(.intro-play) .hero-logo-img,
.intro-on:not(.intro-play) .hero-copy > *,
.intro-on:not(.intro-play) .site-header,
.intro-on:not(.intro-play) .stats{ animation-play-state: paused; }
@keyframes introReveal{ to{ opacity:0; visibility:hidden; } }
@keyframes introFadeIn{ from{ opacity:0; } to{ opacity:1; } }
/* Header and stats bar come in with the copy, in front of the logo */
.intro-on .site-header{ animation: introFadeIn .6s ease 1.9s both; }
.intro-on .stats{ animation: heroCopyIn .7s cubic-bezier(.2,.7,.2,1) 2.35s both; }
/* Photos stay hidden while the logo is the background; js/main.js then adds
   .is-running and the first one fades in */
.intro-on .hero-slides:not(.is-running) .hero-slide{ opacity:0; }
/* Click/Esc skips straight to the photos */
.intro-skipped .hero-logo{ display:none; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 15px 28px; border-radius: 999px; font-weight:700; font-size: 1rem;
  border: 2px solid transparent; cursor:pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.btn-primary{ background: var(--ember); color: var(--chalk); }
.btn-primary:hover{ background:#ff6a39; transform: translateY(-2px); }
.btn-ghost{ border-color: rgba(247,246,242,.4); color: var(--chalk); }
.btn-ghost:hover{ border-color: var(--signal-yellow); color: var(--signal-yellow); }
.btn-block{ width:100%; }

.stats{ background: var(--ink-soft); border-top: 1px solid rgba(247,246,242,.08); position:relative; z-index:3; }
.stats-grid{
  display:grid; grid-template-columns: repeat(4,1fr);
  padding: 32px 24px;
}
.stat{ text-align:center; padding: 0 12px; }
.stat + .stat{ border-left: 1px solid rgba(247,246,242,.12); }
.stat-num{
  display:block; font-family: var(--font-display); font-weight:900; font-size: 2.2rem;
  color: var(--signal-yellow);
}
.stat-label{ display:block; font-size: .85rem; color: var(--muted-on-dark); margin-top:4px; }

@media (max-width: 960px){
  .hero-inner{ padding-top: 116px; min-height: clamp(520px, calc(100svh - 190px), 760px); }
  .hero-stage::after{
    background:
      linear-gradient(180deg, rgba(15,27,43,.7) 0%, rgba(15,27,43,0) 140px),
      linear-gradient(0deg, rgba(15,27,43,.9) 0%, rgba(15,27,43,.62) 55%, rgba(15,27,43,.45) 100%);
  }
}
@media (max-width: 560px){
  .stats-grid{ grid-template-columns: repeat(2,1fr); row-gap: 24px; }
  .stat:nth-child(3){ border-left:none; }
  .stat-num{ font-size: 1.8rem; }
}

/* =========================================================
   Page banner (non-home pages)
   ========================================================= */
.page-hero{
  background: radial-gradient(ellipse 120% 140% at 85% -20%, #16304f 0%, var(--ink) 55%);
  color: var(--chalk);
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
}
/* A handball court that draws itself line by line (the animation lives in
   court.svg), laid back in perspective on the right of the banner */
.page-hero::after{
  content:"";
  position:absolute; right: 4%; top: 50%;
  width: min(500px, 42vw); aspect-ratio: 440 / 240;
  background: url("../assets/img/court.svg?v=3") no-repeat center / contain;
  opacity: .6;
  transform: translateY(-50%) perspective(900px) rotateX(52deg) rotateZ(-8deg);
  pointer-events:none;
}
@media (max-width: 760px){
  /* Whole court stays in view on phones, faint behind the copy */
  .page-hero::after{ width: min(78vw, 320px); right: 12px; opacity: .22; }
}
.page-hero h1{
  font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--chalk); position:relative; z-index:1;
}
.page-hero p{
  margin-top:16px; max-width: 56ch; color: var(--muted-on-dark); font-size:1.05rem; position:relative; z-index:1;
}

/* =========================================================
   Home — explore / teaser blocks
   ========================================================= */
.explore{ padding: var(--section-pad) 0 calc(var(--section-pad) - 40px); }
.explore-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.explore-card{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; display:block; transition: border-color .2s ease, transform .2s ease;
}
.explore-card:hover{ border-color: var(--ember); transform: translateY(-3px); }
.explore-icon{ width:30px; height:30px; color: var(--ember); margin-bottom:18px; }
.explore-card h3{ font-size:1.15rem; color: var(--ink); margin-bottom:8px; }
.explore-card p{ color: var(--muted); font-size:.92rem; }

@media (max-width: 880px){ .explore-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .explore-grid{ grid-template-columns: 1fr; } }

.teaser{ background: var(--paper); }
/* Copy on the left, the jumping player drawing on the right */
.teaser-top{
  display:grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items:center;
  margin-bottom: 56px;
}
.teaser-top .section-head{ margin-bottom:0; }
.teaser-jumper{ width: clamp(220px, 24vw, 320px); height:auto; margin-right: 4%; }
@media (max-width: 760px){
  .teaser-top{ grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
  .teaser-jumper{ width: 170px; justify-self:center; margin-right:0; }
}
.teaser-link{ margin-top:28px; display:inline-flex; font-weight:700; color: var(--ember); border-bottom: 2px solid var(--ember); padding-bottom:2px; }
.teaser-link:hover{ color: #ff6a39; border-color: #ff6a39; }

.news-teaser{ background: var(--chalk); }
.news-teaser .news-list{ margin-bottom: 8px; }

.cta-band{
  background:
    linear-gradient(180deg, rgba(15,27,43,.55), rgba(15,27,43,.80)),
    url("../assets/img/cta-action.jpg") center 22% / cover no-repeat;
  color: var(--chalk); padding: 88px 0; text-align:center;
}
.cta-band h2{ color: var(--chalk); font-size: clamp(1.9rem,4vw,2.6rem); }
.cta-band p{ margin-top:14px; color: var(--muted-on-dark); max-width:50ch; margin-left:auto; margin-right:auto; }
.cta-band .btn{ margin-top:28px; }

/* =========================================================
   Shared section styles
   ========================================================= */
.section{ padding: var(--section-pad) 0; }
.section-head{ max-width: 680px; margin-bottom: 56px; }
.section h2{ font-size: clamp(2.1rem, 4vw, 3rem); color: var(--ink); }
.section-lead{ margin-top: 18px; font-size: 1.08rem; color: var(--muted); max-width: 62ch; }

.eyebrow{
  display:inline-block; margin-bottom: 14px;
  font-family: var(--font-display); font-weight:700; text-transform:uppercase;
  font-size: .9rem; letter-spacing: .14em; color: var(--ember);
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip: rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =========================================================
   Slogan band (home) — tilted yellow ribbon with the club slogan scrolling
   ========================================================= */
.slogan-band{
  position:relative; overflow:hidden;
  /* Top half matches the stats bar, bottom half the next section, so the
     tilted ribbon reads as a sash across the seam */
  background: linear-gradient(180deg, var(--ink-soft) 50%, var(--paper) 50%);
  padding: 34px 0;
}
/* The band already leaves room below the ribbon, so the next section starts closer */
.slogan-band + .section{ padding-top: calc(var(--section-pad) * .4); }
.slogan-ribbon{
  margin: 0 -40px;
  background: var(--signal-yellow); color: var(--ink);
  padding: 16px 0;
  transform: rotate(-2deg);
}
.slogan-track{
  display:flex; align-items:center; gap: 28px; width:max-content;
  animation: sloganScroll 40s linear infinite;
}
.slogan-track span:not(.slogan-dot){
  font-family: var(--font-display); font-weight:800; text-transform:uppercase;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height:1; letter-spacing:.02em; white-space:nowrap;
}
.slogan-dot{ flex:none; width:8px; height:8px; border-radius:50%; background: var(--ember); }
/* Content is repeated twice, so shifting by half loops seamlessly */
@keyframes sloganScroll{ to{ transform: translateX(-50%); } }

/* =========================================================
   Age groups (home)
   ========================================================= */
.age-groups{ background: var(--chalk); }
/* Copy on the left, one-card carousel on the right */
.age-groups-inner{
  display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items:center;
}
.age-groups .section-head{ margin-bottom:0; }

/* 3D carousel: the active card sits in front, its neighbours turn away to
   either side, and it loops round. js/main.js sets data-pos on each card
   (center / left / right / hidden) and handles arrows, dots, drag and swipe. */
.group-grid{
  /* Tall enough for two teams (U15, U17) on the back without scrolling */
  position:relative; height: 420px;
  perspective: 1200px; overflow:hidden;
  touch-action: pan-y; user-select:none; cursor:grab;
  outline-offset: 6px;
}
.group-grid.is-dragging{ cursor:grabbing; }
.group-grid img, .group-grid a{ -webkit-user-drag: none; }
.group-grid > .group-card{
  position:absolute; top: 10px; bottom: 20px; left:50%;
  width: min(56%, 320px);
  transform: translateX(-50%);
  transition: transform .7s cubic-bezier(.33,1,.68,1), opacity .45s ease, filter .7s ease;
  will-change: transform;
}
.group-card[data-pos="center"]{ z-index:3; }
/* The card wrapping round the ring (left ↔ right) passes behind the others
   invisibly instead of sliding across the front */
.group-grid > .group-card.is-wrapping{ z-index:0; opacity:0; transition: transform .7s cubic-bezier(.33,1,.68,1), opacity .15s ease, filter .7s ease; }
.group-card[data-pos="left"]{
  z-index:2; filter: brightness(.6); cursor:pointer;
  transform: translateX(-50%) translateX(-36%) scale(.78) rotateY(22deg);
}
.group-card[data-pos="right"]{
  z-index:2; filter: brightness(.6); cursor:pointer;
  transform: translateX(-50%) translateX(36%) scale(.78) rotateY(-22deg);
}
.group-card[data-pos="hidden"]{ z-index:1; opacity:0; transform: translateX(-50%) scale(.6); pointer-events:none; }
/* Next ones in line wait out of sight just past the side cards, so they slide
   in from the edge rather than popping up from behind the centre */
.group-card[data-pos="far-left"]{ z-index:1; opacity:0; pointer-events:none; transform: translateX(-50%) translateX(-62%) scale(.62) rotateY(28deg); }
.group-card[data-pos="far-right"]{ z-index:1; opacity:0; pointer-events:none; transform: translateX(-50%) translateX(62%) scale(.62) rotateY(-28deg); }

.carousel-controls{ display:flex; align-items:center; gap: 12px; margin-top: 32px; }
.carousel-btn{
  display:grid; place-items:center; width:48px; height:48px; padding:0;
  border-radius:50%; border: 2px solid var(--ink); background: transparent; color: var(--ink);
  cursor:pointer; transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.carousel-btn svg{ width:20px; height:20px; }
.carousel-btn:hover:not(:disabled){ background: var(--ink); color: var(--chalk); }
.carousel-btn:disabled{ opacity:.3; cursor:default; }
.carousel-dots{ display:flex; gap: 8px; margin-left: 10px; }
.carousel-dot{
  width:10px; height:10px; padding:0; border:0; border-radius:999px;
  background: var(--line); cursor:pointer; transition: width .25s ease, background .25s ease;
}
.carousel-dot.is-active{ width:28px; background: var(--ember); }
.group-card{ color: var(--chalk); }
.group-card[data-pos="center"]{ cursor:pointer; }

/* Flip: the inner wrapper turns over to show the schedule on the back.
   It carries its own perspective, since the card itself is already
   transformed by the carousel. */
.group-card-inner{
  position:relative; width:100%; height:100%;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateY(0deg);
  transition: transform .7s cubic-bezier(.33,1,.68,1);
}
.group-card.is-flipped .group-card-inner{ transform: perspective(1000px) rotateY(180deg); }
.group-face{
  position:absolute; inset:0; overflow:hidden;
  display:flex; flex-direction:column;
  padding: 36px 32px 32px;
  background: var(--ink);
  border-radius: var(--radius);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.group-back{
  transform: rotateY(180deg);
  background: var(--ink-softer);
}
.group-back-title{
  font-family: var(--font-display); font-weight:800; text-transform:uppercase;
  font-size: 1.6rem; line-height:1; letter-spacing:.02em;
}
.group-back-title span{ color: var(--signal-yellow); }
.group-schedule{ margin: 22px 0 0; flex:1; display:flex; flex-direction:column; gap: 14px; }
.group-schedule > div{
  display:grid; grid-template-columns: 76px 1fr; gap: 12px; align-items:baseline;
  padding-bottom: 12px; border-bottom: 1px solid rgba(247,246,242,.1);
}
.group-schedule dt{
  font-family: var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  font-size: .82rem; color: var(--muted-on-dark);
}
.group-schedule dd{ margin:0; font-weight:600; color: var(--chalk); }
/* Live schedule from the dashboard (js/program.js): days and hour on one
   line, one title per team when a group trains girls and boys separately */
.group-schedule-live{ gap: 8px; min-height:0; overflow-y:auto; }
.group-schedule-live > .group-slot{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  column-gap: 12px; row-gap: 2px; padding-bottom: 8px;
}
.group-schedule-live > .group-slot:last-child{ padding-bottom:0; border-bottom:0; }
.group-slot-days{
  font-family: var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  font-size: .82rem; color: var(--muted-on-dark);
}
.group-slot-time{ font-weight:600; color: var(--chalk); }
.group-schedule-team{
  margin-top: 4px;
  font-family: var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  font-size: .82rem; color: var(--signal-yellow);
}
.group-schedule-live .group-schedule-empty{ margin:0; flex:none; }

/* Faint oversized code in the corner as a graphic accent */
.group-front::after{
  content: attr(data-code); position:absolute; right:-12px; bottom:-34px;
  font-family: var(--font-display); font-weight:900; font-size: 9rem; line-height:1;
  color: rgba(247,246,242,.05); pointer-events:none;
}
.group-code{
  font-family: var(--font-display); font-weight:900; font-size: clamp(3.4rem, 6vw, 4.6rem); line-height:.9;
  color: var(--signal-yellow);
}
.group-age{
  margin-top: 8px;
  font-family: var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  font-size: .95rem; color: var(--muted-on-dark);
}
/* Who trains in the group: girls, boys or both */
.group-tags{ display:flex; flex-wrap:wrap; gap: 6px; margin-top: 12px; }
.group-tags span{
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(247,246,242,.22);
  font-family: var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  font-size: .74rem; line-height:1.2; color: var(--chalk);
}
.group-card p{ margin-top: 20px; color: rgba(247,246,242,.82); flex:1; }
.group-link{
  margin-top: 22px; align-self:flex-start;
  font: inherit; font-weight:700; color: var(--chalk);
  background:none; border:0; border-bottom: 2px solid var(--ember);
  padding: 0 0 2px; cursor:pointer;
}
.group-card[data-pos="center"]:hover .group-link{ color: var(--signal-yellow); border-color: var(--signal-yellow); }
@media (max-width: 860px){
  .age-groups-inner{ grid-template-columns: 1fr; gap: 28px; }
  .group-grid{ height: 410px; }
  .group-grid > .group-card{ width: 64%; }
  .group-face{ padding: 28px 22px 24px; }
  /* Narrow back face: label above value, tighter rows */
  .group-back{ padding-top: 24px; }
  .group-back-title{ font-size: 1.35rem; }
  .group-schedule{ margin-top: 14px; gap: 8px; }
  .group-schedule > div{ grid-template-columns: 1fr; gap: 2px; padding-bottom: 8px; }
  .group-back .group-link{ margin-top: 12px; }
  .group-schedule-live{ gap: 6px; }
  .group-schedule-live > .group-slot{ padding-bottom: 6px; }
  .group-card[data-pos="left"]{ transform: translateX(-50%) translateX(-30%) scale(.78) rotateY(22deg); }
  .group-card[data-pos="right"]{ transform: translateX(-50%) translateX(30%) scale(.78) rotateY(-22deg); }
  .carousel-controls{ margin-top: 24px; }
}

/* =========================================================
   Despre noi
   ========================================================= */
.values{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  padding: 36px 0 56px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.value-icon{ width: 34px; height:34px; color: var(--ember); margin-bottom: 18px; }
.value h3{ font-size: 1.3rem; color: var(--ink); margin-bottom: 10px; }
.value p{ color: var(--muted); font-size: .96rem; }

.story-photo{ margin: 40px 0 56px; }
.story-photo img{ width:100%; height:auto; border-radius: var(--radius); display:block; }
.story-photo figcaption{ margin-top:12px; font-size:.88rem; color: var(--muted); }

.staff{ margin-top: 56px; }
.staff-title{ font-size: 1.1rem; letter-spacing:.04em; color: var(--muted); margin-bottom:20px; font-weight:700; text-transform:uppercase; font-family: var(--font-body); }
.staff-list{ list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--line); }
.staff-list li{
  display:flex; justify-content:space-between; align-items:center;
  padding: 18px 4px; border-bottom:1px solid var(--line);
}
.staff-role{ color: var(--muted); font-weight:600; }
.staff-name{ font-family: var(--font-display); font-weight:700; font-size:1.25rem; text-transform:uppercase; color: var(--ink); }

@media (max-width: 880px){
  .values{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px){
  .values{ grid-template-columns: 1fr; }
  .staff-list li{ flex-direction:column; align-items:flex-start; gap:4px; }
}

/* =========================================================
   Antrenori
   ========================================================= */
.coach-quote{ background: var(--paper); }
.coach-quote-inner{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
  gap: 56px; align-items:center;
}
.coach-quote-photo{ border-radius: var(--radius); overflow:hidden; aspect-ratio: 1/1; }
.coach-quote-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.coach-quote-mark{ width:52px; height:39px; color: var(--signal-yellow); }
.coach-quote-body blockquote{ margin: 20px 0 0; }
.coach-quote-body blockquote p{
  font-family: var(--font-display); font-weight:700; text-transform:none; letter-spacing:0;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height:1.32; color: var(--ink);
}
.coach-quote-author{ display:flex; align-items:center; gap:14px; margin-top:32px; }
.coach-quote-author img{ border-radius:50%; flex-shrink:0; }
.coach-quote-name{ display:block; font-family: var(--font-display); font-weight:800; text-transform:uppercase; font-size:1.05rem; color: var(--ink); }
.coach-quote-role{ display:block; color: var(--muted); font-size:.85rem; margin-top:2px; }
@media (max-width: 760px){
  .coach-quote-inner{ grid-template-columns: 1fr; gap:28px; }
}

.coaches{ background: var(--ink); color: var(--chalk); }
.coaches .section-lead{ color: var(--muted-on-dark); }
.coach-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.coach-card{
  background: var(--ink-soft); border-radius: var(--radius); overflow:hidden;
  border: 1px solid rgba(247,246,242,.08);
}
.coach-photo{
  width:100%; aspect-ratio: 1 / 1; background: var(--accent, var(--ink-softer));
  display:flex; align-items:center; justify-content:center; color: var(--ink);
}
.coach-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.coach-photo svg{ width:38%; height:38%; }
.coach-body{ padding: 20px 24px 24px; }
.coach-card h3{ font-size:1.35rem; text-transform:uppercase; color: var(--chalk); margin-bottom:6px; }
.coach-role{ color: var(--muted-on-dark); font-size:.95rem; }

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

/* =========================================================
   Program
   ========================================================= */
.schedule-days{ display:grid; gap: 28px; }
.schedule-day-title{
  font-family: var(--font-display); font-weight:700; text-transform:uppercase;
  font-size: 1.3rem; letter-spacing:.03em; color: var(--ink); margin-bottom: 14px;
}
.schedule-list{ border: 1px solid var(--line); border-radius: var(--radius); overflow:hidden; background: var(--paper); }
.schedule-item{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px;
  padding: 18px 20px;
}
.schedule-item + .schedule-item{ border-top: 1px solid var(--line); }
.schedule-item-group{ font-family: var(--font-display); font-weight:700; text-transform:uppercase; font-size:1.05rem; color: var(--ink); }
.schedule-item-meta{ color: var(--muted); font-size:.95rem; }
.schedule-note{ margin-top:20px; color: var(--muted); font-size:.92rem; }

/* =========================================================
   Noutăți
   ========================================================= */
.news-list{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.news-item{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition: border-color .2s ease, transform .2s ease;
}
a.news-item:hover{ border-color: var(--ember); transform: translateY(-3px); }
.news-thumb{ width:100%; aspect-ratio: 16 / 10; object-fit:cover; display:block; }
.news-body{ padding: 16px 18px 20px; }
.news-item time{
  display:block; font-family: var(--font-display); font-weight:700; text-transform:uppercase;
  color: var(--ember); font-size: .82rem; margin-bottom:6px;
}
.news-item h3{ font-size:1.02rem; line-height:1.3; text-transform:none; font-weight:700; color: var(--ink); margin-bottom:6px; letter-spacing:0; }
/* Summary capped at three lines so the cards in a row stay the same size */
.news-item p{
  color: var(--muted); font-size: .88rem;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden;
}

/* Noutăți page, three-column layout: the latest story runs full width with the
   photo beside the text, so four stories make one wide card plus a full row
   instead of a lone card on a half-empty row */
@media (min-width: 961px){
  .news-list-featured > .news-item:first-child{
    grid-column: 1 / -1; display:grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }
  .news-list-featured > .news-item:first-child .news-thumb{ aspect-ratio:auto; height:100%; min-height:320px; }
  .news-list-featured > .news-item:first-child .news-body{ padding: 36px 40px; align-self:center; }
  .news-list-featured > .news-item:first-child time{ font-size:.95rem; margin-bottom:10px; }
  .news-list-featured > .news-item:first-child h3{ font-size:1.6rem; margin-bottom:12px; }
  .news-list-featured > .news-item:first-child p{ font-size:1rem; -webkit-line-clamp:5; line-clamp:5; }
}
@media (max-width: 960px){
  .news-list{ grid-template-columns: repeat(2, 1fr); }
  /* Home page shows one row: at two columns the third story would sit alone */
  .news-teaser .news-item:nth-child(3){ display:none; }
}
@media (max-width: 560px){
  .news-list{ grid-template-columns: 1fr; }
  .news-teaser .news-item:nth-child(3){ display:flex; }
}
.news-empty{ grid-column: 1 / -1; color: var(--muted); font-size: .95rem; }

/* =========================================================
   Article (single news item)
   ========================================================= */
.article-photo{ width:100%; aspect-ratio: 16 / 9; object-fit:cover; border-radius: var(--radius); display:block; }
.article-body{ max-width: 72ch; margin: 36px 0; display:grid; gap:18px; }
.article-body p{ color: var(--ink); font-size: 1.05rem; line-height:1.7; }

.gallery-head{ font-size: 1.1rem; letter-spacing:.04em; color: var(--muted); margin: 48px 0 20px; font-weight:700; text-transform:uppercase; }
.gallery-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.gallery-grid img{ width:100%; aspect-ratio: 4 / 3; object-fit:cover; border-radius: var(--radius); display:block; }
.gallery-grid figcaption{ margin-top:8px; font-size:.85rem; color: var(--muted); }

@media (max-width: 560px){
  .gallery-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   Contact / Înscriere
   ========================================================= */
.enroll{ background: var(--ink-soft); color: var(--chalk); }
.enroll-inner{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items:start; }
.enroll h2{ color: var(--chalk); font-size: clamp(2.1rem,4vw,2.9rem); }
.enroll .section-lead{ color: var(--muted-on-dark); margin-bottom: 36px; }

.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.contact-list li{ display:flex; align-items:center; gap:14px; }
.contact-list svg{ width:22px; height:22px; color: var(--signal-yellow); flex:none; }
.contact-list a:hover{ color: var(--signal-yellow); }

.enroll-form{
  background: var(--paper); color: var(--ink); border-radius: var(--radius);
  padding: 32px; display:grid; gap: 18px;
}
.field-row{ display:grid; gap:6px; }
.field-row label{ font-size:.88rem; font-weight:700; color: var(--muted); }
.field-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
input[type="text"],input[type="tel"],input[type="email"],input[type="number"],select,textarea{
  font: inherit; padding: 12px 14px; border-radius:8px; border: 1.5px solid var(--line);
  background: var(--chalk); color: var(--ink);
}
input:focus,select:focus,textarea:focus{ outline:none; border-color: var(--court-blue); }
textarea{ resize: vertical; min-height:80px; }
.hp{ position:absolute; left:-9999px; }
.field-choice{ border:0; margin:0; padding:0; min-width:0; }
.field-choice legend{ padding:0; margin-bottom:6px; font-size:.88rem; font-weight:700; color: var(--muted); }
.choice-row{ display:flex; flex-wrap:wrap; gap: 10px; }
.choice-row label{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  padding: 10px 16px; border-radius:8px; border: 1.5px solid var(--line); background: var(--chalk);
  font-weight:600; color: var(--ink);
}
.choice-row label:has(input:checked){ border-color: var(--court-blue); }
.choice-row input{ margin:0; accent-color: var(--court-blue); }

.consent{ display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color: var(--muted); }
.consent input{ margin-top:4px; }

.form-status{ font-size:.92rem; min-height: 1.2em; }
.form-status.ok{ color: #1a7a4c; }
.form-status.err{ color: var(--ember); }

@media (max-width: 960px){
  .enroll-inner{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .field-grid{ grid-template-columns: 1fr; }
  .enroll-form{ padding: 24px 20px; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background: var(--ink); color: var(--muted-on-dark); padding: 56px 0 24px; }
.footer-inner{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:32px;
  padding-bottom: 32px; border-bottom: 1px solid rgba(247,246,242,.1);
}
/* Logo sits left of the name; the slogan runs full width below */
.footer-brand{ display:grid; grid-template-columns: auto 1fr; column-gap:14px; align-items:center; }
.footer-logo{ grid-row: 1 / span 2; width:46px; height:60px; object-fit:contain; }
.footer-brand p{ grid-column: 1 / -1; }
.footer-brand .brand-name{ align-self:end; }
.footer-brand .brand-place{ align-self:start; }
.footer-brand .brand-name,
.footer-brand .brand-place{ display:block; font-family: var(--font-display); text-transform:uppercase; }
.footer-brand .brand-name{ font-weight:800; color: var(--chalk); font-size:1.2rem; }
.footer-brand .brand-place{ font-weight:600; color: var(--signal-yellow); font-size:.8rem; letter-spacing:.08em; }
.footer-brand p{ margin-top:10px; font-size:.92rem; }

.footer-nav{ display:flex; flex-wrap:wrap; gap: 22px; }
.footer-nav a:hover{ color: var(--chalk); }

.footer-contact{ display:flex; flex-direction:column; gap:10px; font-size:.92rem; }
.footer-contact a{ display:inline-flex; align-items:center; gap:8px; }
.footer-contact a:hover{ color: var(--chalk); }
.footer-contact svg{ width:16px; height:16px; flex-shrink:0; }

.footer-social{ display:flex; gap:12px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(247,246,242,.2);
  display:flex; align-items:center; justify-content:center; transition: border-color .2s ease, color .2s ease;
}
.footer-social svg{ width:18px; height:18px; }
.footer-social a:hover{ border-color: var(--signal-yellow); color: var(--signal-yellow); }

.footer-fine{ text-align:center; font-size:.82rem; margin-top: 24px; }
.footer-credit{ text-align:center; font-size:.78rem; margin-top: 6px; opacity:.6; }
.footer-credit a{ text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover{ color: var(--signal-yellow); }

@media (max-width: 640px){
  .footer-inner{ flex-direction:column; }
}