/* ==========================================================================
   HOMEPAGE PE MOBIL — strat de corecții peste stilul producției
   ==========================================================================

   Se încarcă DOAR de pe homepage, cu `@push('head')` din
   `resources/views/shop/home/index.blade.php`, deci iese în `@stack('head')`
   din `shop/layout.blade.php` — adică DUPĂ `shop-responsive.css` și DUPĂ
   `shop-product-card-mobile.css`. Nu are nevoie de nicio linie în layout.

   TOT fișierul e într-un singur `@media (max-width: 767px)`. Breakpoint-ul e
   767, nu 768: la 768px desktopul trebuie să rămână bit-identic (verificat cu
   geometrie per-element la 1280 / 1024 / 768).

   ── CE REPARĂ, ȘI DE CE (măsurat la 375px, UA de iPhone, nu dedus) ─────────

   Homepage-ul portat avea 7630px față de 2751px în producție (2,77×). Cauza NU
   erau cardurile de produs. Descompunerea pe blocuri arată așa:

       banner (slider)                216
       bandă animată (scrl_txt)        40
       „Ultimele produse" (tăiat)     816   ← grila interioară avea 1642
       text SEO de întâmpinare        642
       PLĂCILE DE MAGAZINE           5430   ← 71% din pagină
       antet 120 + subsol 292

   Cele două defecte reparate aici sunt de AȘEZARE, nu de conținut: niciun
   magazin, niciun link și niciun cuvânt nu dispare din pagină.

   1. PLĂCILE DE MAGAZINE — o singură coloană din cauza unei grile fixe.
      `modules/store.blade.php` portează 1:1 stilul inline al producției:

          .sts { grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); }
          .st  { width: 188px; height: 188px; margin: 10px auto; }
          .st img { width: 188px; height: 188px; }

      Pe desktop `col-main` e destul de lat ca `auto-fill` să pună 5-6 coloane.
      La 375px conținutul are 323px, deci `minmax(188px, …)` încape O SINGURĂ
      dată: 26 de plăci × 208px = 5430px, fiecare placă de 188px centrată
      într-o coloană de 323px (135px de gol pe fiecare rând).

      Aici placa devine fluidă și pragul lui `auto-fill` coboară la 140px, deci
      numărul de coloane crește cu ecranul: 2 la 320-480px, 3 la 600px, 4 la
      767px. Nu coborâm sub 2 coloane — cel mai lung nume e „Ramnicu Valcea"
      (14 caractere), iar la 3 coloane pe 375px fotografiile de vitrină ar
      ajunge la ~101px. Nici peste 188px placa nu crește: e dimensiunea
      originalului, iar fără plafon blocul ieșea mai înalt decât azi la 480px.
      Toate cele trei praguri sunt măsurate A/B, nu presupuse — detaliile, în
      comentariile de la fiecare regulă.

   2. „ULTIMELE PRODUSE" — tăietură prin mijlocul unui card.
      `latest_products.blade.php` portează inline-ul producției
      `max-height: 68em; overflow: hidden`. Pe desktop cele 10 carduri intră pe
      2 rânduri de câte 5 (~780px), deci clamp-ul de 816px NU se activează
      niciodată: intenția lui în producție e „arată două rânduri".

      Pe mobil grila are 2 carduri pe rând ⇒ 5 rânduri × 328px = 1642px, iar
      816px cad FIX PE MIJLOCUL rândului 3: se vedeau două jumătăți de card
      (poză tăiată, fără nume, fără preț, fără buton). Verificat în captură.

      Aici ducem tăietura pe linia de rând, păstrând intenția originalului:
      2 rânduri COMPLETE. Nu punem o valoare fixă în px pe `max-height` — cele
      10 produse se schimbă zilnic și un card cu nume pe 3 rânduri ar aduce
      înapoi tăietura. Ascundem rândurile de după al doilea, deci limita se
      mută singură cu înălțimea reală a cardurilor.

   3. TEXTUL SEO — doar spațiere, zero schimbare de tipografie.
      Marginile lui `legacy/home.css` (25px deasupra unui h3, 20px sub el,
      20px sub fiecare h4) sunt ritm de desktop. Pe telefon costă 66px fără să
      adauge lizibilitate. Font-size, culoare, `text-align: justify` și
      bordura roșie de sub h3 rămân EXACT cum sunt.

   ── CE NU FACE ACEST FIȘIER ───────────────────────────────────────────────

   Nu ascunde niciun modul. Tema mobilă a producției
   (`View/Themed/Mobile/Home/index.ctp` + `Layouts/2columns-left.ctp`) nu are
   deloc poziții de module — randează carusel + arborele de categorii și atât.
   Deci pe telefon producția NU afișează: ultimele produse, textul SEO, plăcile
   de magazine, banda animată. Cifrele lor sunt în raport; ștergerea lor e o
   decizie de owner, nu una de foaie de stil.
   ========================================================================== */

