/* Site layout for the Alarmszczecin headless site.
   Copied and trimmed from the approved mockup (docs/mockup/mockup.css): header, footer, buttons, block themes,
   section heads, hero, text, text + image, feature cards (White / Brand / Photo), steps, gallery, FAQ, CTA,
   testimonials, image/video cards, model cards, the models page, the model page, archives, articles and posts.
   The colour tokens in :root move to the Umbraco stylesheet (home.stylesheet) later; layout stays here.
   Fonts: Inter, self-hosted (SIL OFL, ../fonts/OFL.txt). */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Palette (2026-10 restyle): white page, graphite text and dark panels, cool light-grey surfaces, one red accent (the logo red #e30613; was pastel blue until 2026-10-24).
   Contrast (WCAG): graphite #1f2328 on white 15.8:1, on surface #f3f4f6 14.4:1; text-alt #5b6169 on white 6.3:1, on surface 5.7:1;
   white text on the button red #b5161e 6.9:1, on its hover #9b1219 8.6:1; accent ink #b3050f on
   white 6.9:1 (accent text on light backgrounds); focus ring #e30613 on white 4.8:1 and on graphite 3.3:1. */
:root {
  --uui-color-background: #ffffff;          /* white page */
  --uui-color-surface: #f3f4f6;             /* cool light grey: cards, Alt panels */
  --uui-color-surface-emphasis: #e8eaed;
  --uui-color-text: #1f2328;                /* graphite */
  --uui-color-text-alt: #5b6169;
  --uui-color-interactive: #1f2328;         /* graphite: headings, links, dark panels, footer */
  --uui-color-interactive-emphasis: #2b3036;
  --uui-color-accent: #b3050f;              /* accent ink: accent-coloured text on light backgrounds (required marks) */
  --uui-color-interactive-contrast: #fff;
  --uui-color-positive: #b5161e;            /* deep red (calmer than the logo red): primary CTAs, highlights */
  --uui-color-positive-emphasis: #9b1219;   /* hover: darker */
  --uui-color-positive-contrast: #ffffff;   /* text on the accent (white on #b5161e 6.9:1) */
  --uui-color-current: #fde8e9;             /* accent tint: badges, icon circles */
  --uui-color-positive-strong: #e30613;     /* logo red: accent bars and rings on light backgrounds */
  --uui-color-focus: var(--uui-color-positive-strong);
  --accent: var(--uui-color-positive-strong);  /* accent detail of the as-* SVG icons (wwwroot/icons): red on light backgrounds */
  --uui-color-border: #e1e4e8;
  --uui-color-border-standalone: #c4c9cf;
  --uui-color-placeholder: #e5e7eb;
  --uui-color-danger: #b42318;              /* form errors */
  --uui-color-overlay: rgb(15 18 22 / .5);  /* flat overlay on photos for white text */
  --uui-color-glass: rgb(255 255 255 / .74);
  --uui-color-glass-border: rgb(255 255 255 / .6);
  --shadow-card: 0 1px 2px rgb(16 20 24 / .05), 0 6px 20px rgb(16 20 24 / .06);
  --shadow-hover: 0 2px 6px rgb(16 20 24 / .08), 0 20px 44px rgb(16 20 24 / .16);
  --shadow-glass: 0 10px 34px rgb(16 20 24 / .14), inset 0 1px 0 rgb(255 255 255 / .7);
  --radius-panel: 28px;
  --radius-card: 20px;
  --radius-input: 12px;
  /* Layout grid (UI system): one container and gutter for every section, header pill and hero; one inner padding scale
     for cards and panels; one gap for grids. Sections put their content in .container, so every left edge is
     (viewport - --container) / 2 + --gutter, and panels (Alt, Dark, CTA) keep that edge by wrapping a .container too. */
  --gutter: 24px;
  --container: var(--content-width);
  --grid-gap: var(--gutter);
  --card-pad: 32px;                         /* cards: feature, step, quote, form, author box, featured body */
  --card-pad-sm: 24px;                      /* compact cards: post card body, contact cards */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --header-h: 96px;                         /* sticky header incl. its top gap; the first hero slides under it */
  --font-family: "Inter", system-ui, "Segoe UI", Arial, sans-serif;
  --content-width: 1240px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.6 var(--font-family); color: var(--uui-color-text); background: var(--uui-color-interactive); }
img { max-width: 100%; display: block; }
a { color: var(--uui-color-interactive); }
:focus-visible { outline: 3px solid var(--uui-color-focus); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--header-h) + 8px); }
h1, h2, h3 { font-weight: 500; margin: 0 0 16px; letter-spacing: -0.025em; }
h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1.05; }
h2 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.1; color: var(--uui-color-interactive); }
h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; color: var(--uui-color-interactive); }
p { margin: 0 0 12px; }

/* Page frame: content on off-white, ending in rounded corners over the dark footer */
.site-main { background: var(--uui-color-background); border-radius: 0 0 40px 40px; padding-bottom: 72px; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }
.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Header: floating pill of frosted matte glass. Sticky; it takes --header-h of flow, and the first hero slides up under it.
   The blur sits on ::before, not on the pill, so the pill is no backdrop root and the open mobile menu can blur the page too.
   One centre line: logo, menu items, dropdown toggles and the CTA are flex items centred in the pill (align-items: center,
   every item a fixed-height box). The brand logo's wordmark sits on the SVG's baseline, so the image is lifted by
   --logo-shift to put the lowercase letters on the menu labels' line (an optical correction; the link box stays centred).
   The pill has the same 20px inline padding on both sides, so the logo and the CTA sit the same distance from its ends. */
.site-header { position: sticky; top: 0; z-index: 30; height: var(--header-h); padding: 14px var(--gutter) 0; pointer-events: none; }
.header-pill { --logo-shift: -6px; position: relative; z-index: 0; pointer-events: auto; max-width: var(--container); margin: 0 auto; display: flex; align-items: center; gap: 10px;
  min-height: 68px; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--uui-color-glass-border); box-shadow: var(--shadow-glass); }
.header-pill::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--uui-color-glass);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
.logo { display: inline-flex; align-items: center; height: 44px; color: var(--uui-color-interactive); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; text-decoration: none; margin-right: auto; white-space: nowrap; flex: none; border-radius: 8px; }
.logo img { display: block; height: 32px; width: auto; max-width: none; }
.logo .logo-brand { height: 44px; }  /* wordmark logo with tagline: fills the 44px link box, no baseline shift */
/* Menu items: every item is ONE pill shape, 44px high with 12px side padding. An item with a dropdown is the same
   pill holding two controls, the link and a plain caret button (no circle of its own), 6px apart; the pill (.nav-split)
   draws the hover and open surface and the single focus ring, so focusing either control rings the whole pill. */
.nav-list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link, .nav-split { position: relative; display: inline-flex; align-items: center; height: 44px; border-radius: 999px; transition: background-color .2s; }
.nav-link { color: var(--uui-color-interactive); text-decoration: none; padding: 0 12px; font-size: 15.5px; font-weight: 500; line-height: 1; white-space: nowrap; outline: none; }
.nav-split .nav-link { height: 100%; padding: 0 0 0 12px; border-radius: 999px 0 0 999px; background: none; }
.nav-toggle { display: inline-grid; place-items: center; height: 100%; padding: 0 14px 0 6px; margin: 0; border: 0; border-radius: 0 999px 999px 0; background: none; color: var(--uui-color-interactive);
  cursor: pointer; flex: none; outline: none; box-shadow: none; -webkit-tap-highlight-color: transparent; }
.nav-toggle svg { display: block; width: 14px; height: 14px; transition: transform .2s var(--ease); }
.nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-item > .nav-link:hover, .nav-split:hover { background: rgb(31 35 40 / .07); }
.nav-item.is-open > .nav-split { background: var(--uui-color-surface); }
.nav-item > .nav-link[aria-current="page"], .nav-split:has(> .nav-link[aria-current="page"]) { background: rgb(255 255 255 / .75); }
.nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 16px; height: 3px; margin-left: -8px; border-radius: 2px; background: var(--uui-color-positive-strong); }
.nav-split .nav-link[aria-current="page"]::after { margin-left: 0; }
/* One focus ring per item, around the whole pill, 2px outside it (the header never clips: no overflow on the pill). */
.nav-item > .nav-link:focus-visible, .nav-split:has(:focus-visible) { outline: var(--ring) solid var(--uui-color-focus); outline-offset: 2px; }
.nav-sub a:focus-visible, .logo:focus-visible { outline: var(--ring) solid var(--uui-color-focus); outline-offset: 2px; }
/* Dropdown: a white glass card, 16px radius, 8px inner padding, 8px under the header bar, left-aligned with its pill
   (js/nav.js nudges it back inside the viewport). Rows: 10px 14px, a title and an optional muted description. */
