: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));
}

/* N3 subsite logo + name turn white over the hero */
body.has-hero-bleed .site-header--n3:not(.is-scrolled) .subsite-logo__icon {
    filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0, 0, 0, 0.4));
}
body.has-hero-bleed .site-header--n3:not(.is-scrolled) .subsite-logo__name {
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
body.has-hero-bleed .site-header--n3:not(.is-scrolled) .subsite-logo:hover,
body.has-hero-bleed .site-header--n3:not(.is-scrolled) .subsite-logo:focus {
    color: rgba(255, 255, 255, 0.85);
}
/* The minibanner keeps its blue background in all scroll states */
body.has-hero-bleed .site-header--n3 .site-minibanner {
    background: var(--color-accent);
}

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.35) 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);
}

/* Centre the text column only inside tab panels — not the programme intro
 * strip, where the description must sit left-aligned beneath the hero. */
.programme-panel .content-section__inner > * {
    margin-left: auto;
    margin-right: auto;
}


.content-section__inner > .programme-section + .programme-section {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid var(--color-border, #e5e2db);
}

.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;
}

/* ============================================================
   Programme detail page — hero overlap, intro layout, metadata box
   ============================================================ */

/* Eyebrow label (type) above the hero title or page header title.
 * Shared element used on programme pages; the colour adapts to context.
 */
.page__eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page__hero .page__eyebrow {
    color: rgba(255, 255, 255, 0.8);
}

.page__header .page__eyebrow {
    color: var(--color-muted);
}

/* Faculty subtitle line below the title */
.page__hero-subtitle {
    margin: 0.375rem 0 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
}

/* Faculty home hero — inner content stacks to the bottom of the hero */
.page__hero--faculty .page__hero-inner {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    justify-content: flex-end;
    padding-top: 8rem; /* clear the fixed header (minibanner + masthead) */
    padding-bottom: 3rem;
}

/* Body copy inside the hero (rich text) */
.page__hero-body {
    margin: 0.75rem 0 0;
    max-width: 38rem;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    font-size: 1.0625rem;
}
.page__hero-body :first-child { margin-top: 0; }
.page__hero-body :last-child { margin-bottom: 0; }
.page__hero-body a { color: #fff; }

/* Quick-links row overlaid on the hero image */
.page__hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem 1.5rem;
    margin-top: 2rem;
    padding: 0;
}

.page__hero-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375em;
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.55);
    padding-bottom: 2px;
    transition: border-color 0.15s, opacity 0.15s;
}
.page__hero-link::after {
    content: "→";
    font-size: 0.875em;
    opacity: 0.75;
    transition: opacity 0.15s, transform 0.15s;
}
.page__hero-link:hover,
.page__hero-link:focus {
    color: #fff;
    text-decoration: none;
    border-bottom-color: #fff;
    opacity: 1;
}
.page__hero-link:hover::after,
.page__hero-link:focus::after {
    opacity: 1;
    transform: translateX(3px);
}

/* Standard (non-hero) full-width image with text block */
.fwit {
    position: relative;
    margin: 0 calc(50% - 50vw);
    background-size: cover;
    background-position: center;
    min-height: 24rem;
    display: flex;
    align-items: center;
}
.fwit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.25) 60%,
        rgba(0, 0, 0, 0.1) 100%
    );
}
.fwit__inner {
    position: relative;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 3rem var(--content-padding);
}
.fwit__eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.75);
}
.fwit__title {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
    max-width: 28rem;
}
.fwit__body {
    margin: 0.75rem 0 0;
    max-width: 34rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.fwit__body :first-child { margin-top: 0; }
.fwit__body a { color: #fff; }
.fwit__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem 1.25rem;
    margin-top: 1.5rem;
}
.fwit__link {
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.55);
    padding-bottom: 2px;
    transition: border-color 0.15s;
}
.fwit__link:hover,
.fwit__link:focus {
    color: #fff;
    text-decoration: none;
    border-bottom-color: #fff;
}

.page__header-subtitle {
    margin: 0.25rem 0 0;
    font-size: 1rem;
    color: var(--color-muted);
}

