/* ==========================================================================
   All4eBikes -- hero prima pagina ("varianta D")
   Sursa de adevar: content/_theme/a4e-home-hero.css din repo.
   Deploy: python scripts/11_deploy_home_hero.py --write  (apoi --publish)

   Note de implementare:
   - Fonturi: DOAR Poppins, deja incarcat de tema cu toate greutatile.
     Nu folosi 'Space Grotesk' -- e cerut de CSS-ul sectiunii video, dar
     fontul nu e incarcat nicaieri pe site si cade pe sans-serif generic.
   - Latime: sectiunea e randata direct in <main>, care nu are max-width,
     deci ocupa toata latimea in mod natural. NU adauga trucul cu
     `width:100vw; margin-left:calc(50% - 50vw)` -- nu e nevoie si produce
     scroll orizontal cand exista scrollbar.
   - Responsive prin @container, nu @media: hero-ul se comporta corect si
     daca ajunge candva intr-un container mai ingust (ex. widget-ul de
     1400px), nu doar la latime completa.
   ========================================================================== */

.a4e-hero {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: #00212b;
  --a4e-line: rgba(0, 40, 52, .30);
  /* gradientul sta pe TOATA sectiunea, nu doar pe coloana de text:
     fotografia se dizolva in el prin masca de mai jos */
  background:
    radial-gradient(115% 85% at 6% -4%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 56%),
    linear-gradient(152deg, #4ce6ff 0%, #00ccff 30%, #00a4d8 68%, #0077a9 100%);
}

.a4e-hero *,
.a4e-hero *::before,
.a4e-hero *::after { box-sizing: border-box; }

.a4e-hero a { text-decoration: none; }

.a4e-hero__grid { display: grid; grid-template-columns: 1fr; }

@container (min-width: 800px) {
  .a4e-hero__grid {
    grid-template-columns: 1.08fr 1fr;
    align-items: stretch;
    /* Fotografia e portret 2:3. Intr-un panou lat si scund, `cover` taie
       exact partea de jos -- adica roata spate. Inaltimea de mai jos e
       calculata ca banda vizibila sa ajunga pana la ~0.94 din inaltimea
       pozei; roata spate se termina la 0.92. */
    min-height: clamp(540px, 56cqw, 730px);
  }
}

@container (min-width: 1250px) {
  /* Peste 1250px coloana foto NU mai creste: altfel panoul devine tot mai
     lat si mai scund, iar taietura se strange. Cu latime fixa, compozitia
     ramane identica de la 1250px in sus. Latimea in plus o ia textul. */
  .a4e-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
    min-height: 730px;
  }
  /* aliniaza textul cu containerul de 1400px al sectiunilor de mai jos */
  .a4e-hero__txt { padding-left: max(54px, calc((100cqw - 1400px) / 2 + 8px)); }
}

/* ---------- coloana de text ---------- */

.a4e-hero__txt {
  position: relative;
  z-index: 2;
  isolation: isolate;
  padding: 40px 24px 46px;
}

