/*
 * Home page — Hero slider.
 * Loaded by slug (see Theme\enqueue_page_assets()).
 *
 * Reference: Figma «Component 6» (node 208:4227) at 1920px — unlike the rest
 * of the site, this section follows the design, not prod.
 *
 * Geometry at 1920px:
 *   section 860 tall, content column starts at x=198 (same as header/footer)
 *   slide content top 123, switcher row bottom 95 from the section's edge
 *
 * Breakpoints follow the header's: 1359 / 1024 / 767.
 */

.hero {
    position:   relative;
    overflow:   hidden;
    padding:    0 20px;
    background: var(--color-bg-alt);
}

/* A 1px gradient rule closes the section, as in the design. */
.hero::after {
    content:    '';
    position:   absolute;
    left:       0;
    bottom:     0;
    width:      100%;
    height:     1px;
    background: linear-gradient(90deg,
                    rgba(157, 136, 82, 0) 0%,
                    #d0b46d 49.8%,
                    rgba(106, 92, 56, 0) 100%);
}

/* ── Background ────────────────────────────────────────────────────────── */
.hero__media {
    position: absolute;
    inset:    0;
}

/* The photo is not a flat fill: the design fades it out towards the edges
   with a radial mask, so the page background carries the corners. Sizes are
   taken from the Figma gradient (979×692 of a 1920×860 box, centred slightly
   above the middle); its 15° rotation is dropped — CSS cannot rotate a
   gradient mask and the difference is not visible at 10% edge opacity. */
