/* Jedna szata sleepzon i domen miejskich (plan docs/superpowers/plans/2026-11-07-jednolita-szata.md).
   Wygląd elementów wspólny dla wszystkich stron; wzorcem jest lista hoteli, wyjątek: FAQ w dwóch kolumnach od 992 px wszędzie.
   Klasy sz-* to nazwy docelowe. Stare klasy stron dopisujemy obok w :is(...) przy migracji danej strony, a ich reguły wyglądu
   usuwamy z arkusza strony w tym samym kroku. Arkusze stron (home.css, country.css, list.css, hotel.css) trzymają tylko układ.
   Arkusz ładuje się PRZED arkuszem strony (po krytycznym CSS): układ strony wygrywa z wyglądem domyślnym przy tej samej specyficzności. */

:root{
--sz-text:#171717;--sz-text-2:#454545;--sz-muted:#526277;--sz-heading:#171717;--sz-ink:#172435;
--sz-blue:#0d6efd;--sz-blue-hover:#0b5ed7;--sz-blue-text:#075bc5;--sz-blue-soft:#edf5ff;--sz-blue-line:#0071e8;--sz-focus:#076bff;
--sz-border:#e2e5ea;--sz-border-card:#e9ebef;--sz-border-control:#c7d3e3;--sz-border-button:#bacce3;--sz-border-pill-small:#b7c6d8;--sz-border-tile:#dce3ed;--sz-row-line:#eceef2;
--sz-info-border:#b5cbe5;--sz-info-bg:#f6f9fd;--sz-surface:#f7f8fa;
--sz-radius-card:14px;--sz-radius-box:10px;--sz-radius-control:8px;--sz-radius-pill:999px;
--sz-section-space:80px;--sz-head-gap:12px;--sz-lead-gap:18px
}

/* Przeniesione z list.css (zadanie 3, 2026-11-07): baza FAQ i ramki sekcji, ta sama co w arkuszach stron (#cp:is(...)).
   Stoi przed regułami wzorca, żeby FAQ w dwóch kolumnach (niżej) wygrywało przy tej samej specyficzności. */
