@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:   #94a3b8;
    --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);
}

.chub-action-arrow::after {
    /* Unicode-escape \203A = › (SINGLE RIGHT-POINTING ANGLE QUOTATION
       MARK). Encoding-neutral — se kommentar på ::before. */
    content: "\203A";
    font-size: 1.4rem;
    color: var(--chub-text-muted);
    font-weight: 300;
    line-height: 1;
}

@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. color-mix darkens it for the end stop. */
    background: linear-gradient(135deg, var(--tenant-primary, #1a535c) 0%, color-mix(in srgb, var(--tenant-primary, #1a535c) 75%, #000 25%) 100%);
    color: #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;
}
.chub-cta-band-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    margin: 0 0 0.5rem;
    line-height: 1.2;
}
.chub-cta-band-subtitle {
    font-size: 1.05rem;
    margin: 0;
    opacity: 0.9;
    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;
}

/* Focus-ring stadig synlig på Sand — primary-dark som outline */
.tenant-theme-nordic-sand *:focus-visible {
    outline-color: var(--tenant-primary-dark, #8A6F54) !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.
   ════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1440px) {
    .chub-container {
        max-width: 1280px;
    }
}

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