.hero__image {
    position:           absolute;
    inset:              0;
    width:              100%;
    height:             100%;
    object-fit:         cover;
    opacity:            0;
    transition:         opacity .6s ease;
    -webkit-mask-image: radial-gradient(51% 80.5% at 50% 44.6%, #000 0%, rgba(0, 0, 0, 0) 100%);
    mask-image:         radial-gradient(51% 80.5% at 50% 44.6%, #000 0%, rgba(0, 0, 0, 0) 100%);
}

.hero__image.is-active {
    opacity: 1;
}

/* Decorative grain over the photo — 10% opacity, as in the design. */
.hero__texture {
    position:        absolute;
    inset:           0;
    opacity:         .1;
    background:      url('../../img/hero/texture.webp') no-repeat center / cover;
    pointer-events:  none;
}

/* ── Layout ────────────────────────────────────────────────────────────── */
.hero__inner {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    gap:             40px;
    min-height:      860px;
    padding:         123px 0 95px;
}

/* All slides share one grid cell, so the block is as tall as the tallest one
   and the inactive slides can cross-fade in place instead of jumping. */
.hero__slides {
    display: grid;
}

.hero__slide {
    grid-area:      1 / 1;
    display:        flex;
    align-items:    flex-start;
    justify-content: space-between;
    gap:            40px;
    opacity:        0;
    visibility:     hidden;
    transition:     opacity .5s ease, visibility 0s linear .5s;
}

.hero__slide.is-active {
    opacity:         1;
    visibility:      visible;
    transition-delay: 0s;
}

/* ── Slide content ─────────────────────────────────────────────────────── */
.hero__content {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            26px;
    flex:           0 1 598px;
    /* drop-shadow, not box-shadow: it follows the glyphs, not the box. */
    filter:         drop-shadow(0 0 3px rgba(215, 189, 137, .1));
}

.hero__title {
    margin:         0;
    font-family:    var(--font-heading);
    font-weight:    700;
    font-size:      60px;
    line-height:    1;
    text-transform: uppercase;
    color:          var(--color-accent);
}

.hero__ornament {
    display:   block;
    width:     232px;
    height:    auto;
    max-width: 100%;
}

.hero__text {
    max-width:   517px;
    margin:      0;
    font-family: var(--font-body);
    font-weight: 300;
    font-size:   20px;
    line-height: 1.4;
    color:       var(--color-text);
}

.hero__text-accent {
    color: var(--color-accent);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.hero__actions {
    display: flex;
    gap:     10px;
}

.hero__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    box-sizing:      border-box;
    height:          50px;
    font-family:     var(--font-body);
    line-height:     1.4;
    text-transform:  uppercase;
    text-decoration: none;
    white-space:     nowrap;
    transition:      filter var(--transition), background-color var(--transition), color var(--transition);
}

.hero__btn--ticket {
    padding:       10px 30px;
    border:        1px solid var(--color-accent);
    border-radius: 80px;
    background:    linear-gradient(90deg, #b6903b 0%, #e3b858 100%);
    color:         var(--color-bg);
    font-weight:   600;
    font-size:     15px;
    letter-spacing: 1.5px;
    filter:        drop-shadow(0 0 6.5px rgba(215, 189, 137, .4));
}

.hero__btn--ticket:hover,
.hero__btn--ticket:focus-visible {
    filter: drop-shadow(0 0 10px rgba(215, 189, 137, .6));
}

.hero__btn-icon {
    flex-shrink: 0;
}

.hero__btn--ghost {
    padding:        10px 24px;
    border:         1px solid var(--color-border);
    border-radius:  110px;
    color:          var(--color-primary);
    font-weight:    500;
    font-size:      16px;
    letter-spacing: 1.6px;
}

.hero__btn--ghost:hover,
.hero__btn--ghost:focus-visible {
    background-color: rgba(192, 156, 77, .12);
    color:            var(--color-accent);
}

/* ── Claim block ───────────────────────────────────────────────────────── */
.hero__badge {
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            12px;
    flex:           0 0 370px;
    margin:         0;
}

.hero__badge-title {
    width:          100%;
    font-family:    var(--font-body);
    font-weight:    600;
    font-size:      51px;
    /* `normal`, not a number: the design's 165px block only adds up with
       Montserrat's own metric line height (~1.22). */
    line-height:    normal;
    text-align:     right;
    text-transform: uppercase;
    color:          var(--color-primary);
}

.hero__badge-sub {
    width:          100%;
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      24px;
    line-height:    normal;
    text-transform: uppercase;
    color:          var(--color-text);
}

/* ── Switchers ─────────────────────────────────────────────────────────── */
.hero__slider {
    display:   flex;
    flex-shrink: 0;
    gap:       10px;
}

.hero__thumb {
    position:    relative;
    flex-shrink: 0;
    display:     block;
    width:       170px;
    height:      95px;
    padding:     0;
    border:      0;
    background:  none;
    opacity:     .5;
    cursor:      pointer;
    transition:  opacity var(--transition);
}

.hero__thumb:hover,
.hero__thumb:focus-visible,
.hero__thumb.is-active {
    opacity: 1;
}

.hero__thumb-image {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    border:     1px solid var(--color-accent);
}

/* The caption sits on the bottom edge and is exactly one line tall. */
.hero__thumb-label {
    position:        absolute;
    left:            0;
    right:           0;
    bottom:          0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0 6px;
    background-color: rgba(0, 0, 0, .7);
    font-family:     var(--font-body);
    font-weight:     400;
    font-size:       14px;
    line-height:     1.4;
    color:           var(--color-accent);
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
}

/* ── Laptop ────────────────────────────────────────────────────────────── */
/* 1359 is the header's own burger breakpoint — the hero follows it so the
   page never changes rhythm in two steps. */
@media (max-width: 1359px) {

    .hero__inner {
        min-height: 720px;
        padding:    90px 0 70px;
    }

    .hero__title {
        font-size: 48px;
    }

    .hero__text {
        font-size: 18px;
    }

    .hero__badge {
        flex-basis: 300px;
    }

    .hero__badge-title {
        font-size: 42px;
    }

    .hero__badge-sub {
        font-size: 20px;
    }
}

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    .hero__inner {
        min-height: 640px;
        padding:    60px 0 50px;
        gap:        32px;
    }

    /* Side by side no longer fits: the claim moves above the headline, where
       it reads as a kicker rather than a second column. */
    .hero__slide {
        flex-direction: column-reverse;
        align-items:    stretch;
        gap:            24px;
    }

    .hero__content {
        flex:      0 1 auto;
        gap:       20px;
    }

    .hero__badge {
        flex:        0 0 auto;
        align-items: flex-start;
        gap:         4px;
    }

    .hero__badge-title,
    .hero__badge-sub {
        text-align: left;
    }

    .hero__badge-title {
        font-size: 32px;
    }

    .hero__badge-sub {
        font-size: 16px;
    }

    .hero__title {
        font-size: 40px;
    }

    .hero__text {
        font-size: 16px;
    }

    .hero__thumb {
        width:  140px;
        height: 80px;
    }

    .hero__thumb-label {
        font-size: 12px;
    }
}

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .hero {
        padding: 0 16px;
    }

    .hero__inner {
        min-height: 560px;
        padding:    40px 0 32px;
        gap:        28px;
    }

    .hero__title {
        font-size:   28px;
        line-height: 1.1;
    }

    .hero__ornament {
        width: 180px;
    }

    .hero__text {
        font-size: 14px;
    }

    .hero__actions {
        flex-wrap: wrap;
    }

    .hero__btn {
        flex:   1 1 auto;
        height: 46px;
    }

    /* The row would otherwise force a page-wide horizontal scrollbar — let it
       scroll on its own instead, bleeding into the page gutter. */
    .hero__slider {
        margin:              0 -16px;
        padding:             0 16px;
        overflow-x:          auto;
        scroll-snap-type:    x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width:     none;
    }

    .hero__slider::-webkit-scrollbar {
        display: none;
    }

    .hero__thumb {
        width:            120px;
        height:           70px;
        scroll-snap-align: start;
    }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .hero__image,
    .hero__slide,
    .hero__btn,
    .hero__thumb {
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
 * Events schedule
 * Reference: Figma «Schedule» (node 178:3113) at 1920px.
 *
 * Geometry at 1920px:
 *   section 100px padding, column 1524 wide (x = 198, as everywhere else)
 *   heading block → cards → button, 50px apart
 *   cards 286 wide, 24 apart, carousel arrows 20px outside the column
 *
 * The event card lives here for now; it moves to css/global/ the moment a
 * second page (the events archive) needs it.
 * ══════════════════════════════════════════════════════════════════════════ */

.schedule {
    padding:    100px 20px;
    background: var(--color-bg-alt);
}

.schedule__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            50px;
}

/* ── Heading ───────────────────────────────────────────────────────────── */
.schedule__head {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            17px;
    text-align:     center;
}

.schedule__kicker {
    margin:         0;
    font-family:    var(--font-body);
    font-weight:    300;
    font-size:      16px;
    line-height:    1.4;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color:          var(--color-primary);
}

.schedule__title {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             16px;
    margin:          0;
    font-family:     var(--font-heading);
    font-weight:     400;
    font-size:       40px;
    line-height:     1;
    letter-spacing:  4px;
    text-transform:  uppercase;
    color:           var(--color-text);
}

/* Cancels the letter-space CSS adds after the last glyph, so the ornament on
   the right sits the same 16px away as the one on the left. */
.schedule__title-text {
    margin-right: -.1em;
}

/* A flex item cannot shrink below its longest word, so "Veranstaltungskalender"
   pushed the whole page 23px past a 375px screen. With `min-width: 0` the span
   takes what the stars leave and the word breaks where it must, which is what
   prod's heading does (two lines, 272 wide). The same goes for every title
   built the same way. `anywhere`, not `break-word`: only it lowers the word's
   minimum width, which is what the flex column above the title sizes it by. */
.schedule__title-text,
.about__title-text,
.past__title-text,
.blog__title-text {
    min-width:     0;
    overflow-wrap: anywhere;
}

/* The icon helper writes a square width/height; this pair restores the
   ornament's own 20.34 × 21.29 proportions. */
.schedule__deco {
    flex-shrink: 0;
    width:       20.34px;
    height:      21.29px;
}

.schedule__deco--left {
    transform: scaleX(-1);
}

/* The same hairline the hero closes with, at 100px. Every section's heading
   block ends with one, and so does the blog card. */
.schedule__rule,
.about__rule,
.gallery__rule,
.past__rule,
.blog__rule {
    width:      100px;
    height:     1px;
    background: linear-gradient(90deg,
                    rgba(157, 136, 82, 0) 0%,
                    #d0b46d 49.8%,
                    rgba(106, 92, 56, 0) 100%);
}

/* ── More button ───────────────────────────────────────────────────────── */
.schedule__more {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    /* The design draws a fixed 184px; the real German label is longer, so the
       width is a floor rather than a cap. */
    min-width:       184px;
    height:          40px;
    padding:         10px 24px;
    border:          1px solid var(--color-primary);
    border-radius:   110px;
    font-family:     var(--font-body);
    font-weight:     400;
    font-size:       16px;
    line-height:     1.4;
    color:           var(--color-primary);
    text-decoration: none;
    white-space:     nowrap;
    transition:      background-color var(--transition), color var(--transition);
}

.schedule__more:hover,
.schedule__more:focus-visible {
    background-color: rgba(192, 156, 77, .12);
    color:            var(--color-accent);
}

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    .schedule {
        padding: 60px 20px;
    }

    .schedule__inner {
        gap: 36px;
    }

    .schedule__title {
        font-size: 32px;
    }
}

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .schedule {
        padding: 40px 16px;
    }

    .schedule__inner {
        gap: 28px;
    }

    .schedule__title {
        gap:            10px;
        font-size:      24px;
        letter-spacing: 2px;
    }

    .schedule__deco {
        width:  14px;
        height: 14.66px;
    }

}