#cp:is(.country-page,.home-page,.hotel-page,.hotel-list-page) :is(.country-section__body,.home-section__body,.hotel-section__body,.list-section__body){box-sizing:border-box;min-width:0;width:100%;margin-top:20px;padding:28px 32px 34px;border:1px solid #e9ebef;border-radius:14px;background:#fff}
#cp:is(.country-page,.home-page,.hotel-page,.hotel-list-page) :is(.country-section__body,.home-section__body,.hotel-section__body,.list-section__body) a:where(:not(.hotel-showcase-card__link)){color:var(--country-text);text-decoration:none;text-underline-offset:3px}
#cp:is(.country-page,.home-page,.hotel-page,.hotel-list-page) :is(.country-section__body,.home-section__body,.hotel-section__body,.list-section__body) a:where(:not(.hotel-showcase-card__link)):hover{color:#000;text-decoration:underline}
#cp:is(.country-page,.home-page,.hotel-page,.hotel-list-page) .home-faq__list{max-width:none;gap:0}
#cp:is(.country-page,.home-page,.hotel-page,.hotel-list-page) .home-faq__item{border:0;border-top:1px solid var(--country-border);border-radius:0}
#cp:is(.country-page,.home-page,.hotel-page,.hotel-list-page) .home-faq__item:last-child{border-bottom:1px solid var(--country-border)}
#cp:is(.country-page,.home-page,.hotel-page,.hotel-list-page) .home-faq__question{padding:18px 32px 18px 0;color:var(--country-heading);font-size:1.0625rem;font-weight:700;line-height:1.5}
#cp:is(.country-page,.home-page,.hotel-page,.hotel-list-page) .home-faq__question::after{right:0}
#cp:is(.country-page,.home-page,.hotel-page,.hotel-list-page) .home-faq__answer{padding:0 0 20px}
#cp:is(.country-page,.home-page,.hotel-page,.hotel-list-page) .home-faq__answer p{margin:0;color:var(--country-text);font-size:1rem;line-height:1.5}
#cp:is(.country-page,.home-page,.hotel-list-page) .home-faq__answer a{color:var(--country-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.home-faq{background:#fff;border:1px solid #d7dde6;border-radius:5px;box-shadow:none;margin:28px 0;padding:26px 28px}
.home-faq>.main-title{border-bottom:1px inset #e7e7e7;color:#171717;font-size:22px;font-weight:700;line-height:1.3;margin:0 0 24px;padding-bottom:10px}
.home-faq__list{display:flex;flex-direction:column;gap:10px}
.home-faq__item{background:#fff;border:1px solid #d7e0ea;border-radius:5px;overflow:hidden}
.home-faq__question{cursor:pointer;list-style:none;padding:16px 44px 16px 18px;position:relative;font-weight:600;color:#171717;font-size:15px;line-height:1.35}
.home-faq__question::-webkit-details-marker{display:none}
.home-faq__question::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:20px;font-weight:400;color:#64748b;line-height:1}
.home-faq__item[open] .home-faq__question::after{content:"-"}
.home-faq__answer{padding:0 18px 16px}
.home-faq__answer p{margin:0;color:#334155;font-size:14px;line-height:1.55}
@media (max-width:767px){
#cp:is(.country-page,.home-page,.hotel-page,.hotel-list-page) :is(.country-section__body,.home-section__body,.hotel-section__body,.list-section__body){padding:16px 12px}
.home-faq{box-sizing:border-box;width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:22px 20px;border-radius:0}
.home-faq>.main-title{font-size:20px;margin-bottom:20px}
.home-faq>.main-title{padding-left:8px;padding-right:8px}
}

/* Sekcja: nagłówek h2, tekst pod nim, ramka treści */
.sz-section{margin:0 0 var(--sz-section-space)}
.sz-section>h2,.sz-h2{margin:0 0 var(--sz-head-gap);padding:0;border:0;color:var(--sz-heading);font-size:34px;font-weight:700;line-height:1.2;letter-spacing:-.02em}
.sz-lead{margin:0 0 var(--sz-lead-gap);color:var(--sz-text-2);font-size:16px;line-height:1.5}
.sz-box{box-sizing:border-box;padding:22px 24px;border:1px solid var(--sz-border);border-radius:var(--sz-radius-card);background:#fff}
.sz-card{box-sizing:border-box;border:1px solid var(--sz-border-card);border-radius:var(--sz-radius-card);background:#fff;overflow:hidden}
.sz-info{box-sizing:border-box;padding:14px 16px;border:1px solid var(--sz-info-border);border-radius:var(--sz-radius-box);background:var(--sz-info-bg)}

/* Tekst */
.sz-h3{margin:0;color:var(--sz-heading);font-size:20px;font-weight:700;line-height:1.4}
.sz-text{color:var(--sz-text);font-size:15px;line-height:1.53}
.sz-text-2{color:var(--sz-text-2);font-size:15px;line-height:1.6}
.sz-note{color:var(--sz-muted);font-size:13px;line-height:1.54}
:is(.sz-section,.sz-box,.sz-card,.sz-info,.sz-text,.sz-text-2,.sz-note,.sz-lead) :is(strong,b){color:inherit;font-weight:700}
:is(.sz-text,.sz-text-2,.sz-lead,.sz-note,.sz-table) a:not([class]){color:var(--sz-blue-text);text-decoration:underline;text-underline-offset:2px}

/* Przyciski: drugorzędny (domyślny) i główny */
.sz-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 12px;border:1px solid var(--sz-border-button);border-radius:var(--sz-radius-control);background:#fff;color:var(--sz-blue-text);font:inherit;font-size:14px;font-weight:400;line-height:1.5;text-decoration:none;white-space:nowrap;cursor:pointer}
.sz-btn:hover{border-color:var(--sz-blue-line);background:var(--sz-blue-soft);color:var(--sz-blue-text);text-decoration:none}
.sz-btn--primary{min-height:44px;padding:10px 15px;border-color:var(--sz-blue);background:var(--sz-blue);color:#fff;font-size:15px;font-weight:600}
.sz-btn--primary:hover{border-color:var(--sz-blue-hover);background:var(--sz-blue-hover);color:#fff}
:is(.sz-btn,.sz-pill,.sz-tile,.sz-more,.sz-tabs button):focus-visible{outline:3px solid var(--sz-focus);outline-offset:2px}

/* Pigułki: wybór (filtry szybkie, sortowanie, zakładki) i mała (np. „Mapa”) */
.sz-pill{box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:7px 14px;border:1px solid var(--sz-border-control);border-radius:var(--sz-radius-pill);background:#fff;color:var(--sz-ink);font:inherit;font-size:14px;font-weight:400;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer}
.sz-pill:hover{border-color:var(--sz-focus)}
.sz-pill:is([aria-pressed=true],[aria-selected=true],.is-on){border-color:var(--sz-blue-line);background:var(--sz-blue-soft);color:var(--sz-blue-text);font-weight:600}
.sz-pill--small{min-height:30px;padding:5px 10px;border-color:var(--sz-border-pill-small);color:#1e1e1e;font-size:12px;font-weight:700}

/* Kafelek wyboru (np. wyposażenie) */
.sz-tile{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:62px;padding:10px 12px;border:1px solid var(--sz-border-tile);border-radius:var(--sz-radius-control);background:var(--sz-surface);color:var(--sz-text);font:inherit;font-size:16px;font-weight:600;line-height:1.3;text-align:left;cursor:pointer}
.sz-tile:is([aria-pressed=true],.is-on){border-color:var(--sz-blue-line);background:var(--sz-blue-soft)}

/* „Pokaż więcej”: jeden wygląd dla list, kart i miejscowości */
.sz-more{display:inline-flex;align-items:center;gap:6px;padding:6px 0;border:0;background:none;color:var(--sz-blue-text);font:inherit;font-size:14px;font-weight:400;line-height:1.5;cursor:pointer}
.sz-more:hover{text-decoration:underline}

/* Rozwijane wyjaśnienie („Jak liczymy…”) */
.sz-explain>summary{color:var(--sz-text);font-size:14px;font-weight:500;line-height:1.5;cursor:pointer}
.sz-explain>p,.sz-explain>div{margin:8px 0 0;color:var(--sz-text-2);font-size:14px;line-height:1.6}

/* Zakładki (cenniki, wyposażenie): pigułki w rzędzie */
.sz-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0;list-style:none}

/* Tabela */
.sz-table{width:100%;margin:0;border-collapse:collapse;color:var(--sz-text);font-size:15px;font-variant-numeric:tabular-nums}
.sz-table :is(th,td){padding:12px 14px;border-bottom:1px solid var(--sz-row-line);text-align:left;vertical-align:middle}
.sz-table thead th{background:var(--sz-surface);color:var(--sz-muted);font-size:14px;font-weight:600}
.sz-table tbody th{font-weight:600}
.sz-table tbody tr:last-child :is(th,td){border-bottom:0}

/* Karty miejsc (np. „Dokąd jedziesz?”, miasta kraju): ramka karty, litera w kwadracie, nazwa, rodzaj, liczba */
.sz-dest-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.sz-dest{box-sizing:border-box;position:relative;min-width:0;min-height:68px;margin:0;padding:12px 12px 12px 68px;border:1px solid var(--sz-border-card);border-radius:var(--sz-radius-card);background:#fff;color:var(--sz-muted);font-size:13px;line-height:1.35}
.sz-dest::before{content:attr(data-initial);position:absolute;top:12px;left:12px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--sz-radius-box);background:linear-gradient(135deg,#dbe9fb,#b9d4f7);color:var(--sz-blue-line);font-size:17px;font-weight:700}
.sz-dest:hover{border-color:var(--sz-blue-line)}
.sz-dest a{display:block;overflow:hidden;color:var(--sz-ink);font-size:15px;font-weight:700;line-height:1.3;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
.sz-dest a::after{content:'';position:absolute;inset:0;border-radius:var(--sz-radius-card)}
.sz-dest small{display:block;overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}

/* Chmura linków (miasta, filtry): zwykłe linki w pigułkach z liczbą */
.sz-links{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.sz-links small{color:var(--sz-muted);font-size:13px}

/* FAQ: jak na stronie głównej (pytanie 17 px, „+”), dwie kolumny od 992 px na każdej stronie.
   html:root #cp = wyższa specyficzność niż stare kopie bazy w arkuszach stron (#cp:is(...) .home-faq__list{gap:0}), które ładują się później. */
html:root #cp .home-faq__question{font-size:17px;font-weight:700;line-height:1.5}
@media(min-width:992px){
html:root #cp .home-faq__list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-items:start}
html:root #cp .home-faq__list>.home-faq__item:nth-last-child(2){border-bottom:1px solid var(--sz-border)}
}

/* Telefon */
@media(max-width:767px){
.sz-section>h2,.sz-h2{font-size:26px}
.sz-box{padding:15px 16px}
.sz-info{padding:12px}
.sz-pill--small{min-height:44px;padding:8px 14px}
.sz-table :is(th,td){padding:10px 8px}
.sz-dest-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sz-dest{min-height:60px;padding:10px 8px 10px 48px}
.sz-dest::before{top:10px;left:9px;width:30px;height:30px;border-radius:var(--sz-radius-control);font-size:14px}
.sz-dest a{font-size:14px}
.sz-dest small{font-size:12px}
}