/* HVA, zmienne projektowe.
   Maks: zmień wartość tutaj, zapisz plik, odśwież 00_DLA_MAKSA\zatwierdzone\03-WARIANTY.html.
   Archiwalne warianty są w 00_DLA_MAKSA/zasoby/warianty-tokens.css. */

:root {
  /* Wspólne dla wszystkich wariantów, bo to marka kliniki, nie wybór smaku */
  --brand: #1B9FAC;        /* teal z logo i z podświetlanego znaku na ścianie */
  --brand-grey: #6E7578;   /* szarość liter HVA w logo */
  --action: #14808B;       /* przyciemniony teal, jedyny kolor z białym tekstem */
  --action-hover: #0F6873;
  --on-action: #FFFFFF;

  /* Typografia wspólna */
  --font-body: Inter, system-ui, sans-serif;
  --step-eyebrow: 0.8125rem;
  --step-body: 1.0625rem;
  --step-lead: 1.1875rem;
  --step-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  --step-stat: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);

  /* Rytm */
  --gap: 1.5rem;
  --pad-x: clamp(1rem, 0.4rem + 2.6vw, 4.5rem);
  --pad-y: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
  --radius: 14px;
  --radius-pill: 999px;
  --measure: 34ch;
}

/* ===================================================================
   WYBRANE PRZEZ MAKSA 2026-09-20: hybryda, nie gotowy wariant.
   Tło krem z wariantu 1, nagłówki Inter Tight z wariantu 2.
   Maks o kroju: "chyba bardziej kierunek Inter Tight, tu można by
   poeksperymentować, ale na pewno w tamtą stronę bardziej".
   Czyli krój nagłówkowy jest otwarty, ale bezszeryfowy i ciasny.
   Tego bloku używa strona docelowa. Warianty archiwalne są w
   00_DLA_MAKSA/zasoby/warianty-tokens.css.
   =================================================================== */
[data-wariant="wybrany"],
:root {
  --bg: #F7F3EC;
  --surface: #FFFFFF;
  --ink: #17262A;
  --muted: #5A6164;
  --line: #E2DACE;
  --font-display: "Inter Tight", Inter, system-ui, sans-serif;
  --display-weight: 680;
  --display-tracking: -0.035em;
  --display-leading: 1.0;
}

/* Kontrast sprawdzony skryptem WCAG 2026-09-20, minimum dla tekstu to 4.5:1:
   V1 ink 14.09  muted 5.70   V2 ink 13.96  muted 5.74   V3 ink 14.70  muted 6.00
   biały na --action 4.68 w każdym wariancie.
   --brand daje 2.8 do 2.9 na tych tłach, więc NIE niesie tekstu ani ikon.
   Do ikon i dużych liczb idzie --action (4.14 do 4.23), do drobnego tekstu --ink. */

/* Strona docelowa. Wartosci i progi responsywne sa tylko w tym pliku.
   Zmienne ukladu pozwalaja zachowac styl.css bez literalnych rozmiarow. */