/* ══════════════════════════════════════════════════════════════════════════
 * About us
 * Reference: prod `elementor-element-1f678589` at 1920px — the live version is
 * ahead of the Figma file here, it is the one that carries the video.
 *
 * Geometry at 1920px:
 *   section 100px padding, column 1200 (x = 360)
 *   heading → card → features → button, 50px apart
 *   card 1px gold outline, 40px padding, 24px between its rows
 * ══════════════════════════════════════════════════════════════════════════ */

.about {
    padding: 100px 20px;
}

.about__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            50px;
}

/* ── Heading ───────────────────────────────────────────────────────────── */
.about__head {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
    text-align:     center;
}

.about__kicker {
    margin:         0;
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      16px;
    line-height:    1.25;
    text-transform: uppercase;
    color:          var(--color-primary);
}

.about__title {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             16px;
    margin:          0;
    font-family:     var(--font-heading);
    font-weight:     400;
    font-size:       40px;
    line-height:     1.2;
    text-transform:  uppercase;
    color:           var(--color-text);
}

.about__deco {
    flex-shrink: 0;
    width:       20.34px;
    height:      21.29px;
}

.about__deco--left {
    transform: scaleX(-1);
}

/* ── Card ──────────────────────────────────────────────────────────────── */
.about__card {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            24px;
    width:          100%;
    padding:        40px;
    border:         1px solid var(--color-primary);
}