@container (min-width: 800px) {
  .a4e-hero__txt {
    /* padding-right generos: tine textul in zona de cyan plin,
       inainte sa inceapa fade-ul fotografiei */
    padding: 68px 92px 62px 54px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* grila tehnica, stinsa spre coltul opus */
.a4e-hero__txt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .17) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .17) 1px, transparent 1px);
  background-size: 46px 46px;
  /* unghi mai apropiat de orizontala: pe ecrane late coloana de text e mult
     mai lata decat inalta, iar la 158deg textura se stingea prea devreme si
     ramanea o zona mare de cyan plat */
  -webkit-mask-image: linear-gradient(122deg, #000 0%, rgba(0, 0, 0, .34) 60%, transparent 93%);
  mask-image: linear-gradient(122deg, #000 0%, rgba(0, 0, 0, .34) 60%, transparent 93%);
}

.a4e-hero__title {
  margin: 0 0 15px;
  font-size: clamp(29px, 5.9cqw, 54px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.028em;
  color: #00212b;
  text-wrap: balance;
}

.a4e-hero__sub {
  margin: 0 0 26px;
  max-width: 42ch;
  font-size: clamp(14.5px, 1.5cqw, 16.5px);
  font-weight: 500;
  line-height: 1.6;
  color: #013845;
}

.a4e-hero__btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-bottom: 26px;
}

.a4e-hero__cta {
  padding: 15px 29px;
  background: #00212b;
  color: #eafaff;
  font-size: 14.5px;
  font-weight: 700;
  /* acelasi colt taiat ca pe CTA-ul sectiunii video */
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  box-shadow: 0 14px 28px -14px rgba(0, 25, 38, .9);
  transition: background .13s ease, transform .13s ease;
}

.a4e-hero__cta:hover,
.a4e-hero__cta:focus-visible { background: #00323f; transform: translateY(-1px); color: #eafaff; }

.a4e-hero__cta2 {
  padding-bottom: 2px;
  border-bottom: 2px solid rgba(0, 33, 43, .38);
  font-size: 14px;
  font-weight: 700;
  color: #00212b;
  transition: border-color .13s ease;
}

.a4e-hero__cta2:hover,
.a4e-hero__cta2:focus-visible { border-bottom-color: #00212b; color: #00212b; }

.a4e-hero :focus-visible { outline: 2px solid #00212b; outline-offset: 3px; }

/* ---------- randul de cifre ---------- */

.a4e-hero__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* pe ecrane foarte late coloana de text creste mult; fara plafon, cele
     patru celule s-ar intinde absurd fata de continutul lor */
  max-width: 660px;
  border-top: 1px solid var(--a4e-line);
}

.a4e-hero__facts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 10px 11px 14px;
  border-left: 1px solid var(--a4e-line);
}

/* la doua coloane, prima celula a fiecarui rand sta la marginea din stanga */
.a4e-hero__facts li:nth-child(odd) { border-left: none; padding-left: 0; }

@container (min-width: 540px) {
  .a4e-hero__facts { grid-template-columns: repeat(4, 1fr); }
  .a4e-hero__facts li:nth-child(odd) { border-left: 1px solid var(--a4e-line); padding-left: 14px; }
  .a4e-hero__facts li:first-child { border-left: none; padding-left: 0; }
}

.a4e-hero__k {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #014655;
}

.a4e-hero__v {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
  color: #00212b;
}

/* ---------- fotografia ---------- */

.a4e-hero__shot {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Usor mai inalt decat patrat: la 1/1 taietura se opreste la ~0.81 din
     inaltimea pozei si reteaza roata spate (care se termina la 0.92).
     La 9/10 intra roata intreaga si ramane si saua in cadru. */
  aspect-ratio: 9 / 10;
  /* intra sub blocul de text, ca sa nu existe muchie intre ele */
  margin-top: -32px;
}

@container (min-width: 800px) {
  .a4e-hero__shot {
    aspect-ratio: auto;
    min-height: 100%;
    margin-top: 0;
    margin-left: -40px;
  }
}

.a4e-hero__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 76%; /* mobil: coborat, ca sa intre roata spate intreaga */
  /* marginea dinspre text se stinge si lasa gradientul sa treaca prin ea */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .22) 7%, rgba(0, 0, 0, .66) 16%, #000 27%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .22) 7%, rgba(0, 0, 0, .66) 16%, #000 27%);
}

@container (min-width: 800px) {
  .a4e-hero__shot img {
    /* desktop: coboara cadrul ca sa intre roata spate completa (0.375-0.92) */
    object-position: 50% 77%;
    /* pe orizontala, fade-ul e inclinat: dizolva mai mult cerul din coltul
       de sus (unde cyan-ul se bate cu portocaliul) si lasa asfaltul intact */
    -webkit-mask-image: linear-gradient(102deg, transparent 0%, rgba(0, 0, 0, .20) 10%, rgba(0, 0, 0, .62) 21%, rgba(0, 0, 0, .90) 30%, #000 36%);
    mask-image: linear-gradient(102deg, transparent 0%, rgba(0, 0, 0, .20) 10%, rgba(0, 0, 0, .62) 21%, rgba(0, 0, 0, .90) 30%, #000 36%);
  }
}

/* voal cyan peste zona de trecere, ca fotografia si panoul sa aiba aceeasi
   temperatura de culoare acolo unde se intalnesc. Porneste de la zero:
   daca porneste dintr-o valoare, se vede o muchie pe marginea panoului. */
.a4e-hero__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0, 180, 230, 0) 0%,
    rgba(0, 180, 230, .40) 11%,
    rgba(0, 180, 230, .20) 22%,
    rgba(0, 180, 230, 0) 40%);
}

@container (min-width: 800px) {
  .a4e-hero__shot::after {
    background: linear-gradient(102deg,
      rgba(0, 180, 230, 0) 0%,
      rgba(0, 180, 230, .42) 13%,
      rgba(0, 180, 230, .22) 25%,
      rgba(0, 180, 230, 0) 44%);
  }
}

/* ---------- banda de categorii ---------- */

.a4e-hero__cats {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #001c26;
}

@container (min-width: 700px) {
  .a4e-hero__cats { grid-template-columns: repeat(4, 1fr); }
}

.a4e-hero__cats a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: #bfe9f7;
  border-left: 1px solid rgba(191, 233, 247, .16);
  transition: background .14s ease, color .14s ease;
}

.a4e-hero__cats a::after {
  content: "\203A";
  margin-left: auto;
  font-size: 15px;
  opacity: .55;
}

.a4e-hero__cats a:nth-child(odd) { border-left: none; }

@container (min-width: 700px) {
  .a4e-hero__cats a:nth-child(odd) { border-left: 1px solid rgba(191, 233, 247, .16); }
  .a4e-hero__cats a:first-child { border-left: none; }
}

.a4e-hero__cats a:hover,
.a4e-hero__cats a:focus-visible { background: #00323f; color: #00ccff; }

@media (prefers-reduced-motion: reduce) {
  .a4e-hero *,
  .a4e-hero *::before,
  .a4e-hero *::after { transition: none !important; animation: none !important; }
}