/* ============================================================
Pas działu i wisząca karta – część wspólna podstron (decyzja właściciela
2026-10-26, wzór okładki strony głównej: home-2026.css .hp-cover*,
.hp-first-w). Arkusz ładuje HomeLayoutHeadConfigurator na stronach
z pasem (usesSectionBand – lista ścieżek); strona główna go nie ma,
zostaje przy własnej okładce w bundlu.
KONTRAKT
Znacznik pasa składa WYŁĄCZNIE partial home::components/pas (parametry
w jego nagłówku): section.pas.w-full.scheme-dark > img + .w-browse.pas-in
> [.pas-lab] .pas-has. Zdjęcia działów: Home\Services\PasDzialu.
- .pas pas niski: od 1200 px clamp(200px, 16,6vw, 304px), przy
700–1199 px 176 px, telefon pole 35:9; przyciemnienie od
lewej jak okładka; hasło .pas-has w roli cover (64/44/36/22,
Inter 700, −.025em, telefon −.02em) u góry pasa – odstęp
z formuły okładki (ta sama wysokość wiersza na każdej stronie).
- .pas--lab z etykietą .pas-lab nad hasłem (etykieta działu h1 albo
okruszki nav, rola lab w bieli 86%): etykieta i hasło
wyśrodkowane w pionie nad częścią pasa, której nie zakrywa karta.
- .pas--wys pas wysoki bez hasła i bez przyciemnienia (zdjęcie obiektu:
artykuł B, ogłoszenie): clamp(320px, 33vw, 560px), przy
700–1199 px clamp(300px, 36vw, 420px), telefon 3:2. Inną
wysokość strona daje własną regułą na klasie z parametru klasa.
- --pas-pos / --pas-pos-m object-position od 700 px / do 699 px
(atrybut style z partialu; domyślnie środek).
- .pas-wis > .pas-karta wisząca karta pod pasem, składa ją strona:
zaraz po pasie. Wisi 28 px na zdjęciu (telefon 12 px) – inna
zakładka przez --pas-wis / --pas-wis-m (artykuł B: 64 px).
Karta: --raised, ramka --line, promień --r-card, jedyny cień
systemu --shadow-strip, odstęp jak karta postępu w makiecie;
strona zmienia odstęp i układ wnętrza, nie tło, ramkę ani cień.
- .os-65 na kontenerze strony (najbliższy wspólny przodek pasa, karty
i treści, np. ): .w-browse i .w-read
w środku stoją na osi 65rem (1040 px) jak na stronie głównej.
Strony list i formularzy, ogłoszenie, wydarzenia; artykuł
i wizytówka zostają na 80rem (bez klasy).
Czego nie robić: nie kopiować reguł pasa do arkuszy stron, nie wpisywać
pasa ręcznie w szablon, nie dawać pasowi własnej szerokości (oś niesie
.w-browse), nie dokładać drugiego cienia ani czerwieni na zdjęciu.
============================================================ */
/* ---------- Pas ---------- */
.pas{ position:relative; display:flex; align-items:flex-start; height:clamp(12.5rem, 16.6vw, 19rem);
overflow:hidden; background:var(--surface); color:var(--photo-ink); }
.pas > img{ position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; object-fit:cover;
object-position:var(--pas-pos, 50% 50%); }
.pas::after{ content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(90deg, color-mix(in srgb, var(--photo-shade) 70%, transparent),
color-mix(in srgb, var(--photo-shade) 38%, transparent) 30%, transparent 54%); }
.pas-in{ position:relative; z-index:1; }
/* Odstęp z okładki strony głównej: górna krawędź wersalika na 34,5% wysokości
pasa 5:1 (0,15em – odstęp linii do wersalika przy interlinii 1,02). */
.pas-has{ margin:calc(6.9vw - 0.85 * (20vw - min(16.6vw, 19rem)) - .15em) 0 0; font-size:var(--fs-cover); line-height:var(--lh-cover);
font-weight:700; letter-spacing:-.025em; color:var(--photo-ink); }
/* Z etykietą: kolumna wyśrodkowana nad częścią pasa wolną od karty. */
.pas--lab .pas-in{ display:flex; flex-direction:column; justify-content:center; align-self:stretch; padding-bottom:1.75rem; }
.pas--lab .pas-has{ margin-top:0; }
.pas-lab{ margin:0 0 0.75rem; font-family:var(--font-tab); font-size:var(--fs-lab); line-height:var(--lh-lab); font-weight:600;
letter-spacing:.08em; text-transform:uppercase; font-feature-settings:"case";
color:color-mix(in srgb, var(--photo-ink) 86%, transparent); }
.pas-lab a{ color:inherit; }
.pas-lab a:hover{ color:var(--photo-ink); text-decoration:underline; text-underline-offset:3px; }
/* Wysoki: zdjęcie obiektu bez hasła. */
.pas--wys{ height:clamp(20rem, 33vw, 35rem); }
.pas--wys::after{ content:none; }
/* ---------- Wisząca karta ---------- */
.pas-wis{ position:relative; z-index:2; margin-top:calc(-1 * var(--pas-wis, 1.75rem)); }
.pas-karta{ padding:0.875rem 1.25rem 1rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--raised);
box-shadow:var(--shadow-strip); }
/* ---------- Oś 65rem ---------- */
.os-65 :is(.w-browse, .w-read), .os-65:is(.w-browse, .w-read){ max-width:calc(65rem + 2 * var(--gut)); }
/* Podpis zdjęcia pasa w stopce (placeholder cover_credit, footer.phtml). */
.foot-cover a{ text-decoration:underline; text-underline-offset:3px; }
/* ---------- Poniżej 1200 px ---------- */
@media (min-width:700px) and (max-width:1199px){
.pas{ height:11rem; }
.pas-has{ margin-top:calc(0.345 * max(20vw, 11rem) - 0.85 * (max(20vw, 11rem) - 11rem) - .15em); }
.pas--wys{ height:clamp(18.75rem, 36vw, 26.25rem); }
}
/* ---------- Telefon ---------- */
@media (max-width:699px){
.pas{ height:auto; aspect-ratio:35 / 9; }
.pas > img{ object-position:var(--pas-pos-m, var(--pas-pos, 50% 50%)); }
.pas::after{ background:linear-gradient(90deg, color-mix(in srgb, var(--photo-shade) 74%, transparent),
color-mix(in srgb, var(--photo-shade) 42%, transparent) 40%, transparent 64%); }
.pas-has{ margin-top:calc(7.71vw - .21em); letter-spacing:-.02em; }
/* Pas z etykietą rośnie z długą nazwą (firma w 3 wierszach); 35:9 = minimum. */
.pas--lab{ aspect-ratio:auto; min-height:calc(100vw * 9 / 35); }
.pas--lab .pas-in{ padding-block:0.625rem 1.125rem; }
.pas-lab{ margin-bottom:0.375rem; }
.pas--wys{ aspect-ratio:3 / 2; }
.pas-wis{ margin-top:calc(-1 * var(--pas-wis-m, 0.75rem)); }
.pas-karta{ padding:0.75rem 1rem 0.875rem; }
}