:root {
    --color-text: #1f2933;
    --color-muted: #4a5260;
    --color-bg: #ffffff;
    --color-surface: #f5f7fa;
    --color-border: #e4e7eb;
    --color-divider: #c9ccd1;
    --color-accent: #1e64c8;
    --color-accent-hover: #154f9c;
    --color-accent-soft: #e8f0fb;
    --max-width: 64rem;
    --text-width: 36rem;
    --content-padding: 1rem;
    --radius: 4px;
    --space: 1rem;
    --font-sans: "UGent Panno Text", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-italic: "Crimson Pro", Georgia, "Times New Roman", serif;
}

/* Fonts */
@font-face {
    font-family: "UGent Panno Text";
    src: url("../fonts/ugentpannotext-semilight-web.woff") format("woff"),
        url("../fonts/ugentpannotext-semilight-web.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: optional;
}
@font-face {
    font-family: "UGent Panno Text";
    src: url("../fonts/ugentpannotext-normal-web.woff") format("woff"),
        url("../fonts/ugentpannotext-normal-web.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: optional;
}
@font-face {
    font-family: "UGent Panno Text";
    src: url("../fonts/ugentpannotext-medium-web.woff") format("woff"),
        url("../fonts/ugentpannotext-medium-web.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: optional;
}
@font-face {
    font-family: "UGent Panno Text";
    src: url("../fonts/ugentpannotext-semibold-web.woff") format("woff"),
        url("../fonts/ugentpannotext-semibold-web.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: optional;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: clip;
}

a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.25s ease, border-color 0.25s ease,
        color 0.25s ease, transform 0.3s ease;
}

.site-header.is-hidden {
    transform: translateY(-100%);
}

/* Bleed mode: header overlays the hero, transparent until scrolled */
body.has-hero-bleed {
    /* Allow hero to start at the very top of the viewport */
}

body.has-hero-bleed .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom-color: transparent;
    color: #fff;
}

body.has-hero-bleed .site-header:not(.is-scrolled) .site-nav a,
body.has-hero-bleed .site-header:not(.is-scrolled) .site-secondary a,
body.has-hero-bleed .site-header:not(.is-scrolled) .site-lang__switch {
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

body.has-hero-bleed .site-header:not(.is-scrolled) .site-nav .is-active > a {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

body.has-hero-bleed .site-header:not(.is-scrolled) .site-secondary li {
    border-right-color: rgba(255, 255, 255, 0.4);
}

body.has-hero-bleed .site-header:not(.is-scrolled) .site-logo img {
    filter: brightness(0) invert(1)
        drop-shadow(0 1px 6px rgba(0, 0, 0, 0.4));
}

body.has-hero-bleed .site-header.is-scrolled {
    background: var(--color-bg);
    border-bottom-color: var(--color-border);
    color: var(--color-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* In bleed mode, main shouldn't add top padding above the hero */
body.has-hero-bleed .site-main {
    padding-top: 0;
}

body.has-hero-bleed .page__hero {
    margin-top: 0;
}

.site-header__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.25rem var(--content-padding) 1rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space);
    flex-wrap: wrap;
}

.site-header__nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    color: var(--color-accent);
}

.site-logo img {
    height: 3.75rem;
    width: auto;
    display: block;
    transition: height 0.25s ease;
}

/* Brand-colour the inline SVG logo via CSS filter (source is black) */
.site-logo img {
    filter: brightness(0) saturate(100%) invert(28%) sepia(83%)
        saturate(1576%) hue-rotate(202deg) brightness(94%) contrast(91%);
}

/* Bigger logo on the homepage so it reads against the hero image */
body.template-homepage .site-logo img {
    height: 5.5rem;
}

body.template-homepage .site-header.is-scrolled .site-logo img {
    height: 3.75rem;
}

/* Main navigation */
.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

.site-nav li + li:not(.site-nav__search) {
    background-image: linear-gradient(
        to bottom,
        transparent 12.5%,
        var(--color-divider) 12.5%,
        var(--color-divider) 87.5%,
        transparent 87.5%
    );
    background-repeat: no-repeat;
    background-size: 1px 100%;
    background-position: left center;
}

.site-nav li {
    padding: 0 1rem;
}

.site-nav li:first-child {
    padding-left: 0;
}

.site-nav a {
    display: inline-block;
    color: var(--color-text);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.125rem;
    padding: 0.625rem 1rem;
    border-radius: 0;
    text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus {
    color: var(--color-accent);
    text-decoration: none;
}

.site-nav .is-active > a {
    color: var(--color-accent);
    background: var(--color-accent-soft);
    text-decoration: none;
}

.site-nav__search {
    margin-left: 0.5rem;
    padding-right: 0;
}

.site-nav__search a {
    padding: 0.5rem 0 0.5rem 0.5rem;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
}

.site-nav__search a:hover,
.site-nav__search a:focus {
    color: var(--color-accent);
    background: transparent;
}

/* Secondary nav (top row: editable links + login + language switcher) */
.site-secondary ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 0.8125rem;
}

.site-secondary li {
    display: inline-flex;
    align-items: center;
    padding: 0 0.875rem;
    border-right: 1px solid var(--color-divider);
    line-height: 1;
}

.site-secondary li:last-child {
    padding-right: 0;
    border-right: 0;
}

.site-secondary li:first-child {
    padding-left: 0;
}

.site-secondary a {
    color: var(--color-text);
    font-family: var(--font-sans);
    font-weight: 500;
    text-decoration: none;
}

.site-secondary a:hover,
.site-secondary a:focus {
    color: var(--color-accent);
    text-decoration: none;
}

/* Language switch (EN | NL) */
.site-lang__switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-text);
}

.site-lang__switch a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
}