@media (max-width: 767px) {

    /* ── 1. Plăcile de magazine: fluide, două pe rând ───────────────────── */

    /* Bate `.sts` (0,1,0) din `<style>`-ul inline al modulului.

       `minmax(140px, …)` în loc de `minmax(188px, …)`, NU un număr fix de
       coloane: între 420 și 767px `auto-fill` cu 188px dă deja 2-3 coloane, iar
       o valoare fixă de 2 ar face blocul MAI ÎNALT acolo (măsurat la 767px:
       3 coloane azi → 2 ar fi însemnat +2800px). Cu 140px pragul se mută în jos
       peste tot: 2 coloane la 375-480px, 3 la 600px, 4 la 767px. */
    .col-main .box-content.sts {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }

    /* Placa se micșorează cu coloana, dar NU crește peste cei 188px ai
       originalului: `1fr` fără plafon o umfla acolo unde numărul de coloane
       rămânea același, iar blocul ieșea mai înalt decât azi (măsurat la 480px:
       2 coloane în ambele stări, placă 188 → 209, +133px). `margin: 0 auto` e
       centrarea din original, păstrată pentru coloanele mai late de 188px;
       spațierea verticală o dă acum `gap`. */
    .col-main .box-content.sts .st {
        width: auto;
        max-width: 188px;
        height: auto;
        margin: 0 auto;
    }

    /* `img` era `inline-block` într-un `<a>` inline: pe o placă cu înălțime
       automată asta ar adăuga spațiul de sub linia de bază (~4px/placă) și ar
       decala titlul absolut. */
    .col-main .box-content.sts .st > a {
        display: block;
    }

    .col-main .box-content.sts .st img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    /* ── 2. „Ultimele produse": tăietura pe linia de rând ───────────────── */

    /* Clamp-ul inline (`max-height: 68em; overflow: hidden`) RĂMÂNE NEATINS —
       nu-l anulăm. Scoatem doar cardurile care oricum nu încăpeau în el, ca
       tăietura să cadă între rânduri, nu prin mijlocul unui card.

       De ce nu `max-height: none`: la 767px cardul e `calc(50% - 10px)` plus
       10px de margine orizontală, iar suma iese cu ~1px peste container, deci
       acolo grila e pe UN singur rând (defect preexistent în
       `shop-responsive.css`, fișier pe care nu-l ating). Cu clamp-ul anulat,
       cele 4 carduri rămase ar face 1061px — MAI MULT decât cei 816px de azi.
       Păstrându-l, la 767px randarea e identică cu cea de azi (aceiași primi
       816px), iar acolo unde grila chiar are 2 coloane cutia scade sub clamp și
       se termină curat. Verificat A/B la 320/360/375/419/420/480/767. */
    .col-main .box.home-latest .product-grid > .product:nth-child(n + 5) {
        display: none;
    }

    /* ── 3. Textul SEO: ritm vertical de telefon ────────────────────────── */

    /* Specificitatea ține pasul cu `legacy/home.css`
       (`.box .home-content > div > .col-wide > div > h3`). */
    .col-main .box .home-content > div > .col-wide > div > h3 {
        margin-top: 12px;
        margin-bottom: 10px;
    }

    .col-main .box .home-content > div > .col-wide > div > h4 {
        margin-bottom: 10px;
    }
}

/* ==========================================================================
   Ecrane foarte înguste (≤419px): două coloane de magazine, forțat
   ==========================================================================
   Sub ~342px lățime de ecran conținutul are mai puțin de 290px, deci
   `minmax(140px, 1fr)` nu mai încape de două ori și `auto-fill` cade pe o
   singură coloană — iar placa, acum fluidă, ar deveni cât ecranul: la 320px
   asta ar însemna 26 × 278px = 7228px, adică MAI RĂU decât cei 5408px de azi.
   Aici forțăm două coloane; nimic altceva.
   ========================================================================== */
@media (max-width: 419px) {
    .col-main .box-content.sts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}