:root {
  --zero: 0;
  --full: 100%;
  --rule: 1px;
  --rule-strong: 2px;
  --focus-width: 3px;
  --focus-offset: 4px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --page-width: 80rem;
  --page-gutter: clamp(20px, 4vw, 64px);
  --section-space: clamp(3.75rem, 7vw, 7rem);
  --section-gap: clamp(2rem, 4vw, 3.5rem);
  /* 2026-09-21: z 5.5rem (87 px) na 4.25rem (68 px). Powod: nowy H1 wedlug
     reguly z ig-scrap jest dluzszy i przy 87 px lamal sie na cztery wiersze
     wysokie na 366 px, czyli spychal zdjecie i rezerwacje pod zgiecie.
     Wartosc 4.25rem pochodzi z wersji A z 05-NAGLOWKI.html, do ktorej Maks
     sie sklonil. Reszta rytmu naglowkow czeka na osobny przebieg. */
  --page-title: clamp(2.25rem, 1.4rem + 3.2vw, 4.25rem);
  --page-heading: clamp(2.125rem, 1.5rem + 2.5vw, 3.75rem);
  --person-heading: clamp(1rem, 1.2vw, 1.25rem);
  --text-md: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.8125rem;
  --text-leading: 1.6;
  --compact-leading: 1.4;
  --heading-leading: 1.05;
  --quote-leading: 1.25;
  --heading-tracking: -0.04em;
  --subheading-tracking: -0.025em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-display: 650;
  --button-radius: 0.625rem;
  --photo-radius: 0.75rem;
  --touch-target: 44px;
  --button-padding: 0.875rem 1.375rem;
  --button-large-padding: 1rem 1.625rem;
  --transparent: transparent;
  --line-on-action: color-mix(in srgb, var(--surface) 48%, transparent);
  --line-strong: #737A77;
  --selection-bg: #C9E6E5;
  --footer-bg: #A8E1DA;
  --contact-muted: #3D5457;
  --contact-panel-bg: #115C63;
  --contact-panel-pad: clamp(1.5rem, 4vw, 3.5rem);
  --contact-invitation-grid: minmax(0, 1fr);
  --contact-invitation-size: clamp(2rem, 1.3rem + 2.5vw, 3.25rem);
  --skip-away: translateY(-200%);
  --skip-visible: translateY(0);
  --layer-skip: 20;
  --layer-header: 10;
  --nav-chevron-size: 0.875rem;
  --nav-chevron-open: rotate(180deg);
  --nav-panel-pad: 1rem;
  --nav-panel-columns: minmax(0, 1fr);
  --nav-panel-font: 1.125rem;
  --nav-link-justify: start;
  --nav-panel-shadow: 0 18px 32px rgba(23, 38, 42, 0.12);
  --card-copy-layer: 1;
  --card-hint-layer: 2;
  --anchor-offset: 1.5rem;

  --header-grid: minmax(0, 1fr) auto;
  --header-areas: "logo booking" "nav nav";
  --header-pad: 0.875rem;
  --header-gap: 0.625rem;
  --logo-width: 112px;
  --nav-display: grid;
  --nav-width: 100%;
  --nav-gap: 0;
  --nav-font: clamp(0.75rem, 0.625rem + 0.5vw, 0.875rem);
  --nav-rule: var(--rule);
  --nav-pad: 0.5rem 0 0;
  --header-booking-padding: 0.75rem 0.875rem;
  --header-social-size: 1.25rem;

  --hero-top: 1.625rem;
  --hero-bottom: 1.5rem;
  --hero-grid: minmax(0, 1fr);
  --hero-areas: "intro" "booking" "proof" "photo";
  --hero-gap: 1.5rem;
  --hero-title-measure: 24ch;
  --hero-title-leading: var(--heading-leading);
  --hero-note-width: 46ch;
  --hero-kicker-bottom: 1.25rem;
  --hero-kicker-tracking: 0;
  --hero-kicker-size: 0.875rem;
  --kicker-pad: 0.4375rem 0.9375rem;
  --hero-whatsapp-size: 1.5rem;
  --hero-proof-grid: minmax(0, 1fr);
  --hero-proof-gap: 1.5rem;
  --hero-rating-grid: auto minmax(0, 1fr);
  --hero-rating-areas: "score label" "score source";
  --hero-rating-pad: 1rem 1.25rem;
  --hero-rating-platform-size: 1.375rem;
  --hero-score-size: clamp(3.25rem, 4.5vw, 4.25rem);
  --hero-check-size: 1.25rem;
  --hero-check-stroke: 2.4;
  --hero-photo-ratio: 3 / 2;
  --hero-photo-position: 50% 42%;
  --hero-scroll-distance: 18px;
  --hero-scroll-scale: 1.015;
  --hero-scroll-stiffness: 160;
  --hero-scroll-damping: 15;
  --hero-scroll-bounce: 2px;
  --hero-visual-bottom: 0;
  --hero-visual-width: 100%;
  --hero-viewport-gap: 1rem;
  --hero-header-size: 6.5625rem;
  --hero-quote-position: relative;
  --hero-quote-left: auto;
  --hero-quote-right: auto;
  --hero-quote-bottom: auto;
  --hero-quote-max: none;
  --hero-quote-margin: -0.5rem 0.75rem 0;
  --hero-quote-pad: 1rem 1.25rem;
  --hero-quote-border: 3px;
  --hero-quote-size: clamp(1.125rem, 1rem + 0.55vw, 1.5rem);
  --hero-quote-shadow: 0 10px 28px rgba(23, 38, 42, 0.1);
  --review-star-color: #AF7800;
  --review-star-size: 16px;
  --review-stars-width: 80px;
  --review-source-size: 16px;
  --booking-width: 100%;
  --booking-aside-min: 10rem;
  --booking-aside-align: center;
  --booking-aside-direction: row;
  --underline-bottom: -0.1em;
  --underline-height: 0.15em;
  --underline-width: 99%;
  --underline-stroke: 5;

  --affiliations-grid: minmax(0, 1fr);
  --affiliations-gap: 1.25rem;
  --affiliation-grid: 120px minmax(0, 1fr);
  --affiliation-heading: 1rem;
  --affiliations-heading-size: 1.25rem;
  --affiliation-mark-width: 120px;
  --affiliation-mark-height: 64px;
  --affiliation-hospital-width: 2.875rem;
  --affiliations-padding: 1.5rem 0 2.5rem;
  --services-layout-grid: minmax(0, 1fr);
  --services-layout-areas: "heading" "cards" "drawing";
  --services-layout-gap: var(--space-7);
  --services-grid: repeat(2, minmax(0, 1fr));
  --services-grid-areas: "figure figure" "physio psychology" "training medicine";
  --services-grid-gap: var(--space-3);
  --services-grid-max: 63rem;
  --services-figure-height: 17.5rem;
  --services-figure-width: 15rem;
  --services-figure-ground: color-mix(in srgb, var(--ink) 20%, transparent);
  --services-figure-ground-width: 42%;
  --services-figure-ground-height: 2%;
  --services-figure-ground-bottom: 5%;
  --services-figure-ground-blur: 0.5rem;
  --services-figure-caption-bottom: -1.25rem;
  --services-figure-bone: var(--bg);
  --services-figure-muscle: #91C9BF;
  --services-figure-accent: #52E7C2;
  --services-top: var(--section-space);
  --services-bottom: clamp(2.5rem, 4vw, 4rem);
  --service-card-pad: 0.75rem 0.875rem 1rem;
  --service-card-max: 100%;
  --service-art-size: 8.5rem;
  --service-art-height: 6rem;
  --service-art-filter: grayscale(1) contrast(1.25) brightness(1.2);
  --service-footer-min: 3rem;
  --service-title-leading: 1.18;
  --service-open-size: 1.75rem;
  --service-open-display: none;
  --service-open-icon: 1.0625rem;
  --service-icon-stroke: 1.5;
  --service-card-bg: var(--footer-bg);   /* oryginalne tlo ilustracji */
  --service-card-hover-bg: color-mix(in srgb, var(--footer-bg) 76%, var(--bg));
  --service-card-shadow: 0 8px 18px rgba(9, 64, 70, 0.08);
  --service-card-hover-shadow: 0 12px 26px rgba(9, 64, 70, 0.16);
  --service-card-heading: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  --service-card-radius: 1rem;
  --services-head-pad: 1.5rem;
  /* Wlasny rozmiar naglowka sekcji uslug: wspolny --page-heading szedl do 60 px
     i zjadal ekran. Maks prosil o troche bardziej zwarte. */
  --services-title-size: clamp(1.875rem, 1.35rem + 2.1vw, 2.75rem);
  --service-card-min: 11.25rem;
  --focus-inset: -6px;
  --services-drawing-width: 12rem;
  --services-drawing-height: 1.5rem;
  --services-drawing-stroke: 3;

  --section-heading-grid: minmax(0, 1fr);
  --section-heading-align: start;
  --team-columns: repeat(2, minmax(0, 1fr));
  --team-card-gap: 16px;
  --person-photo-ratio: 4 / 5;
  --person-photo-position: 38% 50%;
  --person-photo-right: 68% 50%;
  --person-info-pad: 14px;
  --person-info-height: 10.25rem;
  --person-signature-width: 12rem;
  --person-signature-height: 4rem;
  --person-shadow: 0 6px 18px rgba(23, 38, 42, .09);
  --person-hover-shadow: 0 12px 26px rgba(23, 38, 42, .17);
  --person-hint-pad: 0.4375rem 0.6875rem;
  --person-hint-size: 0.75rem;
  --person-hint-center: 50%;
  --person-hint-hidden: translate(-50%, -4px);
  --person-hint-shown: translate(-50%, 0);

  --reviews-heading-grid: minmax(0, 1fr);
  --reviews-per-view: 1;
  --reviews-gap: 1rem;
  --reviews-track-pad: 0.625rem 0.625rem 1rem;
  --reviews-scroll-pad: 0.625rem;
  --reviews-arrow-size: 1.25rem;
  --reviews-platform-size: 1.5rem;
  --review-card-pad: clamp(1.25rem, 2vw, 1.75rem);
  --review-avatar-size: 44px;
  --review-source-mark-size: 20px;
  --review-card-radius: 1.25rem;
  --review-featured-bg: #EDF5F2;
  --review-featured-line: #CFDFD9;
  --review-author-line: rgba(23, 38, 42, 0.15);
  --review-card-shadow: 0 5px 14px rgba(23, 38, 42, 0.04);
  --review-text-size: 1rem;
  --faq-grid: minmax(0, 1fr);
  --faq-summary-pad: 1.375rem 0;
  --faq-summary-size: 1.125rem;
  --faq-number-size: 0.875rem;
  --faq-number-width: 1.75rem;
  --faq-answer-indent: 2.75rem;
  --faq-image-width: 15rem;
  --faq-image-offset: 1.75rem;
  --faq-symbol-size: 1.5rem;
  --faq-symbol-width: 1.5rem;
  --faq-symbol-open: rotate(45deg);
  --faq-symbol-closed: rotate(0);

  --contact-grid: minmax(0, 1fr);
  --contact-data-grid: minmax(0, 1fr);
  --contact-address-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  --map-min-height: 20rem;
  --map-radius: var(--photo-radius);
  --footer-grid: minmax(0, 1fr);
  --footer-align: start;
  --footer-gap: 1.25rem;
  --footer-pad: 1.75rem;
  --footer-logo-width: 128px;
  --credits-measure: 32ch;

  --motion-fast: 180ms;
  --motion-medium: 280ms;
  --motion-ease: cubic-bezier(.22, .61, .36, 1);
  --button-lift: translateY(-2px);
  --button-press: translateY(0) scale(.98);
  --card-lift: translateY(-4px);
  --motion-rest: none;
  --button-shadow: 0 6px 14px rgba(23, 38, 42, .16);
  --dialog-width: 68rem;
  --dialog-max-height: calc(100dvh - 2rem);
  --dialog-gutter: 16px;
  --dialog-pad: clamp(20px, 2vw, 28px);
  --dialog-topbar-height: 3.25rem;
  --dialog-service-grid: minmax(0, 1fr);
  --dialog-physio-grid: minmax(0, 1fr) minmax(0, 0.62fr);
  --dialog-service-areas: "heading" "photo" "body" "footer";
  --dialog-service-gap: 1.25rem;
  --dialog-service-row-gap: 0.75rem;
  --dialog-photo-ratio: 16 / 9;
  --dialog-photo-height: clamp(11.5rem, 27dvh, 15rem);
  --dialog-physio-photo-ratio: 3 / 2;
  --dialog-heading-art: 72px;
  --dialog-detail-gap: 0.75rem;
  --dialog-detail-columns: 1;
  --dialog-medicine-grid: minmax(0, 1fr);
  --dialog-medicine-list-columns: 1;
  --dialog-detail-pad: 12px 14px;
  --dialog-detail-bg: var(--review-featured-bg);
  --dialog-detail-border: var(--review-featured-line);
  --dialog-detail-radius: 0.875rem;
  --dialog-detail-text-size: 0.875rem;
  --dialog-detail-leading: 1.35;
  --dialog-service-section-size: 1.25rem;
  --dialog-person-grid: minmax(0, 1fr);
  --dialog-person-gap: 1.5rem;
  --dialog-person-mobile-width: 11.5rem;
  --dialog-person-body-offset: 1.5rem;
  --dialog-radius: 1.375rem;
  --dialog-backdrop: rgba(12, 35, 38, .52);
  --dialog-shadow: 0 24px 80px rgba(12, 35, 38, .25);
  --dialog-hero-grid: 5rem minmax(0, 1fr);
  --dialog-title-size: clamp(2rem, 1.5rem + 1.4vw, 2.5rem);
  --dialog-section-size: 1.375rem;
  --dialog-icon-size: 1.25rem;
  --dialog-start: translateY(12px) scale(.98);
  --dialog-top-layer: 2;
}

