/* ════════════════════════════════════════════════════════════════════════════
   /magazine — grila de carduri pe ecrane înguste
   ════════════════════════════════════════════════════════════════════════════

   Strat de OVERRIDE, încărcat DUPĂ `public/css/legacy/stores-map-2026.css`
   (copie byte-cu-byte a foii de producție, care NU se atinge — ar rupe
   comparabilitatea cerută de docs/parity/08 §2). Se împinge cu `@push('head')`
   din `resources/views/shop/stores/index.blade.php`, deci se încarcă doar pe
   pagina care are grila.

   ── DEFECTUL, MĂSURAT (2026-08-30, Chrome headless, UA iPhone) ──────────────

   La 320 px, `/magazine` din port avea `documentElement.scrollWidth = 321` la
   `clientWidth = 320`: toate cele 26 de carduri `article.store-tile` stăteau la
   `x = 15`, `right = 321.17`. Adică gutieră stângă 15 px, gutieră dreaptă −1,17
   px — cardul atingea și depășea marginea ecranului. Producția, la aceeași
   lățime, e curată (`scrollWidth = 320`, card 300 px într-o pistă de 300).

   ⚠️ Cum se măsoară, ca să nu se piardă a doua oară: referința e
   `document.documentElement.clientWidth`, NU `window.innerWidth`. În emularea
   mobilă viewport-ul de layout se LĂRGEȘTE ca să încapă conținutul care
   depășește — la 320 `innerWidth` devine chiar 321 — deci un test scris pe
   `innerWidth` raportează „zero depășiri" exact pe defectul ăsta.

   ── CAUZA REALĂ (nu `box-sizing`) ──────────────────────────────────────────

   Raportul de audit pune vina pe `box-sizing: content-box` de pe `.store-tile`.
   Măsurat, nu ăsta e mecanismul: cardul e element de grilă întins pe pistă,
   deci cutia lui de bordură ajunge egală cu pista indiferent de `box-sizing`,
   iar contribuția lui de min-content include oricum padding-ul și bordura.

   Ce se întâmplă de fapt, la 320:

     `.stores-grid` are, sub `@media (max-width: 600px)` din foaia producției,
     `grid-template-columns: 1fr`. Minimul automat al unei piste `1fr` este
     `auto`, adică **dimensiunea de min-content a elementului** — iar
     `.store-tile` are `min-width: auto`. Min-content-ul cardului era
     1 + 14 (padding) + 122 (thumb-ul fix de 120 px + borduri) + 14 (gap)
     + 140,17 (min-content-ul lui `.tile-body`) + 14 + 1 = **306,17 px**,
     peste containerul de 290 px (320 − 2 × 15 din `.wrapper-full`).
     Pista a crescut la 306,17 și a împins cardul afară cu 1,17 px.

   Deci pista nu era „290 cu un card de 306" — pista ÎNSĂȘI devenise 306,17,
   fiindcă min-content-ul cardului o împingea. Consecința practică e alta decât
   sugerează diagnosticul din audit: `box-sizing: border-box` NU ar fi reparat
   nimic.

   ── REPARAȚIA ───────────────────────────────────────────────────────────────

   Două reguli structurale + trei valori luate din producție:

     1. `minmax(0, 1fr)` — pista nu mai poate depăși containerul.
     2. `min-width: 0` pe card — îi anulează minimul automat, ca pista să chiar
        poată coborî la 290. Fără asta, (1) singură nu ajunge: cardul ar depăși
        pista în loc de container, cu același rezultat pe ecran.
        Cele două împreună sunt garanția STRUCTURALĂ: nu contează cât de lung
        devine un text de magazin, cardul nu mai poate ieși din ecran.
     3. `padding: 12px`, `gap: 12px`, thumb `100 × 100` — NU sunt valori
        inventate: sunt exact cele din blocul `.stores-2026.mobile` al aceleiași
        foi de producție (`stores-map-2026.css:531-541`), adică ce randează
        producția pe mobil. Portul are o singură temă responsivă (decizie de
        proiect, docs/parity/08), deci clasa `.mobile` nu se aplică niciodată și
        blocul rămâne mort; îi consumăm valorile la breakpoint-ul echivalent.
        Efect măsurat la 320: coloana de text 124 → 150 px (producția: 162).

   Breakpoint-ul e 600 px, ACELAȘI pe care îl folosește deja foaia producției
   pentru grila pe o coloană — nu introducem un breakpoint nou. Peste 600 px
   nimic din fișierul ăsta nu se aplică: desktopul rămâne bit cu bit ce era.

   ── VERIFICAT ───────────────────────────────────────────────────────────────

   320 / 360 / 375 / 414 / 600 / 601 / 768 / 1280: zero elemente cu `x < 0` sau
   `right > clientWidth` pe `/magazine`, `scrollWidth == clientWidth` la toate
   lățimile ≤ 768. La 1280 geometria e neschimbată față de baseline ȘI identică
   cu producția (`scrollWidth = 1300`, shell-ul de 1300 px al temei desktop —
   comportament moștenit, nu regresie).
*/

@media (max-width: 600px) {

    /* Pista nu mai poate crește peste container. */
    .stores-2026 .stores-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Minimul automat al elementului de grilă, anulat — altfel pista rămâne
       ancorată în min-content-ul cardului. Valorile de padding/gap sunt cele
       din `.stores-2026.mobile` (foaia producției, :531). */
    .stores-2026 .store-tile {
        min-width: 0;
        padding: 12px;
        gap: 12px;
    }

    /* Thumb-ul de 120 px al variantei desktop lăsa 124 px coloanei de text la
       320. Producția folosește 100 px pe mobil (`stores-map-2026.css:536`). */
    .stores-2026 .store-tile .tile-media {
        width: 100px;
        height: 100px;
    }
}