.site-lang__switch a:hover,
.site-lang__switch a:focus {
    color: var(--color-accent);
    text-decoration: none;
}

.site-lang__current {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.site-lang__sep {
    color: var(--color-divider);
    font-weight: 400;
}

/* Main */
.site-main {
    flex: 1;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space) var(--content-padding) calc(var(--space) * 2);
}

/* Breadcrumbs */
.breadcrumbs__list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    font-size: 0.875rem;
    color: var(--color-muted);
}

.breadcrumbs__list li {
    display: inline;
    overflow-wrap: break-word;
    word-break: break-word;
}

.breadcrumbs__list li + li::before {
    content: " > ";
    color: var(--color-border);
}

.breadcrumbs__list [aria-current="page"] {
    color: var(--color-text);
}

.breadcrumbs__back {
    display: none;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--color-muted);
    text-decoration: none;
}

.breadcrumbs__back:hover,
.breadcrumbs__back:focus {
    color: var(--color-text);
    text-decoration: underline;
}

@media (max-width: 720px) {
    .breadcrumbs__back {
        display: block;
    }

    .breadcrumbs__list {
        display: none;
    }
}

/* Page */
.page__title {
    margin: 0 0 1rem;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 2.25rem;
    line-height: 1.2;
}

/* Hero (featured image) — break out of the main container to span the viewport */
.page__hero {
    position: relative;
    margin: 0 calc(50% - 50vw);
    min-height: 22rem;
    max-height: 32rem;
    height: 55vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
}

.page__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.55) 100%
    );
}

.page__hero-inner {
    position: relative;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2rem var(--space);
}

.page__title--hero {
    margin: 0;
    color: #fff;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.1;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.page__body {
    font-size: 1.0625rem;
}

/* Body sections break out of the centered main container so their\n   background colour can span the viewport. Each section centers its\n   inner content back to the standard max-width. */
.page__body {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Content section block */
.content-section {
    padding: 3rem 0;
}

.content-section--white {
    background: var(--color-bg);
}

.content-section--contrast {
    background: #f5f3ef;
}

/* Adjacent same-colour sections would otherwise produce a doubled gap
 * (3rem bottom of the first + 3rem top of the second = 6rem). When
 * the backgrounds match, the visual section boundary disappears, so
 * the doubled gap looks like accidental whitespace. Zeroing the top
 * padding of the second section collapses the gap to 3rem and keeps
 * the rhythm consistent. Applies to ContentSectionBlock and
 * ColumnsBlock; both render as .content-section.
 */
.content-section--white + .content-section--white,
.content-section--contrast + .content-section--contrast {
    padding-top: 0;
}

.content-section__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding);
}

.content-section__inner > * {
    max-width: var(--text-width);
}

.content-section__inner :first-child {
    margin-top: 0;
}

.content-section__inner :last-child {
    margin-bottom: 0;
}

/* Apply richtext typography rules inside content sections too */
.content-section__inner h2,
.content-section__inner h3,
.content-section__inner h4 {
    font-family: var(--font-sans);
    font-weight: 600;
    margin-top: 2rem;
    line-height: 1.3;
}

.content-section__inner p {
    margin: 0 0 1rem;
}

.content-section__inner img {
    margin: 1.5rem 0;
    border-radius: var(--radius);
    max-width: 100%;
    height: auto;
}

.content-section__inner blockquote {
    margin: 1.5rem 0;
    padding: 0.5rem 1rem;
    border-left: 4px solid var(--color-accent);
    color: var(--color-muted);
    background: var(--color-surface);
}

.richtext h2,
.richtext h3,
.richtext h4 {
    font-family: var(--font-sans);
    font-weight: 600;
    margin-top: 2rem;
    line-height: 1.3;
}

.richtext p {
    margin: 0 0 1rem;
}

.richtext img {
    margin: 1.5rem 0;
    border-radius: var(--radius);
}

.richtext blockquote {
    margin: 1.5rem 0;
    padding: 0.5rem 1rem;
    border-left: 4px solid var(--color-accent);
    color: var(--color-muted);
    background: var(--color-surface);
}