/* Hero grid — same mechanism as .page__hero--news / .page__hero--event.
 * See docs/decisions/005-news-metadata-hero-overlap.md for the rationale.
 */
.page__hero.page__hero--programme {
    overflow: visible;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr 0;
    align-items: stretch;
    margin-bottom: 0;
}

.page__hero.page__hero--programme .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);
}

.programme-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);
}

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

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

/* The intro section, tab bar, and related section are direct children of
 * the article and sit outside .page__body. They need the same full-viewport
 * negative-margin breakout as .page__body so their backgrounds span 100vw. */
.page--programme > .content-section,
.page--programme > .programme-tabs {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Metadata box — shared between hero-overlap and no-hero intro layout */
.programme-meta {
    display: inline-flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--color-bg);
    color: var(--color-text);
    padding: 1.5rem 1.75rem;
    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%;
}

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

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

.programme-meta__actions {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 0.25rem;
}

.programme-meta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.625rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius);
    line-height: 1.4;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.programme-meta__btn svg {
    flex-shrink: 0;
}

.programme-meta__btn--secondary {
    background: transparent;
    border: 1.5px solid var(--color-border);
    color: var(--color-text);
}

.programme-meta__btn--secondary:hover,
.programme-meta__btn--secondary:focus {
    border-color: var(--color-text);
    color: var(--color-text);
    text-decoration: none;
}

.programme-meta__btn--primary {
    background: var(--color-text);
    border: 1.5px solid var(--color-text);
    color: #fff;
}

.programme-meta__btn--primary:hover,
.programme-meta__btn--primary:focus {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    text-decoration: none;
}

/* No-hero: 67/33 grid (description left, metadata box right) inside the
 * contrast intro section. Acts as the inner container for that section —
 * handles centering and padding in place of content-section__inner so the
 * grid can span the full --max-width rather than --text-width.
 */
.programme-intro-layout {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding);
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;
}

.programme-intro-layout__text {
    font-size: 1.0625rem;
    line-height: 1.7;
}

.programme-intro-layout__text > :first-child {
    margin-top: 0;
}

.programme-intro-layout__text > :last-child {
    margin-bottom: 0;
}

/* In the intro layout, the meta box fills its grid column rather than
 * using the fixed width calculated for the hero-overlap variant.
 */
.programme-intro-layout__meta .programme-meta {
    width: 100%;
}

/* ============================================================
   Auto-translated description notice and loading state
   ============================================================ */
.translated-description__notice {
    margin-bottom: 1rem;
}

.translated-description--loading {
    min-height: 4rem;
    display: flex;
    align-items: center;
}

.translation-loading {
    color: #666;
    font-style: italic;
}

@keyframes translation-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.translation-loading {
    animation: translation-pulse 1.4s ease-in-out infinite;
}

/* ============================================================
   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%);
    }
    body.has-hero-bleed .site-header--n3.is-nav-open .subsite-logo__icon {
        filter: none;
    }
    body.has-hero-bleed .site-header--n3.is-nav-open .subsite-logo__name {
        color: var(--color-text);
        text-shadow: none;
    }

    /* 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;
    }

    .page__hero--faculty .page__hero-inner {
        min-height: 20rem;
        padding: 5rem var(--content-padding) 2.5rem;
        justify-content: flex-end;
        align-self: auto;
    }

    .page__hero-links {
        gap: 0.625rem 1.25rem;
        margin-top: 1.5rem;
    }

    /* 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,
    .programme-meta {
        width: 100%;
    }

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

    .news-meta-wrap__inner,
    .event-meta-wrap__inner,
    .programme-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,
    .page--programme.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;
    }

    /* Programme intro layout collapses to single column */
    .programme-intro-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* 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(3, 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;
}

/* Event cards in wide columns (67%, 75%) show 2 per row.
 * The blanket 1fr reset above handles all narrower columns for both
 * news and events.
 */
