/*!
 * CollectorsClub — stratul responsive al homepage-ului.
 *
 * Se incarca DUPA route-du-vin.css si dupa celelalte straturi cc-* (vezi
 * inc/setup.php), deci castiga la aceeasi specificitate prin ordinea din
 * cascada. Foaia originala ramane inghetata; aici se rescriu doar punctele
 * unde homepage-ul se strica pe latimi reale de ecran.
 *
 * Praguri folosite (si de ce):
 *   max-width:760px            — ritmul vertical al sectiunilor pe telefon
 *                                (padding-uri, titluri fluide, distante);
 *   min-width:761px            — bara fixa de jos dispare (era pana la 999px);
 *   max-width:820px            — grila de origini pe auto-fit cu minmax(240px);
 *   431-548px                  — fasia unde originea sta singura pe rand, dar
 *                                lata: inaltime plafonata, nu 4/5;
 *   561-1365px                 — piciorul cardului de produs pe randuri
 *                                (pretul sus, starea sub el);
 *   max-width:1099.98px        — hero pe banda (harta sus, text jos); acelasi
 *                                prag cu BREAK=1100 din rdv-hero-map.js;
 *   ... and (max-height:480px) — telefon in landscape: banda hartii mai mica;
 *   min-width:1920px           — ultrawide: scrim ancorat pe coloana centrata
 *                                de continut si etichete de harta marite.
 *
 * Nicio animatie sau tranzitie noua nu se declara aici, deci blocul
 * prefers-reduced-motion din route-du-vin.css ramane acoperitor.
 */


/* ==========================================================================
   01 · RITMUL SECTIUNILOR PE TELEFON (doar homepage: body.home)
   Padding-urile de desktop (70-140px) sunt prea mari sub 760px, iar titlurile
   au nevoie de o treapta fluida sub minimul lor din foaia originala.
   Valorile sunt continue cu cele de la 761px, ca sa nu existe salt vizibil.
   ========================================================================== */
@media (max-width: 760px) {
  body.home .section { padding: clamp(46px, 9vw, 70px) 0; }
  body.home .section--tight { padding-top: 0; }

  body.home .sec-head { margin-bottom: clamp(30px, 6.8vw, 52px); row-gap: 12px; }
  body.home .sec-head h2 { font-size: clamp(26px, 8vw, 32px); }

  body.home .nl-inner { padding: clamp(52px, 8.5vw, 70px) var(--pad); }
  body.home .nl-inner h2 { font-size: clamp(25px, 7.6vw, 30px); }

  body.home .weekly-note { margin-top: 16px; }
}


/* ==========================================================================
   02 · HERO PE BANDA — sub 1100px
   Extinde comutarea din route-du-vin.css (care se oprea la 999px) pana la
   1099.98px, acelasi prag cu BREAK=1100 din rdv-hero-map.js: intre 1000 si
   1100 textul ocupa prea mult din latime si punctele hartii se inghesuiau.
   Tot aici se repara si mostenirile din blocul "AJUSTARI" al foii originale,
   care curgeau peste mobil: padding-bottom de 120-160px pe hero-text si
   h1 blocat la 32px pe tableta.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero.is-full {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--ivory);
  }

  /* Inaltimea benzii urmareste latimea (hartile "full" au raport ~1.9),
     ca sa nu ramana fasii goale sus si jos; svh plafoneaza pe ecrane scunde.
     Prima declaratie e rezerva pentru browserele fara svh. */
  .hero.is-full .hero-media {
    position: relative;
    inset: auto;
    order: 0;
    width: 100%;
    min-height: 0;
    flex: 0 0 auto;
    height: clamp(190px, min(56vw, 48vh), 460px);
    height: clamp(190px, min(56vw, 48svh), 460px);
  }

  .hero.is-full .hero-scrim { display: none; }

  .hero.is-full .hero-text {
    position: relative;
    min-height: 0;
    color: var(--black);
    padding: clamp(30px, 5.5vw, 48px) var(--pad) clamp(38px, 7vw, 60px);
  }
  .hero.is-full .hero-text .wrap-inner { max-width: 640px; }

  .hero.is-full .eyebrow { color: var(--bordeaux); }
  .hero.is-full h1 {
    color: var(--black);
    font-size: clamp(30px, 24px + 2.6vw, 44px);
    margin: 16px 0 14px;
  }
  .hero.is-full h1 i { color: var(--bordeaux); }
  .hero.is-full .hero-p {
    color: var(--grey);
    max-width: 52ch;
    margin-bottom: clamp(22px, 4vw, 30px);
  }

  .hero.is-full .btn-outline { border-color: var(--black); color: var(--black); }
  .hero.is-full .btn-outline:hover { background: var(--black); color: #fff; }
  .hero.is-full .hero-cta .btn { min-height: 44px; }

  /* Consola caruselului: legenda la stanga, comenzile la dreapta, tinte de
     atingere de 44px pe sageti si pe buline (bulina desenata ramane ::after). */
  .hero.is-full .cd-hud {
    left: 12px;
    right: 12px;
    bottom: 12px;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
  }
  .hero.is-full .cd-cap { padding: 8px 12px; }
  .hero.is-full .cd-cap-tag { font-size: 9px; margin-bottom: 3px; }
  .hero.is-full .cd-cap-title { font-size: 14px; }
  .hero.is-full .cd-arrow { width: 44px; height: 44px; font-size: 20px; }
  .hero.is-full .cd-dot { width: 44px; height: 44px; }
  .hero.is-full .cd-dot.is-active { width: 44px; }

  /* In banda proprie viewBox-ul e fix, deci etichetele nu mai depind de --lbl. */
  .hero.is-full .cd-lbl { font-size: 12px; }
  .hero.is-full .cd-lbl.is-dest { font-size: 12.5px; }
  .hero.is-full .cd-map[data-map="lume"] .cd-lbl { font-size: 9px; }
  .hero.is-full .cd-map[data-map="lume"] .cd-lbl.is-dest { font-size: 10px; }
}

