/*
 * Single event.
 * Loaded by slug (see Theme\enqueue_page_assets()).
 *
 * Reference: prod /events/winterzauber-in-fellbach/ at 1920px.
 *
 * Geometry at 1920px (prod, before the breadcrumb row we add):
 *   hero 776 · details 991 · about 1071 · artists 679 · cta 314
 *   reviews 745 · gallery 824 · video 592 · venue 827
 *
 * Columns: 1240 for most sections, 968 for the artists row, 1024 for running
 * text, 1524 for the call to action. Prod's event template is 40px wider than
 * the site's 1200 content column, so the inner blocks carry their own width
 * instead of borrowing .container--content.
 */

/* ── Shared ────────────────────────────────────────────────────────────── */
/* The column every section but the artists row and the call to action uses. */
.event-details__inner,
.event-about__inner,
.event-gallery__inner,
.event-video__inner,
.event-venue__inner,
.event-reviews__head {
    width:     100%;
    max-width: 1240px;
    margin:    0 auto;
}

.event-artists__inner {
    width:     100%;
    max-width: 968px;
    margin:    0 auto;
}

/* Kicker, title and the 100px hairline under it — the opening of every
   section, so they are written once. */
.event-details__kicker,
.event-about__kicker,
.event-artists__kicker,
.event-reviews__kicker,
.event-gallery__kicker,
.event-video__kicker,
.event-venue__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);
}

.event-details__title,
.event-about__title,
.event-artists__title,
.event-reviews__title,
.event-gallery__title,
.event-video__title,
.event-venue__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);
}

/* The ones with a star on either side are laid out as a row. */
.event-details__title,
.event-about__title,
.event-artists__title,
.event-reviews__title,
.event-venue__title {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             16px;
}

.event-deco {
    flex-shrink: 0;
    width:       22.92px;
    height:      24px;
}

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

.event-details__rule,
.event-about__rule,
.event-artists__rule,
.event-reviews__rule,
.event-gallery__rule,
.event-video__rule,
.event-venue__rule {
    width:      100px;
    height:     1px;
    background: linear-gradient(90deg,
                    rgba(157, 136, 82, 0) 0%,
                    #d0b46d 49.8%,
                    rgba(106, 92, 56, 0) 100%);
}

/* Prod puts 32px between the hairline and whatever the section shows next. */
.event-details__rule,
.event-about__rule,
.event-artists__rule,
.event-reviews__rule,
.event-video__rule,
.event-venue__rule {
    margin-bottom: 32px;
}

/* The full-width hairline that opens a section, as opposed to the 100px one
   under a heading. */
.event-details__line,
.event-cta__line,
.event-gallery__line {
    width:      100%;
    height:     1px;
    background: linear-gradient(90deg,
                    rgba(157, 136, 82, 0) 0%,
                    #d0b46d 49.8%,
                    rgba(106, 92, 56, 0) 100%);
}

/* The heading blocks that stack centred. */
.event-details__head,
.event-about__head,
.event-artists__head,
.event-reviews__head,
.event-video__head,
.event-venue__head {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
    text-align:     center;
}

/* ── Button ────────────────────────────────────────────────────────────── */
/* One button for the whole page — hero, about, call to action and venue all
   send the visitor to the same ticket shop. */
.event-btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              6px;
    padding:          10px 50px;
    border:           1px solid var(--color-accent);
    border-radius:    50px;
    background-color: var(--color-primary);
    font-family:      var(--font-body);
    font-weight:      600;
    font-size:        16px;
    line-height:      1.25;
    text-transform:   uppercase;
    color:            var(--color-bg);
    text-decoration:  none;
    transition:       background-color var(--transition);
}

.event-btn:hover,
.event-btn:focus-visible {
    background-color: var(--color-accent);
}

.event-btn__icon {
    flex-shrink: 0;
}

/* ── Running text ──────────────────────────────────────────────────────── */
/* The three blocks an editor writes freely: the concert description, the
   artists and the venue. */
.event-about__text,
.event-artists__text,
.event-venue__text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size:   16px;
    line-height: 1.25;
    color:       rgba(255, 255, 255, .7);
}

.event-about__text p,
.event-artists__text p,
.event-venue__text p,
.event-about__text ol,
.event-about__text ul,
.event-artists__text ol,
.event-artists__text ul,
.event-venue__text ol,
.event-venue__text ul {
    margin: 0 0 20px;
}

