@charset "UTF-8";
/* =========================================================
   PLATFORMA — Housing Classic Home
   Template: Community Hub
   File: platforma.website.community-hub.css

   NB: @charset "UTF-8" SKAL være første tegn i filen (ingen
   whitespace, ingen comments før). Sikrer arrows (→ ›) og
   andre multi-byte glyphs renders korrekt selv når Azure
   sender Content-Type: text/css UDEN charset + nosniff
   header forbyder browseren at sniffe encoding selv.
   ========================================================= */

/* ─── 1. TOKENS ─────────────────────────────────────────── */

:root {
    --chub-accent:       #1A535C;
    --chub-accent-light: rgba(26, 83, 92, 0.06);
    --chub-accent-mid:   rgba(26, 83, 92, 0.12);
    --chub-primary:      #FF6B35;
    --chub-primary-dark: #E05524;
    --chub-bg:           #E8F4F8;
    --chub-surface:      #ffffff;
    --chub-surface-alt:  #f5f7f9;
    --chub-text:         #0f172a;
    --chub-text-soft:    #475569;
    --chub-text-muted:   #58687c; /* HARD review: secondary TEXT, so ≥ 4.5:1 — 5.7 on white, 5.1 on --chub-bg (was #94a3b8, 2.6) */
    --chub-error:        #b42318; /* HARD-1: website form errors, 6.6:1 on white */
    --chub-border:       rgba(15, 23, 42, 0.08);
    --chub-border-mid:   rgba(15, 23, 42, 0.12);
    --chub-radius:       0.75rem;
    --chub-radius-lg:    1rem;
    --chub-shadow:       0 1px 3px rgba(15, 23, 42, 0.06);
    --chub-shadow-md:    0 4px 16px rgba(15, 23, 42, 0.08);
    --chub-container:    1120px;
    --chub-section-gap:  3rem;
}

/* ─── 2. PAGE SHELL ─────────────────────────────────────── */

.chub {
    background: var(--chub-bg);
    color: var(--chub-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.chub-container {
    max-width: var(--chub-container);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.platforma-site-main:has(> .chub) {
    max-width: none;
    padding: 0;
}

/* ─── 3. PREVIEW BANNER ────────────────────────────────── */

.chub-preview-banner {
    background: var(--chub-accent);
    color: #fff;
    text-align: center;
    padding: 0.6rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.chub-preview-banner-link {
    color: rgba(255, 255, 255, 0.75);
    margin-left: 1rem;
    text-decoration: underline;
}

.chub-preview-banner-link:hover { color: #fff; }

/* ─── 4. HERO ───────────────────────────────────────────── */

.chub-hero {
    background: var(--chub-bg);
    padding: 3.5rem 0 2.5rem;
}

.chub-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

/* Stabilize 3a — single-column mode når intet hero-image er uploadet.
   _Hero.cshtml sætter .chub-hero-inner--single på wrapperen så content
   fylder hele containeren i stedet for at stå i halv bredde ved siden
   af et tomt billed-column. */
.chub-hero-inner--single {
    grid-template-columns: 1fr;
    gap: 0;
}

.chub-hero-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.chub-hero-title {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--chub-text);
    font-style: italic;
    margin: 0;
}

.chub-hero-subtitle {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--chub-text-soft);
    max-width: 32rem;
    margin: 0;
}

.chub-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.5rem;
}

/* Stabilize 4 — hero-image container bruger fast 16:10 aspect-ratio
   så uploaded billeder crops konsekvent uanset naturlig størrelse.

   IM.2 (2026-04-25): tilbage til object-fit:cover (fyld rammen pænt)
   nu hvor admin har kontrol over focal-point via picker. object-position
   sættes inline pr. section/activity baseret på admin's valg, så
   logoer og portrætter kan croppes korrekt uden at klippe det vigtige. */
.chub-hero-visual {
    width: 100%;
    max-width: 520px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--chub-radius-lg);
    box-shadow: var(--chub-shadow-md);
    background: var(--chub-bg);  /* fallback mens image loader */
    margin-left: auto;
}

.chub-hero-img {
    display: block;
    width: 100%;
    height: 100%;
    /* Stabilize-D (2026-04-25): contain valgt over cover så logoer +
       portrætter aldrig klippes. Tom plads i 16:10-rammen udfyldes af
       container-baggrund (theme-aware). Focal-point picker for hero
       kan tilføjes senere som premium-feature; indtil da prioriterer
       vi "vis hele billedet" over "fyld rammen". */
    object-fit: contain;
    object-position: center;
}

/* ─── Slice TS.5 (2026-04-28) — Hero "background-bleed" presentation ────
   Erstatter side-by-side-layoutet med en full-bleed background-image bag
   tekstindholdet. Inspireret af Linear/Vercel marketing-pages: image
   "ånder" bag teksten via en cream-scrim der fader fra opaque venstre
   til transparent højre. Når tenant ikke har uploaded et hero-image,
   render'er vi en subtil grøn/cream-gradient som placeholder.

   Pattern aktiveres ved Hero-section-feltet "presentation" = "background-bleed"
   (ellers default side-by-side-layout). BR-förening-templatet sætter
   det automatisk på alle 8 hovedsider; admin kan toggle pr. section.

   Konsulterede roller: Senior Frontend Design Eng · Senior Brand /
   Visual Identity Director (cream-scrim matcher BRF-domæne-æstetik) ·
   Senior WCAG Accessibility Eng (text-on-scrim opacity sikrer kontrast). */

.chub-hero--bleed {
    position: relative;
    overflow: hidden;
    /* TS.hero-shorter (2026-04-30) — user-feedback: hero fyldte halvdelen
       af skærmen på widescreen, iPad og mobil. Reduceret alle 3 niveauer
       med ~25% for at give mere plads til content nedenunder uden at miste
       hero's visuelle impact. Brand-feel bevares.
       - mobil/tablet ≤900px: 18rem (var 22rem)
       - tablet/desktop 900-1280px: 22rem (var 28rem)  ← denne default
       - large desktop ≥1280px: clamp(22rem, 24vw, 30rem) (var 28→38) */
    min-height: 22rem;
    padding: 0;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, #C8D4C2 0%, #8FA68C 55%, #4F6649 100%);
}

/* Når admin har uploadet et hero-image, sættes som inline-style
   --chub-hero-bleed-image af _Hero.cshtml. Fallback: gradient ovenfor. */
.chub-hero--bleed.chub-hero--bleed-has-image {
    background-image: var(--chub-hero-bleed-image);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

/* Cream-scrim på venstre side — fader til transparent højre, så billede-
   stemningen "ånder" igennem på højre tredjedel af heroen. */
.chub-hero--bleed::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg,
        rgba(248, 244, 235, 0.97) 0%,
        rgba(248, 244, 235, 0.93) 22%,
        rgba(248, 244, 235, 0.72) 45%,
        rgba(248, 244, 235, 0.30) 68%,
        rgba(248, 244, 235, 0.05) 100%);
    pointer-events: none;
}

.chub-hero--bleed .chub-container {
    position: relative;
    z-index: 2;
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
    width: 100%;
}

/* Tekst-indhold låses til venstre tredjedel så billedet kan ånde til højre. */
.chub-hero--bleed .chub-hero-inner {
    grid-template-columns: 1fr;
    gap: 0;
}

.chub-hero--bleed .chub-hero-content {
    max-width: 34rem;
}

/* Bleed-mode skjuler standard-image-column (image bruges kun som baggrund). */
.chub-hero--bleed .chub-hero-visual {
    display: none;
}

@media (max-width: 900px) {
    .chub-hero { padding: 2.5rem 0 2rem; }
    .chub-hero-inner { grid-template-columns: 1fr; gap: 2rem; }
    .chub-hero-title { font-size: 1.9rem; }
    .chub-hero-visual { margin: 0 auto; max-width: 100%; }

    /* TS.hero-shorter (2026-04-30) — bleed på tablet: 22rem → 18rem (-18%) */
    .chub-hero--bleed { min-height: 18rem; }
    .chub-hero--bleed .chub-container { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    /* Mindre intens scrim på tablet — billedet er mindre dominant */
    .chub-hero--bleed::before {
        background: linear-gradient(180deg,
            rgba(248, 244, 235, 0.97) 0%,
            rgba(248, 244, 235, 0.78) 60%,
            rgba(248, 244, 235, 0.55) 100%);
    }
}

@media (max-width: 640px) {
    .chub-hero-title { font-size: 1.6rem; }

    /* TS.hero-responsive (2026-04-29): på rigtig mobil var scrim
       0.97→0.85 så opaque at hero-billedet næsten forsvandt.
       Lad billedet ånde igennem på den nederste tredjedel ved at
       fade scrim ned til 0.45 — tekst på toppen er stadig læselig
       med 0.95-baggrund. */
    /* TS.hero-shorter (2026-04-30) — mobil: 24rem → 18rem */
    .chub-hero--bleed { min-height: 18rem; }
    .chub-hero--bleed::before {
        background: linear-gradient(180deg,
            rgba(248, 244, 235, 0.95) 0%,
            rgba(248, 244, 235, 0.80) 50%,
            rgba(248, 244, 235, 0.45) 100%);
    }
}

/* TS.hero-shorter (2026-04-30) — user-feedback: "hero image højden er
   måske lidt for stort, kan vi gøre det lidt mindre så hero image ikke
   fylder halvdelen af skærmen". Reduceret clamp:
   - var: clamp(28rem, 32vw, 38rem) — 28→38rem på 1280→1900px
   - nu: clamp(22rem, 24vw, 30rem) — 22→30rem (-21% ceiling, -22% floor)
   Hero forbliver visuelt impactful uden at dominere viewport-hjøjden. */
@media (min-width: 1280px) {
    .chub-hero--bleed {
        min-height: clamp(22rem, 24vw, 30rem);
    }
    .chub-hero--bleed .chub-container {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

/* ─── 5. QUICK ACTIONS (2×2 card grid) ──────────────────── */

.chub-section--quickactions {
    padding-top: var(--chub-section-gap);
    padding-bottom: 0;
}

.chub-quickactions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.chub-action-card {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.25rem 1.4rem;
    border-radius: var(--chub-radius);
    border: 1px solid var(--chub-border-mid);
    background: var(--chub-surface);
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    position: relative;
}

.chub-action-card:hover {
    box-shadow: 0 6px 18px rgba(26, 83, 92, 0.10), 0 2px 4px rgba(26, 83, 92, 0.06);
    border-color: rgba(26, 83, 92, 0.22);
    transform: translateY(-1px);
}

.chub-action-card:hover .chub-action-icon {
    transform: scale(1.04);
    box-shadow: 0 6px 14px rgba(26, 83, 92, 0.22);
}

/* Slice TS.17b-polish (2026-04-28) — Premium-icon-treatment.
   Solid Heroicons (24/solid) renderet som hvid silhouet på primary-farvet
   gradient-baggrund. Inverteret farve giver højt visuelt kontrast og
   "Stripe/Linear-feel". data-icon-attributtet bevares for icon-picker (TS.18). */
.chub-action-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg,
        var(--tenant-primary, var(--chub-accent)),
        var(--tenant-primary-dark, #163e4d));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(26, 83, 92, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.chub-action-icon img {
    width: 24px;
    height: 24px;
    /* Solid Heroicons har fill="currentColor" — sort fill som default.
       brightness(0) flader til ren sort, invert(1) vender til ren hvid.
       Resultat: ren hvid silhouet på primary-farvet baggrund. */
    filter: brightness(0) invert(1);
    /* Aria-label-friendly — billedet er rent dekorativt */
    pointer-events: none;
}

/* Pil til højre for at signalere klikbarhed (subtil — kun ved hover) */
.chub-action-arrow {
    margin-left: auto;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--chub-text-muted, #94a3b8);
    transition: transform 0.18s ease, color 0.18s ease;
}

.chub-action-arrow::before {
    /* Unicode-escape \2192 = → (RIGHTWARDS ARROW). Bruges fremfor
       litteral glyph for at være encoding-neutral — virker selv hvis
       filen serveres uden charset-header. */
    content: "\2192";
    font-size: 1rem;
    line-height: 1;
}

.chub-action-card:hover .chub-action-arrow {
    transform: translateX(2px);
    color: var(--tenant-primary, var(--chub-accent));
}

.chub-action-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.chub-action-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--chub-text);
}

.chub-action-desc {
    font-size: 0.82rem;
    color: var(--chub-text-muted);
}

/* QA-ARROW (2026-10-14) — a second glyph (::after, \203A "›") used to sit beside the ::before arrow above, so every
   quick-action card ended in "→›" (seen on Baba International's site). One arrow, the one the 18px box, the hover
   nudge and the colour transition were built for. */

@media (max-width: 640px) {
    .chub-quickactions-grid { grid-template-columns: 1fr; }
}

/* ─── 6. SECTION PATTERN ───────────────────────────────── */

.chub-section {
    padding: var(--chub-section-gap) 0;
}

.chub-section-header {
    margin-bottom: 1.5rem;
}

.chub-section-header--linked {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.chub-section-title {
    font-size: 1.35rem;
    font-weight: 650;
    color: var(--chub-text);
    letter-spacing: -0.01em;
    margin: 0 0 0.2rem;
}

.chub-section-subtitle {
    font-size: 0.88rem;
    color: var(--chub-text-muted);
    margin: 0;
}

.chub-section-footer {
    margin-top: 1.25rem;
    text-align: right;
}

.chub-section-footer-link {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--chub-accent);
    text-decoration: none;
}

.chub-section-footer-link:hover { text-decoration: underline; }

/* ─── 7. CONTENT GRID (Events + Notices side by side) ──── */

.chub-section--content {
    padding: var(--chub-section-gap) 0;
}

.chub-content-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.chub-content-col {
    min-width: 0;
}

@media (max-width: 900px) {
    .chub-content-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ─── 8. EVENTS ─────────────────────────────────────────── */

.chub-events {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chub-event {
    display: grid;
    grid-template-columns: 5.5rem 1fr auto;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--chub-surface);
    border-radius: var(--chub-radius);
    border: 1px solid var(--chub-border);
    box-shadow: var(--chub-shadow);
    align-items: center;
}

.chub-event-date { display: flex; flex-direction: column; }

.chub-event-date-day {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--chub-text);
}

.chub-event-date-time {
    font-size: 0.8rem;
    color: var(--chub-text-muted);
    margin-top: 0.1rem;
}

.chub-event-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.chub-event-title-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.chub-event-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--chub-text);
    margin: 0;
}