.columns-block--67-33 .columns-block__col:first-child .card-grid--events .card-grid__inner,
.columns-block--33-67 .columns-block__col:last-child .card-grid--events .card-grid__inner,
.columns-block--75-25 .columns-block__col:first-child .card-grid--events .card-grid__inner,
.columns-block--25-75 .columns-block__col:last-child .card-grid--events .card-grid__inner {
    grid-template-columns: repeat(2, minmax(0, 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-grid__pagination {
    max-width: var(--max-width);
    margin: 1rem auto 0;
    padding: 0 var(--content-padding);
}

.columns-block__col .card-grid__pagination {
    max-width: none;
    margin: 1rem 0 0;
    padding: 0;
}

/* Shared pagination component
 * Used by .card-grid__pagination (news/events blocks) and
 * .catalogue-pagination (programme list). The outer containers
 * above handle positioning; these rules handle the inner layout.
 */
.pagination__count {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: var(--color-muted);
}

.pagination__controls {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.pagination__pages {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.25rem;
    align-items: center;
}

.pagination__page a,
.pagination__page--current span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.375rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    line-height: 1;
    color: var(--color-text);
    text-decoration: none;
}

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

.pagination__page--current span {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    font-weight: 600;
}

.pagination__ellipsis {
    font-size: 0.875rem;
    color: var(--color-muted);
    padding: 0 0.125rem;
    line-height: 2rem;
}

.pagination__prev,
.pagination__next {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
}

a.pagination__prev:hover,
a.pagination__prev:focus,
a.pagination__next:hover,
a.pagination__next:focus {
    border-color: var(--color-accent);
    color: var(--color-accent);
    text-decoration: none;
}

span.pagination__prev,
span.pagination__next {
    opacity: 0.4;
    pointer-events: none;
}

.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__faculty-icon {
    display: block;
    max-height: 2.5rem;
    width: auto;
    align-self: flex-start;
}

.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));
    }
    .card-grid--events .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; }
}

/* ============================================================
   Catalogue pagination
   ============================================================ */

.catalogue-pagination {
    margin-top: 1.5rem;
}

/* ============================================================
   Video embed block
   ============================================================ */

.video-embed {
    margin: 1.5rem auto;
}

.video-embed--full    { width: 100%; }
.video-embed--medium  { width: 66.67%; }
.video-embed--small   { width: 50%; }

/* Responsive 16:9 aspect-ratio wrapper */
.video-embed__aspect-wrapper {
    position: relative;
    padding-top: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.video-embed__aspect-wrapper iframe,
.video-embed__aspect-wrapper object,
.video-embed__aspect-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 640px) {
    .video-embed--medium,
    .video-embed--small {
        width: 100%;
    }
}

/* ============================================================
   Research Explorer
   ============================================================ */

/* Card grids on research overview pages.
 * Research templates use <ul class="card-grid card-grid--X"> directly
 * inside .content-section__inner, without the .card-grid__inner wrapper
 * that design-system blocks use. This makes the <ul> itself the grid
 * container and prevents the full-bleed breakout from .card-grid.
 */
/* Remove the text-column max-width on all direct children of
 * .content-section__inner when inside a research explorer page so that
 * card grids, filter forms, and lists span the full container width. */
.page--research-explorer .content-section__inner > * {
    max-width: none;
}

ul.card-grid {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

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

@media (max-width: 640px) {
    ul.card-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Card meta labels (funding type, acronym, type) */
.card__meta {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-muted);
    font-family: var(--font-sans);
}

/* Filter form — research overview pages */
.filter-form {
    margin-bottom: 2rem;
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.filter-form__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.filter-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 12rem;
}

.filter-form__field label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.filter-form__field input[type="text"],
.filter-form__field select {
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--color-text);
    background: var(--color-bg);
}

.filter-form__field input[type="text"]:focus,
.filter-form__field select:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
    border-color: var(--color-accent);
}

.filter-form__submit {
    padding: 0.5rem 1.25rem;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.5;
}

.filter-form__submit:hover {
    background: var(--color-accent-hover);
}

.filter-form__clear {
    display: inline-block;
    margin-left: 0.75rem;
    font-size: 0.875rem;
    color: var(--color-muted);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    vertical-align: middle;
}

@media (max-width: 640px) {
    .filter-form__field {
        min-width: 100%;
    }
}