/* Columns block */
.columns-block-wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding);
}

.columns-block {
    display: grid;
    gap: 2rem;
    align-items: start;
}

.columns-block--50-50    { grid-template-columns: 1fr 1fr; }
.columns-block--33-67    { grid-template-columns: 1fr 2fr; }
.columns-block--67-33    { grid-template-columns: 2fr 1fr; }
.columns-block--25-75    { grid-template-columns: 1fr 3fr; }
.columns-block--75-25    { grid-template-columns: 3fr 1fr; }
.columns-block--33-33-33 { grid-template-columns: 1fr 1fr 1fr; }
.columns-block--25-50-25 { grid-template-columns: 1fr 2fr 1fr; }

.columns-block__col > :first-child { margin-top: 0; }
.columns-block__col > :last-child  { margin-bottom: 0; }

/* Zero the top margin of the first element inside the first block of
 * each column. Without this, a heading that opens a rich-text block
 * carries its 2rem top margin even though the block wrapper above it
 * has been zeroed. The extra level of descent (> :first-child :first-child)
 * is needed because each StreamBlock item is wrapped in a <div> before
 * its content — the outer :first-child zeroes the wrapper, the inner
 * :first-child zeroes the content (heading, paragraph, etc.).
 * This mirrors .content-section__inner :first-child { margin-top: 0 }
 * and keeps column-heading spacing consistent with standalone sections.
 */
.columns-block__col > :first-child :first-child {
    margin-top: 0;
}

/* When a column contains multiple blocks (e.g. a rich-text item
 * followed by a news list), each block after the first gets a 1.5rem
 * top margin. The lobotomised-owl selector applies the spacing only
 * between siblings, not above the first child — the column's own
 * padding handles the top.
 */
.columns-block__col > * + * {
    margin-top: 1.5rem;
}

.columns-block__col h2,
.columns-block__col h3,
.columns-block__col h4 {
    font-family: var(--font-sans);
    font-weight: 600;
    margin-top: 2rem;
    line-height: 1.3;
}

.columns-block__col p {
    margin: 0 0 1rem;
}

.columns-block__col img {
    margin: 1.5rem 0;
    border-radius: var(--radius);
    max-width: 100%;
    height: auto;
}

.columns-block__col blockquote {
    margin: 1.5rem 0;
    padding: 0.5rem 1rem;
    border-left: 4px solid var(--color-accent);
    color: var(--color-muted);
    background: var(--color-surface);
}

@media (max-width: 640px) {
    .columns-block--50-50,
    .columns-block--33-67,
    .columns-block--67-33,
    .columns-block--25-75,
    .columns-block--75-25,
    .columns-block--33-33-33,
    .columns-block--25-50-25 {
        grid-template-columns: 1fr;
    }
}

/* Footer */
.site-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    margin-top: auto;
}

.site-footer__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space);
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-muted);
}

/* Homepage hero variants */
.page__hero--home {
    min-height: 32rem;
    max-height: 48rem;
    height: 80vh;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr auto;
    align-items: stretch;
    margin-bottom: 0;
    overflow: visible;
}

.page__hero--home .page__hero-inner {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2rem var(--content-padding);
}

/* Hero text — large white headline with italic emphasis */
.hero-text {
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.05;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
    max-width: 18ch;
}

.hero-text p {
    margin: 0 0 0.25em;
}

.hero-text em,
.hero-text i {
    font-family: var(--font-italic);
    font-style: italic;
    font-weight: 400;
}

/* Hero blocks — cards overlapping the hero bottom, right-aligned */
.hero-blocks {
    position: relative;
    z-index: 2;
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    justify-self: center;
    width: 100%;
    max-width: var(--max-width);
    padding: 0 var(--content-padding);
}

.hero-blocks__inner {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 18rem));
    justify-content: end;
    gap: 1.5rem;
    transform: translateY(50%);
}

.hero-blocks--no-hero .hero-blocks__inner {
    transform: none;
    margin-bottom: 2rem;
}

.hero-block {
    background: var(--color-bg);
    color: var(--color-text);
    padding: 1.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-radius: 0;
    text-shadow: none;
}

.hero-block__eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
}

.hero-block__heading {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 1rem;
    font-size: 1.625rem;
    line-height: 1.2;
    text-shadow: none;
}

.hero-block__body {
    font-size: 0.9375rem;
    color: var(--color-text);
}

.hero-block__body :first-child {
    margin-top: 0;
}

.hero-block__body :last-child {
    margin-bottom: 0;
}

/* Body starts flush with hero on every page; sections control their own padding. */
.page__body {
    margin-top: 0;
}

/* ============================================================
   News page — metadata box
   ============================================================ */

