/* ==========================================================================
   Barbers Lab - strony usług
   (/fryzjer-meski-mokotow/, /trymowanie-brody-mokotow/, /golenie-brzytwa-warszawa/)

   Wpinany PO tokens.css, style.css i baza-wiedzy.css:

       style.css        -> pasma, przyciski, cennik, zespół, portfolio, kontakt, stopka
       baza-wiedzy.css  -> nagłówek bez JS, okruszki, tytuł i lead, ramka zdjęcia, .bw-prose
       uslugi.css       -> tylko to, czego tamte dwa nie mają

   Strony usług nie ładują ui.js ani i18n.js. i18n.js nadpisuje przy każdym
   wejściu <title> i meta description tekstem strony głównej, więc na stronie
   usługi zjadłby jej własny tytuł. Stąd nagłówek z bazy wiedzy (pasek
   przewijany zamiast burgera na JS) i cennik bez rozwijania.

   Reguły systemu jak wszędzie: zero zaokrągleń, zero gradientów, głębia to
   twardy offset albo blok koloru, kolory wyłącznie z tokenów.
   ========================================================================== */

/* Fakty pod leadem: cena, czas, godziny. .proof-row ze strony głównej. */
.sv-facts {
    max-width: 960px;
}

.sv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-top: var(--sp-8);
}

.sv-actions .btn {
    flex: 1 1 240px;
}

@media (min-width: 600px) {
    .sv-actions .btn {
        flex: 0 0 auto;
    }
}

/* Kolejna sekcja w tym samym paśmie (cennik -> zespół). */
.sv-sub {
    margin-top: var(--sp-16);
}

/* Cennik bez rozwijania: wiersze są stale otwarte, a nagłówek wiersza to
   <div>, nie <button>. Nie ma tu ui.js, więc przycisk niczego by nie robił. */
.sv-prices .service-row__head {
    cursor: default;
}

.sv-row-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--sp-6);
    margin-top: var(--sp-4);
}

/* Zespół bez wyciętych sylwetek - pełne karty są na stronie głównej. */
.sv-crew .crew-card__head {
    margin-top: 0;
}

/* Pytania: .bw-prose z bazy wiedzy, tylko pierwszy nagłówek bez odstępu. */
.sv-faq {
    margin-top: var(--sp-8);
}

.sv-faq > h3:first-child {
    margin-top: 0;
}

.sv-faq__more {
    margin-top: var(--sp-10);
}

/* Zdjęcie wejścia obok danych kontaktowych. */
.sv-entrance {
    position: relative;
}

.sv-entrance::before {
    content: "";
    position: absolute;
    right: calc(var(--sp-2) * -1);
    bottom: calc(var(--sp-2) * -1);
    width: 55%;
    height: 40%;
    background: var(--bl-amber);
}

.sv-entrance img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: var(--img-filter);
    border: var(--bw-strong) solid var(--line-rule);
}

.sv-entrance figcaption {
    position: relative;
    margin-top: var(--sp-4);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-secondary);
}