.chub-event-badge {
    display: inline-flex;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.chub-event-badge--social      { background: rgba(255, 107, 53, 0.12); color: #c4431a; }
.chub-event-badge--meeting     { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; }
.chub-event-badge--maintenance { background: rgba(16, 185, 129, 0.12); color: #047857; }
.chub-event-badge--default     { background: var(--chub-accent-light); color: var(--chub-accent); }

.chub-event-location,
.chub-event-capacity {
    font-size: 0.8rem;
    color: var(--chub-text-muted);
}

.chub-event-action {
    flex-shrink: 0;
    white-space: nowrap;
}

.chub-event-action-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--chub-border-mid);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--chub-accent);
    background: var(--chub-surface);
    cursor: default;
}

@media (max-width: 640px) {
    .chub-event { grid-template-columns: 1fr; gap: 0.5rem; }
    .chub-event-date { flex-direction: row; gap: 0.5rem; align-items: baseline; }
    .chub-event-action { display: none; }
}

/* ─── 9. NOTICES ────────────────────────────────────────── */

.chub-notices {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chub-notice {
    background: var(--chub-surface);
    padding: 1.1rem 1.25rem;
    border-radius: var(--chub-radius);
    border: 1px solid var(--chub-border);
    box-shadow: var(--chub-shadow);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Slice TS.notice-board-modernized (2026-05-18) — Pilot Launch §8 P2 #4.
   Fresh-notice highlight: subtle left-border in tenant accent so the eye
   lands on what's new since the resident's last visit. Pairs with the
   inline "NY"-badge on the title row. */
.chub-notice--fresh {
    border-left: 3px solid var(--tenant-primary, var(--chub-accent));
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.chub-news-article--fresh {
    border-left: 3px solid var(--tenant-primary, var(--chub-accent));
}

.chub-notice-fresh-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 2px 8px;
    background: var(--tenant-primary, var(--chub-accent));
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
    vertical-align: middle;
    line-height: 1.4;
}

.chub-notice-title {
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--chub-text);
    margin: 0 0 0.35rem;
    line-height: 1.3;
}

.chub-notice-text {
    font-size: 0.84rem;
    color: var(--chub-text-soft);
    margin: 0 0 0.5rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chub-notice-meta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.4rem;
}

.chub-notice-date,
.chub-notice-author {
    font-size: 0.75rem;
    color: var(--chub-text-muted);
}

.chub-notice-link {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--chub-accent);
    text-decoration: none;
}

.chub-notice-link:hover { text-decoration: underline; }

/* ─── 10. FACILITIES ────────────────────────────────────── */

.chub-facilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.chub-facility {
    background: var(--chub-surface);
    border-radius: var(--chub-radius);
    border: 1px solid var(--chub-border);
    box-shadow: var(--chub-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chub-facility-img {
    height: 150px;
    background: linear-gradient(135deg, #e0eff3, #d1e8ee);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.chub-facility-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chub-facility-img-icon {
    font-size: 2rem;
    opacity: 0.3;
}

.chub-facility-img-icon[data-icon="house"]::before  { content: "\1F3E0"; }
.chub-facility-img-icon[data-icon="wash"]::before   { content: "\1F9FA"; }
.chub-facility-img-icon[data-icon="grill"]::before  { content: "\1F525"; }
.chub-facility-img-icon[data-icon="bed"]::before    { content: "\1F6CF"; }
.chub-facility-img-icon[data-icon="gym"]::before    { content: "\1F3CB"; }
.chub-facility-img-icon[data-icon="car"]::before    { content: "\1F697"; }

.chub-facility-body {
    padding: 1rem 1.15rem 0.5rem;
    flex: 1;
}

.chub-facility-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--chub-text);
    margin: 0 0 0.25rem;
}

.chub-facility-desc {
    font-size: 0.82rem;
    color: var(--chub-text-soft);
    line-height: 1.5;
    margin: 0;
}

.chub-facility-avail {
    font-size: 0.78rem;
    color: var(--chub-text-muted);
    margin: 0.5rem 0 0;
}

.chub-facility-action {
    padding: 0.75rem 1.15rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 900px) {
    .chub-facilities-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .chub-facilities-grid { grid-template-columns: 1fr; }
}

/* ─── 11. BUTTONS ───────────────────────────────────────── */

.chub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.35rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.9rem;
    font-weight: 550;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
    line-height: 1;
}

.chub-btn--primary {
    background: var(--chub-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.25);
}

.chub-btn--primary:hover {
    background: var(--chub-primary-dark);
    box-shadow: 0 4px 14px rgba(255, 107, 53, 0.30);
    transform: translateY(-1px);
}

.chub-btn--secondary {
    background: var(--chub-surface);
    color: var(--chub-accent);
    border-color: var(--chub-border-mid);
}

.chub-btn--secondary:hover {
    background: var(--chub-accent-light);
    border-color: var(--chub-accent-mid);
}

.chub-btn--sm {
    padding: 0.4rem 1rem;
    font-size: 0.82rem;
}

.chub-btn--disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

/* ─── 12. SUBPAGE HERO + RICH TEXT ───────────────────────── */

.chub-hero--subpage {
    padding: 3rem 0 2rem;
}

.chub-hero--subpage .chub-hero-title {
    font-style: normal;
    font-size: 2rem;
}

.chub-hero-eyebrow {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--chub-text-muted);
    margin-bottom: 0.4rem;
}

.chub-richtext {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--chub-text-soft);
    max-width: 42rem;
}

.chub-richtext p { margin: 0 0 1rem; }
.chub-richtext p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
    .chub-hero--subpage .chub-hero-title {
        font-size: 1.5rem;
    }
}

/* ─── 13. EMPTY STATE ───────────────────────────────────── */

.chub-empty {
    text-align: center;
    color: var(--chub-text-muted);
    font-size: 0.95rem;
    padding: 3rem 0;
}

/* ─── 13. PRINT ─────────────────────────────────────────── */

@media print {
    .chub-preview-banner,
    .chub-section--quickactions { display: none; }
    .chub-hero { padding: 1rem 0; }
    .chub-section { padding: 1rem 0; }
}

/* ═══════════════════════════════════════════════════════════
   New section types (Fase W2):
   - CTA band
   - Gallery
   - Two-column
   - Testimonial
   - FAQ
   ═══════════════════════════════════════════════════════════ */