/* News-detail metadata box: hero overlap mechanism.
 *
 * The metadata box (.news-meta) needs to anchor its TOP edge exactly
 * 2rem above the hero's bottom edge, regardless of how many rows of
 * metadata the box ends up containing. A percentage-based translate
 * (translateY(50%) or similar) cannot do this because the translation
 * is proportional to the box's own height — boxes with different
 * amounts of metadata would land at different vertical positions.
 *
 * The mechanism, in three pieces:
 *
 * 1. The hero uses grid-template-rows: 1fr 0. Row 1 holds the image
 *    and title (page__hero-inner spans both rows via grid-row: 1/-1).
 *    Row 2 has zero height.
 *
 * 2. The meta-wrap sits in row 2. Its __inner child has height: 0,
 *    overflow: visible, align-items: flex-start, and
 *    transform: translateY(-2rem). The fixed -2rem (not a percentage)
 *    is what keeps the top edge anchored regardless of content height.
 *
 * 3. Below 64rem, the grid reverts to 1fr auto, height/overflow are
 *    reset, and the transform is removed — the box drops into normal
 *    flow below the hero.
 *
 * If the layout grid changes, the 64rem breakpoint and the 2rem
 * overlap must be revisited together.
 *
 * See docs/decisions/005-news-metadata-hero-overlap.md for the
 * architectural rationale.
 */
/* Chained selector (specificity 0-2-0) definitively overrides .page__hero's
   overflow:hidden and display:flex (specificity 0-1-0), regardless of cascade order.
   Mirrors the home page hero-block pattern exactly. */
.page__hero.page__hero--news {
    overflow: visible;
    display: grid;
    grid-template-columns: 100%;
    /* Row 2 = 0 so the hero element height equals only the image area.
       The meta-wrap sits at the hero bottom edge and overflows downward
       via overflow:visible, giving both box types a consistent top anchor. */
    grid-template-rows: 1fr 0;
    align-items: stretch;
    margin-bottom: 0;
}

.page__hero.page__hero--news .page__hero-inner {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2rem var(--content-padding);
}

.news-meta-wrap {
    position: relative;
    z-index: 2;
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    justify-self: center;
    width: 100%;
    max-width: var(--max-width);
    padding: 0 var(--content-padding);
}

.news-meta-wrap__inner {
    height: 0;
    overflow: visible;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    /* Pull the box a fixed distance into the hero so the overlap depth is
       identical across both news and event pages, regardless of box height. */
    transform: translateY(-2rem);
}

.news-meta-wrap--no-hero {
    display: block;
    margin-bottom: 2rem;
    padding-top: 1.5rem;
}

/* The grid row 2 height already clears the hero image area.
   The body starts right at the hero edge so the first section background
   starts there, with the metadata box overlapping into it via translateY(50%). */
.page--news.page--has-hero .page__body {
    padding-top: 0;
}

/* Width: text column + box = exactly --max-width.
 * The side-by-side layout only works at viewports >= 64rem, which is
 * why the @media (max-width: 64rem) block below switches to a stacked
 * layout. Keep these two breakpoints in sync if --max-width or
 * --text-width changes.
 */
.news-meta {
    display: inline-flex;
    flex-direction: column;
    gap: 0.625rem;
    background: var(--color-bg);
    color: var(--color-text);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    /* Width = site width minus text column width minus horizontal padding minus gap.
       This aligns the box flush with the right edge of the content area, leaving
       the text-width portion on the left free for body content. */
    width: calc(var(--max-width) - var(--text-width) - var(--content-padding) * 2 - 1.5rem);
    max-width: 100%;
}

.news-meta__row {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--color-text);
}

.news-meta__row svg {
    flex-shrink: 0;
    color: var(--color-muted);
}

.news-meta__date {
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
}

/* ============================================================
   Event page — metadata box
   ============================================================ */

.page__hero.page__hero--event {
    overflow: visible;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr 0;
    align-items: stretch;
    margin-bottom: 0;
}

.page__hero.page__hero--event .page__hero-inner {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2rem var(--content-padding);
}

.event-meta-wrap {
    position: relative;
    z-index: 2;
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    justify-self: center;
    width: 100%;
    max-width: var(--max-width);
    padding: 0 var(--content-padding);
}

.event-meta-wrap__inner {
    height: 0;
    overflow: visible;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    transform: translateY(-2rem);
}

.event-meta-wrap--no-hero {
    display: block;
    margin-bottom: 2rem;
    padding-top: 1.5rem;
}

.page--event.page--has-hero .page__body {
    padding-top: 0;
}

/* Fallback body styling for news pages without a featured image.
 * Resets full-bleed margins, constrains direct children to --text-width,
 * zeros the first-child top margin, and applies 3rem top padding to
 * match the spacing of a ContentSectionBlock when a hero is present.
 */
.page__body--fallback {
    margin-left: 0;
    margin-right: 0;
    padding: 2rem var(--content-padding);
}

.page__body--fallback > * {
    max-width: var(--text-width);
}

