/*
 * shop-product-card-mobile.css — CARDUL DE PRODUS PE TELEFON
 * ============================================================================
 *
 * Strat propriu al portului, peste `public/css/legacy/products.css` (copia
 * byte-cu-byte a foii producției) și peste `public/css/shop-responsive.css`.
 * NU rescrie niciuna dintre ele: se încarcă DUPĂ și corectează, țintit, doar
 * zona de imagine a cardului din `.product-grid`.
 *
 * TOT fișierul e într-un singur `@media (max-width: 767px)`. Breakpoint-ul
 * proiectului e 767 (nu 768): la 768px, 1024px și 1280px nu se potrivește
 * NIMIC de aici, iar desktopul rămâne byte-identic cu ce era înainte.
 *
 * Se aplică pe TOATE paginile cu grilă, fiindcă grila e una singură
 * (`resources/views/shop/partials/product-grid.blade.php`): categorie,
 * căutare, căutare pe tag-uri, oferte, ultimele produse, favorite, „Îți mai
 * recomandăm" de pe pagina de produs, „Produse recomandate" din articol și
 * widget-ul „Ultimele produse" de pe homepage.
 *
 * ── DE UNDE VINE DEFECTUL (măsurat, nu presupus) ────────────────────────────
 *
 * `legacy/products.css:257-263` fixează containerul imaginii:
 *
 *     .product-grid > div > .image { height: 16em; margin: 0 8px 10px 8px; }
 *
 * `16em` la `font-size: 12px` pe `body` = 192px EXACT. Nu e o cifră aleasă
 * pentru grilă: e înălțimea NATURALĂ a miniaturii pe care o cere portul,
 * `<id>/<slug>_210_192.png` — 210×192. Pe desktop cardul are 19.5em (234px)
 * lățime, deci imaginea de 210px intră NEREDIMENSIONATĂ și umple fix cei 192px.
 * Containerul și poza coincid, iar regula pare inofensivă.
 *
 * Pe telefon nu mai coincid. `shop-responsive.css:252-256` (blocul „grila cade
 * la 2 coloane") micșorează poza ca să încapă în cardul de 50%:
 *
 *     @media (max-width: 767px) { .product-grid .image img { width: 100%; height: auto; } }
 *
 * Cardul ajunge la 162,5px, `.image` (minus `margin: 0 8px`) la 144,5px, deci
 * poza la 144,5 × 132,1 px — dar containerul RĂMÂNE la 192px, fiindcă `16em`
 * nu depinde de lățime. Rezultatul măsurat la 375px: **60px de gol alb sub
 * fiecare poză**, pe toate cele 60 de carduri.
 *
 * Deci: înălțime fixă, nu `object-fit` și nu raport de aspect. `object-fit` nu
 * are niciun rol — poza e `display: inline` fără dimensiuni impuse, se
 * redimensionează după raportul ei propriu.
 *
 * ── CE FACE FIȘIERUL ────────────────────────────────────────────────────────
 *
 *   1. scoate înălțimea fixă: containerul se strânge pe poză (`height: auto`);
 *   2. scoate marginile orizontale de 8px: poza ocupă toată lățimea utilă a
 *      cardului, ca în producție (159,5px acolo, 160,5px la noi);
 *   3. scoate spațiul de linie de bază de sub poză (`display: block`), altfel
 *      containerul ar fi cu ~4px mai înalt decât poza;
 *   4. aliniază marginea de deasupra butonului „Adaugă în coș" cu valoarea
 *      temei mobile a producției (14px→8px) și, în același timp, RECENTREAZĂ
 *      butonul: `margin: 14px 8px 0 14px` îl împinge 6px spre dreapta.
 *
 * ── CE NU POATE FACE CSS-UL (rămâne pentru PHP) ─────────────────────────────
 *
 * Poza noastră iese 160,5 × 146,7 px, a producției 159,5 × 159,5. Lățimea e
 * aceeași; înălțimea diferă fiindcă DIFERĂ FIȘIERUL CERUT:
 *
 *     portul     …/products/26028/anais-body-forca-s-m-1_210_192.png   (210×192)
 *     producția  …/products/26028/anais-body-forca-s-m-1_300_300.png   (300×300)
 *
 * `Themed/Mobile/Elements/product-grid.ctp:89` cere `ImageUrl(..., 300, 300)`;
 * tema desktop cere 210×192, iar portul a preluat varianta desktop. Un `src`
 * nu se schimbă din CSS. Nu am forțat un pătrat cu `aspect-ratio` +
 * `object-fit: contain`: poza reală ar rămâne tot de 146,7px, doar cu 13px de
 * bandă albă pe lângă — adică fix golul pe care îl reparăm. Iar `cover` ar
 * TĂIA din produs, ceva ce producția nu face (sursa ei e deja pătrată).
 *
 * ── CE NU ATINGE, DELIBERAT ─────────────────────────────────────────────────
 *
 *   - `.rating-row` — vezi nota lungă din raport: tema mobilă a producției
 *     ÎL RANDEAZĂ (`Themed/Mobile/Elements/product-grid.ctp:114-122`,
 *     `mobile/css/products.css:26-35`), la 14,3px + 6px de margini = 20,3px.
 *     Al nostru costă 20,8px. Ascunderea lui ne-ar duce SUB producție, adică
 *     ar fi o divergență, nu o reparație.
 *   - `H5` și `DIV.price` — instrucțiune explicită de owner.
 *   - orice regulă peste 767px.
 */

@media (max-width: 767px) {

    /* 1+2. Containerul imaginii: fără înălțime fixă, pe toată lățimea utilă.
       Marginea de jos de 10px se PĂSTREAZĂ — cu ea, zona de imagine iese la
       156,7px, adică practic exact cei 159,5px ai producției. */
    .product-grid > div > .image {
        height: auto;
        margin-left: 0;
        margin-right: 0;
    }

    /* 3. Ancora e `inline` în original; ca bloc, nu mai lasă spațiu de linie de
       bază sub poză și nu mai generează o casetă-fantomă de 14px. */
    .product-grid > div > .image > a {
        display: block;
    }

    .product-grid .image img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
    }

    /* 4. `legacy/products.css:389-392` are `margin: 14px 8px 0 14px` — gândit
       pentru cardul lat de desktop, dar asimetric: pe telefon butonul iese
       6px descentrat. Tema mobilă a producției folosește `8px 8px 0`
       (măsurat: butonul ei are 143,5px pe un card de 159,5px, centrat). */
    .product-grid .product-grid-add-to-cart {
        margin: 8px 8px 0 8px;
    }
}