/* Width comes from the icon helper, which reads the viewBox — the artwork is
   not square and must not be forced to a fixed width. */
.about__flourish {
    height:     100px;
    flex-shrink: 0;
}

.about__text {
    margin:      0;
    font-family: var(--font-body);
    font-weight: 300;
    font-size:   18px;
    line-height: 1.333;
    color:       rgba(255, 255, 255, .8);
    text-align:  center;
}

.about__accent {
    color: var(--color-primary);
}

.about__more {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    height:          42px;
    padding:         10px 24px;
    border:          1px solid var(--color-primary);
    border-radius:   100px;
    font-family:     var(--font-body);
    font-weight:     400;
    font-size:       16px;
    line-height:     1.4;
    color:           var(--color-primary);
    text-decoration: none;
    white-space:     nowrap;
    transition:      background-color var(--transition), color var(--transition);
}

.about__more:hover,
.about__more:focus-visible {
    background-color: rgba(192, 156, 77, .12);
    color:            var(--color-accent);
}

/* The card and the films under it read as one block, 20px apart; the section's
   own 50px gap belongs between that block and what follows. */
.about__stage {
    display:        flex;
    flex-direction: column;
    gap:            20px;
    width:          100%;
}

/* 16:9, as prod embeds it — the iframe's own 640×360 is irrelevant here. */
.about__video {
    position:      relative;
    width:         100%;
    aspect-ratio:  16 / 9;
}