.event-about__text ol,
.event-about__text ul,
.event-artists__text ol,
.event-artists__text ul,
.event-venue__text ol,
.event-venue__text ul {
    padding-left: 20px;
}

.event-about__text :last-child,
.event-artists__text :last-child,
.event-venue__text :last-child {
    margin-bottom: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
 * Hero
 * Reference: prod `elementor-element-abeeac8`.
 *
 * The event's own photo under a 70% wash of the page background, with an
 * 800px column centred over it. Taller than prod by the breadcrumb row — the
 * trail is worth more than the 776px.
 * ══════════════════════════════════════════════════════════════════════════ */
.event-hero {
    position: relative;
    padding:  120px 20px;
    overflow: hidden;
}

.event-hero__bg {
    position: absolute;
    inset:    0;
    z-index:  0;
}

.event-hero__bg::after {
    content:          '';
    position:         absolute;
    inset:            0;
    background-color: var(--color-bg);
    opacity:          .7;
}

.event-hero__image {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.event-hero__inner {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            24px;
    width:          100%;
    max-width:      800px;
    margin:         0 auto;
    text-align:     center;
}

.event-hero__kicker {
    margin:         0;
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      14px;
    line-height:    1.143;
    text-transform: uppercase;
    color:          var(--color-primary);
}

.event-hero__title {
    margin:      0;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size:   96px;
    line-height: 1.167;
    color:       var(--color-primary);
}

.event-hero__ornament {
    display: block;
    width:   232px;
    height:  25px;
}

.event-hero__subtitle {
    margin:      0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-style:  italic;
    font-size:   24px;
    line-height: 1.167;
    color:       var(--color-primary);
}

.event-hero__text {
    margin:      0;
    font-family: var(--font-body);
    font-weight: 300;
    font-size:   18px;
    line-height: 1.333;
    color:       var(--color-text);
}

/* ── Fact pills ────────────────────────────────────────────────────────── */
.event-hero__facts {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: center;
    gap:             16px;
    margin:          0;
    padding:         0;
    list-style:      none;
}

.event-hero__fact {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    padding:       8px 16px;
    border:        1px solid var(--color-muted);
    border-radius: 50px;
    font-family:   var(--font-body);
    font-weight:   400;
    font-size:     14px;
    line-height:   1.143;
    color:         var(--color-muted);
}

/* The only pill that is an alert rather than a fact, so it wears the gold. */
.event-hero__fact--seats {
    border-color: var(--color-primary);
    color:        var(--color-primary);
}

.event-hero__fact-icon {
    flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
 * General information
 * Reference: prod `elementor-element-ce8a68a`.
 *
 * A bordered card: this event's three facts across the top, then the list of
 * things that hold for every event.
 * ══════════════════════════════════════════════════════════════════════════ */
.event-details {
    padding: 0 20px 50px;
}

.event-details__inner {
    display:        flex;
    flex-direction: column;
    gap:            100px;
}

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

.event-details__card {
    display:          flex;
    flex-direction:   column;
    gap:              20px;
    padding:          60px;
    border:           1px solid rgba(192, 156, 77, .3);
    background-color: #16181d;
}

/* ── This event's facts ────────────────────────────────────────────────── */
.event-details__facts {
    display:    flex;
    gap:        56px;
    margin:     0;
    padding:    0;
    list-style: none;
}

.event-details__fact {
    position: relative;
    flex:     1 1 0;
}

/* The rule between two columns sits in the middle of the gap above. */
.event-details__fact + .event-details__fact::before {
    content:    '';
    position:   absolute;
    top:        0;
    bottom:     0;
    left:       -28px;
    width:      1px;
    background: linear-gradient(180deg,
                    rgba(192, 156, 77, 0) 0%,
                    #c09c4d 50%,
                    rgba(192, 156, 77, 0) 100%);
}

.event-details__fact-label {
    display:        flex;
    align-items:    flex-start;
    gap:            20px;
    margin:         0;
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      14px;
    line-height:    1.143;
    text-transform: uppercase;
    color:          var(--color-primary);
}

/* The gap to the value below belongs to the text, not to the row: put it on
   the row and the 18px icon would set the height instead of the 14px label. */
.event-details__fact-label span {
    margin-bottom: 12px;
}

.event-details__fact-icon {
    flex-shrink: 0;
}

/* Lines up under the label's text, past the icon and its 20px gap. */
.event-details__fact-value {
    margin:      0;
    padding-left: 38px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size:   16px;
    line-height: 1.25;
    color:       var(--color-text);
}

.event-details__divider {
    height:     1px;
    margin:     12px 0;
    background: rgba(192, 156, 77, .3);
}

/* ── Good to know ──────────────────────────────────────────────────────── */
.event-details__list {
    display:        flex;
    flex-direction: column;
    gap:            20px;
    margin:         0;
    padding:        0;
    list-style:     none;
}

.event-details__item {
    display:     flex;
    align-items: flex-start;
    gap:         20px;
}

.event-details__item-icon {
    flex-shrink: 0;
}

.event-details__item-title {
    margin:         0 0 12px;
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      14px;
    line-height:    1.143;
    text-transform: uppercase;
    color:          var(--color-primary);
}

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

.event-details__item-text a {
    color:            inherit;
    text-decoration:  underline;
    text-underline-offset: 3px;
    transition:       color var(--transition);
}

.event-details__item-text a:hover,
.event-details__item-text a:focus-visible {
    color: var(--color-primary);
}


/* ══════════════════════════════════════════════════════════════════════════
 * About the concert
 * Reference: prod `elementor-element-cfe170f`.
 * ══════════════════════════════════════════════════════════════════════════ */
.event-about {
    padding: 50px 20px;
}

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

/* Two columns, as on prod — a single 1024px measure would run far too long. */
.event-about__text {
    width:         100%;
    max-width:     1024px;
    margin-bottom: 32px;
    columns:       2;
    column-gap:    64px;
}

.event-about__btn {
    margin-bottom: 32px;
}

/* The picture an editor may add under the description; prod frames it with a
   gold hairline and 10px of breathing room. */
.event-about__picture {
    width:   100%;
    margin:  0;
    padding: 10px;
    border:  1px solid var(--color-primary);
}

.event-about__image {
    display: block;
    width:   100%;
    height:  auto;
}


/* ══════════════════════════════════════════════════════════════════════════
 * About the artists
 * Reference: prod `elementor-element-c937b54`.
 * ══════════════════════════════════════════════════════════════════════════ */
.event-artists {
    padding: 50px 20px 100px;
}

.event-artists__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
}

.event-artists__body {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             64px;
    width:           100%;
}

/* 426px is the video's slot plus the row gap. Prod holds it open even on an
   event that has no video, so the paragraph keeps the same measure either way
   rather than stretching across the whole column. */
.event-artists__text {
    flex:      0 1 60%;
    max-width: calc(100% - 426px);
}

.event-artists__video {
    flex: 0 0 362px;
}

.event-artists__frame {
    display:       block;
    width:         100%;
    aspect-ratio:  9 / 16;
    border:        0;
}


/* ══════════════════════════════════════════════════════════════════════════
 * Call to action
 * Reference: prod `elementor-element-adf605c`.
 *
 * A band over a photo, closed off by a hairline at each end.
 * ══════════════════════════════════════════════════════════════════════════ */
.event-cta {
    position: relative;
    padding:  0 20px;
    overflow: hidden;
}

.event-cta__bg {
    position: absolute;
    inset:    0;
    z-index:  0;
}

.event-cta__image {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.event-cta__inner {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    gap:            75px;
}

.event-cta__body {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            20px;
    text-align:     center;
}

.event-cta__phrase {
    margin:      0;
    font-family: var(--font-heading);
    font-weight: 300;
    font-size:   48px;
    line-height: 1.167;
    color:       var(--color-primary);
}

.event-cta__text {
    margin:      0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size:   18px;
    line-height: 1.333;
    color:       var(--color-text);
}


/* ══════════════════════════════════════════════════════════════════════════
 * Visitor reviews
 * Reference: prod `elementor-element-a8bded7`.
 *
 * Full-bleed, as on prod: three cards fill the screen and the fourth peeks in.
 * ══════════════════════════════════════════════════════════════════════════ */
.event-reviews {
    padding: 100px 0;
}

/* The heading keeps the page gutter even though the row below it does not.
   Its hairline already carries 32px; 16 more make the same 48 every other
   section leaves between the rule and what follows. */
.event-reviews__head {
    margin-bottom: 16px;
    padding:       0 20px;
}

/* No gap: the card carries its own 20px margins, as on prod, so the 607px
   slot is what the eye measures. */
.event-reviews__carousel .carousel__track {
    gap:                 0;
    padding:             0 50px;
    scroll-padding-left: 50px;
}

/* The row runs edge to edge, so the arrows stay inside the viewport instead
   of stepping outside a column that is not there. */
.event-reviews__carousel .carousel__arrow {
    background-color: var(--color-bg);
}

.event-reviews__carousel .carousel__arrow--prev {
    left: 8px;
}

.event-reviews__carousel .carousel__arrow--next {
    right: 8px;
}

.carousel__item--review {
    flex: 0 0 607px;
}

.event-review {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap:            0;
    height:         100%;
    margin:         0 20px;
    padding:        24px 20px;
    border:         1px solid var(--color-primary);
    text-align:     center;
}

.event-review__mark {
    flex-shrink: 0;
    margin:      5px 5px 8px;
    color:       var(--color-primary);
}

.event-review__text {
    max-width:     700px;
    margin:        0 0 24px;
    padding:       0 20px;
    font-family:   var(--font-heading);
    font-weight:   400;
    font-size:     24px;
    line-height:   1.167;
    color:         rgba(255, 255, 255, .7);
}

.event-review__text p {
    margin: 0;
}

.event-review__author {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      14px;
    line-height:    1.143;
}

.event-review__name {
    color: var(--color-primary);
}

.event-review__city {
    color: var(--color-muted);
}


/* ══════════════════════════════════════════════════════════════════════════
 * Gallery
 * Reference: prod `elementor-element-08b1bd6`.
 *
 * A photo behind the grid, faded into the darker ground from the top down.
 * ══════════════════════════════════════════════════════════════════════════ */
.event-gallery {
    position: relative;
    padding:  0 20px 50px;
    overflow: hidden;
}

.event-gallery__bg {
    position: absolute;
    inset:    0;
    z-index:  0;
}

.event-gallery__bg::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(180deg, rgba(15, 17, 20, 0) 0%, var(--color-bg-alt) 100%);
    opacity:    .8;
}

.event-gallery__bg-image {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.event-gallery__inner {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    gap:            50px;
}

/* Prod holds the heading a full 100px below the opening hairline here, twice
   what the column's own gap gives. */
.event-gallery__line {
    margin-bottom: 50px;
}

/* The only heading on the page that reads across rather than down. */
.event-gallery__head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             100px;
}

.event-gallery__intro {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            16px;
    flex:           0 0 175px;
}

.event-gallery__text {
    flex:           1;
    margin:         0;
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      16px;
    line-height:    1.5;
    text-transform: uppercase;
    color:          var(--color-primary);
}

/* The vertical padding is prod's: its grid spaces the cells with padding, so
   the outer edge gets the same 20px the rows have between them. */
.event-gallery__grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   40px;
    margin:                0;
    padding:               20px 0;
    list-style:            none;
}

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

.event-gallery__image {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform var(--transition);
}

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


/* ══════════════════════════════════════════════════════════════════════════
 * Video
 * Reference: prod `elementor-element-4aa2121`.
 * ══════════════════════════════════════════════════════════════════════════ */
.event-video {
    padding:          50px 20px;
    background-color: var(--color-bg-alt);
}

.event-video__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
}