/* Research detail pages — sidebar + content two-column layout.
 * Overrides the full-bleed margin from .page__body and switches to a
 * max-width constrained grid so the sidebar and content sit side by side.
 * Horizontal spacing comes from .site-main's padding; only vertical
 * spacing is added here.
 */
.page--research-detail .page__body {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding-top: 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 720px) {
    .page--research-detail .page__body {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Constrain non-hero detail page headers (projects, organisations, etc.)
 * when a hero image pushes the page__header beyond the site-main bounds. */
.page--research-detail .page__header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Secondary title line (e.g. bilingual project title) */
.page__subtitle {
    margin: 0.25rem 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--color-muted);
}

/* Inline metadata row (project code, acronym) */
.page__meta {
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    color: var(--color-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.meta__code,
.meta__acronym {
    padding: 0.125rem 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-family: var(--font-sans);
}

/* Researcher header: photo + name side by side */
.page__header--researcher .page__header-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.page__photo img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

/* Researcher card photo (in grid view) */
.card--researcher .card__photo img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

/* Metadata list: key-value pairs in the detail page sidebar */
.metadata-list {
    margin: 0;
    padding: 1.25rem;
    background: var(--color-surface);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.metadata-list dt {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
}

.metadata-list dd {
    margin: 0.125rem 0 0;
    font-size: 0.9375rem;
}

.metadata-list__linked-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.metadata-list__linked-items a {
    color: var(--color-accent);
    text-decoration: none;
}

.metadata-list__linked-items a:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.metadata-list__tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.metadata-list__tags li {
    padding: 0.125rem 0.5rem;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-radius: 2rem;
    font-size: 0.8125rem;
}

/* Research explorer landing — navigation tiles */
.explorer-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
}

.explorer-nav__link {
    display: block;
    padding: 1.25rem 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    font-family: var(--font-sans);
    transition: border-color 0.15s, background 0.15s;
}

.explorer-nav__link:hover,
.explorer-nav__link:focus {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    text-decoration: none;
}

/* Faculty detail page sidebar navigation */
.faculty-nav h2 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    margin: 0 0 0.5rem;
}

.faculty-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.faculty-nav ul a {
    display: block;
    padding: 0.375rem 0;
    color: var(--color-accent);
    text-decoration: none;
    font-size: 0.9375rem;
}

.faculty-nav ul a:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Academic discipline hierarchical list */
.discipline-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--color-border);
}

.discipline-list__item {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9375rem;
}

.discipline-list__item--level-1 {
    font-weight: 600;
}

.discipline-list__item--level-2 {
    padding-left: 1.5rem;
}

.discipline-list__item--level-3 {
    padding-left: 3rem;
    font-size: 0.875rem;
}

.discipline-list__item--level-4 {
    padding-left: 4.5rem;
    font-size: 0.875rem;
    color: var(--color-muted);
}

.discipline-list__code {
    font-size: 0.8125rem;
    color: var(--color-muted);
    font-family: var(--font-sans);
    white-space: nowrap;
    flex-shrink: 0;
}

.discipline-list__name-nl {
    color: var(--color-muted);
    font-size: 0.875rem;
}

/* Plain-text description fallback (infrastructure pages) */
.page__description {
    font-size: 1.0625rem;
    line-height: 1.7;
    max-width: var(--text-width);
}

/* Empty-state message on overview pages */
.no-results {
    padding: 2rem 0;
    color: var(--color-muted);
    font-style: italic;
}

/* ============================================================
   Programme detail — section eyebrow labels and headings
   ============================================================ */

/* Eyebrow sits above an h2 inside a programme section.
 * Shares the uppercase-label style of .page__eyebrow but in the
 * accent colour so it reads as a section label, not page metadata.
 */
.programme-section__eyebrow {
    margin: 0 0 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
}

.programme-section__heading {
    margin: 0 0 1.5rem;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    line-height: 1.25;
    color: var(--color-text);
}

/* ============================================================
   Programme detail — pull quote
   ============================================================ */

.programme-pull-quote {
    margin: 0;
    padding: 0;
    border: 0;
    max-width: 44rem;
}