@media (min-width: 40rem) {
  :root {
    --services-grid: repeat(2, minmax(0, 1fr));
    --services-grid-areas: "figure figure" "physio psychology" "training medicine";
    --services-figure-height: 20rem;
    --services-figure-width: 18rem;
    --reviews-per-view: 2;
    --service-card-min: 12rem;
    --service-art-size: 9.5rem;
    --service-art-height: 7rem;
    --service-open-display: grid;
    --dialog-hero-grid: 9rem minmax(0, 1fr);
    --faq-image-width: 19rem;
    --services-head-pad: 2rem;
    --header-pad: 1.25rem;
    --logo-width: 148px;
    --hero-top: 2rem;
    --hero-title-measure: 20ch;
    --hero-proof-grid: 12rem minmax(0, 1fr);
    --hero-proof-gap: 1.5rem;
    --hero-rating-grid: minmax(0, 1fr);
    --hero-rating-areas: "label" "score" "source";
    --hero-quote-max: 22rem;
    --booking-width: auto;
    --booking-aside-align: start;
    --booking-aside-direction: column;
    --affiliations-grid: repeat(3, minmax(0, 1fr));
    --affiliation-grid: minmax(0, 1fr);
    --affiliation-heading: 1.0625rem;
    --affiliations-gap: 2rem;
    --affiliations-padding: 1.75rem 0 3rem;
    --section-heading-grid: 1fr 2fr;
    --section-heading-align: end;
    --team-columns: repeat(3, minmax(0, 1fr));
    --contact-data-grid: 1fr 1fr;
    --footer-grid: 1fr 1fr;
    --footer-align: end;
  }
}