.event-video__list {
    display:    flex;
    gap:        20px;
    width:      100%;
    margin:     0;
    padding:    0;
    list-style: none;
}

.event-video__item {
    flex: 1 1 0;
}

.event-video__frame {
    display:      block;
    width:        100%;
    aspect-ratio: 16 / 9;
    border:       0;
}


/* ══════════════════════════════════════════════════════════════════════════
 * About the venue
 * Reference: prod `elementor-element-2eb27c0`.
 * ══════════════════════════════════════════════════════════════════════════ */
.event-venue {
    padding:          50px 20px;
    background-color: var(--color-bg-alt);
}

.event-venue__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
}

.event-venue__name {
    margin:      0;
    font-family: var(--font-body);
    font-weight: 500;
    font-style:  italic;
    font-size:   18px;
    line-height: 1.333;
    color:       var(--color-primary);
}

.event-venue__tagline {
    margin:      0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size:   14px;
    line-height: 1.143;
    color:       rgba(255, 255, 255, .7);
}

.event-venue__text {
    width:         100%;
    max-width:     1024px;
    margin-bottom: 32px;
}

.event-venue__btn {
    margin-bottom: 32px;
}

.event-venue__gallery {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   20px;
    width:                 100%;
    margin:                32px 0 0;
    padding:               0;
    list-style:            none;
}

