/* ============================================================
   TERRA LEVIS - NAGŁÓWEK Z ORYGINALNYM CZARNYM LOGO
   Wersja publikacyjna zgodna z ostatnią instrukcją klienta:
   użyć oryginalnego czarnego znaku, nie złotej przeróbki.
   Ładowany PO theme-light.css.
   ============================================================ */

header.site{
  background:#fbf8f0;
  border-bottom:1px solid rgba(176,141,87,.42);
  box-shadow:0 2px 18px rgba(30,57,67,.12);
}

/* Oryginalny czarny znak w układzie poziomym. */
header.site .logo img{ height:auto !important; width:min(62vw,340px) !important; }
header.site .container{ padding-top:8px; padding-bottom:8px; }
@media(max-width:1100px){ header.site .logo img{ width:min(48vw,290px) !important; } }
/* poniżej 560 px wchodzi oryginalna wersja skrócona */

/* menu na jasnym tle */
header.site nav.main{ background:transparent; }
header.site nav.main a{ color:var(--ink-soft); }
header.site nav.main a:hover,
header.site nav.main a:focus-visible,
header.site nav.main a.active{ background:var(--cream-2); color:var(--green-deep); }
header.site nav.main a.cta{ background:var(--gold); color:#fff; }
header.site nav.main a.cta:hover{ background:var(--gold-soft); color:#1a2b21; }
header.site .nav-svc>a::after{ opacity:.8; }

/* rozwijane usługi zostaje jasne - czytelność listy.
   UWAGA: pozycje muszą mieć własny, ciemny kolor - inaczej dziedziczą kremowy
   z ciemnego nagłówka i są niewidoczne na białym tle. */
header.site .nav-svc .submenu{ background:#fff; border-color:rgba(176,141,87,.35); }
header.site .nav-svc .submenu a{ color:var(--ink) !important; font-weight:600; }
header.site .nav-svc .submenu a:hover,
header.site .nav-svc .submenu a:focus-visible{ background:var(--cream-2) !important; color:var(--green-deep) !important; }
header.site .nav-svc .submenu .col-h{ color:var(--gold-dark); }

/* Rozwijane „Usługi" na desktopie.
   Było: dwie kolumny (9 i 13 pozycji), panel wysoki na 584 px, a nagłówek
   „Trumny, urny, kwiaty i więcej" łamał się na dwie linie. Teraz trzy kolumny
   po 6-9 pozycji i krótki nagłówek „Asortyment".
   Panel kotwiczymy prawą krawędzią: „Usługi" leży w prawej części nagłówka,
   więc otwieranie w prawo wychodziło poza ekran na węższych monitorach. */
/* Strzałka przy „Usługi" była podwójna: jedna jako <span class="nav-caret"> w kodzie,
   druga z reguły .nav-svc>a::after w theme-light.css. Zostaje ta z kodu, bo obraca
   się przy otwartym akordeonie na telefonie. */
header.site .nav-svc > a::after{ content:none !important; }

@media(min-width:1025px){
  /* Panel wyjeżdża na CAŁĄ SZEROKOŚĆ ekranu, pod nagłówkiem.
     Punktem odniesienia jest header.site (ma position:sticky), dlatego
     .nav-svc musi tu mieć position:static - inaczej panel liczyłby się
     względem samej pozycji „Usługi" i zostałby wąskim dymkiem.
     Kolumny wyrównują się do kontenera strony przez padding liczony z 100vw. */
  header.site .nav-svc{ position:static; }
  header.site .nav-svc .submenu{
    position:absolute; left:0; right:0; top:100%;
    width:auto; min-width:0; max-width:none;
    border:0; border-top:1px solid rgba(176,141,87,.30);
    border-radius:0; background:#fff;
    box-shadow:0 24px 48px rgba(16,28,22,.20);
    padding:32px max(24px,calc((100vw - 1180px)/2)) 36px;
    grid-template-columns:repeat(3,minmax(0,1fr)) minmax(240px,300px);
    gap:2px 44px; align-items:start;
    /* Panel ma 491 px wysokości. Na niższym oknie wychodził poza ekran i przy
       próbie zjechania do dolnych pozycji kursor opuszczał menu, więc panel
       się zamykał. Teraz nigdy nie przekracza widocznego obszaru i przewija
       się w środku, a przewijanie nie „przecieka" na stronę pod spodem. */
    max-height:calc(100vh - 128px);
    overflow-y:auto; overscroll-behavior:contain;
  }
  /* MOSTEK NAJECHANIA.
     Między dolną krawędzią pozycji „Usługi" (111 px) a górną krawędzią panelu
     (125 px) było 14 px tła nagłówka. Kursor wędrujący w dół wpadał tam
     w .container, tracił najechanie i panel się zamykał, zanim dało się w niego
     wejść. Najbardziej dawało się we znaki w Safari. Niewidoczny pasek pod
     linkiem domyka tę lukę. Siedzi na <a>, nie na panelu, bo panel ma własne
     przewijanie i przyciąłby go. */
  header.site .nav-svc > a{ position:relative; }
  header.site .nav-svc > a::before{
    content:""; position:absolute; left:-14px; right:-14px; top:100%; height:22px;
  }
  /* otwarcie z klawiatury i po ustawieniu ogniska (Safari) */
  header.site .nav-svc:focus-within .submenu{ display:grid; }
  header.site .nav-svc .submenu .col-h{ white-space:nowrap; padding-top:14px; }
  header.site .nav-svc .submenu > div > .col-h:first-child{ padding-top:0; }
  header.site .nav-svc .submenu a{ padding:9px 10px; margin-left:-10px; font-size:1rem; }

  /* karta polecająca katalog - wypełnia czwartą kolumnę treścią, nie pustką */
  .svc-promo{
    display:block; padding:0 !important; border-radius:14px; overflow:hidden;
    background:var(--cream-2); border:1px solid var(--line);
    text-decoration:none; transition:.2s; margin-left:0 !important;
  }
  .svc-promo:hover{ box-shadow:0 14px 30px rgba(16,28,22,.16); transform:translateY(-2px); }
  .svc-promo img{ display:block; width:100%; height:132px; object-fit:cover; }
  .svc-promo .sp-tyt{
    display:block; padding:13px 15px 0; font-family:'Cormorant Garamond',serif;
    font-size:1.2rem; font-weight:600; color:var(--green-deep) !important;
  }
  .svc-promo .sp-txt{
    display:block; padding:5px 15px 0; font-size:.88rem; line-height:1.45;
    color:var(--ink-soft) !important; font-weight:400;
  }
  .svc-promo .sp-cta{
    display:block; padding:9px 15px 14px; font-size:.9rem; font-weight:700;
    color:var(--gold-dark) !important;
  }
}
@media(min-width:1025px) and (max-width:1150px){
  /* na ciasnym monitorze karta ustępuje miejsca listom */
  header.site .nav-svc .submenu{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .svc-promo{ display:none; }
}
@media(max-width:1024px){
  .svc-promo{ display:none; }   /* w akordeonie na telefonie karta byłaby balastem */
}

/* hamburger - wyraźna ikona SVG zamiast znaku ☰ (uwaga: był nieczytelny) */
header.site .burger{
  color:var(--green-deep); background:#fff; border:1px solid rgba(30,57,67,.22);
  border-radius:12px; width:52px; height:46px; display:none;
  align-items:center; justify-content:center; padding:0; cursor:pointer;
}
header.site .burger svg{ display:block; width:28px; height:28px; }
header.site .burger:hover,
header.site .burger[aria-expanded="true"]{ background:var(--gold); border-color:var(--gold); color:#fff; }
@media(max-width:1024px){ header.site .burger{ display:flex; } }

/* logo na małych ekranach: wersja bez dwuwierszowej nazwy (była nieczytelna).
   Wymiarowanie WYSOKOŚCIĄ - inaczej szeroki plik przycina się w wąskim nagłówku. */
@media(max-width:560px){
  header.site .logo{ min-width:0; flex:0 1 auto; }
  header.site .logo picture{ display:block; }
  header.site .logo img{ height:44px !important; width:auto !important; max-width:64vw; }
}

/* W stopce czarny oryginał otrzymuje jasne pole ochronne. */
footer.site .foot-brand > img[src*="terra-logo-klient"]{
  box-sizing:border-box;
  width:min(100%,300px) !important;
  height:auto !important;
  padding:12px 16px;
  background:#fff;
  border-radius:12px;
}

/* przycisk "Więcej o nas" i inne outline - widoczne na jasnym tle */
.btn-outline{
  background:#fff; color:var(--green-deep);
  border:2px solid var(--gold); box-shadow:0 6px 18px rgba(176,141,87,.18);
}
.btn-outline:hover{ background:var(--gold); color:#fff; }

/* ---- KARTY ZAUFANIA: ikona OBOK tytułu, nie nad nim ----
   Uwaga klienta: "za dużo miejsca zajmują te ikonki zegarka itd".
   Ikona stała w osobnym wierszu nad nagłówkiem, przez co każda karta rosła
   o wysokość ikony plus odstęp. Teraz ikona i tytuł dzielą pierwszy wiersz,
   opis idzie pod spodem na pełną szerokość. Ten sam układ na każdym ekranie. */
.why-card{
  display:grid; grid-template-columns:auto 1fr; column-gap:13px;
  align-items:center; padding:22px 22px;
}
.why-card .ic{
  grid-column:1; grid-row:1; margin:0 !important;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.why-card h3{ grid-column:2; grid-row:1; margin:0; }
.why-card p{ grid-column:1/-1; grid-row:2; margin:10px 0 0; }

@media(max-width:760px){
  .grid.g3{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .why-card{ padding:15px 14px; column-gap:10px; }
  .why-card .ic{ font-size:1.25rem; }
  .why-card .ic .ico{ width:20px; height:20px; }
  .why-card h3{ font-size:1.04rem; line-height:1.25; }
  .why-card p{ font-size:.92rem; line-height:1.45; margin-top:8px; }
}
@media(max-width:420px){ .grid.g3{ grid-template-columns:1fr; } }

/* Ten sam układ na kartach .card (Zaufanie, O nas, oddziały).
   Warunek :has() ogranicza regułę do kart zbudowanych z ikony, tytułu i opisu,
   więc kafelki ze zdjęciem zostają nietknięte. */
.card:has(> .ic + h3){
  display:grid; grid-template-columns:auto 1fr; column-gap:13px; align-items:center;
}
.card:has(> .ic + h3) > .ic{
  grid-column:1; grid-row:1; margin:0 !important;
  display:flex; align-items:center; justify-content:center;
}
.card:has(> .ic + h3) > h3{ grid-column:2; grid-row:1; margin:0; }
.card:has(> .ic + h3) > p{ grid-column:1/-1; grid-row:2; margin:10px 0 0; }

/* ---- MOBILE: ocena Google jako jeden zwarty pasek (moduł był bardzo wysoki) ---- */
@media(max-width:760px){
  .gbadge{
    padding:14px !important; display:grid;
    grid-template-columns:auto auto 1fr; gap:2px 10px;
    align-items:center; text-align:left !important;
  }
  .gbadge .glogo{ grid-row:span 2; width:36px; height:36px; }
  .gbadge .gword{ display:none; }                 /* logo Google mówi to samo */
  .gbadge .grate{ font-size:1.9rem !important; line-height:1; margin:0 !important; }
  .gbadge .gstars{ font-size:1.05rem; letter-spacing:1px; justify-self:start; }
  .gbadge .gcount{ grid-column:2/-1; font-size:.85rem; line-height:1.3; margin:0 !important; }
  .gbadge .btn{ grid-column:1/-1; margin-top:12px; padding:12px 16px; font-size:1rem; }
  .gbadge .gsmall{ grid-column:1/-1; margin-top:6px; font-size:.9rem; }
  .grev-card{ flex:0 0 86% !important; padding:16px 16px 14px !important; }
  .grev-card p{ font-size:.95rem; line-height:1.5; }
}

/* ============================================================
   MOBILE MENU - przebudowa (panel miał 1388 px przy oknie 812 px,
   a podmenu usług było zawsze rozwinięte). Teraz: panel z własnym
   przewijaniem + "Usługi" jako akordeon z dwiema kolumnami.
   ============================================================ */
@media(max-width:1024px){
  header.site nav.main{
    background:#16261d; border-bottom:1px solid rgba(176,141,87,.35);
    max-height:calc(100vh - 66px); overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:10px 12px 20px; gap:2px; box-shadow:0 18px 40px rgba(0,0,0,.4);
  }
  header.site nav.main a{ color:#f2eee2; }
  header.site nav.main > a{ padding:14px; font-size:1.05rem; border-radius:12px; }
  header.site nav.main > a + a{ border-top:1px solid rgba(242,238,226,.09); }

  /* "Usługi" - akordeon */
  header.site .nav-svc{ display:block; width:100%; }
  header.site .nav-svc > a{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px; font-size:1.05rem; border-radius:12px;
  }
  header.site .nav-svc > a::after{ content:none; }        /* stara strzałka - zastąpiona .nav-caret */
  header.site .nav-caret{ transition:transform .18s ease; opacity:.75; font-size:.9em; }
  header.site .nav-svc.is-open .nav-caret{ transform:rotate(180deg); }

  /* podmenu: domyślnie schowane, hover/focus nie rozwija (to nie desktop).
     !important konieczne - theme-light.css ma w bloku mobilnym `display:grid !important`. */
  header.site .nav-svc .submenu,
  header.site .nav-svc:hover .submenu,
  header.site .nav-svc:focus-within .submenu{ display:none !important; }
  header.site .nav-svc.is-open .submenu{
    display:grid !important; grid-template-columns:1fr 1fr; gap:2px 8px;
    position:static; min-width:0; width:100%;
    background:rgba(255,255,255,.06); border:1px solid rgba(242,238,226,.10);
    box-shadow:none; border-radius:12px; padding:6px; margin:2px 0 8px;
  }
  header.site .nav-svc .submenu > div{ display:contents; }  /* kolumny z desktopu - rozpłaszczone */
  header.site .nav-svc .submenu a{
    color:#e9e4d6 !important; background:none !important;
    font-size:.97rem; font-weight:600; padding:11px 8px; white-space:normal; line-height:1.25;
  }
  header.site .nav-svc .submenu a:active{ background:rgba(255,255,255,.12) !important; }
  header.site .nav-svc .submenu .col-h{
    grid-column:1 / -1; padding:11px 8px 3px; margin:0;
    color:var(--gold-soft); font-size:.8rem; letter-spacing:1.4px;
  }
}
@media(max-width:380px){
  header.site .nav-svc.is-open .submenu{ grid-template-columns:1fr; }
}

/* Wyrazniejszy podzial kategorii uslug na stronie glownej (rozmowa 28.07).
   Tytuly grup byly ledwie wieksze od nazw uslug w kafelkach, przez co nie
   pelnily roli drogowskazu - stad wyrazny skok wielkosci. */
.svc-group{ margin-top:3.2rem; padding-top:2.2rem; border-top:1px solid var(--line); }
.svc-group:first-of-type{ margin-top:1rem; padding-top:0; border-top:0; }
.svc-group h3{
  font-size:2.05rem; line-height:1.15; margin-bottom:1.4rem;
  color:var(--green-deep); letter-spacing:.2px;
}
.svc-group h3 .ico,.svc-group h3 svg{ width:1.05em; height:1.05em; }
@media(max-width:760px){ .svc-group h3{ font-size:1.68rem; } .svc-group{ margin-top:2.4rem; padding-top:1.7rem; } }

/* oznaczenie modelu w katalogu (z nazw plików klienta) */
.gallery figcaption .model{
  display:inline-block; margin-left:6px; padding:1px 8px;
  background:var(--cream-2); border:1px solid var(--line); border-radius:999px;
  font-size:.82em; font-weight:700; color:var(--gold-text); letter-spacing:.2px;
}

/* Sekcja "Kto odbierze Państwa telefon" - zespół per punkt (prośba klienta 28.07) */
.people{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.person{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.person .pimg img{ width:100%; height:auto; display:block; aspect-ratio:1/1; object-fit:cover; }
.person .pbody{ padding:14px 16px 16px; }
.person .pbody b{ display:block; font-family:'Cormorant Garamond',serif; font-size:1.35rem; color:var(--green-deep); }
.person .pwhere{ display:block; font-size:.86rem; color:var(--gold-text); font-weight:700; margin:2px 0 6px; }
.person .pbody p{ font-size:.94rem; line-height:1.45; margin:0 0 10px; color:var(--ink-soft); }
.person .pphone{ display:inline-flex; align-items:center; gap:8px; font-weight:800; color:var(--green-deep); }
@media(max-width:900px){ .people{ grid-template-columns:1fr 1fr; gap:12px; } .person .pbody{ padding:12px; } }
@media(max-width:430px){ .person .pbody b{ font-size:1.2rem; } .person .pbody p{ font-size:.9rem; } }

/* Lista zakresu opieki w dwóch kolumnach - w jednej zajmowała pół ekranu. */
.checks.dwie{ grid-template-columns:1fr 1fr; column-gap:34px; }
@media(max-width:760px){ .checks.dwie{ grid-template-columns:1fr; } }

/* Karty ze zdjęciem zamiast pustych ramek z samym tekstem
   (uwaga Dawida: "te ramki są martwe"). */
.ic-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:2.4rem; }
.ic-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:box-shadow .22s, transform .22s;
}
.ic-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.ic-img{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--cream-2); }
.ic-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.ic-card:hover .ic-img img{ transform:scale(1.05); }
.ic-img::after{
  content:""; position:absolute; inset:auto 0 0 0; height:46%;
  background:linear-gradient(to top,rgba(16,28,22,.28),transparent);
}
.ic-body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.ic-body h3{ font-size:1.28rem; color:var(--green-deep); margin:0 0 9px; line-height:1.25; }
.ic-body p{ color:var(--ink-soft); font-size:1rem; line-height:1.6; margin:0 0 16px; }
.ic-link{
  margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  font-weight:700; color:var(--gold-dark); border-bottom:1px solid transparent;
}
.ic-link span{ transition:transform .2s; }
.ic-link:hover{ color:var(--green-deep); border-bottom-color:var(--gold); }
.ic-link:hover span{ transform:translateX(4px); }
@media(max-width:980px){ .ic-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:640px){ .ic-grid{ grid-template-columns:1fr; gap:16px; } .ic-body{ padding:16px 18px 18px; } }