@media (min-width: 48rem) {
  :root {
    --dialog-service-grid: minmax(0, 1fr) minmax(0, 0.95fr);
    --dialog-service-areas: "heading photo" "body body" "footer footer";
    --dialog-detail-columns: 3;
    --dialog-medicine-grid: repeat(3, minmax(0, 1fr));
    --dialog-medicine-list-columns: 3;
    --dialog-person-grid: minmax(0, 1fr) minmax(0, 2fr);
    --dialog-person-gap: 2rem;
  }
}

@media (min-width: 48rem) and (max-width: 55.999rem) {
  :root {
    --dialog-max-height: calc(100dvh - 1rem);
    --dialog-pad: 1.125rem;
    --dialog-service-row-gap: 0.5rem;
    --dialog-photo-height: clamp(10.5rem, 24dvh, 13rem);
    --dialog-detail-pad: 10px 12px;
  }
}

@media (min-width: 56rem) {
  :root {
    --header-grid: minmax(0, 1fr) auto minmax(0, 1fr);
    --header-areas: "logo nav booking";
    --header-gap: 1rem;
    --nav-display: flex;
    --nav-width: max-content;
    --nav-gap: 1.25rem;
    --nav-rule: 0;
    --nav-pad: 0;
  }
}

@media (min-width: 64rem) {
  :root {
    --reviews-per-view: 3;
    --reviews-gap: 1.25rem;
    --nav-panel-columns: repeat(4, minmax(0, 1fr));
    --nav-panel-font: 1.25rem;
    --nav-link-justify: center;
    --nav-panel-pad: 1.5rem;
    --header-pad: 1.5rem;
    --header-booking-padding: 0.875rem 1.375rem;
    --hero-top: 2.25rem;
    --hero-bottom: 2rem;
    --hero-grid: 1.05fr 0.95fr;
    --hero-areas: "intro photo" "booking photo" "proof photo";
    --hero-gap: 1.75rem 3.5rem;
    --hero-title-leading: 1.09;
    --hero-proof-grid: 11rem minmax(0, 1fr);
    --hero-photo-ratio: 4 / 3;
    --hero-photo-position: 50% 43%;
    --hero-visual-bottom: 1.25rem;
    --hero-quote-position: absolute;
    --hero-quote-left: -1.75rem;
    --hero-quote-right: auto;
    --hero-quote-bottom: -4.75rem;
    --hero-quote-margin: 0;
    --hero-quote-pad: 1.25rem 1.5rem;
    --affiliation-grid: 120px minmax(0, 1fr);
    --services-grid-gap: 1.25rem 2.5rem;
    --services-figure-height: 29rem;
    --services-figure-width: 23rem;
    --service-card-pad: 0.5rem 1.25rem 1rem;
    --service-card-min: 13.5rem;
    --service-art-size: 11.75rem;
    --service-art-height: 8rem;
    --team-columns: repeat(6, minmax(0, 1fr));
    --team-card-gap: 0.75rem;
    --reviews-heading-grid: minmax(0, 1fr) auto;
    --contact-invitation-grid: minmax(0, 1fr) auto;
    --faq-grid: 1fr 1.5fr;
    --faq-image-width: 23rem;
    --contact-grid: 1fr 1fr;
    --footer-grid: 1fr auto 1fr;
  }
}