.page__body--fallback > :first-child {
    margin-top: 0;
}

.page__body--fallback > :last-child {
    margin-bottom: 0;
}

/* When there IS a hero, match the top spacing of a ContentSectionBlock (3rem)
   so fallback-only pages look consistent with pages that have body content. */
.page--news.page--has-hero .page__body--fallback,
.page--event.page--has-hero .page__body--fallback {
    padding-top: 3rem;
}

.event-meta {
    display: inline-flex;
    flex-direction: column;
    gap: 0.625rem;
    background: var(--color-bg);
    color: var(--color-text);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    width: calc(var(--max-width) - var(--text-width) - var(--content-padding) * 2 - 1.5rem);
    max-width: 100%;
}

.event-meta__row {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--color-text);
}

.event-meta__row svg {
    flex-shrink: 0;
    color: var(--color-muted);
    margin-top: 0.125rem;
}

.event-meta__date {
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
}

.event-meta__richtext > * {
    margin: 0;
}

.event-meta__richtext > * + * {
    margin-top: 0.25rem;
}

/* ============================================================
   Hamburger toggle (hidden on desktop, shown on small screens)
   ============================================================ */
.site-nav__toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: 0.5rem;
    margin: 0;
    cursor: pointer;
    color: inherit;
    width: 2.75rem;
    height: 2.75rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

/* Mobile-only search shortcut next to the hamburger.
   Hidden on desktop; the in-nav search remains the desktop affordance. */
.site-header__search-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: inherit;
    margin-left: auto;
}

.site-header__search-mobile:hover,
.site-header__search-mobile:focus {
    color: var(--color-accent);
    text-decoration: none;
}