.about__video iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   0;
}

/* ── Features ──────────────────────────────────────────────────────────── */
.about__features {
    display:    flex;
    width:      100%;
    margin:     0;
    padding:    40px;
    list-style: none;
}

.about-feature {
    position:       relative;
    display:        flex;
    flex:           1;
    flex-direction: column;
    align-items:    center;
    gap:            10px;
    min-width:      0;
    padding:        24px;
    text-align:     center;
}

/* A hairline between the columns, fading out at both ends. */
.about-feature + .about-feature::before {
    content:    '';
    position:   absolute;
    left:       0;
    top:        0;
    width:      1px;
    height:     100%;
    background: linear-gradient(180deg,
                    rgba(192, 156, 77, 0) 0%,
                    var(--color-primary) 50%,
                    rgba(192, 156, 77, 0) 100%);
}

.about-feature__art {
    flex-shrink:   0;
    height:        265px;
    /* Prod leaves an extra 20px under the artwork on top of the column gap. */
    margin-bottom: 20px;
    color:         var(--color-primary);
}

.about-feature__title {
    margin:         0;
    font-family:    var(--font-heading);
    font-weight:    400;
    font-size:      24px;
    line-height:    1.167;
    text-transform: uppercase;
    color:          var(--color-primary);
}

.about-feature__subtitle {
    margin:      0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size:   16px;
    line-height: 1.25;
    color:       var(--color-muted);
}

/* ── Closing button ────────────────────────────────────────────────────── */
.about__cta {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              8px;
    height:           42px;
    padding:          10px 24px;
    border:           1px solid var(--color-primary);
    border-radius:    100px;
    background-color: var(--color-primary);
    font-family:      var(--font-body);
    font-weight:      600;
    font-size:        16px;
    line-height:      1.4;
    text-transform:   uppercase;
    color:            var(--color-bg);
    text-decoration:  none;
    white-space:      nowrap;
    transition:       filter var(--transition);
}

.about__cta:hover,
.about__cta:focus-visible {
    filter: drop-shadow(0 0 8px rgba(215, 189, 137, .5));
}

.about__cta-icon {
    flex-shrink: 0;
}

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    .about {
        padding: 60px 20px;
    }

    .about__inner {
        gap: 36px;
    }

    .about__head {
        margin-bottom: 0;
    }

    .about__title {
        font-size: 32px;
    }

    .about__card {
        padding: 24px;
        gap:     20px;
    }

    .about__text {
        font-size: 16px;
    }

    .about__features {
        padding: 24px 0;
    }

    .about-feature {
        padding: 16px;
    }

    .about-feature__art {
        height:        200px;
        margin-bottom: 12px;
    }

    .about__flourish {
        height: 84px;
    }

    .about-feature__title {
        font-size: 20px;
    }

    .about-feature__subtitle {
        font-size: 14px;
    }
}

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .about {
        padding: 40px 16px;
    }

    .about__inner {
        gap: 28px;
    }

    .about__title {
        gap:       10px;
        font-size: 24px;
    }

    .about__deco {
        width:  14px;
        height: 14.66px;
    }

    .about__card {
        padding: 16px;
    }

    .about__flourish {
        height: 72px;
    }

    .about__text {
        font-size: 14px;
    }

    .about__more,
    .about__cta {
        width:       100%;
        white-space: normal;
    }

    /* Stacked, so the hairline turns and moves to the top of each column. */
    .about__features {
        flex-direction: column;
        padding:        0;
    }

    .about-feature + .about-feature::before {
        left:       0;
        width:      100%;
        height:     1px;
        background: linear-gradient(90deg,
                        rgba(192, 156, 77, 0) 0%,
                        var(--color-primary) 50%,
                        rgba(192, 156, 77, 0) 100%);
    }
}