.event-venue__tile {
    display:      block;
    overflow:     hidden;
    aspect-ratio: 1;
    border:       1px solid var(--color-primary);
}

.event-venue__image {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform var(--transition);
}

.event-venue__tile:hover .event-venue__image,
.event-venue__tile:focus-visible .event-venue__image {
    transform: scale(1.04);
}


/* ══════════════════════════════════════════════════════════════════════════
 * Laptop — prod narrows the hero headline here and nothing else.
 * ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1366px) {

    .event-hero {
        padding: 100px 20px;
    }

    .event-hero__title {
        font-size:   82px;
        line-height: 1.122;
    }
}


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

    .event-hero {
        padding: 60px 20px;
    }

    .event-hero__title {
        font-size:   56px;
        line-height: 1.143;
    }

    .event-hero__subtitle {
        font-size: 20px;
    }

    .event-hero__text {
        font-size: 16px;
    }

    .event-details,
    .event-gallery {
        padding-bottom: 40px;
    }

    .event-about,
    .event-video,
    .event-venue {
        padding: 40px 20px;
    }

    .event-artists {
        padding: 40px 20px;
    }

    .event-details__inner {
        gap: 60px;
    }

    .event-details__card {
        padding: 32px;
    }

    .event-details__title,
    .event-about__title,
    .event-artists__title,
    .event-reviews__title,
    .event-gallery__title,
    .event-video__title,
    .event-venue__title {
        font-size: 32px;
    }

    .event-cta__phrase {
        font-size: 36px;
    }

    /* One measure reads better than two once the column is this narrow. */
    .event-about__text {
        columns: 1;
    }

    /* The video moves under the text rather than shrinking beside it. */
    .event-artists__body {
        flex-direction: column;
        align-items:    stretch;
        gap:            32px;
    }

    .event-artists__text {
        max-width: none;
    }

    .event-artists__video {
        flex:      0 0 auto;
        max-width: 362px;
        margin:    0 auto;
        width:     100%;
    }

    .event-gallery__head {
        flex-direction: column;
        align-items:    flex-start;
        gap:            20px;
    }

    .event-gallery__intro {
        flex: 0 0 auto;
    }

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

    .event-reviews {
        padding: 60px 0;
    }

    .carousel__item--review {
        flex-basis: 480px;
    }

    .event-review__text {
        font-size: 20px;
    }

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


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

    .event-hero {
        padding: 40px 16px;
    }

    .event-hero__inner {
        gap: 16px;
    }

    .event-hero__title {
        font-size:   36px;
        line-height: 1.167;
    }

    .event-hero__ornament {
        width:  160px;
        height: 17px;
    }

    .event-hero__subtitle {
        font-size: 18px;
    }

    .event-details,
    .event-gallery {
        padding: 0 16px 28px;
    }

    .event-about,
    .event-artists,
    .event-video,
    .event-venue {
        padding: 28px 16px;
    }

    .event-details__inner {
        gap: 48px;
    }

    .event-details__card {
        padding: 24px;
    }

    .event-details__title,
    .event-about__title,
    .event-artists__title,
    .event-reviews__title,
    .event-gallery__title,
    .event-video__title,
    .event-venue__title {
        gap:       10px;
        font-size: 24px;
    }

    .event-deco {
        width:  13.4px;
        height: 14px;
    }

    /* The three facts stack, so the rule between them lies down. */
    .event-details__facts {
        flex-direction: column;
        gap:            24px;
    }

    .event-details__fact + .event-details__fact::before {
        top:        -12px;
        bottom:     auto;
        left:       0;
        right:      0;
        width:      auto;
        height:     1px;
        background: linear-gradient(90deg,
                        rgba(192, 156, 77, 0) 0%,
                        #c09c4d 50%,
                        rgba(192, 156, 77, 0) 100%);
    }

    .event-cta__inner {
        gap: 40px;
    }

    .event-cta__phrase {
        font-size: 28px;
    }

    .event-cta__text {
        font-size: 16px;
    }

    .event-btn {
        width:       100%;
        padding:     10px 24px;
        white-space: normal;
    }

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

    .event-gallery__text {
        font-size: 14px;
    }

    .event-video__list {
        flex-direction: column;
    }

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

    .event-reviews {
        padding: 40px 0;
    }

    .event-reviews__head {
        padding: 0 16px;
    }

    .event-reviews__carousel .carousel__track {
        padding:             0 16px;
        scroll-padding-left: 16px;
    }

    .carousel__item--review {
        flex-basis: 300px;
    }

    .event-review {
        margin:  0 8px;
        padding: 20px 12px;
    }

    .event-review__text {
        padding:   0;
        font-size: 18px;
    }
}

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

    .event-gallery__image,
    .event-venue__image {
        transition: none;
    }
}