.programme-pull-quote__text {
    margin: 0 0 0.75rem;
    font-family: var(--font-italic);
    font-style: italic;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    line-height: 1.45;
    color: var(--color-text);
}

.programme-pull-quote__attribution {
    font-size: 0.9375rem;
    color: var(--color-muted);
    font-style: normal;
}

/* ============================================================
   Programme detail — video strip
   ============================================================
   Layout rule: a single video sits inside the text column
   (--text-width); two or more videos share the full site width
   (--max-width) side by side with no scrolling.
   The switch is driven by CSS :has(:only-child) so no JS or
   extra template markup is needed.
   ============================================================ */

.programme-video-section {
    background: var(--color-bg);
    padding: 1.5rem 0 2rem;
}

.programme-video-strip {
    margin: 0 auto;
    padding: 0 var(--content-padding) 0.75rem;
    display: flex;
    gap: 1.5rem;
}

/* Single video: constrain to the text column width */
.programme-video-strip:has(.programme-video-strip__item:only-child) {
    max-width: calc(var(--text-width) + var(--content-padding) * 2);
}

.programme-video-strip:has(.programme-video-strip__item:only-child) .programme-video-strip__item {
    flex: 0 0 100%;
}

/* Multiple videos: span full site width, all side by side */
.programme-video-strip:not(:has(.programme-video-strip__item:only-child)) {
    max-width: calc(var(--max-width) + var(--content-padding) * 2);
}

.programme-video-strip:not(:has(.programme-video-strip__item:only-child)) .programme-video-strip__item {
    flex: 1 1 0;
    min-width: 0;
}

/* 16:9 embed wrapper — reuses the existing video-embed pattern */
.programme-video-strip__item .video-embed__aspect-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: #000;
}

.programme-video-strip__item .video-embed__aspect-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ============================================================
   Programme detail — testimonials
   ============================================================ */

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

.programme-testimonials__heading {
    margin: 0 0 1.75rem;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.5rem;
}

.programme-testimonials {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1.5rem;
}

.testimonial-card {
    background: var(--color-bg);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.testimonial-card__icon {
    color: var(--color-accent);
    opacity: 0.35;
    flex-shrink: 0;
}

.testimonial-card__body {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-text);
    flex: 1;
}

.testimonial-card__footer {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}

.testimonial-card__name {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text);
}

.testimonial-card__role {
    font-size: 0.8125rem;
    color: var(--color-muted);
}

/* ============================================================
   Programme detail — contact block
   ============================================================ */

.programme-contact__row {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.programme-contact__icon {
    width: 2.5rem;
    height: auto;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.programme-contact__row p {
    margin: 0.25rem 0 0;
}

/* ============================================================
   Programme detail — related programmes section
   ============================================================ */

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

.programme-related__heading {
    margin: 0 0 1.75rem;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    color: var(--color-text);
}

.programme-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.25rem;
    padding-bottom: 1rem;
}


/* ── Tab bar ──────────────────────────────────────────────── */
/*
 * Sticky bar sits flush below the site header.
 * z-index: 40 keeps it below the main nav (z-index: 50).
 *
 * The site header auto-hides on downward scroll via transform: translateY(-100%)
 * (.is-hidden class). When hidden the tab bar sits at top:0. When the header
 * reappears (upward scroll removes .is-hidden), the tab bar must clear it.
 * --site-header-height is set by a one-liner in programme_detail.html.
 */
.programme-tabs {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #fff;
    border-bottom: 1px solid var(--color-border, #e5e2db);
    transition: top 0.3s ease; /* match header show/hide transition */
}

/* Push tab bar below site header whenever the header is visible */
body:has(.site-header:not(.is-hidden)) .programme-tabs {
    top: var(--site-header-height, 7rem);
}

.programme-tabs__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding);
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}

.programme-tabs__inner::-webkit-scrollbar {
    display: none;
}

/* Tab buttons — reset browser defaults, then style like tabs */
.programme-tabs__tab {
    /* reset */
    appearance: none;
    background: none;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    cursor: pointer;
    font-family: inherit;
    /* tab style */
    display: inline-flex;
    align-items: center;
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-muted);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s;
}