/* ══════════════════════════════════════════════════════════════════════════
 * Gallery
 * Reference: prod `elementor-element-343b8ee1` at 1920px.
 *
 * Geometry at 1920px:
 *   section 100px padding, column 1524 (x = 198)
 *   heading row → grid, 50px apart
 *   4 tiles of 366×289 per row, 20px apart
 * ══════════════════════════════════════════════════════════════════════════ */

.gallery {
    padding: 100px 20px;
}

.gallery__inner {
    display:        flex;
    flex-direction: column;
    gap:            50px;
}

/* ── Heading row ───────────────────────────────────────────────────────── */
.gallery__head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             40px;
}

.gallery__intro {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

.gallery__kicker {
    margin:         0;
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      16px;
    line-height:    1.25;
    text-transform: uppercase;
    color:          var(--color-primary);
}

.gallery__title {
    margin:         0;
    font-family:    var(--font-heading);
    font-weight:    400;
    font-size:      40px;
    line-height:    1.2;
    text-transform: uppercase;
    color:          var(--color-text);
}

.gallery__text {
    max-width:      1067px;
    margin:         0;
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      20px;
    line-height:    1.2;
    text-transform: uppercase;
    color:          var(--color-primary);
}

/* ── Grid ──────────────────────────────────────────────────────────────── */
.gallery__grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   20px;
    /* Matches the 10px the plugin leaves above and below the rows on prod. */
    margin:                0;
    padding:               10px 0;
    list-style:            none;
}

/* Everything past the limit stays in the markup for the lightbox and for
   visitors without JS, but takes no room in the grid. */
.gallery__item--overflow {
    display: none;
}

.gallery__tile {
    position:      relative;
    display:       block;
    aspect-ratio:  570 / 450;
    overflow:      hidden;
}