.site-nav__toggle-bar {
    display: block;
    width: 1.5rem;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header.is-nav-open .site-nav__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.site-header.is-nav-open .site-nav__toggle-bar:nth-child(2) {
    opacity: 0;
}
.site-header.is-nav-open .site-nav__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   Tablet / small-desktop tweaks
   ============================================================ */
@media (max-width: 960px) {
    :root {
        --content-padding: 1rem;
    }

    .site-header__inner {
        padding: 1rem var(--content-padding) 0.75rem;
    }

    .site-nav a {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
    }

    .site-nav li {
        padding: 0 0.5rem;
    }

    body.template-homepage .site-logo img {
        height: 4.5rem;
    }
}

/* ============================================================
   Mobile layout (phones / narrow tablets)
   ============================================================ */
@media (max-width: 720px) {
    .site-header__inner {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem var(--content-padding);
    }

    .site-logo img {
        height: 2.5rem;
    }

    body.template-homepage .site-logo img {
        height: 2.75rem;
    }

    body.template-homepage .site-header.is-scrolled .site-logo img {
        height: 2.5rem;
    }

    /* Show the hamburger and mobile search */
    .site-nav__toggle {
        display: inline-flex;
        margin-left: 0.25rem;
    }

    .site-header__search-mobile {
        display: inline-flex;
    }

    /* Hide the in-nav (desktop) search inside the overlay */
    .site-nav__search {
        display: none;
    }

    /* When the menu is open in bleed mode, force the header to its solid
       light theme so the toggle (X) and edges read clearly. */
    body.has-hero-bleed .site-header.is-nav-open {
        background: var(--color-bg);
        border-bottom-color: var(--color-border);
        color: var(--color-text);
    }
    body.has-hero-bleed .site-header.is-nav-open .site-logo img {
        filter: brightness(0) saturate(100%) invert(28%) sepia(83%)
            saturate(1576%) hue-rotate(202deg) brightness(94%) contrast(91%);
    }

    /* Reorder mobile panel: main nav first, secondary at the bottom. */
    .site-header__nav .site-nav {
        order: 1;
    }
    .site-header__nav .site-secondary {
        order: 2;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--color-border);
    }

    /* Collapsible nav panel — full-screen overlay on mobile */
    .site-header__nav {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 60;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--color-bg);
        color: var(--color-text);
        margin: 0;
        padding: 5rem var(--content-padding) 2rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .site-header.is-nav-open .site-header__nav {
        display: flex;
    }

    /* Keep the toggle (X) above the overlay so it's always tappable */
    .site-header.is-nav-open .site-nav__toggle {
        position: fixed;
        top: 0.75rem;
        right: var(--content-padding);
        z-index: 70;
    }

    /* Lock background scroll while the menu is open */
    body.is-nav-open {
        overflow: hidden;
    }

    /* Force the nav panel to use the light theme even when bleed-mode
       header is transparent over a hero. */
    body.has-hero-bleed .site-header.is-nav-open .site-header__nav {
        color: var(--color-text);
    }
    body.has-hero-bleed .site-header.is-nav-open .site-header__nav .site-nav a,
    body.has-hero-bleed .site-header.is-nav-open .site-header__nav .site-secondary a,
    body.has-hero-bleed .site-header.is-nav-open .site-header__nav .site-lang__switch {
        color: var(--color-text);
        text-shadow: none;
    }

    /* Main nav: stack vertically */
    .site-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-nav li {
        padding: 0;
        background-image: none !important;
        border-top: 1px solid var(--color-border);
    }

    .site-nav li:first-child {
        border-top: 0;
    }

    .site-nav a {
        display: block;
        padding: 1rem 0.25rem;
        font-size: 1.375rem;
        font-weight: 600;
    }

    .site-nav__search {
        margin-left: 0;
        padding-right: 0;
    }

    .site-nav__search a {
        padding: 0.875rem 0.25rem;
    }

    /* Secondary nav: stack vertically, larger tap targets.
       Login + language switch share one row at the bottom. */
    .site-secondary ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0;
        font-size: 1.0625rem;
    }

    .site-secondary li {
        flex: 0 0 100%;
        padding: 0;
        border-right: 0;
        border-top: 1px solid var(--color-border);
        line-height: 1.4;
    }

    .site-secondary li:first-child {
        border-top: 0;
    }

    .site-secondary a,
    .site-secondary .site-lang__switch {
        display: block;
        padding: 0.875rem 0.25rem;
    }

    /* Login + language on one row at the bottom */
    .site-secondary li:nth-last-child(2),
    .site-secondary li:last-child {
        flex: 0 0 50%;
        display: inline-flex;
        align-items: center;
    }

    .site-secondary li:last-child {
        justify-content: flex-end;
    }

    .site-secondary li:last-child .site-lang__switch {
        gap: 0.75rem;
        white-space: nowrap;
        flex-wrap: nowrap;
    }

    .site-secondary li:last-child .site-lang__switch a,
    .site-secondary li:last-child .site-lang__switch span {
        display: inline;
        padding: 0;
    }

    /* Hero sizing on phones */
    .page__hero {
        min-height: 14rem;
        max-height: 24rem;
        height: 45vh;
    }

    .page__title--hero {
        font-size: clamp(1.75rem, 8vw, 2.75rem);
    }

    .page__hero--home {
        display: block;
        min-height: auto;
        max-height: none;
        height: auto;
    }

    .page__hero--home .page__hero-inner {
        min-height: 18rem;
        padding: 4rem var(--content-padding) 2rem;
        display: flex;
        align-items: center;
    }

    /* Card sits in normal flow on mobile (no overlap with body content) */
    .hero-blocks {
        padding: 0;
        background: var(--color-bg);
    }

    .hero-blocks__inner {
        grid-template-columns: 1fr;
        justify-content: stretch;
        transform: none;
        gap: 1rem;
    }

    .hero-blocks--no-hero .hero-blocks__inner {
        margin-bottom: 0;
    }

    .hero-block {
        padding: 1.25rem var(--content-padding);
        box-shadow: none;
    }

    .page__hero-inner {
        padding: 1.25rem var(--content-padding);
    }

    /* Page typography */
    .page__title {
        font-size: 1.75rem;
    }

    .page__body {
        font-size: 1rem;
    }

    .content-section {
        padding: 2rem 0;
    }

    .site-main {
        padding: 0.75rem var(--content-padding) 1.5rem;
    }

    /* Footer */
    .site-footer__inner {
        padding: 1rem var(--content-padding);
        font-size: 0.8125rem;
    }
}

/* Metadata boxes: below --max-width the 0-height row approach must be reversed so
   the box occupies normal grid-row-2 space (below the hero image) in the page flow. */
@media (max-width: 64rem) {
    .news-meta,
    .event-meta {
        width: 100%;
    }

    .page__hero.page__hero--news,
    .page__hero.page__hero--event {
        grid-template-rows: 1fr auto;
    }

    .news-meta-wrap__inner,
    .event-meta-wrap__inner {
        height: auto;
        overflow: auto;
        align-items: stretch;
    }

    /* Body no longer needs to clear the overlapping box */
    .page--news.page--has-hero .page__body,
    .page--event.page--has-hero .page__body {
        padding-top: 0;
    }

    .page--news.page--has-hero .page__body--fallback,
    .page--event.page--has-hero .page__body--fallback {
        padding-top: 3rem;
    }
}

/* Very small phones */
@media (max-width: 380px) {
    .site-secondary {
        font-size: 0.75rem;
    }
    .site-logo img,
    body.template-homepage .site-logo img {
        height: 2.25rem;
    }
}

/* ============================================================
   Card grids (news + events) — used as page body blocks
   ============================================================ */
.card-grid {
    margin: 0 calc(50% - 50vw);
    padding: 2.5rem 0;
    background: var(--color-bg);
}

.card-grid__title {
    max-width: var(--max-width);
    margin: 0 auto 1rem;
    padding: 0 var(--content-padding);
    font-size: 1.25rem;
    font-weight: 600;
}