/* Telefon tinut culcat (~740x360): banda hartii nu are voie sa manance tot
   ecranul, iar textul incepe imediat sub ea. */
@media (max-width: 1099.98px) and (max-height: 480px) {
  .hero.is-full .hero-media {
    height: clamp(150px, 50vh, 240px);
    height: clamp(150px, 50svh, 240px);
  }
  .hero.is-full .hero-text { padding-top: 24px; padding-bottom: 34px; }
}


/* ==========================================================================
   03 · HERO SUPRAPUS PE ULTRAWIDE — de la 1920px in sus
   Zoom-ul hartii e plafonat in rdv-hero-map.js (SCALE_MAX); aici scrim-ul se
   reancoreaza pe coloana de continut centrata la --maxw (gradientul cu
   procente pure aluneca de pe text la 2560+), iar etichetele hartii cresc
   proportional cu --lbl, ca sa nu ramana marunte pe banda uriasa.
   ========================================================================== */
@media (min-width: 1920px) {
  .hero.is-full .hero-scrim {
    background:
      linear-gradient(90deg,
        rgba(12, 13, 15, .94) 0,
        rgba(12, 13, 15, .92) calc(50% - 660px),
        rgba(12, 13, 15, .86) calc(50% - 160px),
        rgba(12, 13, 15, .38) calc(50% - 10px),
        rgba(12, 13, 15, .10) calc(50% + 170px),
        rgba(12, 13, 15, 0) calc(50% + 330px),
        rgba(12, 13, 15, .22) 100%),
      linear-gradient(to top, rgba(12, 13, 15, .48), transparent 38%);
  }

  .hero.is-full .cd-lbl { font-size: calc(var(--lbl, 12.5px) * 1.18); }
  .hero.is-full .cd-lbl.is-dest { font-size: calc(var(--lbl, 12.5px) * 1.25); }
}


/* ==========================================================================
   04 · GRILA DE ORIGINI — auto-fit intre 320 si 820px
   Foaia originala sarea de la 2 coloane (<=820) direct la 1 (<=520): intre
   500 si 548 cardul singur pe rand avea 4/5 din ~470px latime, adica aproape
   600px inaltime. Cu minmax(240px,1fr) incap 2 coloane de la ~549px in sus,
   iar fasia ramasa cu un singur card lat primeste inaltime plafonata.
   ========================================================================== */
@media (max-width: 820px) {
  body.home .origin-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
  }
}
@media (min-width: 431px) and (max-width: 548px) {
  body.home .origin-card {
    aspect-ratio: auto;
    height: clamp(300px, 72vw, 420px);
  }
}


/* ==========================================================================
   05 · PICIORUL CARDULUI DE PRODUS — 561-1365px
   Sub 560px foaia originala aseaza deja pretul si starea pe randuri; intre
   561 si 1365 insa cardul are 225-340px si cele doua se calcau ("24-48h"
   rupt langa pret). Aceeasi asezare pe randuri, continua cu cea de sub 560.
   Peste 1366 cardul are ~290px si randul original incape la loc.
   ========================================================================== */
@media (min-width: 561px) and (max-width: 1365px) {
  body.home .prod-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  body.home .prod-avail { text-align: left; }
  body.home .prod-price { white-space: normal; }
}


/* ==========================================================================
   06 · BARA FIXA DE JOS — doar pana la 760px
   cc-menu.css o oprea la 1000px; pe tablete nu are sens, meniul e vizibil.
   ========================================================================== */
@media (min-width: 761px) {
  .bottom-nav { display: none; }
  body.cd--has-bottomnav { padding-bottom: 0; }
}

/* ==========================================================================
   Cardul de origine FARA imagine.
   Gradientul ::after din macheta e gandit peste o fotografie; fara ea, fundalul
   cardului ramane deschis si numele alb dispare. Pana la urcarea imaginilor de
   tara, cardul primeste un fundal inchis propriu — aceeasi familie cu subsolul.
   (Nu e scoped la body.home: acelasi card apare si pe Povestea vinului.)
   ========================================================================== */
.origin-card:not(:has(img)) {
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(168, 141, 103, .28), transparent 55%),
    linear-gradient(158deg, #2a1218 0%, #161011 58%, #0f0e0e 100%);
}
.origin-card:not(:has(img))::after {
  background: linear-gradient(to top, rgba(14, 13, 13, .55), rgba(14, 13, 13, 0) 62%);
}