.nav-sub { position: absolute; top: calc(100% + 20px); left: 0; z-index: 2; display: none; min-width: 280px; max-width: 340px; margin: 0; padding: 8px; list-style: none;
  border-radius: 16px; border: 1px solid var(--uui-color-glass-border); background: rgb(255 255 255 / .92); box-shadow: 0 2px 6px rgb(16 20 24 / .06), 0 18px 40px rgb(16 20 24 / .14);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); transform: translateX(var(--nav-sub-shift, 0px)); }
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }  /* hover bridge over the gap */
.nav-item.is-open > .nav-sub, html:not(.nav-js) .nav-item.has-sub:hover > .nav-sub { display: grid; gap: 2px; }
.nav-sub a { display: grid; gap: 2px; padding: 10px 14px; border-radius: 10px; color: var(--uui-color-interactive); text-decoration: none; }
.nav-sub a:hover, .nav-sub a[aria-current="page"] { background: var(--uui-color-surface); }
.nav-sub-name { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.nav-sub-desc { font-size: 14px; line-height: 1.4; color: var(--uui-color-text-alt); }
/* Desktop: the pill is capped at --container, so logo, 8 top-level items and the CTA only fit with this tight link
   padding (8px overflowed the pill by 41.6px; 5px leaves 6.4px spare). The CTA has its own .header-cta here. */
@media (min-width: 1301px) {
  .nav-list { gap: 0; }
  .nav-link { padding: 0 5px; }
  .nav-split .nav-link { padding: 0 0 0 5px; }
  .nav-toggle { padding: 0 7px 0 4px; }
  .nav-cta { display: none; }
}
.header-cta { display: flex; align-items: center; flex: none; }
.header-cta .btn { white-space: nowrap; }
/* CSS-only mobile menu: the checkbox stays focusable (visually hidden) so it works before/without the Blazor circuit */
.menu-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.site-header .menu-btn { display: none; white-space: nowrap; background: rgb(255 255 255 / .55); }
.menu-btn .menu-close, .menu-toggle:checked + .menu-btn .menu-open { display: none; }
.menu-toggle:checked + .menu-btn .menu-close { display: inline; }
.menu-toggle:focus-visible + .menu-btn { outline: var(--ring) solid var(--uui-color-focus); outline-offset: var(--ring-offset); }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 40; background: #fff; color: var(--uui-color-interactive); padding: 10px 16px; border-radius: 999px; }
.skip-link:focus { top: 12px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header-pill::before { background: rgb(255 255 255 / .97); }
}

/* ===== Button system =====
   One pill, two sizes: 48px (default, --btn-h) and 40px (.btn-sm). Height is fixed (border included), the label is a
   single centred line (line-height 1.2), and the round arrow chip is concentric: the end padding is
   (height - 2 x border - chip) / 2, so the chip sits the same distance from the top, bottom and end.
   Variants (docs/mockup/mockup.css lists them with their use):
     primary, accent  red fill, white label, graphite chip: the main CTA (header, hero, CTA block, form submit)
     outline          graphite hairline on light backgrounds; fills graphite on hover
     light            white fill, for dark panels
     glass            quiet white glass, for photos and dark panels (hero secondary)
     plain            no arrow: even padding on both sides
   States: hover changes the fill and turns the arrow 45deg (inside the chip, no layout change); :focus-visible draws a
   3px outline ring 3px outside (it follows the radius, and no ancestor of a button clips overflow); :active darkens the
   fill without any transform, so pressing never moves the layout; :disabled / aria-disabled fade it and stop pointer
   events. */
:root { --btn-h: 48px; --btn-h-sm: 40px; --btn-chip: 36px; --btn-chip-sm: 30px; --ring: 3px; --ring-offset: 3px; }
.btn { --h: var(--btn-h); --chip: var(--btn-chip); --bw: 1px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: var(--h); min-height: var(--h); padding: 0 calc((var(--h) - 2 * var(--bw) - var(--chip)) / 2) 0 22px; border: var(--bw) solid transparent; border-radius: 999px;
  white-space: nowrap; vertical-align: middle; font: 600 16px/1.2 var(--font-family); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s; }
.btn-sm { --h: var(--btn-h-sm); --chip: var(--btn-chip-sm); gap: 10px; padding-left: 18px; font-size: 15px; }
.btn-label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-block: 2px; }
.btn .arrow { width: var(--chip); height: var(--chip); border-radius: 50%; display: grid; place-items: center; flex: none; transition: transform .2s var(--ease), background-color .2s, color .2s; }
.btn .arrow svg { width: 16px; height: 16px; }
.btn-sm .arrow svg { width: 14px; height: 14px; }
.btn:focus-visible { outline: var(--ring) solid var(--uui-color-focus); outline-offset: var(--ring-offset); }
.btn:active { transform: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; pointer-events: none; }
.btn-primary, .btn-accent { background: var(--uui-color-positive); color: var(--uui-color-positive-contrast); box-shadow: 0 6px 18px rgb(181 22 30 / .18); }
.btn-primary .arrow, .btn-accent .arrow { background: var(--uui-color-interactive); color: #fff; }
.btn-primary:hover, .btn-accent:hover { background: var(--uui-color-positive-emphasis); box-shadow: 0 10px 26px rgb(181 22 30 / .24); }
.btn-primary:active, .btn-accent:active { background: #820f15; box-shadow: 0 3px 10px rgb(181 22 30 / .18); }
.btn-outline { background: transparent; color: var(--uui-color-interactive); border-color: var(--uui-color-interactive); }
.btn-outline .arrow { background: var(--uui-color-interactive); color: #fff; }
.btn-outline:hover { background: var(--uui-color-interactive); color: #fff; }
.btn-outline:hover .arrow { background: var(--uui-color-positive); color: var(--uui-color-positive-contrast); }
.btn-outline:active { background: var(--uui-color-interactive-emphasis); color: #fff; }
.btn-light { background: #fff; color: var(--uui-color-interactive); }
.btn-light .arrow { background: var(--uui-color-interactive); color: #fff; }
.btn-light:hover .arrow { background: var(--uui-color-positive); color: var(--uui-color-positive-contrast); }
.btn-light:active { background: var(--uui-color-surface); }
/* Glass: the quiet secondary on photos and dark panels: a faint white fill and a soft border, no shadow. */
.btn-glass { background: rgb(255 255 255 / .1); color: #fff; border-color: rgb(255 255 255 / .42);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); }
.btn-glass .arrow { background: rgb(255 255 255 / .92); color: var(--uui-color-interactive); }
.btn-glass:hover { background: rgb(255 255 255 / .2); border-color: rgb(255 255 255 / .75); }
.btn-glass:active { background: rgb(255 255 255 / .28); }
.btn-plain { padding: 0 22px; }
.btn-sm.btn-plain { padding: 0 18px; }
/* On photos and dark panels the ring is white: it reads on every photo under the dark gradients. */
:is(.hero, .block-theme--Dark, .site-footer, .feature-Brand, .feature-Photo, .article-hero--cover .article-cover-photo) .btn:focus-visible { outline-color: #fff; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.round-arrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--uui-color-background); color: var(--uui-color-interactive); flex: none;
  transition: background-color .2s, color .2s, transform .25s var(--ease); }
.round-arrow svg { width: 16px; height: 16px; }
/* Cards that are links draw their own ring (the card is the control), outside the card's radius. */
:is(a.feature, a.post-card, a.featured-card, a.model-card, a.media-card, button.media-card):focus-visible { outline: var(--ring) solid var(--uui-color-focus); outline-offset: var(--ring-offset); }

/* Blocks and themes
   Default: on the white page. Alt: cool grey rounded panel. Dark: graphite rounded panel with a faint accent glow. */
.block { padding: 96px 0; }
.block-theme--Alt, .block-theme--Dark { margin: 0 var(--gutter); border-radius: var(--radius-panel); }
.block-theme--Alt { background: var(--uui-color-surface); }
.block-theme--Dark { background: radial-gradient(900px 420px at 100% 0%, rgb(227 6 19 / .14), transparent 70%), var(--uui-color-interactive); color: #fff; }
.block-theme--Dark h2, .block-theme--Dark h3 { color: #fff; }
.block-theme--Dark, .feature-Brand, .site-footer, .hero, .feature-Photo, .media-card { --accent: var(--uui-color-positive); }  /* red on graphite and photos */
.block-theme--Alt + .block-theme--Alt, .block-theme--Dark + .block-theme--Dark { margin-top: var(--gutter); }

/* Section heads: Center or left (headLayout Split). Title and intro only: the CMS eyebrow is not rendered (2026-10).
   The head's last line carries no bottom margin, so the gap to the content is the head's own margin on every block. */
.head-center { text-align: center; max-width: 820px; margin: 0 auto 56px; }
.head-center h2 { text-wrap: balance; }
.head-center .intro { max-width: 600px; margin: 0 auto; }
.head-left { max-width: 820px; margin-bottom: 56px; }
.head-left .intro { max-width: 600px; }
.head-center > :last-child, .head-left > :last-child { margin-bottom: 0; }
.head-center h2 + .intro, .head-left h2 + .intro { font-size: 18px; color: var(--uui-color-text-alt); }
.block-theme--Dark :is(.head-center, .head-left) .intro { color: rgb(255 255 255 / .8); }

/* Icon chips: the configurator's group-thumb language. A light rounded square (surface on white, white on surface),
   a graphite as-* line icon from the sprite and its --accent detail. Used by contact cards and the form's done mark;
   feature icons, step numbers and FAQ markers are chips of the same shape. */
.icon-chip { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--uui-color-surface); color: var(--uui-color-interactive); }
.icon-chip .icon-svg { width: 24px; height: 24px; }
.block-theme--Alt .icon-chip { background: var(--uui-color-background); }
.block-theme--Dark .icon-chip { background: rgb(255 255 255 / .08); color: #fff; }


/* Hero. A later hero is a rounded photo panel; the first hero on a page is full-bleed and slides up under the glass header
   (home: full viewport height, other pages: about two thirds). The gradient is darkest bottom-left, where the text sits. */
.hero { position: relative; margin: 16px var(--gutter) 0; border-radius: var(--radius-panel); overflow: hidden; min-height: 640px; display: flex; align-items: flex-end; color: #fff; }
.hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(12 14 18 / .88) 0%, rgb(12 14 18 / .45) 45%, rgb(12 14 18 / .12) 100%),
              linear-gradient(to right, rgb(12 14 18 / .6) 0%, rgb(12 14 18 / .15) 65%, transparent 100%); }
.hero .hero-content { position: relative; z-index: 1; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) 72px; }
.hero .hero-content > * { max-width: 860px; }
.hero h1, .hero .h1 { color: #fff; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
.hero p { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; max-width: 620px; color: rgb(255 255 255 / .92); }
.hero .actions { margin-top: 32px; }
/* Hero actions: accent primary + quiet glass secondary, same height, starting on the text's left edge; stacked full
   width on phones (label left, arrow right). */
.hero-actions { align-items: center; }
@media (max-width: 600px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; justify-content: space-between; }
}
.hero .btn-outline { color: #fff; border-color: #fff; }
.hero .btn-outline .arrow { background: #fff; color: var(--uui-color-interactive); }
.hero.hero--first { margin: calc(-1 * var(--header-h)) 0 0; border-radius: 0; min-height: clamp(560px, 70svh, 800px); padding-top: calc(var(--header-h) + 40px); }
.hero.hero--home { min-height: 100vh; min-height: 100svh; }
.hero--first .hero-content { padding-bottom: clamp(56px, 10svh, 112px); }
.hero--first .hero-content > * { max-width: 880px; }
.hero--first h1 { font-size: clamp(44px, 6.4vw, 84px); line-height: 1.02; }
.hero--first .hero-content > p { max-width: 640px; }

/* Rich text */
.rich > :last-child { margin-bottom: 0; }
.rich ul, .rich ol { padding-left: 0; list-style: none; }
/* List markers in the icon language: a small accent ring for bullets (the icons' dot detail), a numbered chip for
   ordered lists (the step chip, small). Shared by .rich and .prose. */
:is(.rich, .prose) ul > li, :is(.rich, .prose) ol > li { position: relative; padding-left: 32px; }
:is(.rich, .prose) ul > li::before { content: ""; position: absolute; left: 6px; top: calc(.8em - 5px); width: 10px; height: 10px; box-sizing: border-box;
  border-radius: 50%; border: 1.75px solid var(--accent); }
:is(.rich, .prose) ol { counter-reset: li; }
:is(.rich, .prose) ol > li { counter-increment: li; }
:is(.rich, .prose) ol > li::before { content: counter(li); position: absolute; left: 0; top: calc(.8em - 11px); width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center; background: var(--uui-color-surface); color: var(--uui-color-interactive); font-size: 13px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; }
.block-theme--Alt .rich ol > li::before { background: var(--uui-color-background); }
.block-theme--Dark .rich ol > li::before { background: rgb(255 255 255 / .1); color: #fff; }

/* Text + image */
.text-image { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.text-image .img-ph { border-radius: var(--radius-card); min-height: 460px; }
.text-image.image-Left .ti-image { order: -1; }

/* Card grids. Cards in a row stretch to the row's height (grid default, kept explicit); inside, a flex column pushes the
   foot (text, arrow, author) to the bottom, so arrows and buttons line up. Titles and texts are clamped (.clamp-N) so one
   long text cannot make a row uneven; the component puts the full text in a title attribute. */
.grid, .steps { align-items: stretch; }
.grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.clamp-2, .clamp-3, .clamp-4, .clamp-5, .clamp-6, .clamp-8 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }
.clamp-5 { -webkit-line-clamp: 5; line-clamp: 5; }
.clamp-6 { -webkit-line-clamp: 6; line-clamp: 6; }
.clamp-8 { -webkit-line-clamp: 8; line-clamp: 8; }

/* 5 Feature cards: cardStyle White / Brand / Photo. Tall, title towards the bottom, round arrow if linked. */
.feature { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 400px; padding: 32px; border-radius: var(--radius-card);
  background: var(--uui-color-surface); color: var(--uui-color-interactive); text-decoration: none; overflow: hidden; border: 1px solid transparent;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.block-theme--Alt .feature-White { border-color: transparent; }
.feature .icon { position: absolute; top: 32px; left: 32px; width: 56px; height: 56px; border-radius: 16px; background: var(--uui-color-surface); color: var(--uui-color-interactive); }
.feature h3 { font-weight: 600; letter-spacing: -0.02em; font-size: clamp(19px, 1.5vw, 22px); hyphens: auto; }
.feature .feature-foot, .media-card .feature-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
a.feature:hover { box-shadow: var(--shadow-hover); border-color: rgb(227 6 19 / .4); }
a.feature:hover .round-arrow, a.media-card:hover .round-arrow { background: var(--uui-color-positive); color: var(--uui-color-positive-contrast); }
/* Brand: graphite card with accent details */
.feature-Brand { background: linear-gradient(155deg, var(--uui-color-interactive-emphasis) 0%, var(--uui-color-interactive) 70%); color: rgb(255 255 255 / .86); box-shadow: var(--shadow-card); }
.feature-Brand h3 { color: #fff; }
/* Cards in a row share one subgrid: a flexible top track (the card's min-height and its icon or photo), the title track
   and the foot track, so titles start level, texts start level and arrows sit on one line, whatever wraps. No bar or
   label over the title (owner, 2026-10). Text-only cards (no icon, no photo) drop the empty top band.
   The top track's minimum stands in for the card's height: room for the photo (Photo) or the icon chip, none for text-only
   cards. The foot is the text over the round arrow, so the text gets the card's full width. */
.grid:has(> .feature) { --feature-top: 0px; grid-auto-rows: minmax(var(--feature-top), 1fr) auto auto; }
.grid:has(> .feature > .icon) { --feature-top: 72px; }
.grid:has(> .feature-Photo) { --feature-top: 200px; }
.grid > .feature { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 16px; min-height: 0; }
.grid > .feature > h3 { grid-row: 2; align-self: start; margin: 0; text-wrap: pretty; }
.grid > .feature > .feature-foot { grid-row: 3; align-self: stretch; flex-direction: column; align-items: stretch; gap: 20px; }
.grid > .feature > .feature-foot > .round-arrow { align-self: flex-end; margin-top: auto; }
.feature-Brand .icon { background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14); color: #fff; }
.feature-Brand .round-arrow { background: rgb(255 255 255 / .1); color: #fff; border: 1px solid rgb(255 255 255 / .35); }
.block-theme--Dark .feature-Brand { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .1); }
/* Photo: service tile. Photo, title, short text, arrow; the photo zooms on hover. */
.feature-Photo { color: rgb(255 255 255 / .9); min-height: 440px; padding: 28px; border: 0; box-shadow: var(--shadow-card); }
.feature-Photo h3 { color: #fff; font-size: clamp(24px, 2.2vw, 30px); margin-bottom: 10px; }

.feature-Photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(12 14 18 / .94) 0%, rgb(12 14 18 / .78) 40%, rgb(12 14 18 / .25) 75%, rgb(12 14 18 / .05) 100%); }
.feature-Photo > *:not(.img-ph) { position: relative; z-index: 1; }
.feature-Photo .feature-foot p { font-size: 16px; line-height: 1.5; }
.feature-Photo > img.cover { transition: transform .6s var(--ease); }
a.feature-Photo:hover { border-color: transparent; }
.grid:has(> .feature) { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* White: clean card with a hairline border and soft elevation */
.feature-White { min-height: 340px; background: var(--uui-color-background); border-color: var(--uui-color-border); box-shadow: var(--shadow-card); }
.feature-White .feature-foot p { color: var(--uui-color-text-alt); }

/* 8 FAQ */
.faq details { background: var(--uui-color-surface); border-radius: 16px; margin-bottom: 12px; color: var(--uui-color-text); }
.block-theme--Alt .faq details { background: var(--uui-color-background); }
.faq summary { cursor: pointer; padding: 20px 76px 20px 28px; font-size: 19px; color: var(--uui-color-interactive); list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
/* Marker: a rounded chip with a line plus (graphite bar, accent bar); open, the accent bar turns flat into the minus. */
.faq-mark { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: var(--uui-color-background); color: var(--uui-color-interactive); transition: background-color .2s; }
.block-theme--Alt .faq-mark { background: var(--uui-color-surface); }
.faq-mark svg { display: block; width: 28px; height: 28px; overflow: visible; }
.faq-mark .accent { stroke: var(--accent); transform-box: view-box; transform-origin: 50% 50%; transition: transform .25s var(--ease); }
.faq details[open] .faq-mark .accent { transform: rotate(90deg); }
.faq summary:hover .faq-mark, .faq details[open] .faq-mark { background: var(--uui-color-current); }
.faq summary:focus-visible { outline: 3px solid var(--uui-color-focus); outline-offset: -3px; border-radius: 16px; }
.faq details > div { padding: 0 28px 20px; }

/* 9 CTA: green panel, text left */
.cta-panel { padding: 88px 0; }
.cta-panel .narrow p { font-size: 19px; }

/* 2 Text (richTextBlock) */
.rich h2 { margin-bottom: 24px; }
.rich h3, .rich h4 { margin: 32px 0 12px; }
.rich blockquote { margin: 32px 0; padding: 32px; border-radius: var(--radius-card); background: var(--uui-color-surface); font-size: 19px; color: var(--uui-color-interactive); }
.block-theme--Alt .rich blockquote { background: var(--uui-color-background); }
.block-theme--Dark .rich blockquote { background: rgb(255 255 255 / .08); color: #fff; }
.rich table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 16px; }
.rich th { text-align: left; font-weight: 600; }
.rich th, .rich td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--uui-color-border); }
.rich hr { border: 0; border-top: 1px solid var(--uui-color-border); margin: 40px 0; }
.rich img { height: auto; border-radius: 16px; }
.block-theme--Dark .rich a { color: #fff; }

/* 6 Steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--gutter); list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li { counter-increment: step; background: var(--uui-color-surface); border-radius: var(--radius-card); padding: 28px 24px; min-width: 0;
  display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.steps li > * { align-self: start; }
.block-theme--Alt .steps li { background: var(--uui-color-background); box-shadow: var(--shadow-card); }
.block-theme--Dark .steps li { background: rgb(255 255 255 / .08); }
/* Step number: the configurator's group-thumb chip (rounded square, light surface) with a graphite number over one accent
   dot (the icons' single accent detail; the logo's roof over its sensor dot). White on surface, surface on white.
   Each step is a subgrid of the row (number, title, text), so titles and texts in a row start level whatever wraps;
   the grid's row gap (24px) spaces number, title and text. */
.steps li::before { content: counter(step); display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; padding-bottom: 9px; box-sizing: border-box;
  border-radius: 14px; font-size: 19px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--uui-color-interactive);
  background: radial-gradient(circle at 24px 35px, var(--accent) 2.25px, transparent 2.75px), var(--uui-color-background); }
.block-theme--Alt .steps li::before { background-color: var(--uui-color-surface); }
.block-theme--Dark .steps li::before { color: #fff; background-color: rgb(255 255 255 / .1); }
.steps h3 { font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; letter-spacing: -0.02em; margin: 0; text-wrap: pretty; }  /* the subgrid's row gap spaces number, title and text */
.steps li p { font-size: 16px; line-height: 1.55; }
.steps li p:last-child { margin-bottom: 0; }
/* Text and read-more share the subgrid's text track; the button sits at the foot, so buttons in a row line up. */
.steps .step-body { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.steps .step-text { margin: 0; }
.steps .step-text.is-open { display: block; }
.steps .step-text:focus { outline: none; }
.step-more { margin-top: auto; padding: 10px 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.step-more:hover { color: var(--accent); }

/* Large screens: at most 3 cards per row; exactly 4 show as 2 + 2, so no card is left alone. This block must stay below
   the auto-fit rules for .grid:has(> .feature) and .steps, which would otherwise win. */
@media (min-width: 1000px) {
  .grid, .grid:has(> .feature), .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid:has(> :nth-child(4):last-child), .steps:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 7 Gallery */
.gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gallery-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; background: var(--uui-color-placeholder); }
/* Long galleries: 6 tiles, the rest behind the button (GalleryBlockView). A hidden tile's lazy image does not load. */
.nav-js .gallery:not(.is-expanded) > :nth-child(n+7) { display: none; }
.gallery-foot { margin-top: 32px; text-align: center; }
html:not(.nav-js) .gallery-foot { display: none; }

/* 12 Testimonials */
.quote-card { position: relative; margin: 0; background: var(--uui-color-surface); border-radius: var(--radius-card); padding: 88px 32px 32px; display: flex; flex-direction: column; min-height: 380px; }
.block-theme--Alt .quote-card { background: var(--uui-color-background); }
.quote-card .badge { position: absolute; top: 0; left: 0; width: 72px; height: 72px; border-radius: 0 0 36px 0; background: var(--uui-color-background); display: grid; place-items: center; }
.block-theme--Alt .quote-card .badge { background: var(--uui-color-surface); }
.block-theme--Dark .quote-card .badge { background: var(--uui-color-interactive); }
.quote-card .badge span { width: 52px; height: 52px; border-radius: 50%; background: var(--uui-color-current); color: var(--uui-color-interactive); display: grid; place-items: center; font-size: 30px; line-height: 1; font-weight: 600; }
.quote-card blockquote { margin: 0 0 24px; font-size: 19px; color: var(--uui-color-interactive); }
.author { margin-top: auto; display: flex; align-items: center; gap: 14px; color: var(--uui-color-text); }
.author .avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.author .place { color: var(--uui-color-text-alt); }

/* Contact details block (mockup contact.html): cards from home, OpenStreetMap beside them */
.contact-block { align-items: start; }
.contact-block--no-map { grid-template-columns: minmax(0, 720px); }
.contact-cards { display: grid; gap: 12px; margin-top: 24px; }
.contact-cards > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 16px; background: var(--uui-color-surface); border-radius: 16px; padding: 20px 24px; }
.contact-cards .icon-chip { background: var(--uui-color-background); }
.block-theme--Alt .contact-cards .icon-chip { background: var(--uui-color-surface); }
.contact-card-body { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.block-theme--Alt .contact-cards > div { background: var(--uui-color-background); }
.contact-cards strong { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--uui-color-text-alt); }
.contact-cards a { color: var(--uui-color-interactive); font-size: 19px; text-decoration: none; }
.contact-cards a:hover { text-decoration: underline; }
.contact-cards address { font-style: normal; display: grid; }
.contact-map-wrap { display: grid; grid-template-rows: 1fr auto; gap: 12px; align-self: stretch; }
.contact-map { width: 100%; height: 100%; min-height: 420px; border: 0; border-radius: var(--radius-card); background: var(--uui-color-placeholder); }
.contact-map-link { display: inline-flex; align-items: center; gap: 8px; color: var(--uui-color-interactive); text-decoration: none; font-size: 15px; justify-self: start; }
.contact-map-link .arrow svg { width: 14px; height: 14px; }

/* Inquiry form block (mockup contact.html #zapytanie): FeatureForms form rendered and validated by the site */
.inquiry { align-items: start; }
.form-card { background: var(--uui-color-surface); border-radius: var(--radius-card); padding: 40px; color: var(--uui-color-text); }
.block-theme--Alt .form-card { background: var(--uui-color-background); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form .full { grid-column: 1 / -1; }
.form label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 6px; color: var(--uui-color-interactive); }
.form .req { color: var(--uui-color-accent); }
.form input:not([type=checkbox]), .form textarea { width: 100%; min-height: 50px; padding: 10px 16px; font: inherit; color: var(--uui-color-text);
  border: 1px solid var(--uui-color-border-standalone); border-radius: var(--radius-input); background: #fff; }
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--uui-color-focus); outline-offset: 1px; border-color: var(--uui-color-focus); }
.form .has-error input:not([type=checkbox]), .form .has-error textarea { border-color: var(--uui-color-danger); }
.form .check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; color: var(--uui-color-text); }
.form .check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--uui-color-positive); }
.form .check a { color: var(--uui-color-interactive); }
.field-error { margin: 6px 0 0; font-size: 14px; color: var(--uui-color-danger); }
.form-alert { margin: 0; padding: 12px 16px; border-radius: var(--radius-input); background: #fdecea; color: var(--uui-color-danger); }
.form button[aria-busy="true"] { opacity: .7; cursor: progress; }
.form-done { display: grid; justify-items: start; gap: 16px; font-size: 19px; color: var(--uui-color-interactive); }
.form-done p { margin: 0; }
.form-card .form-done-icon { background: var(--uui-color-current); color: var(--uui-color-positive-strong); }

/* 13 Media cards: imageCard and videoCard (photo with overlay text; video opens a dialog) */
.media-grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.media-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 440px; padding: 32px;
  border: 0; border-radius: var(--radius-card); overflow: hidden; color: #fff; text-decoration: none; text-align: left; font: inherit; cursor: pointer; background: #2b3036; }
div.media-card { cursor: default; }
.media-card.media-wide { min-height: 560px; }
.media-card::after { content: ""; position: absolute; inset: 0; background: var(--uui-color-overlay); }
.media-card > img.cover { z-index: 0; }
.media-card .media-text { position: relative; z-index: 1; display: block; }
.media-card h3, .media-card .h3 { display: block; color: #fff; margin: 12px 0 16px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -0.02em; }
.media-card .media-p { display: block; }
.media-card .feature-foot p { margin: 0; }
.pill { border: 1px solid var(--uui-color-border); border-radius: 999px; padding: 4px 12px; font-size: 14px; }
.pill-light { display: inline-block; border-color: rgb(255 255 255 / .5); color: #fff; }
.video-card .play { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -60%); width: 80px; height: 80px;
  border-radius: 50%; background: #fff; color: var(--uui-color-interactive); display: grid; place-items: center; }
.video-card:hover .play { transform: translate(-50%, -60%) scale(1.08); }
.video-card .play svg { width: 30px; height: 30px; margin-left: 4px; }
.video-dialog { border: 0; border-radius: var(--radius-card); padding: 16px; width: min(1000px, 92vw); background: var(--uui-color-interactive); }
.video-dialog::backdrop { background: rgb(12 14 18 / .75); }
.video-dialog .close { margin: 0 0 12px auto; display: flex; }
.video-frame { aspect-ratio: 16 / 9; border-radius: 16px; background: #000; overflow: hidden; }
.video-frame iframe, .video-frame video { display: block; width: 100%; height: 100%; border: 0; }
/* Lightbox (Zoom.razor + Lightbox.razor + js/lightbox.js): gallery block, model photos, floor plans */
a.zoom { display: block; cursor: zoom-in; border-radius: inherit; }
a.zoom:focus-visible { outline: 3px solid var(--uui-color-focus); outline-offset: 3px; }
.lightbox { border: 0; padding: 16px 72px 24px; width: 100vw; height: 100vh; max-width: none; max-height: none; background: transparent; color: #fff; cursor: zoom-out; overflow: hidden; }
.lightbox::backdrop { background: rgb(12 14 18 / .92); }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr; }
.lightbox-bar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.lightbox-count { font-variant-numeric: tabular-nums; }
.lightbox-figure { margin: 0; display: grid; grid-template-rows: 1fr auto; place-items: center; min-height: 0; gap: 12px; }
.lightbox-img { max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; border-radius: 12px; cursor: zoom-in; touch-action: none; user-select: none; -webkit-user-select: none; }
.lightbox.is-zoomed .lightbox-img { cursor: grab; }
.lightbox.is-zoomed .lightbox-img:active { cursor: grabbing; }
.lightbox-close { width: 48px; height: 48px; border: 0; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--uui-color-interactive); cursor: pointer; }
.lightbox-close svg { width: 20px; height: 20px; }
.lightbox-close:hover { background: var(--uui-color-positive); }
.lightbox-close:focus-visible, .lightbox-nav:focus-visible { outline: 3px solid var(--uui-color-focus); outline-offset: 3px; }
.lightbox-caption { text-align: center; max-width: 72ch; color: rgb(255 255 255 / .85); }
.lightbox-caption:empty { display: none; }
.lightbox-nav { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); border: 0; padding: 0; background: none; color: inherit; cursor: pointer; }
.lightbox-nav .round-arrow { width: 48px; height: 48px; }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-prev svg { transform: rotate(-135deg); }
.lightbox-next svg { transform: rotate(45deg); }
.lightbox-single .lightbox-nav { display: none; }
@media (max-width: 700px) {
  .lightbox { padding: 12px 12px 20px; }
  .lightbox-nav { top: auto; bottom: 12px; transform: none; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 900px) {
  .media-card, .media-card.media-wide { min-height: 360px; padding: 24px; }
  .form-card { padding: 24px; }
  .form { grid-template-columns: 1fr; }
  .quote-card { min-height: 0; }
}

/* Footer (dark, under the rounded page bottom) */
.site-footer { color: rgb(255 255 255 / .85); padding: 72px 0 32px; }
.site-footer a { color: #fff; text-decoration: none; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 1.2fr repeat(3, 1fr); }
.footer-grid .label { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 600; color: var(--uui-color-current); /* #fde8e9 on graphite 13.5:1 (WCAG AA 4.5:1); the deep red #b5161e is 2.33:1 */ margin-bottom: 16px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-logo a { display: inline-block; }
.footer-logo img { display: block; width: auto; height: 56px; }
.footer-contact { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.footer-contact .icon-svg { width: 20px; height: 20px; margin-top: 3px; color: rgb(255 255 255 / .7); }
.site-footer address { font-style: normal; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid rgb(255 255 255 / .15); margin-top: 56px; padding-top: 24px; font-size: 14px; }
.footer-cookie-settings { margin-left: auto; padding: 0; border: 0; background: none; color: #fff; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.footer-cookie-settings:focus-visible { outline: var(--ring) solid var(--uui-color-focus); outline-offset: var(--ring-offset); border-radius: 4px; }

/* Cookie consent bar (ConsentBanner.razor, wwwroot/js/consent.js): fixed full-width bar at the bottom, above the sticky header (z 30). */
.consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px var(--gutter); background: var(--uui-color-background); color: var(--uui-color-text); border-top: 1px solid var(--uui-color-border);
  border-radius: var(--radius-card) var(--radius-card) 0 0; box-shadow: 0 -10px 30px rgb(16 20 24 / .14); font-size: 15px; line-height: 1.5; }
.consent-banner[hidden] { display: none; }
.consent-banner p { margin: 0; max-width: 760px; }
.consent-actions { display: flex; gap: 12px; flex: none; }
.consent-button { min-width: 148px; justify-content: center; }
.consent-button--secondary { background: var(--uui-color-surface-emphasis); color: var(--uui-color-interactive); box-shadow: none; }
.consent-button--secondary:hover { background: #d9dce1; color: var(--uui-color-interactive); box-shadow: none; }
@media (max-width: 700px) {
  .consent-banner { flex-direction: column; align-items: stretch; gap: 16px; }
  .consent-actions .consent-button { flex: 1; min-width: 0; }
}

/* Real images (replace the mockup's .img-ph placeholders) */
img.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { z-index: 0; }
.hero { background: #2b3036; }
.hero.block-theme--Alt, .hero.block-theme--Dark { margin: 16px var(--gutter) 0; }
.ti-img { width: 100%; min-height: 460px; max-height: 640px; object-fit: cover; border-radius: var(--radius-card); background: var(--uui-color-placeholder); }
.feature-Photo { background: #2b3036; }
.feature .icon { display: grid; place-items: center; overflow: hidden; }
.feature .icon img { width: 28px; height: 28px; object-fit: contain; }
.icon-svg { display: block; width: 28px; height: 28px; }
.feature-foot p { margin: 0; }
.feature-White .round-arrow { background: var(--uui-color-surface); color: var(--uui-color-interactive); }
.cta-panel.block-theme--Default { margin: 0; }  /* no panel: its text stays on the container edge */
.page-head { padding: 64px 0 24px; }
.breadcrumb { font-size: 15px; margin-bottom: 16px; color: var(--uui-color-text-alt); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; margin: 0; padding: 0; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--uui-color-border-standalone); }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--uui-color-interactive); text-decoration: underline; }
.page-title { color: var(--uui-color-interactive); }
.h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1.05; }

/* Empty state (503: CMS unreachable or no published content yet) */
.site-main--empty { min-height: 100vh; display: grid; place-items: center; border-radius: 0; padding: 0; }
.empty-dot { display: block; width: 56px; height: 56px; border-radius: 50%; background: var(--uui-color-current); }

/* Responsive */
@media (max-width: 900px) {
  :root { --gutter: 16px; --radius-panel: 20px; --radius-card: 20px; }
  .block { padding: 56px 0; }
  .text-image, .footer-grid { grid-template-columns: 1fr; }
  .text-image { gap: 32px; }
  .ti-img { min-height: 280px; }
  .text-image.image-Left .ti-image { order: 0; }
  .head-center, .head-left { margin-bottom: 32px; }
  .hero { min-height: 560px; }
  .hero .hero-content { padding: 0 var(--gutter) 32px; }
  .hero--first .hero-content { padding-bottom: 48px; }
  .cta-panel { padding: 56px 0; }
  .feature { min-height: 320px; }
  .feature-Photo { min-height: 360px; }
  :root { --header-h: 88px; }
  .site-header { padding-top: 12px; }
  .header-pill { min-height: 64px; padding: 8px 16px; }
}

/* Header collapses to the CSS-only menu below the width where logo, seven items, the dropdown toggles and the CTA stop
   fitting in the pill. The open menu is a glass panel too (more opaque, so its links stay readable over photos); an item
   with dropdown links shows its toggle as a square button at the row's end, which expands the links as an indented
   sub-list. Without JavaScript the sub-lists are simply shown. */
@media (max-width: 1300px) {
  .site-header .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0; padding: 10px; max-height: calc(100svh - var(--header-h) - 16px); overflow-y: auto;
    border-radius: 24px; border: 1px solid var(--uui-color-glass-border); background: rgb(255 255 255 / .94); box-shadow: var(--shadow-glass);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-item { display: block; }
  .nav-item > .nav-link, .nav-split { display: flex; height: 48px; border-radius: 14px; }
  .nav-link { flex: 1; padding: 0 16px; font-size: 17px; }
  .nav-split .nav-link { padding: 0 16px; border-radius: 14px 0 0 14px; }
  .nav-toggle { width: 48px; padding: 0; border-radius: 0 14px 14px 0; }  /* 48px tap target, a plain caret */
  .nav-toggle svg { width: 16px; height: 16px; }
  .nav-item > .nav-link[aria-current="page"], .nav-split:has(> .nav-link[aria-current="page"]) { background: var(--uui-color-surface); }
  .nav-link[aria-current="page"]::after, .nav-split .nav-link[aria-current="page"]::after { left: 4px; top: 50%; bottom: auto; width: 3px; height: 20px; margin: -10px 0 0; }
  .nav-sub, .nav-item.is-open > .nav-sub { position: static; min-width: 0; max-width: none; padding: 2px 0 6px 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; }
  .nav-sub { display: none; }
  .nav-sub::before { display: none; }
  .nav-item.is-open > .nav-sub, html:not(.nav-js) .nav-sub { display: grid; gap: 2px; }
  .nav-sub a { padding: 10px 14px; }
  .nav-sub-name { font-size: 16px; }
  .menu-toggle:checked ~ .nav { display: block; }
  .header-cta { display: none; }
  .nav-cta { display: grid; margin-top: 6px; }  /* the CTA, last in the open menu: a full-width row, same 48px */
}
/* Phones: a smaller logo and the 40px menu button, so "Zamknij menu" still fits next to the logo in the pill. */
@media (max-width: 600px) {
  .header-pill { --logo-shift: -5px; gap: 8px; }
  .logo img, .logo .logo-brand { height: 34px; }
  .site-header .menu-btn { --h: var(--btn-h-sm); padding: 0 16px; font-size: 15px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 1300px) { .nav { background: #fff; } }
}

/* Motion: hover lifts and smooth anchor scrolling only for people who have not asked for reduced motion. */
.model-card, .post-card, .featured-card { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  a.feature:hover, .model-card:hover, .post-card:hover, .featured-card:hover { transform: translateY(-4px); }
  a.feature-Photo:hover > img.cover { transform: scale(1.05); }
  a.feature:hover .round-arrow, .btn:hover .arrow { transform: rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}
.feature-Photo > img.cover { position: absolute; z-index: 0; }

/* 4 Model card (models page and modelListBlock) */
.model-card { display: flex; flex-direction: column; background: var(--uui-color-surface); border-radius: var(--radius-card); overflow: hidden; color: inherit; text-decoration: none; }
.block-theme--Alt .model-card { background: var(--uui-color-background); }
.model-card:hover, .post-card:hover, .featured-card:hover { box-shadow: var(--shadow-hover); }
.model-card-img { display: block; width: 100%; height: 240px; object-fit: cover; background: var(--uui-color-placeholder); }
.model-card .card-body { padding: 24px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.block-theme--Dark .model-card { background: rgb(255 255 255 / .08); }
.block-theme--Dark .model-card .price { color: #fff; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; padding: 0; list-style: none; }
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.price { font-weight: 600; color: var(--uui-color-interactive); margin: 0; }

/* Models page head: H1 + intro */
.lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--uui-color-text-alt); max-width: 720px; }
.archive-head .lead { margin-top: 8px; }
.page-head:has(.archive-head) + .block { padding-top: 16px; }

/* Model page: gallery + summary card, floor plans */
.model-top { display: grid; grid-template-columns: 3fr 2fr; gap: var(--gutter); align-items: start; }
.model-top > * { min-width: 0; }
.model-top .main-img { width: 100%; height: 480px; object-fit: cover; border-radius: var(--radius-card); background: var(--uui-color-placeholder); }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.thumbs .thumb-img { width: 100%; height: 90px; object-fit: cover; border-radius: 12px; background: var(--uui-color-placeholder); }
.summary-card { position: sticky; top: 108px; background: var(--uui-color-surface); border-radius: var(--radius-card); padding: 32px; }
.spec { width: 100%; border-collapse: collapse; margin-top: 8px; }
.spec td { padding: 12px 0; border-bottom: 1px solid var(--uui-color-border); overflow-wrap: anywhere; }
.spec td:last-child { text-align: right; font-weight: 600; color: var(--uui-color-interactive); }
.summary-card .model-price { margin-top: 20px; font-size: 22px; }
.model-top + .plans { margin-top: 88px; }
.plans .plan { display: block; border-radius: 16px; overflow: hidden; background: var(--uui-color-background); }
.plans .plan-img { width: 100%; height: 320px; object-fit: contain; }
.plans .plan-file { display: grid; place-items: center; min-height: 320px; padding: 24px; }

@media (max-width: 900px) {
  .model-top { grid-template-columns: minmax(0, 1fr); }
  .model-top .main-img { height: 320px; }
  .summary-card { position: static; }
  .model-top + .plans { margin-top: 56px; }
}

/* ---- Archives, articles and posts (mockups articles.html, news.html, article.html, post.html) ----------------
   Archive head, filter pills, featured card, post cards, pagination; article / post head, hero, table of contents,
   prose body, tags, author box. Copied from docs/mockup/mockup.css; .img-ph placeholders replaced by real images. */
.meta-muted { color: var(--uui-color-text-alt); font-size: 15px; }
.side-label { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: var(--uui-color-text-alt); margin-bottom: 12px; }
.archive-head h1, .article-head h1 { color: var(--uui-color-interactive); max-width: 980px; }

/* Filter bar: category pills, active tag (the pills are .pill-link, see "Pills" below) */
.archive-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; }

/* Post / article card (tall, image on top) */
.post-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); row-gap: 32px; }
.post-card { display: flex; flex-direction: column; background: var(--uui-color-surface); border-radius: var(--radius-card); overflow: hidden;
  color: inherit; text-decoration: none; min-width: 0; }
.block-theme--Alt .post-card { background: var(--uui-color-background); }
.post-card-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--uui-color-placeholder); }
.post-card .card-body { padding: 24px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.post-card h3 { margin: 4px 0 12px; text-wrap: pretty; }
.excerpt { color: var(--uui-color-text-alt); margin-bottom: 24px; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 14px; color: var(--uui-color-text-alt); margin-bottom: 12px; }
.post-meta .pill { color: var(--uui-color-interactive); }
.post-date { font-weight: 600; color: var(--uui-color-interactive); font-size: 15px; }
.post-card--dated .post-meta { border-bottom: 1px solid var(--uui-color-border); padding-bottom: 14px; margin-bottom: 16px; }

/* Featured card: first item on page 1, image left, text right */
.featured-card { display: grid; grid-template-columns: 7fr 5fr; background: var(--uui-color-surface); border-radius: var(--radius-card); overflow: hidden;
  color: inherit; text-decoration: none; margin-bottom: 32px; }
.featured-img { display: block; width: 100%; height: 100%; min-height: 520px; object-fit: cover; background: var(--uui-color-placeholder); }
.featured-body { padding: 48px; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.featured-body h2 { font-size: clamp(28px, 3vw, 44px); }
.featured-body .excerpt { font-size: 18px; }
.featured-body .card-foot { margin-top: 16px; }

/* Pagination: round page numbers, current page dark */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 56px; }
.pagination a, .pagination span { min-width: 48px; height: 48px; padding: 0 12px; border-radius: 999px; display: grid; place-items: center; text-decoration: none;
  color: var(--uui-color-interactive); font-size: 16px; }
.pagination a:hover { background: var(--uui-color-surface); }
.pagination a[aria-current] { background: var(--uui-color-interactive); color: #fff; }
.pagination .page-step { border: 1px solid var(--uui-color-interactive); }
.pagination .page-step svg { width: 16px; height: 16px; }
.pagination .is-disabled { opacity: .3; }
.pagination a:focus-visible { outline: var(--ring) solid var(--uui-color-focus); outline-offset: 2px; }

/* ===== Pills: one pressable grey pill (PillLink.razor) =====
   Archive filters and the category and tag pills at the top of articles and posts share it: the icon chip's grey surface,
   999px radius, 40px high (the small button size). The active filter is graphite with a white label (aria-current).
   A category pill carries a small accent ring (the icons' dot detail); a tag pill a muted #. On grey panels the pill is
   white. Hover darkens the surface, :active one step more; no transform, so nothing shifts. */
.pill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.pill-link { display: inline-flex; align-items: center; gap: 8px; height: var(--btn-h-sm); padding: 0 18px; border: 1px solid transparent; border-radius: 999px;
  background: var(--uui-color-surface); color: var(--uui-color-interactive); font-size: 15px; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s; }
.pill-link--tag { gap: 1px; }
.pill-link--category::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.75px solid var(--uui-color-positive-strong); box-sizing: border-box; flex: none; }
.pill-link-hash { color: var(--uui-color-text-alt); }
a.pill-link:hover { background: var(--uui-color-surface-emphasis); }
a.pill-link:active { background: var(--uui-color-border); }
a.pill-link:focus-visible { outline: var(--ring) solid var(--uui-color-focus); outline-offset: 2px; }
.pill-link[aria-current] { background: var(--uui-color-interactive); color: #fff; }
a.pill-link[aria-current]:hover { background: var(--uui-color-interactive-emphasis); }
.pill-link[aria-current] .pill-link-hash { color: rgb(255 255 255 / .7); }
.pill-link[aria-current].pill-link--category::before { border-color: var(--uui-color-positive); }
:is(.block-theme--Alt, .article-hero--split) .pill-link:not([aria-current]) { background: var(--uui-color-background); }
:is(.block-theme--Alt, .article-hero--split) a.pill-link:not([aria-current]):hover { background: var(--uui-color-surface-emphasis); }

/* ===== Article and post heroes (ArticlePageView.razor, heroLayout) =====
   Split: text left on a light grey panel, the image right with a rounded radius (Tapo product sections).
   Cover: a full-width photo under the header, the text on a soft white gradient panel at the bottom left.
   Product: a large centred title with the pills and lead above the image, centred on white (Tapo hero).
   Minimal: breadcrumb, pills, title and lead only, the wide image below, the byline under it.
   Every layout puts its text on the container's left edge (Cover: its panel), like every section below it. */
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 24px; }
.article-head h1 { margin: 0 0 20px; text-wrap: balance; }
.article-head .lead { margin: 0; text-wrap: pretty; }
.article-hero .breadcrumb { margin-bottom: 32px; }
.byline { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-size: 15px; }
.byline .avatar, .author-box .avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; background: var(--uui-color-placeholder); }
.byline strong { display: block; font-weight: 600; color: var(--uui-color-interactive); }
.byline span { color: var(--uui-color-text-alt); }
.article-hero-img { display: block; width: 100%; height: auto; object-fit: cover; background: var(--uui-color-placeholder); }

.article-hero--split { margin: 8px var(--gutter) 0; padding: 40px 0 var(--space-8); border-radius: var(--radius-panel); background: var(--uui-color-surface); }
.article-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.article-hero--no-image .article-hero-grid { grid-template-columns: minmax(0, 860px); }
.article-hero--split h1 { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.06; }
.article-hero--split .article-hero-img { aspect-ratio: 5 / 4; border-radius: var(--radius-card); }

.article-hero--cover { position: relative; display: flex; align-items: flex-end; min-height: clamp(580px, 80svh, 840px); margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + 40px) 0 var(--space-8); background: #2b3036; overflow: hidden; }
.article-hero--cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(12 14 18 / .5) 0%, rgb(12 14 18 / .12) 55%, rgb(12 14 18 / .2) 100%); }
.article-hero--cover > .container { position: relative; z-index: 1; width: 100%; }
.article-cover-panel { max-width: 760px; padding: var(--card-pad); border-radius: var(--radius-card); border: 1px solid rgb(255 255 255 / .6);
  background: linear-gradient(160deg, rgb(255 255 255 / .95) 0%, rgb(243 244 246 / .9) 100%); box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.article-cover-panel .breadcrumb { margin-bottom: 20px; }
.article-cover-panel h1 { font-size: clamp(34px, 4vw, 56px); line-height: 1.06; }
.article-cover-panel .lead { font-size: clamp(18px, 1.4vw, 20px); }
.article-cover-panel .byline { margin-top: 24px; }

.article-hero--product { padding-top: 40px; text-align: center; }
.article-hero--product .breadcrumb ol, .article-hero--product .article-meta, .article-hero--product .pill-row, .article-hero--product .byline { justify-content: center; }
.article-hero--product .article-head { max-width: 960px; margin: 0 auto; }
.article-hero--product h1 { max-width: none; font-size: clamp(42px, 6vw, 84px); line-height: 1.02; font-weight: 600; letter-spacing: -0.035em; }
.article-hero--product .lead { margin: 0 auto; }
.article-hero--product .byline { text-align: left; }
.article-hero--product .article-hero-media { max-width: 1040px; margin: var(--space-8) auto 0; }
.article-hero--product .article-hero-img { aspect-ratio: 16 / 9; border-radius: var(--radius-panel); }

.article-hero--minimal { padding-top: 40px; }
.article-hero--minimal .article-head { max-width: 860px; }
.article-hero--minimal h1 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.05; }
.article-hero--minimal .article-hero-media { margin-top: var(--space-7); }
.article-hero--minimal .article-hero-img { aspect-ratio: 16 / 7; border-radius: var(--radius-panel); }
.article-hero--minimal .byline { margin-top: 24px; }

@media (max-width: 900px) {
  .article-hero .breadcrumb { margin-bottom: 20px; }
  .article-hero--split { padding: 24px 0 40px; }
  .article-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .article-hero--split .article-hero-img { aspect-ratio: 4 / 3; }
  /* Cover on phones: the photo on top (under the header), the panel overlapping its lower edge, so both stay visible. */
  .article-hero--cover { --cover-h: min(56svh, 440px); display: block; min-height: 0; padding: 0; background: transparent; overflow: visible; }
  .article-hero--cover > img.cover { position: relative; display: block; height: var(--cover-h); }
  .article-hero--cover::after { bottom: auto; height: var(--cover-h); }
  .article-hero--cover > .container { margin-top: -120px; }
  .article-cover-panel { padding: var(--card-pad-sm); }
  .article-hero--product, .article-hero--minimal { padding-top: 24px; }
  .article-hero--product .article-hero-media { margin-top: var(--space-6); }
  .article-hero--product .article-hero-img, .article-hero--minimal .article-hero-img { aspect-ratio: 4 / 3; border-radius: var(--radius-card); }
  .article-hero--minimal .article-hero-media { margin-top: var(--space-6); }
}


/* Table of contents | prose (max 720px); posts and articles without a table of contents are centred */
.article-layout { display: grid; grid-template-columns: 220px minmax(0, 720px) 160px; justify-content: space-between; gap: 40px; margin-top: 72px; align-items: start; }
.article-side { position: sticky; top: 108px; }
.article-main { max-width: 720px; min-width: 0; }
.post-layout .article-main { margin: 72px auto 0; }
.post-layout { padding-bottom: 88px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc ol ol { padding-left: 16px; margin: 2px 0 6px; }
.toc a { display: block; padding: 8px 14px; border-radius: 12px; text-decoration: none; font-size: 15px; line-height: 1.35; color: var(--uui-color-text-alt); }
.toc a:hover { background: var(--uui-color-surface); color: var(--uui-color-interactive); }

/* Prose: rich text body */
.prose { font-size: 18px; line-height: 1.75; }
.prose p { margin: 0 0 20px; }
.prose h2 { font-size: clamp(28px, 2.8vw, 38px); margin: 64px 0 20px; scroll-margin-top: 110px; }
.prose h3 { font-size: clamp(21px, 1.8vw, 25px); margin: 40px 0 12px; scroll-margin-top: 110px; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 0; list-style: none; margin: 0 0 24px; }
.prose li { margin-bottom: 8px; }
.prose img { height: auto; border-radius: 20px; }
.prose figure { margin: 48px 0; }
.prose figcaption { font-size: 14px; color: var(--uui-color-text-alt); margin-top: 12px; }
.prose blockquote { margin: 48px 0; padding: 40px; border-radius: var(--radius-card); background: var(--uui-color-surface); }
.prose blockquote p { font-size: clamp(21px, 2vw, 26px); line-height: 1.4; color: var(--uui-color-interactive); margin-bottom: 16px; letter-spacing: -0.01em; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose blockquote cite { font-style: normal; font-size: 15px; color: var(--uui-color-text-alt); }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; margin: 32px 0 40px; }
.prose th { text-align: left; font-weight: 600; color: var(--uui-color-interactive); }
.prose th, .prose td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--uui-color-border); }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid var(--uui-color-border); margin: 48px 0; }

/* Author box, section head with a button (the tags are pills at the top of the article now) */
.author-box { display: flex; gap: 20px; align-items: flex-start; margin-top: 40px; padding: 32px; border-radius: var(--radius-card); background: var(--uui-color-surface); }
.author-box .avatar { width: 72px; height: 72px; }
.author-box h3 { margin-bottom: 4px; }
.author-box p:last-child { margin: 0; }
.head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.head-row h2 { margin: 0; }

@media (max-width: 1180px) {
  .article-layout { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .featured-card { grid-template-columns: 1fr; }
  .featured-img { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
  .featured-body { padding: 28px; }
  .post-grid { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 40px; }
  .article-side { position: static; background: var(--uui-color-surface); border-radius: var(--radius-card); padding: 24px 16px 16px; }
  .article-side .side-label { padding-left: 14px; }
  .article-side .toc a:hover { background: var(--uui-color-background); }
  .post-layout .article-main { margin-top: 40px; }
  .post-layout { padding-bottom: 56px; }
  .prose { font-size: 17px; }
  .prose h2 { margin-top: 48px; }
  .prose blockquote { padding: 28px 24px; }
  .author-box { flex-direction: column; padding: 24px; }
  .archive-bar { margin-bottom: 24px; }
  .pagination { margin-top: 40px; gap: 4px; }
  .pagination a, .pagination span { min-width: var(--btn-h-sm); height: var(--btn-h-sm); padding: 0 8px; }
}

/* ===== Contact map: click-to-load Google map (ContactBlockView.razor, js/map.js) =====
   A light surface card that later holds the iframe. Desktop (two columns): the block's title and cards sit in a subgrid,
   so the map takes the cards' row and its top and bottom match the first and last card; it fills that height (min 320px).
   Stacked (phones, tablets): its own 4:3 box (16:9 at tablet width), growing when the placeholder text needs more room. */
.contact-map-wrap { display: grid; grid-template: 1fr / minmax(0, 1fr); gap: 0; min-width: 0; }
.map-consent { position: relative; display: grid; aspect-ratio: 4 / 3; border-radius: var(--radius-card); background: var(--uui-color-surface); color: var(--uui-color-text); }
.block-theme--Alt .map-consent { background: var(--uui-color-background); }
.map-consent-placeholder { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; padding: 32px; }
.map-consent .icon-chip { background: var(--uui-color-background); }
.block-theme--Alt .map-consent .icon-chip { background: var(--uui-color-surface); }
.map-consent-address { font-style: normal; display: grid; font-size: 19px; color: var(--uui-color-interactive); }
.map-consent-note { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.5; color: var(--uui-color-text-alt); }
.map-consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.map-consent-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; display: block; }
@media (min-width: 901px) {
  .contact-block:not(.contact-block--no-map) { grid-template-rows: auto 1fr; row-gap: 0; align-items: stretch; }
  .contact-block:not(.contact-block--no-map) > div:first-child { grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; }
  .contact-block:not(.contact-block--no-map) > div:first-child > h2 { grid-row: 1; }
  .contact-block:not(.contact-block--no-map) > div:first-child > .contact-cards { grid-row: 2; align-self: start; }
  .contact-block .contact-map-wrap { grid-row: 2; align-self: stretch; margin-top: 24px; } /* .contact-cards margin-top */
  .contact-block .map-consent { aspect-ratio: auto; height: 100%; min-height: 320px; }
}
@media (min-width: 601px) and (max-width: 900px) { .map-consent { aspect-ratio: 16 / 9; } }
@media (max-width: 600px) { .map-consent-placeholder { padding: 24px; } }
/* ===== end contact map ===== */

/* ===== Locations map (LocationsMapBlockView.razor, js/locations.js) =====
   Our own SVG of the voivodeship: a soft grey shape with a 1px graphite outline, the 10 km area as a pale blue disc with a
   dashed ring, and an inset (over the sea, top left) that enlarges Szczecin and its surroundings. Pins are round buttons:
   strong blue = standard area, white with a graphite ring = travel by arrangement, the office a graphite chip with the
   brand mark. The name shows on hover, on focus and while the place is open. Beside the map (under it on phones) the list
   of the same places; with the script the list rows are compact and a pin or a name opens the panel: over the list on
   desktop, a bottom sheet on phones. Without the script every row shows its terms, services, call link and inquiry link. */
.locations-layout { display: grid; grid-template-columns: minmax(0, 580px) minmax(0, 1fr); gap: calc(2 * var(--grid-gap)); align-items: stretch; }
.locations-map-col { display: grid; align-content: start; gap: 12px; min-width: 0; }
.locations-map { position: relative; width: 100%; border-radius: var(--radius-card); background: var(--uui-color-background); border: 1px solid var(--uui-color-border); }
.block-theme--Alt .locations-map { border-color: transparent; }
.locations-shape { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; }
.locations-land { fill: #eceef1; stroke: var(--uui-color-text); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.locations-area { fill: rgb(227 6 19 / .12); stroke: var(--uui-color-positive-strong); stroke-width: 1.25px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.locations-leader { fill: none; stroke: var(--uui-color-positive-strong); stroke-width: 1px; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.locations-inset { position: absolute; aspect-ratio: 1; border-radius: 16px; background: var(--uui-color-background); border: 1px solid var(--uui-color-positive-strong);
  box-shadow: var(--shadow-card); }
.locations-inset > .locations-shape { border-radius: inherit; }
.locations-inset-caption { position: absolute; left: 8px; right: 8px; bottom: 6px; margin: 0; font-size: 12px; line-height: 1.3; font-weight: 600; color: var(--uui-color-interactive);
  text-align: center; pointer-events: none; }

/* pins: a 28px target with a 16px dot; the dot grows a little when hovered, focused or open */
.loc-pin { --dot: 16px; position: absolute; z-index: 1; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; border: 0; border-radius: 50%; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.loc-pin::before { content: ""; position: absolute; left: 50%; top: 50%; width: var(--dot); height: var(--dot); margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2); border-radius: 50%;
  box-sizing: border-box; transition: width .15s, height .15s, margin .15s, opacity .15s; }
.loc-pin--standard::before { background: var(--uui-color-positive-strong); border: 2.5px solid #fff; box-shadow: 0 1px 4px rgb(16 20 24 / .35); }
.loc-pin--arranged::before { background: #fff; border: 2.5px solid var(--uui-color-interactive); box-shadow: 0 1px 3px rgb(16 20 24 / .25); }
.loc-pin:hover, .loc-pin:focus-visible, .loc-pin[aria-expanded="true"] { --dot: 20px; z-index: 3; }
.loc-pin[aria-expanded="true"].loc-pin--arranged::before { background: var(--uui-color-interactive); border-color: #fff; }
.loc-pin[aria-expanded="true"].loc-pin--standard::before { background: var(--uui-color-interactive); }
.loc-pin:focus-visible { outline: var(--ring) solid var(--uui-color-focus); outline-offset: 0; }
.loc-pin.is-dimmed::before { opacity: .25; }
.loc-pin-name { position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); padding: 3px 8px; border-radius: 6px; background: var(--uui-color-interactive);
  color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; pointer-events: none; display: none; }
.loc-pin:hover .loc-pin-name, .loc-pin:focus-visible .loc-pin-name, .loc-pin[aria-expanded="true"] .loc-pin-name { display: block; }
/* desktop: the names of the pins on the big map are always shown, small, to the right of the dot (the bubble on hover, focus, open) */
@media (min-width: 901px) {
  .locations-map > .loc-pin .loc-pin-name { display: block; left: calc(100% - 4px); bottom: auto; top: 50%; transform: translateY(-50%); padding: 0;
    background: none; color: var(--uui-color-interactive); font-size: 12px; font-weight: 500;
    text-shadow: 0 0 2px #eceef1, 0 0 2px #eceef1, 0 0 3px #eceef1; }
  .locations-map > .loc-pin.is-dimmed .loc-pin-name { opacity: .35; }
  .locations-map > .loc-pin:is(:hover, :focus-visible, [aria-expanded="true"]) .loc-pin-name { left: 50%; bottom: calc(100% + 2px); top: auto; transform: translateX(-50%);
    padding: 3px 8px; background: var(--uui-color-interactive); color: #fff; font-size: 13px; font-weight: 600; text-shadow: none; }
}
.loc-office { position: absolute; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: var(--uui-color-interactive); color: var(--uui-color-positive); border: 2.5px solid #fff; box-shadow: 0 2px 8px rgb(16 20 24 / .35); box-sizing: border-box; }
.loc-office svg { width: 18px; height: 18px; fill: currentColor; margin-top: -1px; }
.loc-office--legend { position: static; width: 24px; height: 24px; margin: 0; border-width: 2px; box-shadow: none; }
.loc-office--legend svg { width: 13px; height: 13px; }

.locations-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--uui-color-text-alt); }
.locations-legend li { display: inline-flex; align-items: center; gap: 8px; }
.loc-dot { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; }
.loc-dot--standard { background: var(--uui-color-positive-strong); }
.loc-dot--arranged { background: #fff; border: 2.5px solid var(--uui-color-interactive); }
.locations-attribution { margin: 0; font-size: 12px; color: var(--uui-color-text-alt); }
.locations-attribution a { color: inherit; }

/* the list (and the panel over it) */
.locations-side { position: relative; min-width: 0; }
.locations-finder { display: flex; flex-direction: column; min-height: 0; }
.locations-list-title { margin: 0 0 12px; font-size: 22px; }
.locations-search { display: grid; gap: 6px; margin-bottom: 8px; }
.locations-search[hidden] { display: none; }
.locations-search label { font-size: 14px; font-weight: 600; color: var(--uui-color-interactive); }
.locations-search input { height: 48px; padding: 0 16px; border: 1px solid var(--uui-color-border-standalone); border-radius: var(--radius-input); font: inherit; font-size: 16px;
  color: var(--uui-color-text); background: var(--uui-color-background); min-width: 0; }
.locations-search input:focus-visible { outline: var(--ring) solid var(--uui-color-focus); outline-offset: 1px; border-color: var(--uui-color-focus); }
.locations-count { margin: 0; font-size: 13px; color: var(--uui-color-text-alt); }
.loc-list { margin: 0; padding: 0; list-style: none; }
.loc-item { padding: 16px 0; border-top: 1px solid var(--uui-color-border); }
.loc-item[hidden] { display: none; }
.loc-item-title { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 18px; line-height: 1.3; color: var(--uui-color-interactive); }
.loc-item-show { flex: 1; min-width: 0; margin: -6px -8px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.loc-item-show[hidden] { display: none; }
.loc-item-show:hover { background: var(--uui-color-surface); }
.loc-item-show:focus-visible { outline: var(--ring) solid var(--uui-color-focus); outline-offset: 0; }
.loc-item.is-current .loc-item-show { background: var(--uui-color-current); }
.loc-terms { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; font-size: 15px; color: var(--uui-color-text); }
.loc-distance { color: var(--uui-color-text-alt); }
.loc-note { margin: 8px 0 0; font-size: 15px; color: var(--uui-color-text-alt); }
.loc-services { margin-top: 12px; }
.loc-services-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--uui-color-text-alt); }
.loc-services ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.loc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.loc-actions .icon-svg { width: 18px; height: 18px; }
.loc-phone { font-weight: 500; }
.locations-empty { margin: 16px 0 0; color: var(--uui-color-text-alt); }
.inquiry-note { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--radius-input); background: var(--uui-color-current); color: var(--uui-color-text); }
/* with the script the list rows are just the name and the terms: the rest is in the panel */
.locations.is-enhanced .loc-item-label { display: none; }
.locations.is-enhanced .loc-list .loc-item-body > :not(.loc-terms) { display: none; }
.locations.is-enhanced .loc-list .loc-item-body { padding-left: 24px; }
.locations.is-enhanced .loc-item { padding: 12px 0; }
.locations.is-enhanced .loc-item-title { margin-bottom: 2px; }

.loc-panel { z-index: 5; display: flex; flex-direction: column; background: var(--uui-color-background); border-radius: var(--radius-card); box-shadow: var(--shadow-hover);
  border: 1px solid var(--uui-color-border); overflow: auto; overscroll-behavior: contain; }
.loc-panel[hidden] { display: none; }
.loc-panel-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 24px 24px 8px; background: inherit; }
.loc-panel-title { margin: 0; font-size: 26px; line-height: 1.2; outline: none; }
.loc-panel-close { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: -6px -8px 0 0; padding: 0; border: 0; border-radius: 50%;
  background: var(--uui-color-surface); color: var(--uui-color-interactive); cursor: pointer; }
.loc-panel-close:hover { background: var(--uui-color-surface-emphasis); }
.loc-panel-close:focus-visible { outline: var(--ring) solid var(--uui-color-focus); outline-offset: 2px; }
.loc-panel-close .icon-svg { width: 20px; height: 20px; }
.loc-panel-body { padding: 0 24px 24px; }
.loc-panel .loc-terms { font-size: 17px; }
.loc-panel .loc-actions { margin-top: 20px; }

@media (min-width: 901px) {
  /* the list column is as tall as the map column and scrolls; the panel covers it */
  .locations-side-inner { position: absolute; inset: 0; }
  .locations-finder { height: 100%; }
  .loc-list { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-right: 4px; }
  .loc-panel { position: absolute; inset: 0; }
}
@media (max-width: 900px) {
  .locations-layout { grid-template-columns: minmax(0, 1fr); }
  .locations-map { border-radius: 16px; }
  .loc-pin { width: 26px; height: 26px; margin: -13px 0 0 -13px; --dot: 14px; }
  .loc-pin:hover, .loc-pin:focus-visible, .loc-pin[aria-expanded="true"] { --dot: 18px; }
  .loc-office { width: 26px; height: 26px; margin: -13px 0 0 -13px; border-width: 2px; }
  .loc-office svg { width: 14px; height: 14px; }
  .locations-inset { border-radius: 10px; }
  .locations-inset-caption { font-size: 10px; left: 4px; right: 4px; bottom: 3px; }
  /* bottom sheet */
  .loc-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-height: 78svh; border-radius: 24px 24px 0 0; border-width: 1px 0 0;
    box-shadow: 0 -12px 40px rgb(16 20 24 / .22); padding-bottom: env(safe-area-inset-bottom); }
  .loc-panel-head { padding: 20px 16px 8px; }
  .loc-panel-head::before { content: ""; position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--uui-color-border-standalone); }
  .loc-panel-body { padding: 0 16px 20px; }
  .loc-panel-title { font-size: 22px; }
  .loc-panel .loc-actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  .loc-panel:not([hidden]) { animation: loc-sheet-in .22s var(--ease); }
}
@keyframes loc-sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
/* ===== end locations map ===== */