/* ============================================================================
 * szablony_firmy.css — TRZY realne układy strony firmowej. WSPÓLNY dla osiedlo.pl
 * i otoauta.pl (oba symlinkują ten plik). Przepisane 2026-09-07 (właściciel:
 * „zmieniam szablony i nic się nie zmienia, tylko zdjęcie coraz większe").
 *
 * DLACZEGO POPRZEDNIA WERSJA NIE DZIAŁAŁA: celowała głównie w `.dlr-cover`, które
 * ISTNIEJE w komis.html (otoauta), ale NIE w agencja.html (osiedlo — tam baner to
 * `.agn-hero`). Na osiedlu zmieniała się więc tylko szerokość kafli ofert = „zdjęcie
 * coraz większe". Poza tym „magazyn" próbował `order` na siatce, co rozjeżdżało układ.
 *
 * TERAZ: klasa `firma-tpl--{klasyczny|galeria|kompakt}` na <body> (render-*.php).
 * Reguły wspólne celują w klasy obecne na OBU stronach: `.dlr-layout`, `.dlr-side`,
 * `.dlr-grid`, `.car-card`. Baner dostraja każdy portal osobno (`.agn-hero` / `.dlr-cover`).
 *
 *   • klasyczny — panel boczny + oferty obok (bazowy; bez nadpisań).
 *   • galeria   — oferty na CAŁĄ szerokość, duże kafle; panel schodzi pod spód, poziomo.
 *   • kompakt   — gęsta siatka małych kafli + węższy panel (dużo ofert naraz).
 * ============================================================================ */

/* ── 1. KLASYCZNY — stan bazowy stron; nic nie nadpisujemy (celowo). ──────── */

/* ── 2. GALERIA — oferty na całą szerokość, panel pod spodem poziomo. ─────── */
/* Reflow robimy na DZIECIACH `.dlr-layout` (oferty = <div>, panel = <aside class="dlr-side">).
   To NIE jest błąd starej wersji: tam `order` szło na siatkę wewnątrz 2-kolumnowego
   układu i wpychało ją w wąski slot. Tu przestawiamy właściwe elementy układu. */
.firma-tpl--galeria .dlr-layout { grid-template-columns: 1fr !important; }
.firma-tpl--galeria .dlr-layout > div { order: 1; }
.firma-tpl--galeria .dlr-layout > .dlr-side,
.firma-tpl--galeria .dlr-layout > aside { order: 2; position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; align-items: start; }
.firma-tpl--galeria .dlr-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) !important; gap: 20px; }
.firma-tpl--galeria .car-card__media { aspect-ratio: 3 / 2; }
/* pasek info opis+godziny (osiedlo) na całą szerokość */
.firma-tpl--galeria .agn-topinfo { grid-template-columns: 1fr 1fr !important; }
/* baner wyższy — zdjęcie firmy dostaje więcej miejsca */
.firma-tpl--galeria .agn-hero { padding-bottom: 128px; }
.firma-tpl--galeria .dlr-cover { min-height: 380px; }

/* ── 3. KOMPAKT — gęsta siatka małych kafli + węższy panel. ───────────────── */
.firma-tpl--kompakt .dlr-layout { grid-template-columns: 264px minmax(0, 1fr) !important; }
.firma-tpl--kompakt .dlr-grid { grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)) !important; gap: 10px; }
.firma-tpl--kompakt .car-card__media { aspect-ratio: 4 / 3; }
.firma-tpl--kompakt .car-card__body { padding: 10px 12px; }
.firma-tpl--kompakt .car-card__title { font-size: .93rem; -webkit-line-clamp: 1; }
.firma-tpl--kompakt .car-card__specs { font-size: .78rem; }
.firma-tpl--kompakt .agn-hero { padding: 30px 0 96px; }
.firma-tpl--kompakt .dlr-cover { min-height: 150px; }

/* ── Motywy ──────────────────────────────────────────────────────────────
   `auto` nie ustawia niczego — strona idzie za urządzeniem gościa.
   Dwa pozostałe wymuszają wygląd, bo firma bywa przygotowana pod jedno tło. */
.firma-motyw--jasny{--surface:#fff;--text-primary:#1a1d21;--text-secondary:#667085;
  --border-color:#e4e7ec;color-scheme:light}
.firma-motyw--ciemny{--surface:#17191d;--text-primary:#e8eaed;--text-secondary:#9aa1ac;
  --border-color:#2c3038;color-scheme:dark}

/* ── Telefon: każdy układ schodzi do wąskiej siatki, żeby zdjęcie było czytelne. ── */
@media (max-width: 767.98px){
  .firma-tpl--galeria .dlr-layout > .dlr-side,
  .firma-tpl--galeria .dlr-layout > aside { grid-template-columns: 1fr; }
  .firma-tpl--galeria .agn-topinfo { grid-template-columns: 1fr !important; }
  .firma-tpl--galeria .dlr-grid,
  .firma-tpl--kompakt .dlr-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
  .firma-tpl--galeria .dlr-cover { min-height: 220px; }
}
@media (prefers-reduced-motion:reduce){
  [class*="firma-tpl--"] *{transition:none !important;animation:none !important}
}