/* W niskim oknie laptopa zamykamy caly hero nad dolna krawedzia. */
@media (min-width: 48rem) {
  :root {
    --services-grid: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
    --services-grid-areas: "physio figure psychology" "training figure medicine";
    --services-figure-height: 28rem;
    --services-figure-width: 24rem;
  }
}

@media (min-width: 64rem) and (max-height: 50rem) {
  :root {
    --header-pad: 1rem;
    --hero-header-size: 5.5625rem;
    --hero-top: 1.375rem;
    --hero-bottom: 1.375rem;
    --hero-gap: 1.5rem 3.25rem;
    --page-title: clamp(3.25rem, 4svh + 1.9rem, 3.875rem);
    --hero-title-measure: 24ch;
    --hero-kicker-bottom: 1.125rem;
    --hero-proof-grid: 13.75rem minmax(0, 1fr);
    --hero-proof-gap: 1.125rem;
    --hero-rating-grid: auto minmax(0, 1fr);
    --hero-rating-areas: "score label" "score source";
    --hero-rating-pad: 0.875rem 1rem;
    --hero-score-size: 3.125rem;
    --hero-quote-bottom: -2.75rem;
    --hero-quote-pad: 1rem 1.25rem;
    --hero-visual-bottom: 2.75rem;
    --hero-visual-width: min(100%, calc(min(60svh, 26rem) * 4 / 3));
  }
}