.chub-section-intro {
    max-width: 720px;
    margin: 0 auto 1.5rem;
    text-align: center;
    color: rgba(15, 23, 42, 0.7);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* ── CTA band ───────────────────────────────────────────── */
.chub-cta-band {
    padding: 3rem 0;
    /* Gradient built from tenant primary. HARD-1 (2026-10-12): the end stop and
       the text color come from the branding component (--tenant-cta-end,
       --tenant-cta-fg), computed so the text reaches 4.5:1 on both ends for any
       primary; the end moves away from the text color (darker under white
       text, lighter under dark). The color-mix/white fallbacks are the old
       values, for a page without the component. */
    --pf-cta-fg: var(--tenant-cta-fg, #fff);
    background: linear-gradient(135deg, var(--tenant-primary, #1a535c) 0%, var(--tenant-cta-end, color-mix(in srgb, var(--tenant-primary, #1a535c) 75%, #000 25%)) 100%);
    color: var(--tenant-cta-fg, #fff);
}
.chub-cta-band-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.chub-cta-band-text {
    flex: 1;
    min-width: 260px;
}
/* HARD-1 (2026-10-12): the title and subtitle take the band's text color. The
   global h1-h6 color (platforma-base.css) used to win here, drawing the title
   #0F172A on the primary (2.15:1 on Navy, 2.98:1 on Ruby); the subtitle's 0.9
   opacity cost contrast on light bands. */
.chub-cta-band-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    margin: 0 0 0.5rem;
    line-height: 1.2;
    color: inherit;
}
.chub-cta-band-subtitle {
    font-size: 1.05rem;
    margin: 0;
    color: inherit;
    line-height: 1.5;
    max-width: 520px;
}
.chub-cta-band .chub-btn--primary {
    /* SEC.16.5 (2026-05-09) — uses theme-aware Secondary palette so CTA
       follows tenant tema. Falls back to orange if --tenant-secondary
       is unset (legacy preview contexts before Secondary tokens shipped). */
    background: var(--tenant-secondary, #ff6b35);
    color: var(--tenant-on-secondary, #fff);
    font-size: 1rem;
    padding: 0.9rem 1.8rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.chub-cta-band .chub-btn--primary:hover {
    background: var(--tenant-secondary-dark, #e5552a);
    transform: translateY(-1px);
}

/* ── Gallery (TS.17d-fix2 2026-04-28: CSS-masonry) ──────────────────
   Erstatter den gamle rigid grid (4/3 aspect-ratio + crop) med en
   ægte masonry-layout (CSS columns). Hver figure beholder sit native
   aspect-ratio. Caption (alt-text → figcaption) renders automatisk
   under hver billede når non-empty.

   Layout: 3 kolonner desktop / 2 tablet / 1 mobile.
   break-inside: avoid sikrer at figure ikke splittes mellem kolonner. */

.chub-gallery-grid {
    column-count: 3;
    column-gap: 1rem;
    /* Reset eventuel tidligere grid-display fra cached page-render */
    display: block;
}
@media (max-width: 1024px) {
    .chub-gallery-grid { column-count: 2; }
}
@media (max-width: 600px) {
    .chub-gallery-grid { column-count: 1; }
}

.chub-gallery-item {
    /* Masonry: bryd ikke figure mellem kolonner */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;

    /* inline-block + width:100% er nødvendigt for nogle browsers (Firefox) */
    display: inline-block;
    width: 100%;
    margin: 0 0 1rem;

    overflow: hidden;
    border-radius: 12px;
    background: var(--chub-surface, #ffffff);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chub-gallery-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}

.chub-gallery-item img {
    width: 100%;
    height: auto;            /* native aspect-ratio bevares */
    object-fit: contain;     /* hele billedet vises uden crop */
    display: block;
}

/* figcaption — vis alt-text som synlig billede-tekst */
.chub-gallery-caption {
    padding: 0.5rem 0.85rem 0.7rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--chub-text-muted, #6b7280);
    background: var(--chub-accent-light, #f3f4f6);
    border-top: 1px solid var(--chub-border-mid, #e5e7eb);
    text-align: center;
    word-break: break-word;
}

/* ── Stats fact-tiles (TS.19 2026-04-28) ───────────────────────────
   Premium-look fact-tiles til "Om föreningen"-context. Auto-fit grid
   som tilpasser sig 2-6 tiles. Hver tile har stort value (display-font)
   over kompakt label. Hover-effekt for interaktiv feel. */

.chub-section--stats {
    /* lidt mere padding så tiles får luft */
    padding-top: var(--chub-section-gap);
}

.chub-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.chub-stat-tile {
    background: var(--chub-surface, #ffffff);
    border: 1px solid var(--chub-border-mid, #e5e7eb);
    border-radius: 14px;
    padding: 1.5rem 1.25rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.chub-stat-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.10);
    border-color: var(--tenant-primary-soft, var(--chub-accent-light, #e5e7eb));
}

.chub-stat-value {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--tenant-primary, var(--chub-accent, #1A535C));
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
    /* Tabular-nums så "416" og "1962" ligger på linje */
    font-variant-numeric: tabular-nums;
}

.chub-stat-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--chub-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.3;
}

/* Mobile: stack til 1 tile per række hvis tiles bliver for trange */
@media (max-width: 480px) {
    .chub-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    .chub-stat-tile { padding: 1.1rem 0.75rem; }
    .chub-stat-value { font-size: 1.75rem; }
}

/* ── Team grid (TS.20 2026-04-28) ──────────────────────────────────
   Styrelse-medlemmer i auto-fit-grid med rund avatar + navn + rolle.
   Op til 8 medlemmer; tomme slots filtreres bort i Razor. Premium-look:
   subtil shadow, hover-lift, primary-color initial-bobble når intet
   foto. Mobile: 2 kolonner. */

.chub-section--team {
    padding-top: var(--chub-section-gap);
}

/* TS.team-grid-balance (2026-04-30) — bumped minmax 180→220px så 8-card
   styrelse-grids viser 4-per-row på standard desktop (1280-1600px) →
   balanced 4+4 i stedet for ujævn 5+3. Naturlig fallback til 3+3+2
   på smaller width (720-1100px), 2-per-row på mobile. */
.chub-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem 1rem;
    margin-top: 1.5rem;
    /* Centrer trailing-items når sidste row er ufuld (fx 4+4 ok, men
       hvis grid forfremmer 3+3+2, så de 2 sidste centreres via auto-fit
       + justify-content-fallback. auto-fit alene venstrejusterer.) */
    justify-content: center;
}

/* Cap max-width per card så 1-2 kort på en wide-row ikke strækkes til
   urealistisk store cirkler. Med 8 styrelse-cards er det ikke et issue,
   men 2-card vaktmästare-rows på Kontakt-side får cirkler i normal-
   størrelse i stedet for 600px-monstre. */
.chub-team-card {
    max-width: 280px;
    width: 100%;
}

.chub-team-card {
    text-align: center;
    padding: 0.75rem;
    transition: transform 0.18s ease;
}

.chub-team-card:hover {
    transform: translateY(-2px);
}

.chub-team-avatar {
    width: 120px;
    height: 120px;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg,
        var(--tenant-primary, var(--chub-accent, #1A535C)),
        var(--tenant-primary-dark, #163e4d));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.chub-team-card:hover .chub-team-avatar {
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
    transform: scale(1.03);
}

.chub-team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chub-team-avatar-initial {
    color: white;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}

.chub-team-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--chub-text, #1f2937);
    margin-bottom: 0.2rem;
    line-height: 1.3;
    word-break: break-word;
}

.chub-team-role {
    font-size: 0.78rem;
    color: var(--chub-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
    word-break: break-word;
}

@media (max-width: 480px) {
    .chub-team-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem 0.5rem;
    }
    .chub-team-avatar {
        width: 90px;
        height: 90px;
    }
    .chub-team-avatar-initial { font-size: 1.85rem; }
}

/* ── Map section (TS.21 2026-04-28) ─────────────────────────────────
   Adresse + OpenStreetMap iframe i 2-kolonne layout. Mobile: stacked. */

.chub-section--map { padding-top: var(--chub-section-gap); }

.chub-map-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2rem;
    margin-top: 1.5rem;
    align-items: start;
}

.chub-map-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chub-map-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.chub-map-row strong {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--chub-text-muted, #6b7280);
    font-weight: 600;
}

.chub-map-link {
    color: var(--tenant-primary, var(--chub-accent));
    text-decoration: none;
    font-weight: 500;
}

.chub-map-link:hover { text-decoration: underline; }

.chub-map-cta {
    align-self: flex-start;
    margin-top: 0.5rem;
}

.chub-map-iframe-wrap {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    background: var(--chub-accent-light, #f3f4f6);
}

.chub-map-placeholder {
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--chub-accent-light, #f3f4f6);
    border: 2px dashed var(--chub-border-mid, #e5e7eb);
    border-radius: 12px;
    color: var(--chub-text-muted, #6b7280);
    text-align: center;
    padding: 2rem;
}

@media (max-width: 720px) {
    .chub-map-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ── Hours section (TS.22 2026-04-28) ───────────────────────────────
   Op til 4 åbningstider-grupper i auto-fit-grid. Multi-line hours via
   white-space: pre-line. Mobile: 1 kolonne. */

.chub-section--hours { padding-top: var(--chub-section-gap); }

.chub-hours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.chub-hours-card {
    background: var(--chub-surface, #ffffff);
    border: 1px solid var(--chub-border-mid, #e5e7eb);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.chub-hours-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.10);
}

.chub-hours-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tenant-primary, var(--chub-accent, #1A535C));
    margin: 0 0 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

.chub-hours-times {
    font-size: 0.95rem;
    color: var(--chub-text, #1f2937);
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
}

.chub-hours-note {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--chub-border-mid, #e5e7eb);
    font-size: 0.78rem;
    color: var(--chub-text-muted, #6b7280);
    font-style: italic;
}

/* ── Alert banner (TS.23 2026-04-28) ───────────────────────────────
   Sticky/inline notification med severity-baseret farvekodning.
   info=blå, warning=gul, danger=rød. Inverteret for høj kontrast. */

.chub-alert {
    padding: 1rem 0;
    border-radius: 0;
    margin: 0 0 var(--chub-section-gap);
}

.chub-alert-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.chub-alert-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chub-alert-icon img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

.chub-alert-text {
    flex: 1;
    min-width: 240px;
}

.chub-alert-title {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
}

.chub-alert-body {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.95;
}

.chub-alert-cta {
    align-self: center;
    padding: 0.55rem 1.1rem;
    background: rgba(255, 255, 255, 0.15);
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: background 0.18s ease;
}

.chub-alert-cta:hover {
    background: rgba(255, 255, 255, 0.25);
}

.chub-alert--info { background: #1d4ed8; color: white; }
.chub-alert--warning { background: #d97706; color: white; }
.chub-alert--danger { background: #b91c1c; color: white; }

/* ── Timeline (TS.24 2026-04-28) ────────────────────────────────────
   Vertikal timeline med år som anchor. Klassisk "tree-line"-design
   med markører på venstre side. */

.chub-section--timeline { padding-top: var(--chub-section-gap); }

.chub-timeline {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    position: relative;
    padding-left: 2.5rem;
}

.chub-timeline::before {
    content: "";
    position: absolute;
    left: 0.85rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: linear-gradient(180deg,
        var(--tenant-primary, var(--chub-accent, #1A535C)),
        transparent);
}

.chub-timeline-item {
    position: relative;
    padding-bottom: 1.75rem;
}

.chub-timeline-item:last-child { padding-bottom: 0; }

.chub-timeline-marker {
    position: absolute;
    left: -2rem;
    top: 0.4rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--tenant-primary, var(--chub-accent, #1A535C));
    border: 3px solid var(--chub-surface, #ffffff);
    box-shadow: 0 0 0 2px var(--tenant-primary, var(--chub-accent, #1A535C));
}

.chub-timeline-content {
    background: var(--chub-surface, #ffffff);
    border: 1px solid var(--chub-border-mid, #e5e7eb);
    border-radius: 12px;
    padding: 1.1rem 1.4rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.chub-timeline-year {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--tenant-primary, var(--chub-accent, #1A535C));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.3rem;
}

.chub-timeline-title {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--chub-text, #1f2937);
}

.chub-timeline-body {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--chub-text-muted, #6b7280);
}

/* ── Video embed (TS.25 2026-04-28) ─────────────────────────────────
   YouTube/Vimeo iframe med 16:9 aspect-ratio. */

.chub-section--video { padding-top: var(--chub-section-gap); }

.chub-video-wrap {
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
    margin-top: 1rem;
    background: #000;
}

.chub-video-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.chub-video-caption {
    margin: 0.85rem 0 0;
    font-size: 0.88rem;
    color: var(--chub-text-muted, #6b7280);
    text-align: center;
    font-style: italic;
}

.chub-video-placeholder {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--chub-accent-light, #f3f4f6);
    border: 2px dashed var(--chub-border-mid, #e5e7eb);
    border-radius: 14px;
    color: var(--chub-text-muted, #6b7280);
    text-align: center;
    padding: 2rem;
}

/* ── Newsletter-signup (TS.26 2026-04-28) ───────────────────────────
   Premium signup-card centeret på siden. Mailto-form (frontend-only). */

.chub-section--newsletter { padding-top: var(--chub-section-gap); }

.chub-newsletter-card {
    max-width: 640px;
    margin: 1.5rem auto 0;
    padding: 2rem 2.25rem;
    background: linear-gradient(135deg,
        var(--tenant-primary, var(--chub-accent, #1A535C)),
        var(--tenant-primary-dark, #163e4d));
    border-radius: 16px;
    text-align: center;
    color: white;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.16);
}

.chub-newsletter-title {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
}

.chub-newsletter-intro {
    margin: 0 0 1.25rem;
    font-size: 0.98rem;
    line-height: 1.5;
    opacity: 0.92;
}

.chub-newsletter-label {
    display: block;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
    opacity: 0.92;
}

.chub-newsletter-input-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.chub-newsletter-input {
    flex: 1;
    min-width: 220px;
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: 8px;
    font-size: 0.95rem;
    background: white;
    color: var(--chub-text, #1f2937);
}

.chub-newsletter-submit {
    flex-shrink: 0;
    background: white !important;
    color: var(--tenant-primary, var(--chub-accent, #1A535C)) !important;
    font-weight: 600;
}

.chub-newsletter-placeholder {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    font-size: 0.9rem;
    opacity: 0.92;
}

/* ── Two-column ─────────────────────────────────────────── */
.chub-two-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
/* Slice D.7 — three-column variant. Modifier added by _TwoColumn.cshtml
   when col3 is populated.
   Phase 2.F (2026-05-14) — fix: previously the modifier was also added
   in edit-mode unconditionally, which made 2-column sections render as
   3-column in the editor regardless of col3 content. Now: only when
   col3 actually populated. Edit-mode renders col3 as a dashed-border
   "add column" placeholder via .chub-column--editor-placeholder. */
.chub-two-column-grid.chub-two-column-grid--three {
    grid-template-columns: 1fr 1fr 1fr;
}
/* Phase 2.F (deprecated 2026-05-16 by Slice TS.cms-fix-twocolumn) —
   editor placeholder for empty col3 slot. Kept for legacy data shape
   tolerance; new sections use the chub-add-column-trigger CTA below. */
.chub-column.chub-column--editor-placeholder {
    border: 2px dashed var(--platforma-border, #d1d5db);
    background: var(--platforma-surface-subtle, #f9fafb);
    opacity: 0.7;
    transition: opacity 0.15s ease;
}
.chub-column.chub-column--editor-placeholder:hover,
.chub-column.chub-column--editor-placeholder:focus-within {
    opacity: 1;
}

/* ── Slice TS.cms-fix-twocolumn (2026-05-16) — explicit "+ Tilføj 3. kolonne"
   disclosure CTA. Replaces the dashed-placeholder column with a clear
   CTA button that, when clicked, reveals the col3 inputs in-place via
   native <details>/<summary> (no JS dependency). When admin types into
   col3Heading the next auto-save makes hasCol3=true and on next render
   the disclosure is replaced by a real column.
   Closes Kamille-test-finding #9. */
.chub-add-column-control {
    background: var(--platforma-surface-subtle, #f9fafb);
    border: 2px dashed var(--platforma-border, #d1d5db);
    border-radius: 14px;
    padding: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.chub-add-column-control[open] {
    background: #fff;
    border-style: solid;
    border-color: var(--platforma-primary, #B91C36);
}
.chub-add-column-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 220px;
    padding: 2rem 1.5rem;
    cursor: pointer;
    color: var(--platforma-gray-600, #4b5563);
    font-weight: 500;
    list-style: none;
    text-align: center;
}
.chub-add-column-trigger::-webkit-details-marker { display: none; }
.chub-add-column-trigger::marker { content: ""; }
.chub-add-column-control[open] .chub-add-column-trigger {
    min-height: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--platforma-border-soft, #e5e7eb);
    background: var(--platforma-surface-subtle, #f9fafb);
    color: var(--platforma-primary, #B91C36);
    font-size: 0.875rem;
}
.chub-add-column-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: var(--platforma-primary, #B91C36);
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}
.chub-add-column-control[open] .chub-add-column-icon {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1rem;
    transform: rotate(45deg); /* + becomes × — affords "close" semantically */
    background: var(--platforma-gray-500, #6b7280);
}
.chub-add-column-label {
    font-size: 1rem;
    color: inherit;
}
.chub-add-column-control[open] .chub-add-column-label {
    font-size: 0.8rem;
    color: var(--platforma-gray-600, #4b5563);
}
.chub-add-column-trigger:hover .chub-add-column-icon {
    transform: scale(1.05);
    transition: transform 0.15s ease;
}
.chub-add-column-control[open] .chub-add-column-trigger:hover .chub-add-column-icon {
    transform: rotate(45deg) scale(1.05);
}

/* Newly-added column inside the disclosure — sits flush inside the
   <details> container, no extra border (the container has the border). */
.chub-column.chub-column--newly-added {
    border-radius: 0 0 14px 14px;
    background: #fff;
    border: none;
    margin: 0;
}

/* Remove-hint for already-populated col3 in edit-mode. Subtle so it
   doesn't compete with content but discoverable enough that admin
   knows how to remove the column. */
.chub-column-remove-hint {
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--platforma-info-soft, #eff6ff);
    border-left: 3px solid var(--platforma-info, #3b82f6);
    border-radius: 0 6px 6px 0;
    font-size: 0.8rem;
    color: var(--platforma-gray-700, #374151);
    line-height: 1.4;
}
.chub-column-remove-hint > span:first-child {
    margin-right: 0.35rem;
}

/* Slice TS.facilities-section-config (2026-05-16) — admin-only edit-mode
   hint surfacing config options that aren't immediately obvious in the
   rendered section. Reuse the info-blue accent from chub-column-remove-hint
   for visual consistency. */
.chub-section-edit-hint {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    background: var(--platforma-info-soft, #eff6ff);
    border-left: 3px solid var(--platforma-info, #3b82f6);
    border-radius: 0 6px 6px 0;
    font-size: 0.8rem;
    color: var(--platforma-gray-700, #374151);
    line-height: 1.45;
}
.chub-section-edit-hint > span:first-child {
    margin-right: 0.35rem;
}
@media (max-width: 1024px) {
    .chub-two-column-grid.chub-two-column-grid--three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .chub-two-column-grid { grid-template-columns: 1fr; }
    .chub-two-column-grid.chub-two-column-grid--three { grid-template-columns: 1fr; }
}
.chub-column {
    background: #fff;
    border-radius: 14px;
    padding: 1.8rem;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}
.chub-column-image {
    margin: -1.8rem -1.8rem 1.2rem;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #f1f5f9;
}
.chub-column-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.chub-column-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.75rem;
}
.chub-column-body {
    color: #475569;
    line-height: 1.65;
    /* Slice TS.cms-fix-fontsize (2026-05-16) — opt into the
       per-section font-size override from the Design panel. Default
       falls back to inherit (which inherits from the wrap-div OR the
       browser/section default). */
    font-size: var(--cms-section-font-size, inherit);
}

/* Slice TS.cms-fix-fontsize (2026-05-16) — body-text classes opt into
   the per-section font-size override. The wrap-div emitted by
   HtmlHelperTemplateSectionExtensions.BuildInlineStyle sets the custom
   property when the admin selects a fontSize in the Design panel.
   Headings intentionally retain their own font-size for typographic
   hierarchy — change `xs / sm / md / lg / xl` only scales body prose. */
.chub-rich-text,
.chub-section p,
.chub-facility-desc,
.chub-testimonial-quote,
.chub-faq-answer {
    font-size: var(--cms-section-font-size, inherit);
}

/* ── Testimonial ────────────────────────────────────────── */
.chub-testimonial-card {
    max-width: 720px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
    text-align: center;
}
.chub-testimonial-quote {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-style: italic;
    color: var(--tenant-primary, #1a535c);
    line-height: 1.55;
    margin: 0 0 1.5rem;
}
.chub-testimonial-author {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    text-align: left;
}
.chub-testimonial-photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}
.chub-testimonial-name {
    font-weight: 600;
    color: #0f172a;
}
.chub-testimonial-role {
    font-size: 0.88rem;
    color: #64748b;
    margin-top: 2px;
}

/* ── FAQ ────────────────────────────────────────────────── */
.chub-faq-list {
    /* Slice D.12 — dropped the 780px max-width that made FAQ narrower
       than every other section (gallery / two-column / notices etc.
       all fill the .chub-container). Admin reported the inconsistency;
       FAQ now inherits the container's full inner width. Long FAQ
       answers still read fine because .chub-faq-answer has its own
       line-height/padding tuned for readability. */
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.chub-faq-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.chub-faq-item[open] {
    border-color: var(--tenant-primary, #1a535c);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.chub-faq-question {
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    font-size: 1rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.chub-faq-question::-webkit-details-marker { display: none; }
.chub-faq-question::after {
    content: '+';
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--tenant-primary, #1a535c);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.chub-faq-item[open] .chub-faq-question::after { transform: rotate(45deg); }
.chub-faq-answer {
    padding: 0 1.25rem 1.1rem;
    color: #475569;
    line-height: 1.65;
}

/* TS.news-list (2026-04-29) — Fuld-body news for dedikerede nyheter-pages.
   Layout: stacked articles, image-left/text-right desktop, stacked mobile.
   Anchor-id'er pegges af "Læs mere"-links fra News preview-cards andre steder.
   scroll-margin-top sikrer at anchor-scroll ikke ender bagved sticky-header. */
.chub-section--news-list .chub-news-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

/* TS.news-collapse (2026-04-29) — <details>-baseret collapse/expand.
   Recent articles (inden for recentDays) er open by default; ældre er
   collapsed. Built-in HTML5 details/summary giver a11y, keyboard-support
   og graceful degradation uden JS. */
.chub-news-article {
    background: var(--chub-surface, #fff);
    border: 1px solid var(--chub-border-mid, #e5e7eb);
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.18s ease;
    scroll-margin-top: 140px;
}
.chub-news-article:hover {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}
.chub-news-article:target {
    outline: 2px solid var(--tenant-primary, #1a535c);
    outline-offset: 2px;
}

/* Header-row — altid synlig, klikbar for toggle */
.chub-news-article-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color 0.15s ease;
}
.chub-news-article-summary-row::-webkit-details-marker { display: none; }
.chub-news-article-summary-row:hover {
    background: var(--chub-surface-hover, #f9fafb);
}
.chub-news-article-summary-row:focus-visible {
    outline: 2px solid var(--tenant-primary, #1a535c);
    outline-offset: -2px;
}

.chub-news-article-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1 1 auto;
}
.chub-news-article-title {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--chub-text-strong, #0f172a);
}
.chub-news-article-pin {
    display: inline-flex;
    width: max-content;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tenant-primary, var(--chub-accent, #b91c1c));
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.chub-news-article-time {
    font-size: 0.85rem;
    color: var(--chub-text-muted, #6b7280);
}

/* Chevron rotation: ned (lukket) → op (åben) */
.chub-news-article-chevron {
    flex-shrink: 0;
    color: var(--chub-text-muted, #6b7280);
    transition: transform 0.22s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--chub-accent-light, #f3f4f6);
}
.chub-news-article[open] .chub-news-article-chevron {
    transform: rotate(180deg);
}

/* Content wrapper — synlig kun når details er open */
.chub-news-article-content-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 1.5rem;
    padding: 0 1.5rem 1.5rem;
    border-top: 1px solid var(--chub-border-light, #f3f4f6);
    padding-top: 1.5rem;
    margin-top: 0;
}

/* TS.news-list-fix (2026-04-29) — auto-adjust når billede mangler.
   1-col fuld bredde med max-width 760px for læse-venlig line-length. */
.chub-news-article--no-image .chub-news-article-content-wrapper {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.chub-news-article:hover {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}
.chub-news-article:target {
    /* Visuel feedback når anchor matcher fragment-id */
    outline: 2px solid var(--tenant-primary, #1a535c);
    outline-offset: 2px;
}
.chub-news-article-img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--chub-accent-light, #f3f4f6);
    border-radius: 8px;
}
.chub-news-article-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* SEC.16.5 (2026-05-09) — Theme-aware placeholder for notice-info.svg.
   Replaces the hardcoded red gradient (notice-info.svg) with a tenant-
   primary gradient background + masked SVG-overlay (transparent variant
   notice-info-themed.svg). When operatøren skifter tema, baggrunden
   følger live via --tenant-primary token. Operator-uploaded images
   bevares uændret som <img> så kun seed-placeholder rammes. */
.chub-news-article-img--themed-placeholder {
    background:
        url("/seed-images/notice-info-themed.svg") center/cover no-repeat,
        linear-gradient(135deg,
            var(--tenant-primary, #b91c1c) 0%,
            var(--tenant-primary-dark, #7c2d12) 100%);
}
.chub-news-article-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.chub-news-article-pin {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tenant-primary, var(--chub-accent, #b91c1c));
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.chub-news-article-title {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--chub-text-strong, #0f172a);
}
.chub-news-article-meta {
    font-size: 0.85rem;
    color: var(--chub-text-muted, #6b7280);
}
.chub-news-article-summary {
    font-size: 1.02rem;
    color: var(--chub-text, #334155);
    margin: 0.25rem 0 0;
    font-style: italic;
    line-height: 1.55;
}
.chub-news-article-content {
    color: var(--chub-text, #334155);
    line-height: 1.7;
    font-size: 1rem;
    margin-top: 0.5rem;
}
.chub-news-article-content p {
    margin: 0 0 0.85rem;
}
.chub-news-article-content p:last-child {
    margin-bottom: 0;
}

/* Mobile: stacker billede over tekst */
@media (max-width: 720px) {
    .chub-news-article {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.25rem;
    }
    .chub-news-article-img {
        aspect-ratio: 16 / 9;
    }
    .chub-news-article-title {
        font-size: 1.2rem;
    }
}

/* ────────────────────────────────────────────────────────────────────────
   Slice TS.news-list-pagination + TS.notices-list-pagination (2026-04-30)
   Pagination-controls til archive-feeds. Anvendes i _NewsList og _NoticesList
   når der findes mere end én side. Mobile-first: prev/next på første linje,
   page-numbers wrapper.
   ──────────────────────────────────────────────────────────────────────── */

.chub-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--chub-border, #e5e7eb);
}

.chub-pagination-link,
.chub-pagination-page {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.95rem;
    border-radius: 0.45rem;
    border: 1px solid var(--chub-border, #e5e7eb);
    background: var(--chub-surface, #ffffff);
    color: var(--chub-text, #1f2937);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 120ms, border-color 120ms, color 120ms;
}

.chub-pagination-link:hover,
.chub-pagination-page:hover {
    background: var(--chub-surface-alt, #f3f4f6);
    border-color: var(--chub-text-muted, #9ca3af);
    color: var(--chub-text, #1f2937);
}

.chub-pagination-link:focus-visible,
.chub-pagination-page:focus-visible {
    outline: 2px solid var(--chub-accent, #2563eb);
    outline-offset: 2px;
}

.chub-pagination-pages {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.35rem;
}

.chub-pagination-pages li {
    margin: 0;
}

.chub-pagination-current {
    background: var(--chub-accent, #2563eb);
    border-color: var(--chub-accent, #2563eb);
    color: #ffffff;
    cursor: default;
}

.chub-pagination-current:hover {
    background: var(--chub-accent, #2563eb);
    border-color: var(--chub-accent, #2563eb);
    color: #ffffff;
}

.chub-pagination-disabled {
    color: var(--chub-text-muted, #9ca3af);
    cursor: not-allowed;
    background: var(--chub-surface, #ffffff);
}

.chub-pagination-disabled:hover {
    background: var(--chub-surface, #ffffff);
    border-color: var(--chub-border, #e5e7eb);
    color: var(--chub-text-muted, #9ca3af);
}

@media (max-width: 540px) {
    .chub-pagination {
        gap: 0.35rem;
    }
    .chub-pagination-link,
    .chub-pagination-page {
        padding: 0.45rem 0.7rem;
        font-size: 0.9rem;
    }
    /* På små skærme skjuler vi tekst-labels på prev/next; chevrons er nok. */
    .chub-pagination-prev,
    .chub-pagination-next {
        font-size: 1.1rem;
        padding: 0.45rem 0.6rem;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   Slice 3B-1 (2026-04-30) — Nordic Sand accessibility rules
   ════════════════════════════════════════════════════════════════════════
   Nordic Sand-themets primary-farve (#E2C698) har svag kontrast mod hvid
   baggrund og fejler WCAG AA for små tekster (< 18pt regular / 14pt bold)
   og lav-emfasis UI-elementer. Per V6.3 Session 3B accessibility-rule:
   brug --tenant-primary-dark (#8A6F54) for små tekster og primary-button
   bg når Nordic Sand er aktivt.

   Reglen aktiveres KUN når body har class .tenant-theme-nordic-sand.
   De andre 3 themes (Ruby/Sky/Teal) har stærk kontrast nok til at bruge
   --tenant-primary direkte.
   ════════════════════════════════════════════════════════════════════════ */

/* Små tekst-elementer der bruger primary-farve skal switche til primary-dark */
.tenant-theme-nordic-sand a.chub-link-small,
.tenant-theme-nordic-sand .chub-text-meta,
.tenant-theme-nordic-sand .chub-eyebrow,
.tenant-theme-nordic-sand .chub-section-meta,
.tenant-theme-nordic-sand .chub-pagination-link,
.tenant-theme-nordic-sand .chub-pagination-page,
.tenant-theme-nordic-sand .platforma-site-utility-link,
.tenant-theme-nordic-sand .platforma-site-footer-tel,
.tenant-theme-nordic-sand .platforma-site-footer-email {
    color: var(--tenant-primary-dark, #8A6F54) !important;
}

/* Primary-buttons skal bruge primary-dark som baggrund i Sand */
.tenant-theme-nordic-sand .chub-btn--primary,
.tenant-theme-nordic-sand .platforma-btn-primary,
.tenant-theme-nordic-sand button[type="submit"].chub-btn,
.tenant-theme-nordic-sand .chub-pagination-current {
    background-color: var(--tenant-primary-dark, #8A6F54) !important;
    border-color: var(--tenant-primary-dark, #8A6F54) !important;
    color: var(--tenant-on-primary, #ffffff) !important;
}

.tenant-theme-nordic-sand .chub-btn--primary:hover,
.tenant-theme-nordic-sand .platforma-btn-primary:hover {
    /* Mørkere shade ved hover for ekstra feedback */
    background-color: #6e5840 !important;
    border-color: #6e5840 !important;
}

/* HARD-1 (2026-10-12) — the same fix as Sand above for the two presets whose
   primary is too light for the buttons' white label: white on Sky #329AD1 is
   3.14:1 and on Teal #258B7E 4.14:1, on their primary-dark 5.03:1 and 6.00:1.
   :where() keeps the weight of the base .chub-btn--primary rule, so the CTA
   band's accent button keeps its own color; brand style (flag) computes the
   label for the tenant's own color instead, so it is excluded. */
:where(body:not(.pf-brand-style).tenant-theme-nordic-sky, body:not(.pf-brand-style).tenant-theme-nordic-teal) .chub-btn--primary {
    background: var(--tenant-primary-dark);
    color: #fff;
}

:where(body:not(.pf-brand-style).tenant-theme-nordic-sky, body:not(.pf-brand-style).tenant-theme-nordic-teal) .chub-btn--primary:hover {
    background: color-mix(in srgb, var(--tenant-primary-dark) 85%, #000);
}

/* Focus-ring stadig synlig på Sand — primary-dark som outline */
.tenant-theme-nordic-sand *:focus-visible {
    outline-color: var(--tenant-primary-dark, #8A6F54) !important;
}

/* HARD-1 (2026-10-12): …except on the CTA band, where the ground is the sand
   primary itself (#8A6F54 on #E2C698 measured 2.5:1, under 1.4.11's 3:1) —
   the band's own text color is computed to stand out from it. */
.tenant-theme-nordic-sand .chub-cta-band :focus-visible {
    outline-color: var(--pf-cta-fg, #2F2B28) !important;
}

/* HARD review (2026-10-12): the same on the brand hero, where the ground is
   the computed overlay — #8A6F54 on the Sand overlay measured 2.85:1, and with
   a light custom primary the outline WAS the overlay color (1.0:1). The hero's
   own text color is computed to stand out from that overlay. */
.tenant-theme-nordic-sand .chub-hero--scrim-brand :focus-visible {
    outline-color: var(--pf-hero-fg, #2F2B28) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   Slice 3B-1 (2026-04-30) — Premium centered max-width for widescreen
   ════════════════════════════════════════════════════════════════════════
   Per V6.3 Session 3B: 1366/1440/1920 skal have centreret premium frame,
   ikke full-bleed der ødelægger læsbarhed. Vi capper indhold til 1280px
   max-width over 1440px breakpoint.
   ════════════════════════════════════════════════════════════════════════ */

/* The token follows the cap (HARD review 2026-10-12), so geometry computed
   from it — the brand hero's text-column edge — matches the real container. */
@media (min-width: 1440px) {
    :root {
        --chub-container: 1280px;
    }

    .chub-container {
        max-width: 1280px;
    }
}

@media (min-width: 1920px) {
    :root {
        --chub-container: 1320px;
    }

    .chub-container {
        max-width: 1320px;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   CORP-2 (2026-10-11) — Website brand style
   ════════════════════════════════════════════════════════════════════════
   Every rule below is keyed off something _WebsiteLayout / _Hero /
   HtmlHelperTemplateSectionExtensions only emit while the feature flag
   feature.website.brand-style.v1 is ON for the tenant:
     body.pf-brand-style                the flag is ON
     body.pf-buttons-accent             buttons in the accent color
     body.pf-chrome-brand               top bar + footer in the primary color
     .chub-hero--scrim-brand            hero overlay in the primary color
     [style*="--pf-section-fg"]         a section's hex text-color override
     [data-pf-surface="dark"]           ... when that text color is light
   Flag OFF none of these exist, so the site renders exactly as before.

   Contrast: --tenant-on-primary / --tenant-on-secondary are computed per
   tenant by BrandColorMath.OnColorFor (≥ 4.5:1 for every #RRGGBB), so
   text on the primary or the accent is always drawn in its on-color —
   never a fixed white. No text below is dimmed with opacity, which would
   undo that guarantee.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Primary buttons: the computed on-color + a neutral shadow ────────── */
body.pf-brand-style .chub-btn--primary {
    color: var(--tenant-on-primary, #fff);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

body.pf-brand-style .chub-btn--primary:hover {
    color: var(--tenant-on-primary, #fff);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.24);
}

/* Keyboard focus stays visible (WCAG 2.4.7): the shadow above replaces the
   base focus ring (also a box-shadow), so an outline is drawn instead. :where
   keeps this at the lowest weight, so the hero, CTA-band and dark-section
   rules below — which pick a ring readable on their own ground — still win. */
:where(body.pf-brand-style) .chub-btn:focus-visible {
    outline: 2px solid #0f172a;
    outline-offset: 3px;
}

/* ── Brand-colored text on the light page ─────────────────────────────
   --tenant-primary-dark equals a primary override, which may be light (a
   gold); text drawn in it switches to --tenant-link, which the branding
   component derives with BrandColorMath.ReadableOn (≥ 4.5:1 on the soft
   tint and on white). The header CTA is excluded — it is a button. */
body.pf-brand-style .platforma-site-nav-link:not(.platforma-site-nav-link-cta):hover,
body.pf-brand-style .platforma-site-nav-link:not(.platforma-site-nav-link-cta):focus-visible,
body.pf-brand-style .platforma-site-nav-link-active:not(.platforma-site-nav-link-cta),
body.pf-brand-style .platforma-site-header-login,
body.pf-brand-style .platforma-site-header-login:hover,
body.pf-brand-style .platforma-site-header-login:focus-visible {
    color: var(--tenant-link, var(--tenant-primary-dark));
}

body.pf-brand-style:not(.pf-chrome-brand) .platforma-site-utility-link:hover,
body.pf-brand-style:not(.pf-chrome-brand) .platforma-site-utility-link:focus-visible,
body.pf-brand-style:not(.pf-chrome-brand) .platforma-site-utility-link--urgent,
body.pf-brand-style:not(.pf-chrome-brand) .platforma-site-footer-brand-name,
body.pf-brand-style:not(.pf-chrome-brand) .platforma-site-footer-contact,
body.pf-brand-style:not(.pf-chrome-brand) .platforma-site-footer-tel,
body.pf-brand-style:not(.pf-chrome-brand) .platforma-site-footer-email,
body.pf-brand-style:not(.pf-chrome-brand) .platforma-site-footer-whatsapp,
body.pf-brand-style:not(.pf-chrome-brand) .platforma-site-footer-tenantname {
    color: var(--tenant-link, var(--tenant-primary-dark));
}

/* The letter mark shown when no logo is uploaded uses the platform red;
   with brand style it is the tenant's own primary. */
body.pf-brand-style .platforma-site-brand-logo:not(.platforma-site-brand-logo-image) {
    background: var(--tenant-primary, var(--platforma-primary));
    color: var(--tenant-on-primary, #fff);
}

body.pf-brand-style .platforma-language-switcher-link-active {
    background: var(--tenant-primary, var(--platforma-primary));
    border-color: var(--tenant-primary, var(--platforma-primary));
    color: var(--tenant-on-primary, #fff);
}

/* ── Accent buttons ───────────────────────────────────────────────────── */
body.pf-buttons-accent .chub-btn--primary,
body.pf-buttons-accent .platforma-site-nav-link-cta {
    background: var(--tenant-secondary, var(--chub-primary));
    color: var(--tenant-on-secondary, #fff);
}

body.pf-buttons-accent .chub-btn--primary:hover,
body.pf-buttons-accent .platforma-site-nav-link-cta:hover,
body.pf-buttons-accent .platforma-site-nav-link-cta:focus-visible {
    /* HoverShade moves away from the label color, so hover keeps ≥ 4.5:1. */
    background: var(--tenant-secondary-dark, var(--tenant-secondary));
    color: var(--tenant-on-secondary, #fff);
    filter: none;
}

/* Nordic Sand forces its primary-dark fill with !important (section above);
   the tenant's explicit accent choice must still win there. */
body.pf-buttons-accent.tenant-theme-nordic-sand .chub-btn--primary {
    background-color: var(--tenant-secondary, #8A6F54) !important;
    border-color: var(--tenant-secondary, #8A6F54) !important;
    color: var(--tenant-on-secondary, #fff) !important;
}

body.pf-buttons-accent.tenant-theme-nordic-sand .chub-btn--primary:hover {
    background-color: var(--tenant-secondary-dark, #6e5840) !important;
    border-color: var(--tenant-secondary-dark, #6e5840) !important;
}

/* ── Hero: overlay in the primary color with readable text ───────────────
   HARD-7 (2026-10-12) — measured, not assumed. The CORP-2 overlay faded to
   72 % → 30 % across the text column, so the photo showed through behind the
   words: on a white photo the title measured 4.44:1 for a #0B2545 navy at
   901 px, 3.14:1 for the Navy preset, 2.52:1 for a #2F6FB0 blue, and the
   Sand/Sky/Teal presets drew white text on their light primaries (1.3–2.4:1).

   Now two things hold together, so the text reaches 4.5:1 over ANY photo:
   1. Behind the text the overlay is at least 85 % opaque — the minimum
      BrandColorMath.HeroScrimMinOpacity assumes. On desktop the dense part
      runs to 2rem past the 34rem text column (wherever the centred container
      puts it) and only then fades so the photo shows on the right; below
      900px it covers top to bottom.
   2. Its colour (--tenant-hero-scrim, TenantBranding) is the primary moved
      away from the text colour only as far as needed for 4.5:1 when the
      worst photo pixel — white under light text, black under dark text —
      shows through those 15 %. A dark navy is used unchanged.
   The text colour itself (--tenant-hero-fg) is computed for the primary the
   way the CTA band's is, not the preset's fixed white. */
.chub-hero--bleed.chub-hero--scrim-brand {
    --pf-hero-scrim: var(--tenant-hero-scrim, var(--tenant-primary, #0B2545));
    --pf-hero-scrim-end: var(--tenant-hero-scrim-end, color-mix(in srgb, var(--pf-hero-scrim) 72%, #000 28%));
    --pf-hero-fg: var(--tenant-hero-fg, var(--tenant-on-primary, #fff));
    /* The text column's right edge plus 2rem: the container's left content
       edge (centred, max --chub-container — 1120px, 1280px from 1440px, 1320px
       from 1920px — 1.5rem padding) + the 34rem content width. */
    --pf-hero-text-end: calc(max(1.5rem, 50% - var(--chub-container) / 2 + 1.5rem) + 36rem);
}

.chub-hero--bleed.chub-hero--scrim-brand:not(.chub-hero--bleed-has-image) {
    background: linear-gradient(135deg, var(--pf-hero-scrim) 0%, var(--pf-hero-scrim-end) 100%);
}

.chub-hero--bleed.chub-hero--scrim-brand::before {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--pf-hero-scrim) 94%, transparent) 0%,
        color-mix(in srgb, var(--pf-hero-scrim) 85%, transparent) var(--pf-hero-text-end),
        color-mix(in srgb, var(--pf-hero-scrim) 30%, transparent) calc(var(--pf-hero-text-end) + 14rem),
        color-mix(in srgb, var(--pf-hero-scrim) 8%, transparent) 100%);
}

.chub-hero--scrim-brand .chub-hero-title {
    color: var(--pf-hero-fg);
    font-style: normal;
    overflow-wrap: anywhere; /* a long compound word wraps at 320px instead of being clipped (1.4.10) */
    hyphens: auto;
}

.chub-hero--scrim-brand .chub-hero-subtitle,
.chub-hero--scrim-brand .chub-hero-eyebrow {
    color: var(--pf-hero-fg);
}

.chub-hero--scrim-brand .chub-btn--secondary {
    background: transparent;
    color: var(--pf-hero-fg);
    border-color: color-mix(in srgb, var(--pf-hero-fg) 55%, transparent);
}

/* Hover deepens AWAY from the label colour (the scrim's end shade), so the
   label never loses contrast on hover. */
.chub-hero--scrim-brand .chub-btn--secondary:hover {
    background: color-mix(in srgb, var(--pf-hero-scrim-end) 60%, transparent);
    color: var(--pf-hero-fg);
    border-color: var(--pf-hero-fg);
}

.chub-hero--scrim-brand :focus-visible {
    outline: 2px solid var(--pf-hero-fg);
    outline-offset: 3px;
}

/* Below 900px the text spans the full width, so the overlay runs top to
   bottom, never under 85 % behind any line. */
@media (max-width: 900px) {
    .chub-hero--bleed.chub-hero--scrim-brand::before {
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--pf-hero-scrim) 95%, transparent) 0%,
            color-mix(in srgb, var(--pf-hero-scrim) 88%, transparent) 60%,
            color-mix(in srgb, var(--pf-hero-scrim) 85%, transparent) 100%);
    }
}

/* ── CTA band: flat primary, text in its on-color ─────────────────────
   Legacy draws a gradient that darkens the primary by 25% and leaves the
   title to the global h2 color (#0F172A — invisible on a navy or ruby
   band). The on-color is computed for the primary itself, so the band is
   flat; a custom band background carries its own on-color inline
   (_CtaBand.cshtml), which wins over this rule. */
body.pf-brand-style .chub-cta-band {
    /* HARD-1: --tenant-cta-fg is computed for the preset's primary too (the
       presets' fixed white on-primary fails on Sand and Sky). */
    --pf-cta-fg: var(--tenant-cta-fg, var(--tenant-on-primary, #fff));
    background: var(--tenant-primary, #1a535c);
    color: var(--tenant-cta-fg, var(--tenant-on-primary, #fff));
}

body.pf-brand-style .chub-cta-band-title,
body.pf-brand-style .chub-cta-band-subtitle {
    color: inherit;
    opacity: 1;
}

/* The ring is drawn in the band's text color: the on-primary color on the
   default band, the on-color _CtaBand computes for a custom background. */
body.pf-brand-style .chub-cta-band :focus-visible {
    outline: 2px solid var(--pf-cta-fg);
    outline-offset: 3px;
}

/* ── Sections: a hex text color reaches the heading and the intro ─────── */
.pf-section-style-wrap[style*="--pf-section-fg"] .chub-section-title,
.pf-section-style-wrap[style*="--pf-section-fg"] .chub-section-subtitle,
.pf-section-style-wrap[style*="--pf-section-fg"] .chub-section-intro,
.pf-section-style-wrap[style*="--pf-section-fg"] .chub-richtext {
    color: var(--pf-section-fg);
}

/* ── Dark sections (light text color): cards turn translucent ─────────── */
.pf-section-style-wrap[data-pf-surface="dark"] .chub-column,
.pf-section-style-wrap[data-pf-surface="dark"] .chub-stat-tile,
.pf-section-style-wrap[data-pf-surface="dark"] .chub-faq-item,
.pf-section-style-wrap[data-pf-surface="dark"] .chub-testimonial-card {
    background: color-mix(in srgb, var(--pf-section-fg) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--pf-section-fg) 18%, transparent);
    box-shadow: none;
}

.pf-section-style-wrap[data-pf-surface="dark"] .chub-column-title,
.pf-section-style-wrap[data-pf-surface="dark"] .chub-column-body,
.pf-section-style-wrap[data-pf-surface="dark"] .chub-stat-value,
.pf-section-style-wrap[data-pf-surface="dark"] .chub-stat-label,
.pf-section-style-wrap[data-pf-surface="dark"] .chub-timeline-year,
.pf-section-style-wrap[data-pf-surface="dark"] .chub-timeline-title,
.pf-section-style-wrap[data-pf-surface="dark"] .chub-timeline-body,
.pf-section-style-wrap[data-pf-surface="dark"] .chub-faq-question,
.pf-section-style-wrap[data-pf-surface="dark"] .chub-faq-answer,
.pf-section-style-wrap[data-pf-surface="dark"] .chub-testimonial-quote,
.pf-section-style-wrap[data-pf-surface="dark"] .chub-testimonial-name,
.pf-section-style-wrap[data-pf-surface="dark"] .chub-testimonial-role {
    color: var(--pf-section-fg);
}

/* Links in body copy follow the text color and keep an underline, so they
   stay distinguishable without relying on a dark link color. */
.pf-section-style-wrap[data-pf-surface="dark"] .chub-column-body a,
.pf-section-style-wrap[data-pf-surface="dark"] .chub-richtext a,
.pf-section-style-wrap[data-pf-surface="dark"] .chub-faq-answer a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pf-section-style-wrap[data-pf-surface="dark"] .chub-timeline::before {
    background: color-mix(in srgb, var(--pf-section-fg) 25%, transparent);
}

.pf-section-style-wrap[data-pf-surface="dark"] .chub-timeline-marker {
    background: var(--tenant-secondary, var(--pf-section-fg));
}

.pf-section-style-wrap[data-pf-surface="dark"] :focus-visible {
    outline: 2px solid var(--pf-section-fg);
    outline-offset: 3px;
}

/* ── Top bar + footer in the primary color ───────────────────────────── */
body.pf-chrome-brand .platforma-site-utility-bar {
    background: var(--tenant-primary, #0B2545);
    border-bottom-color: transparent;
}

body.pf-chrome-brand .platforma-site-utility-link,
body.pf-chrome-brand .platforma-site-utility-link--urgent,
body.pf-chrome-brand .platforma-site-utility-link:hover,
body.pf-chrome-brand .platforma-site-utility-link:focus-visible {
    color: var(--tenant-on-primary, #fff);
}

body.pf-chrome-brand .platforma-site-utility-divider {
    background: color-mix(in srgb, var(--tenant-on-primary, #fff) 30%, transparent);
}

body.pf-chrome-brand .platforma-site-footer {
    background: var(--tenant-primary, #0B2545);
    color: var(--tenant-on-primary, #fff);
    border-top-color: transparent;
}

body.pf-chrome-brand .platforma-site-footer-brand-name,
body.pf-chrome-brand .platforma-site-footer-brand-tagline,
body.pf-chrome-brand .platforma-site-footer-col h4,
body.pf-chrome-brand .platforma-site-footer-col a,
body.pf-chrome-brand .platforma-site-footer-contact,
body.pf-chrome-brand .platforma-site-footer-tel,
body.pf-chrome-brand .platforma-site-footer-email,
body.pf-chrome-brand .platforma-site-footer-whatsapp,
body.pf-chrome-brand .platforma-site-footer-address,
body.pf-chrome-brand .platforma-site-footer-tenantname,
body.pf-chrome-brand .platforma-site-footer-bottom,
body.pf-chrome-brand .platforma-site-footer-bottom a {
    color: var(--tenant-on-primary, #fff);
}

body.pf-chrome-brand .platforma-site-footer-brand-logo {
    background: color-mix(in srgb, var(--tenant-on-primary, #fff) 14%, transparent);
    color: var(--tenant-on-primary, #fff);
}

body.pf-chrome-brand .platforma-site-footer-social a,
body.pf-chrome-brand .platforma-site-footer-social-list a {
    background: color-mix(in srgb, var(--tenant-on-primary, #fff) 12%, transparent);
    color: var(--tenant-on-primary, #fff);
}

body.pf-chrome-brand .platforma-site-footer-social-list a:hover,
body.pf-chrome-brand .platforma-site-footer-social-list a:focus-visible {
    background: var(--tenant-on-primary, #fff);
    color: var(--tenant-primary, #0B2545);
}

body.pf-chrome-brand .platforma-site-footer-bottom {
    border-top-color: color-mix(in srgb, var(--tenant-on-primary, #fff) 20%, transparent);
}

/* The light chrome signals focus by a color change (and sets outline:none);
   on the brand chrome hover and rest share one color, so focus needs a ring
   and links get an underline on hover. */
body.pf-chrome-brand .platforma-site-utility-bar a:focus-visible,
body.pf-chrome-brand .platforma-site-footer a:focus-visible {
    outline: 2px solid var(--tenant-on-primary, #fff);
    outline-offset: 2px;
}

body.pf-chrome-brand .platforma-site-utility-link:hover,
body.pf-chrome-brand .platforma-site-footer-col a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Nordic Sand pins small primary-colored text with !important (section
   above); on the brand chrome that text sits ON the primary instead. */
body.pf-chrome-brand.tenant-theme-nordic-sand .platforma-site-utility-link,
body.pf-chrome-brand.tenant-theme-nordic-sand .platforma-site-footer-tel,
body.pf-chrome-brand.tenant-theme-nordic-sand .platforma-site-footer-email {
    color: var(--tenant-on-primary, #fff) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   CORP-3 (2026-10-12) — WhatsApp click-to-chat
   ════════════════════════════════════════════════════════════════════════
   Every element below is rendered only while feature.website.whatsapp.v1
   is ON and the tenant has a number, so these rules match nothing otherwise.

   Color: WhatsApp's own green (#25D366) under a white glyph measures 2.0:1,
   below the 3:1 WCAG 1.4.11 asks of a graphic that is the only label of a
   control. The button uses WhatsApp's teal (#128C7E, 4.1:1 with white) and
   darkens to #075E54 (7.9:1) on hover. */

.pf-whatsapp-glyph {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.platforma-site-utility-link--whatsapp .pf-whatsapp-glyph {
    width: 13px;
    height: 13px;
}

.chub-form-sidebar-icon .pf-whatsapp-glyph {
    width: 16px;
    height: 16px;
}

.platforma-site-footer-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tenant-primary-dark, var(--platforma-primary));
    font-weight: 500;
    text-decoration: none;
}

.platforma-site-footer-whatsapp:hover,
.platforma-site-footer-whatsapp:focus-visible {
    text-decoration: underline;
}

.platforma-site-footer-whatsapp .pf-whatsapp-glyph {
    width: 16px;
    height: 16px;
}

.pf-whatsapp-fab {
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 800; /* under the mobile menu (900/1000) and the cookie banner (9000) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #128C7E;
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.28);
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.pf-whatsapp-fab .pf-whatsapp-glyph {
    width: 30px;
    height: 30px;
}

.pf-whatsapp-fab:hover {
    background: #075E54;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.32);
}

.pf-whatsapp-fab:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #0f172a, 0 6px 18px rgba(15, 23, 42, 0.28);
}

/* The fixed button must not cover a focused element near the bottom of the
   page (WCAG 2.4.11): focus scrolling keeps this much room free. */
html:has(.pf-whatsapp-fab) {
    scroll-padding-bottom: 6rem;
}

@media (max-width: 640px) {
    .pf-whatsapp-fab {
        right: max(14px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));
        width: 52px;
        height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pf-whatsapp-fab,
    .pf-whatsapp-fab:hover {
        transition: none;
        transform: none;
    }
}

@media print {
    .pf-whatsapp-fab { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   CORP-4 (2026-10-12) — Service cards (two-column) + "Why choose us"
   (value-pillars) in the website's own style
   ════════════════════════════════════════════════════════════════════════
   The elements below are rendered only while feature.website.service-
   sections.v1 is ON for the tenant (_TwoColumn / _ValuePillars), so these
   rules match nothing otherwise. Small brand-colored text uses --tenant-
   link (readable on light grounds; CORP-2 derives it from a primary
   override) and falls back to the primary-dark preset token. */

.chub-section-overline {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tenant-link, var(--tenant-primary-dark, var(--chub-accent)));
}

.chub-two-column-intro,
.chub-pillars-intro {
    text-align: left;
    margin: 0.35rem 0 1.75rem;
    max-width: 46rem;
}

.chub-column-eyebrow {
    display: block;
    margin: 0 0 0.35rem;
    font-size: 0.74rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tenant-link, var(--tenant-primary-dark, var(--chub-accent)));
}

.chub-column-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    color: var(--chub-text-soft, #475569);
}

.chub-column-list li {
    position: relative;
    padding-left: 1.5rem;
    line-height: 1.5;
}

/* A check mark drawn with borders, so it follows the text color. */
.chub-column-list li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.3em;
    width: 0.4rem;
    height: 0.75rem;
    border-right: 2px solid var(--tenant-secondary, var(--chub-primary));
    border-bottom: 2px solid var(--tenant-secondary, var(--chub-primary));
    transform: rotate(45deg);
}

.chub-column-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1.1rem;
    font-weight: 650;
    color: var(--tenant-link, var(--tenant-primary-dark, var(--chub-accent)));
    text-decoration: none;
}

.chub-column-link:hover,
.chub-column-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.chub-column-link span {
    transition: transform 0.15s ease;
}

.chub-column-link:hover span {
    transform: translateX(3px);
}

.chub-pillars-head {
    margin-bottom: 0.5rem;
}

.chub-pillars-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.25rem;
}

.chub-pillar {
    background: var(--chub-surface, #fff);
    border: 1px solid var(--chub-border, rgba(15, 23, 42, 0.08));
    border-top: 3px solid var(--tenant-secondary, var(--chub-primary));
    border-radius: var(--chub-radius, 0.75rem);
    padding: 1.4rem 1.4rem 1.5rem;
}

.chub-pillar-icon {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: 0.85rem;
    background-color: var(--tenant-link, var(--tenant-primary-dark, var(--chub-accent)));
    -webkit-mask: var(--pf-icon) center / contain no-repeat;
    mask: var(--pf-icon) center / contain no-repeat;
}

.chub-pillar-title {
    margin: 0 0 0.45rem;
    font-size: 1.08rem;
    font-weight: 650;
    color: var(--chub-text, #0f172a);
}

.chub-pillar-body {
    margin: 0;
    line-height: 1.6;
    color: var(--chub-text-soft, #475569);
}

/* Dark sections (CORP-2: a light text-color override): the new elements
   follow the section's text color like the rest of the cards. */
.pf-section-style-wrap[data-pf-surface="dark"] .chub-section-overline,
.pf-section-style-wrap[data-pf-surface="dark"] .chub-column-eyebrow,
.pf-section-style-wrap[data-pf-surface="dark"] .chub-column-list,
.pf-section-style-wrap[data-pf-surface="dark"] .chub-column-link,
.pf-section-style-wrap[data-pf-surface="dark"] .chub-pillar-title,
.pf-section-style-wrap[data-pf-surface="dark"] .chub-pillar-body {
    color: var(--pf-section-fg);
}

.pf-section-style-wrap[data-pf-surface="dark"] .chub-pillar {
    background: color-mix(in srgb, var(--pf-section-fg) 7%, transparent);
    border-color: color-mix(in srgb, var(--pf-section-fg) 18%, transparent);
    border-top-color: var(--tenant-secondary, var(--pf-section-fg));
}

.pf-section-style-wrap[data-pf-surface="dark"] .chub-pillar-icon {
    background-color: var(--pf-section-fg);
}

@media (prefers-reduced-motion: reduce) {
    .chub-column-link span,
    .chub-column-link:hover span {
        transition: none;
        transform: none;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   CORP-5 (2026-10-12) — "Request a quote"
   ════════════════════════════════════════════════════════════════════════
   Rendered only while feature.website.quote-request.v1 is ON for the tenant
   (_QuoteRequest on a CMS page, PublicForms/Quote after a post with errors),
   so these rules match nothing otherwise. The fields reuse the website form
   design system (chub-label / chub-input / chub-select / chub-textarea /
   chub-field-error in platforma.website.forms.css); this block lays them out
   and styles the side panel, which sits on the brand color like the CTA band.
   On a dark section the heading follows the section's text color through the
   CORP-2/CORP-4 rules above; the form stays a light card. */

.chub-quote-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 960px) {
    .chub-quote-grid {
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
        gap: 2rem;
    }
}

.chub-quote-head {
    margin-bottom: 1.25rem;
}

.chub-quote-intro {
    text-align: left;
    margin: 0.35rem 0 0;
    max-width: 46rem;
}

/* Errors use a fixed dark red: the shared form error color (--chub-accent) can
   be a light tenant tone (3.6:1 measured on white); #b42318 is 6.6:1. */
.chub-quote-form {
    --chub-quote-error: var(--chub-error, #b42318);
    background: var(--chub-surface, #fff);
    border: 1px solid var(--chub-border, rgba(15, 23, 42, 0.08));
    border-radius: var(--chub-radius, 0.75rem);
    padding: 1.4rem 1.25rem 1.5rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

@media (min-width: 640px) {
    .chub-quote-form {
        padding: 1.75rem 2rem 2rem;
    }
}

.chub-quote-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem 1.25rem;
}

@media (min-width: 640px) {
    .chub-quote-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chub-quote-fields .chub-field--full {
        grid-column: 1 / -1;
    }
}

.chub-quote-fields .chub-field {
    margin-bottom: 0;
}

.chub-quote-form .chub-textarea {
    min-height: 7rem;
}

.chub-quote-form [aria-invalid="true"] {
    border-color: var(--chub-quote-error);
}

.chub-quote-form .chub-field-error {
    color: var(--chub-quote-error);
}

.chub-quote-error-summary {
    margin: 0 0 1.25rem;
    padding: 0.8rem 1rem;
    border: 1px solid color-mix(in srgb, var(--chub-quote-error) 35%, transparent);
    border-left-width: 4px;
    border-radius: var(--chub-radius, 0.75rem);
    background: color-mix(in srgb, var(--chub-quote-error) 6%, #fff);
    color: #7f1d1d;
    font-weight: 600;
    font-size: 0.92rem;
}

/* The /forms/quote error page's way back to the page the form sits on. */
.chub-quote-back {
    margin: 0 0 1rem;
    font-size: 0.92rem;
}

.chub-quote-back a {
    color: var(--tenant-primary-dark, var(--platforma-primary));
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.chub-quote-back a::before {
    content: "\2190\00a0";
}

/* Honeypot: off-screen and out of the tab order; never shown. */
.chub-quote-hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.chub-quote-notice {
    margin: 1.25rem 0 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--chub-text-soft, #475569);
}

.chub-quote-notice a {
    color: var(--tenant-link, var(--tenant-primary-dark, var(--chub-accent)));
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Shown only in the page editor when the tenant has no privacy policy to link. */
.chub-quote-editor-warning {
    margin: 0.75rem 0 0;
    padding: 0.6rem 0.8rem;
    border-left: 4px solid #b45309;
    background: #fffbeb;
    color: #78350f;
    font-size: 0.85rem;
}

.chub-quote-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 1.5rem;
}

.chub-quote-note {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--chub-text-soft, #475569);
}

.chub-quote-error-summary-title {
    margin: 0 0 0.35rem;
}

.chub-quote-error-list {
    margin: 0;
    padding-left: 1.1rem;
    font-weight: 500;
}

.chub-quote-error-list a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.chub-quote-error-summary:focus {
    outline: 3px solid var(--chub-quote-error);
    outline-offset: 2px;
}

/* Hints and the required marker must be readable (WCAG 1.4.3): the shared
   muted placeholder grey is 2.6:1 on white, #6b7280 is 4.8:1. The asterisk
   is decorative for assistive tech — required is announced from the input. */
.chub-quote-form ::placeholder {
    color: #6b7280;
    opacity: 1;
}

.chub-quote-form .chub-label-required::after {
    content: " *";
    content: " *" / "";
    color: var(--chub-quote-error);
}

/* Focus that is visible on the white card whatever the brand color: the
   field border takes the contrast-checked link color, and the button gets a
   dark ring (its own box-shadow would otherwise replace the base ring). */
.chub-quote-form :is(.chub-input, .chub-select, .chub-textarea):focus {
    border-color: var(--tenant-link, var(--tenant-primary-dark, #0f172a));
}

.chub-quote-form .chub-btn:focus-visible,
.chub-quote-form a:focus-visible {
    outline: 2px solid #0f172a;
    outline-offset: 3px;
}

.pf-section-style-wrap[data-pf-surface="dark"] .chub-quote-form :focus-visible {
    outline-color: #0f172a;
}

.chub-quote-aside {
    background: var(--tenant-primary, var(--chub-primary));
    color: var(--tenant-on-primary, #fff);
    border-radius: var(--chub-radius, 0.75rem);
    padding: 1.6rem 1.5rem 1.75rem;
}

@media (min-width: 960px) {
    .chub-quote-aside {
        position: sticky;
        top: 6rem;
    }
}

.chub-quote-aside-title {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 650;
    line-height: 1.3;
    color: inherit;
}

.chub-quote-steps {
    list-style: none;
    counter-reset: chub-quote-step;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.chub-quote-steps li {
    counter-increment: chub-quote-step;
    position: relative;
    padding-left: 2.4rem;
    line-height: 1.5;
}

.chub-quote-steps li::before {
    content: counter(chub-quote-step);
    position: absolute;
    left: 0;
    top: -0.05rem;
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
    background: color-mix(in srgb, currentColor 16%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}

.chub-quote-direct {
    display: grid;
    gap: 0.4rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.chub-quote-direct-title {
    margin: 0 0 0.2rem;
    font-weight: 650;
}

.chub-quote-direct-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.chub-quote-aside :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════════
   CORP-6 (2026-10-12) — Website fonts
   ════════════════════════════════════════════════════════════════════════
   The layout adds body.pf-fonts-<pair> only while feature.website.webfonts.v1
   is ON and the tenant chose a pair other than the template's own, so these
   rules match nothing otherwise. The faces are declared (self-hosted) in
   css/pf/fonts.css, which the layout links for the pairs that use them. Each
   pair sets the two theme tokens the site already reads (--chub-heading-font,
   --chub-body-font) on <body>, which wins over the template's :root values,
   and the whole page shell — header, navigation, footer — takes the body font. */

body.pf-fonts-system {
    --chub-heading-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --chub-body-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body.pf-fonts-modern {
    --chub-heading-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --chub-body-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body.pf-fonts-corporate {
    --chub-heading-font: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --chub-body-font: "Public Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

body.pf-fonts-editorial {
    --chub-heading-font: "Source Serif 4", Georgia, "Times New Roman", serif;
    --chub-body-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body[class*="pf-fonts-"],
body[class*="pf-fonts-"] .chub {
    font-family: var(--chub-body-font);
}

body[class*="pf-fonts-"] :is(.chub h1, .chub h2, .chub h3, .chub-hero-title, .chub-section-title,
    .chub-column-title, .chub-pillar-title, .chub-quote-aside-title, .platforma-site-brand-name) {
    font-family: var(--chub-heading-font);
}

/* Corporate: Archivo is a width-variable face; headings run slightly wide,
   the brand name and the small labels wider still (the v1 design). */
body.pf-fonts-corporate :is(.chub h1, .chub h2, .chub-hero-title, .chub-section-title) {
    font-stretch: 112%;
    letter-spacing: -0.01em;
}

body.pf-fonts-corporate :is(.chub h3, .chub-column-title, .chub-pillar-title, .chub-quote-aside-title) {
    font-stretch: 106%;
}

body.pf-fonts-corporate .platforma-site-brand-name {
    font-stretch: 118%;
    font-weight: 800;
    letter-spacing: 0.02em;
}

body.pf-fonts-corporate :is(.chub-section-overline, .chub-column-eyebrow) {
    font-family: var(--chub-heading-font);
    font-stretch: 112%;
}

/* Editorial: the serif has 600 and 700 only; keep headings on those. */
body.pf-fonts-editorial :is(.chub h1, .chub h2, .chub-hero-title, .chub-section-title) {
    font-weight: 700;
    letter-spacing: -0.005em;
}

/* ── CORP wave — text for assistive tech only (e.g. "opens in a new tab") ── */
.pf-site-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── HARD-1 (2026-10-12) — keyboard focus on website buttons (WCAG 2.4.7) ──
   The base ring (platforma-base.css :focus-visible) is a box-shadow, and
   .chub-btn--primary sets its own box-shadow, so a focused button showed
   nothing. A two-tone ring — dark outline over a white halo — is visible on
   light and dark ground alike. :where() keeps it at the lowest weight, so the
   hero, CTA-band, dark-section and quote-form rules, which choose a ring for
   their own ground, still win. */
/* HARD review (2026-10-12): links on the website get a ring in their own
   color — the link color is already readable on its ground, so the ring is
   too — instead of the base 1.55:1 shadow. Before the button rule, which wins
   for a link styled as a button (same weight, later). */
:where(.chub a):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

:where(.chub-btn, .chub-form-submit):focus-visible {
    outline: 2px solid #0f172a;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px #fff;
}

/* The CTA band draws the ring in its own text color (--pf-cta-fg: the
   computed --tenant-cta-fg, or the on-color _CtaBand.cshtml writes for a
   custom background) — for every tenant, not only with brand style ON. */
.chub-cta-band :focus-visible {
    outline: 2px solid var(--pf-cta-fg, #fff);
    outline-offset: 3px;
}