.card-grid__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.card-grid--events .card-grid__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* NewsBlock and EventsBlock use a full-bleed breakout
 * (margin: 0 calc(50% - 50vw)) to stretch edge-to-edge on a page.
 * That calculation is relative to the immediate container's width.
 * Inside a column, "50%" is half the column width, not half the
 * viewport, so the breakout would blow the grid far outside the
 * column boundary.
 *
 * This block resets the breakout, the inner max-width, and the grid
 * to a single column when card grids appear inside a ColumnsBlock.
 * Available column width is already narrow, so single-column card
 * stacking is the only sensible result.
 */
.columns-block__col .card-grid {
    margin: 0;
    padding: 0;
    background: transparent;
}

.columns-block__col .card-grid__title {
    margin: 0 0 0.75rem;
    padding: 0;
}

.columns-block__col .card-grid__inner {
    max-width: none;
    margin: 0;
    padding: 0;
    grid-template-columns: 1fr;
}

.columns-block__col .card-grid--news .card-grid__inner,
.columns-block__col .card-grid--events .card-grid__inner {
    grid-template-columns: 1fr;
}

/* Layout variants */
.card-grid--layout-list .card-grid__inner {
    grid-template-columns: 1fr;
    gap: 0;
}

/* List layout: compact horizontal row per item */
.card-grid--layout-list .card {
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
}

.card-grid--layout-list .card:last-child {
    border-bottom: 1px solid var(--color-border);
}

.card-grid--layout-list .card:hover {
    box-shadow: none;
    transform: none;
}

/* News list: hide image, arrange date + title on one row */
.card-grid--layout-list .card--news .card__media {
    display: none;
}

.card-grid--layout-list .card--news .card__body {
    flex-direction: row;
    align-items: baseline;
    padding: 0.5rem 0;
    gap: 1.5rem;
}

.card-grid--layout-list .card--news .card__date {
    flex-shrink: 0;
    min-width: 6.5rem;
    color: var(--color-muted);
    font-weight: 400;
}

.card-grid--layout-list .card--news .card__title {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.card-grid--layout-list .card--news .card__link:hover .card__title,
.card-grid--layout-list .card--news .card__link:focus .card__title {
    color: var(--color-accent-hover);
}

.card-grid--layout-list .card--news .card__teaser,
.card-grid--layout-list .card--news .card__more {
    display: none;
}

/* Events list: compact date tile on the left, title on the right */
.card-grid--layout-list .card--event .card__link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 0;
    height: auto;
}

.card-grid--layout-list .card--event .card__date-tile {
    flex-shrink: 0;
    margin: 0;
    width: 3rem;
}

.card-grid--layout-list .card--event .card__date-tile-month {
    font-size: 0.625rem;
    padding: 0.25rem;
    letter-spacing: 0.03em;
}

.card-grid--layout-list .card--event .card__date-tile-day {
    font-size: 1.25rem;
    padding: 0.3125rem 0 0.4375rem;
}

.card-grid--layout-list .card--event .card__body {
    padding: 0;
    flex: 1;
    gap: 0;
}

.card-grid--layout-list .card--event .card__title {
    font-size: 1rem;
    font-weight: 400;
}

.card-grid--layout-list .card--event .card__teaser,
.card-grid--layout-list .card--event .card__more {
    display: none;
}

.card-grid--layout-slider .card-grid__inner {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    padding-bottom: 0.5rem;
}

.card-grid--layout-slider .card-grid__inner::-webkit-scrollbar {
    height: 4px;
}

.card-grid--layout-slider .card-grid__inner::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 2px;
}

.card-grid--layout-slider .card-grid__inner .card {
    flex: 0 0 280px;
    scroll-snap-align: start;
}

/* Filter bar */
.card-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    max-width: var(--max-width);
    margin: 0 auto 1.25rem;
    padding: 0 var(--content-padding);
}

.card-filter__select {
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--color-text);
    cursor: pointer;
}

.card-filter__submit {
    padding: 0.375rem 0.875rem;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.5;
}

.card-filter__submit:hover {
    background: var(--color-accent-hover);
}

.card-filter__clear {
    font-size: 0.875rem;
    color: var(--color-muted);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.card-grid__empty {
    grid-column: 1 / -1;
    color: var(--color-muted);
    font-style: italic;
}

.card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.card__link {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

.card__link:hover,
.card__link:focus {
    text-decoration: none;
    color: inherit;
}

.card__media {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--color-surface);
}

.card__body {
    padding: 1.25rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.card__date {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--color-text);
    font-family: var(--font-sans);
    font-weight: 500;
}

.card__title {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--color-text);
}