.programme-tabs__tab:hover,
.programme-tabs__tab:focus-visible {
    color: var(--color-text);
    border-bottom-color: var(--color-divider, #d6d3cc);
    outline: none;
}

.programme-tabs__tab.is-active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

@media (max-width: 720px) {
    .programme-tabs__tab {
        padding: 0.75rem 0.875rem;
        font-size: 0.875rem;
    }
}

/* ── Tab panels ───────────────────────────────────────────── */
/*
 * The HTML `hidden` attribute already sets display:none, but
 * spell it out explicitly so any framework reset can't clobber it.
 */
.programme-panel[hidden] {
    display: none;
}

/* ============================================================
   Programme detail page — pull quote
   ============================================================ */

.programme-pull-quote {
    margin: 0;
    padding: 0;
    border: 0;
    max-width: 44rem;
}

.programme-pull-quote__text {
    margin: 0 0 0.75rem;
    font-family: var(--font-italic, Georgia, serif);
    font-style: italic;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    line-height: 1.45;
    color: var(--color-text);
}

.programme-pull-quote__attribution {
    font-size: 0.9375rem;
    color: var(--color-muted);
    font-style: normal;
}

/* ============================================================
   Programme detail page — testimonials
   ============================================================ */

.programme-testimonials-wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2.5rem var(--content-padding);
}

.programme-testimonials__heading {
    margin: 0 0 1.75rem;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    color: var(--color-text);
}

.programme-testimonials {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1.25rem;
}

.testimonial-card {
    background: #fff;
    border-radius: 6px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.testimonial-card__icon {
    color: var(--color-accent);
    flex-shrink: 0;
}

.testimonial-card__body {
    flex: 1;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-text);
    font-style: italic;
}

.testimonial-card__footer {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--color-border, #e5e2db);
}

.testimonial-card__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}

.testimonial-card__role {
    font-size: 0.8125rem;
    color: var(--color-muted);
}

/* ============================================================
   Programme detail page — contact section
   ============================================================ */

.programme-contact__row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.programme-contact__icon {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    flex-shrink: 0;
}

/* ============================================================
   N3 subsite header: minibanner + masthead
   ============================================================ */

/* Minibanner — thin UGent blue bar above the subsite masthead */
.site-minibanner {
    background: var(--color-accent);
    color: #fff;
}

.site-minibanner__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0.5rem var(--content-padding);
    display: flex;
    align-items: center;
}

.site-minibanner .site-minibanner__logo,
.site-minibanner .site-minibanner__logo:hover,
.site-minibanner .site-minibanner__logo:focus,
.site-minibanner .site-minibanner__logo:active {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    text-decoration: none;
}

.site-minibanner__icon {
    height: 1.125rem;
    width: auto;
    /* Icon SVG is UGent blue; force white on the blue bar */
    filter: brightness(0) invert(1);
}

.site-minibanner__wordmark {
    font-family: "UGent Panno Text", var(--font-sans);
    font-weight: 400;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    /* Optically center uppercase caps against icon (caps sit high in em-box) */
    transform: translateY(0.15em);
}

/* Right side of the minibanner: user menu / login link */
.site-minibanner__right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1;
}

.site-minibanner__login,
.site-minibanner__login:hover,
.site-minibanner__login:focus {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #fff;
    text-decoration: none;
}

.site-minibanner__login:hover,
.site-minibanner__login:focus {
    text-decoration: underline;
}

/* ── User menu (logged-in dropdown) ───────────────────────────────────── */
.site-user-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.site-user-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    background: transparent;
    border: 0;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

.site-user-menu__trigger:hover,
.site-user-menu__trigger:focus-visible {
    outline: none;
    color: var(--color-accent);
}

.site-user-menu--dark .site-user-menu__trigger:hover,
.site-user-menu--dark .site-user-menu__trigger:focus-visible {
    color: rgba(255, 255, 255, 0.8);
}

.site-user-menu__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    flex-shrink: 0;
}