@media (min-width: 80rem) and (max-height: 50rem) {
  :root { --hero-proof-grid: 15.5rem minmax(0, 1fr); }
}

@media (min-width: 80rem) {
  :root {
    --services-grid-gap: 1.25rem 3.75rem;
    --services-figure-height: 32.5rem;
    --services-figure-width: 24rem;
    --services-top: 4.5rem;
    --services-bottom: 3rem;
    --services-head-pad: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-medium: 0ms;
    --button-lift: none;
    --button-press: none;
    --card-lift: none;
    --dialog-start: none;
  }
}

@media (min-width: 80rem) {
  :root {
    --nav-gap: 1.75rem;
    --hero-note-width: 52ch;
  }
}

@media (min-width: 48rem) and (max-height: 26rem) {
  :root {
    --header-grid: minmax(0, 1fr) auto minmax(0, 1fr);
    --header-areas: "logo nav booking";
    --header-pad: 0.5rem;
    --nav-display: flex;
    --nav-width: auto;
    --nav-gap: 0.75rem;
    --nav-rule: 0;
    --nav-pad: 0;
    --hero-top: 0.75rem;
    --hero-kicker-bottom: 0.5rem;
    --hero-gap: 0.75rem;
    --page-title: clamp(2rem, 4vw, 2.5rem);
  }
}

/* Podstrony uslug, 2026-09-25, karta z wierszy od 2026-09-29.
   Uzywa ich tylko podstrony.css. */
:root {
  --breadcrumb-top: 0.5rem;
  --service-hero-grid: minmax(0, 1fr);
  --service-hero-areas: "intro" "photo";
  --service-hero-gap: 1.75rem;
  --service-title-measure: 18ch;
  --service-answer-size: 1.0625rem;
  --service-photo-ratio: 3 / 2;
  --service-photo-position: 50% 45%;
  --service-row-grid: minmax(0, 1fr);
  --service-row-pad: 2rem;
  --service-row-title: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  --service-lead-measure: 38ch;
  --service-case-size: 1.0625rem;
  --service-term-grid: minmax(0, 1fr);
  --service-people-columns: minmax(0, 1fr);
  --service-avatar-size: 4.5rem;
  --service-quote-columns: minmax(0, 1fr);
  --service-quote-size: 1.1875rem;
  --service-quote-leading: 1.35;
  --service-related-columns: minmax(0, 1fr);
  --service-related-height: 3.75rem;
  --service-arrow-size: 1.125rem;
}
@media (min-width: 40rem) {
  :root {
    --service-answer-size: 1.1875rem;
    --service-term-grid: minmax(9rem, 0.4fr) minmax(0, 1fr);
    --service-people-columns: repeat(2, minmax(0, 1fr));
    --service-quote-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 48rem) {
  :root {
    --service-related-columns: repeat(3, minmax(0, 1fr));
    --service-related-height: 5rem;
  }
}
@media (min-width: 64rem) {
  :root {
    --breadcrumb-top: 0.75rem;
    --service-hero-grid: minmax(0, 1.05fr) minmax(0, 0.95fr);
    --service-hero-areas: "intro photo";
    --service-hero-gap: 3.5rem;
    --service-photo-ratio: 4 / 3;
    --service-row-grid: minmax(0, 1fr) minmax(0, 2fr);
    --service-row-pad: 2.75rem;
    --service-quote-size: 1.375rem;
  }
}