.card__teaser {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__more {
    margin: 0.25rem 0 0;
    font-family: var(--font-sans);
    font-weight: 500;
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.card__link:hover .card__more,
.card__link:focus .card__more {
    color: var(--color-accent);
}

/* News card teaser: show in full since the model caps it at 200 characters */
.card__teaser--full {
    -webkit-line-clamp: unset;
    overflow: visible;
    display: block;
}

/* Event card date tile (month banner + big day number) */
.card--event {
    overflow: hidden;
}

.card__date-tile {
    width: 6.25rem;
    margin: 1.25rem 1.25rem 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
    background: var(--color-bg);
}

.card__date-tile-month {
    display: block;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 600;
    text-transform: capitalize;
    padding: 0.5rem 0.5rem;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
}

.card__date-tile-day {
    display: block;
    color: var(--color-text);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.875rem;
    line-height: 1;
    padding: 0.625rem 0 0.875rem;
}

/* Tablet */
@media (max-width: 960px) {
    .card-grid__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 720px) {
    .card-grid {
        padding: 1.5rem 0;
    }
    .card-grid__inner,
    .card-grid--events .card-grid__inner {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .card__body {
        padding: 1rem 1rem 1.25rem;
    }
    .card__date-tile {
        margin: 1rem 1rem 0;
    }
}

/* ============================================================
   Tiled Gallery block
   ============================================================ */

/* Section wrapper — same bleed + centering pattern as .content-section */
.gallery-section {
    margin: 0 calc(50% - 50vw);
    padding: 2.5rem 0;
    background: var(--color-bg);
}

.gallery-section__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding);
}

/* Gallery container
   Hidden until JS completes the first resize pass to avoid a flash of
   incorrectly-sized content. */
.tiled-gallery {
    overflow: hidden;
    line-height: 0; /* collapse inline-block gaps */
}

.tiled-gallery-unresized {
    visibility: hidden;
}

/* Row: horizontal strip of groups */
.gallery-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    margin-bottom: 4px;
}

.gallery-row:last-child {
    margin-bottom: 0;
}

/* Space between groups inside a row */
.gallery-group + .gallery-group {
    margin-left: 4px;
}

/* Group: column of vertically-stacked images */
.gallery-group {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
}

/* Space between images inside a group */
.tiled-gallery-item + .tiled-gallery-item {
    margin-top: 4px;
}

/* Individual tile */
.tiled-gallery-item {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    line-height: 0;
}

.tiled-gallery-item a {
    display: block;
    line-height: 0;
    outline-offset: 2px;
}

.tiled-gallery-item img {
    display: block;
    object-fit: cover;
    transition: opacity 0.2s ease, transform 0.3s ease;
}

.tiled-gallery-item:hover img,
.tiled-gallery-item:focus-within img {
    opacity: 0.88;
    transform: scale(1.025);
}

/* Caption — revealed on hover */
.tiled-gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 0.625rem 0.5rem;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.65));
    color: #fff;
    font-size: 0.8125rem;
    line-height: 1.3;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.tiled-gallery-item:hover .tiled-gallery-caption,
.tiled-gallery-item:focus-within .tiled-gallery-caption {
    opacity: 1;
}

/* Circle variant: clip tiles to circles */
.type-circle .tiled-gallery-item img {
    border-radius: 50%;
}

/* Square and circle use a 2 px gap instead of 4 px */
.type-square .gallery-row,
.type-circle .gallery-row {
    margin-bottom: 2px;
}

.type-square .gallery-group + .gallery-group,
.type-circle .gallery-group + .gallery-group {
    margin-left: 2px;
}

.type-square .tiled-gallery-item + .tiled-gallery-item,
.type-circle .tiled-gallery-item + .tiled-gallery-item {
    margin-top: 2px;
}

/* Responsive: on very narrow viewports, stop scaling and let the browser
   wrap or scroll rather than making tiles illegibly tiny. */
@media (max-width: 480px) {
    .gallery-section {
        padding: 1.5rem 0;
    }
}

/* ============================================================
   Lightbox overlay
   ============================================================ */

#gallery-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.92);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    outline: none;
}

#gallery-lightbox.is-open {
    display: flex;
}

.lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 95vw;
    max-height: 90vh;
}

.lightbox-img {
    display: block;
    max-width: 95vw;
    max-height: 85vh;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.lightbox-img.is-loading {
    opacity: 0;
}

.lightbox-caption {
    margin-top: 0.75rem;
    color: #eee;
    font-size: 0.875rem;
    text-align: center;
    max-width: 60ch;
    line-height: 1.4;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: fixed;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease;
    border-radius: 4px;
}

.lightbox-close:hover,
.lightbox-close:focus,
.lightbox-prev:hover,
.lightbox-prev:focus,
.lightbox-next:hover,
.lightbox-next:focus {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.7);
    outline: none;
}

.lightbox-close {
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-prev,
.lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.5rem;
    padding: 0.375rem 0.75rem;
}

.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

@media (max-width: 640px) {
    .lightbox-prev { left: 0.375rem; }
    .lightbox-next { right: 0.375rem; }
}