.gallery__image {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.gallery__tile:hover .gallery__image,
.gallery__tile:focus-visible .gallery__image {
    transform: scale(1.04);
}

.gallery__more {
    position:         absolute;
    inset:            0;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          8px;
    background-color: rgba(0, 0, 0, .5);
    font-family:      var(--font-body);
    font-weight:      500;
    font-size:        16px;
    line-height:      1.4;
    text-align:       center;
    text-transform:   uppercase;
    color:            var(--color-text);
}

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    .gallery {
        padding: 60px 20px;
    }

    .gallery__inner {
        gap: 36px;
    }

    /* The two halves no longer share a line comfortably. */
    .gallery__head {
        flex-direction: column;
        align-items:    flex-start;
        gap:            20px;
    }

    .gallery__intro {
        padding-bottom: 0;
    }

    .gallery__title {
        font-size: 32px;
    }

    .gallery__text {
        font-size: 16px;
    }

    .gallery__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .gallery {
        padding: 40px 16px;
    }

    .gallery__inner {
        gap: 28px;
    }

    .gallery__title {
        font-size: 24px;
    }

    .gallery__text {
        font-size: 14px;
    }

    .gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        gap:                   12px;
    }

    .gallery__more {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .gallery__image {
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
 * Past events
 * Reference: prod `elementor-element-4fc519fc` at 1920px.
 *
 * Geometry at 1920px:
 *   section 835 tall on #16181d, opened by a hairline across the column
 *   heading block at 101, carousel at 252, button at 692
 *   cards 286×390: a poster with a pill top-right and the title at the bottom
 * ══════════════════════════════════════════════════════════════════════════ */

.past {
    padding:          101px 20px;
    background-color: #16181d;
}

.past__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            50px;
}

/* The hairline sits on the column, not on the full-width section, so it starts
   and ends where the content does. */
.past__inner::before {
    content:    '';
    position:   absolute;
    left:       0;
    right:      0;
    top:        -101px;
    height:     1px;
    background: linear-gradient(90deg,
                    rgba(157, 136, 82, 0) 0%,
                    #d0b46d 49.8%,
                    rgba(106, 92, 56, 0) 100%);
}

.past__inner {
    position: relative;
}

/* ── Heading ───────────────────────────────────────────────────────────── */
.past__head {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
    text-align:     center;
}

.past__kicker {
    margin:         0;
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      16px;
    line-height:    1.25;
    text-transform: uppercase;
    color:          var(--color-primary);
}

.past__title {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             16px;
    margin:          0;
    font-family:     var(--font-heading);
    font-weight:     400;
    font-size:       40px;
    line-height:     1.2;
    text-transform:  uppercase;
    color:           var(--color-text);
}

.past__deco {
    flex-shrink: 0;
    width:       20.34px;
    height:      21.29px;
}

.past__deco--left {
    transform: scaleX(-1);
}

/* The arrows ride a darker section, so they borrow its background. */
.past__carousel .carousel__arrow {
    background-color: #16181d;
}

/* ── More button ───────────────────────────────────────────────────────── */
/* Same pill the About section closes with. */
.past__more {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    height:          42px;
    padding:         10px 24px;
    border:          1px solid var(--color-primary);
    border-radius:   100px;
    font-family:     var(--font-body);
    font-weight:     400;
    font-size:       16px;
    line-height:     1.4;
    color:           var(--color-primary);
    text-decoration: none;
    white-space:     nowrap;
    transition:      background-color var(--transition), color var(--transition);
}

.past__more:hover,
.past__more:focus-visible {
    background-color: rgba(192, 156, 77, .12);
    color:            var(--color-accent);
}

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    .past {
        padding: 60px 20px;
    }

    .past__inner {
        gap: 36px;
    }

    .past__inner::before {
        top: -60px;
    }

    .past__title {
        font-size: 32px;
    }
}

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .past {
        padding: 40px 16px;
    }

    .past__inner {
        gap: 28px;
    }

    .past__inner::before {
        top: -40px;
    }

    .past__title {
        gap:            10px;
        font-size:      24px;
        letter-spacing: 0;
    }

    .past__deco {
        width:  14px;
        height: 14.66px;
    }

    .past__more {
        width:       100%;
        white-space: normal;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
 * Blog
 * Reference: prod `elementor-element-5e4ff567` at 1920px.
 *
 * Geometry at 1920px:
 *   section 762 tall on #16181d, heading at 100, carousel at 251
 *   cards 359 wide with a 30px gap — four to a row
 *   cover 311×180, category, title (2 lines), hairline, excerpt (3 lines)
 * ══════════════════════════════════════════════════════════════════════════ */

.blog {
    padding:          100px 20px;
    background-color: #16181d;
}

.blog__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            50px;
}

/* ── Heading ───────────────────────────────────────────────────────────── */
.blog__head {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
    text-align:     center;
}

.blog__kicker {
    margin:         0;
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      16px;
    line-height:    1.25;
    text-transform: uppercase;
    color:          var(--color-primary);
}

.blog__title {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             16px;
    margin:          0;
    font-family:     var(--font-heading);
    font-weight:     400;
    font-size:       40px;
    line-height:     1.2;
    text-transform:  uppercase;
    color:           var(--color-text);
}

.blog__deco {
    flex-shrink: 0;
    width:       20.34px;
    height:      21.29px;
}

.blog__deco--left {
    transform: scaleX(-1);
}

/* The blog cards are wider than the event cards and sit further apart. */
.carousel__track--wide {
    gap: 30px;
}

.carousel__item--wide {
    flex-basis: 359px;
}

.blog__carousel .carousel__arrow {
    background-color: #16181d;
}
/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    .blog {
        padding: 60px 20px;
    }

    .blog__inner {
        gap: 36px;
    }

    .blog__title {
        font-size: 32px;
    }
}

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .blog {
        padding: 40px 16px;
    }

    .blog__inner {
        gap: 28px;
    }

    .blog__title {
        gap:       10px;
        font-size: 24px;
    }

    .blog__deco {
        width:  14px;
        height: 14.66px;
    }

    .carousel__item--wide {
        flex-basis: 280px;
    }
}

@media (prefers-reduced-motion: reduce) {
}