.site-user-menu__name {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-user-menu__chevron {
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.site-user-menu__trigger[aria-expanded="true"] .site-user-menu__chevron {
    transform: rotate(180deg);
}

.site-user-menu__panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 14rem;
    background: #fff;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.25rem 0;
    z-index: 1000;
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

.site-user-menu__panel[hidden] {
    display: none;
}

.site-user-menu__header {
    padding: 0.5rem 0.875rem 0.625rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.25rem;
}

.site-user-menu__display-name {
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    word-break: break-word;
}

.site-user-menu__email {
    font-size: 0.75rem;
    color: var(--color-muted);
    line-height: 1.3;
    margin-top: 0.125rem;
    word-break: break-all;
}

.site-user-menu__item {
    display: block;
    width: 100%;
    padding: 0.5rem 0.875rem;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

.site-user-menu__item:hover,
.site-user-menu__item:focus-visible {
    background: var(--color-bg-muted, #f4f4f4);
    color: var(--color-accent);
    outline: none;
    text-decoration: none;
}

/* Panel contents are always dark-on-light, regardless of header bleed state.
   Matches the bleed selector chain so it wins over
   `body.has-hero-bleed .site-header:not(.is-scrolled) .site-secondary a`. */
body.has-hero-bleed .site-header:not(.is-scrolled) .site-user-menu__panel a.site-user-menu__item,
body.has-hero-bleed .site-header:not(.is-scrolled) .site-user-menu__panel button.site-user-menu__item {
    color: var(--color-text);
    text-shadow: none;
}

body.has-hero-bleed .site-header:not(.is-scrolled) .site-user-menu__panel a.site-user-menu__item:hover,
body.has-hero-bleed .site-header:not(.is-scrolled) .site-user-menu__panel a.site-user-menu__item:focus-visible,
body.has-hero-bleed .site-header:not(.is-scrolled) .site-user-menu__panel button.site-user-menu__item:hover,
body.has-hero-bleed .site-header:not(.is-scrolled) .site-user-menu__panel button.site-user-menu__item:focus-visible {
    color: var(--color-accent);
    text-shadow: none;
}

/* On hero-bleed pages the trigger text is white (inherited from
   `.site-header { color: #fff }`). Keep it white on hover too — turning blue
   over the dim hero image looks broken. */
body.has-hero-bleed .site-header:not(.is-scrolled) .site-user-menu__trigger:hover,
body.has-hero-bleed .site-header:not(.is-scrolled) .site-user-menu__trigger:focus-visible {
    color: #fff;
}

.site-user-menu__logout {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
    margin-top: 0.25rem;
}

/* Dark variant — inside the N3 minibanner */
.site-user-menu--dark .site-user-menu__trigger {
    color: #fff;
}

.site-user-menu--dark .site-user-menu__avatar {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* On mobile, the secondary nav stacks inside the hamburger panel.
   Let the dropdown flow inline rather than overlay. */
@media (max-width: 768px) {
    .site-user-menu--light .site-user-menu__panel {
        position: static;
        box-shadow: none;
        border: 0;
        padding: 0.25rem 0 0;
        min-width: 0;
    }
    .site-user-menu--light .site-user-menu__header {
        padding-left: 0;
        padding-right: 0;
    }
    .site-user-menu--light .site-user-menu__item {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Subsite masthead — logo + name on the left */
.subsite-logo {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--color-text);
    flex-shrink: 0;
}

.subsite-logo:hover,
.subsite-logo:focus {
    text-decoration: none;
    color: var(--color-accent);
}

.subsite-logo__icon {
    height: 2rem;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.subsite-logo__name {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
    max-width: 22rem;
}

/* N3 masthead inner row: less top padding than N1 (minibanner already provides spacing) */
.site-header--n3 .site-header__inner {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Tablet */
@media (max-width: 960px) {
    .site-header--n3 .site-header__inner {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .subsite-logo__name {
        font-size: 0.8125rem;
        max-width: 11rem;
    }
}

/* Mobile */
@media (max-width: 720px) {
    .site-minibanner__icon {
        height: 1rem;
    }

    .site-minibanner__wordmark {
        font-size: 0.8125rem;
    }

    .subsite-logo__icon {
        width: 60vw;
    }

    .subsite-logo__name {
        font-size: 0.75rem;
        max-width: 9rem;
    }
}