/* ==========================================================================
   EVENTS PAGE

   Loaded on top of style.css by events.html only. Everything is prefixed
   .ev- so none of it can reach another page.

   The page is a hub: one full-height feature panel for the next event, a
   teaser for the one after it, then a grid of cards for everything that
   has already happened.
   ========================================================================== */

/*  WHAT IS IN HERE
      BASICS
      SECTIONS
      ARCHIVED STATE
      CARDS
      COUNTDOWN
      FEATURE PANEL
      TEASER
      RESPONSIVE
      FOOTER TWEAK

    Sections run alphabetically apart from the pinned ones.
    BASICS and SECTIONS are pinned above the rest because the panels
    below them override those generic rules. RESPONSIVE and the footer
    tweak are pinned last for the same reason, the other way round.

    Rules inside a section stay in the order they were written. Sorting
    those would change which rule wins when two carry the same weight.   */

/* ==========================================================================
   BASICS

   The screen-reader-only helper, the status badges and the date and
   place line. Small pieces used all over the page.
   ========================================================================== */
.ev-sr-only{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
}

.ev-badge{
    display:inline-block;
    padding:6px 14px;
    border-radius:50px;
    border:1px solid;
    font-family:var(--sg-font-accent);
    font-size:.7rem;
    font-weight:bold;
    letter-spacing:2px;
    text-transform:uppercase;
    white-space:nowrap;
}

.ev-badge.is-upcoming{ background:var(--sg-orange); border-color:var(--sg-orange); color:#0a0a0a; }
.ev-badge.is-soon{     background:transparent;      border-color:var(--sg-gold);   color:var(--sg-gold); }
.ev-badge.is-past{     background:#1a1a1a;          border-color:#333;             color:var(--sg-dim); }
.ev-badge.is-soldout{  background:#3a1414;          border-color:#8c3a3a;          color:#ff9d9d; }

.ev-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px 14px;
    font-family:var(--sg-font-accent);
    font-size:.82rem;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.ev-meta-date{ color:var(--sg-gold); font-weight:bold; }
.ev-meta-place{ color:var(--sg-dim); }

/* ==========================================================================
   SECTIONS

   The generic wrapper and heading for a band of the page. Pinned above
   the rest because the feature and teaser panels override it.
   ========================================================================== */
.ev-section{
    max-width:var(--sg-max-width);
    margin:auto;
}

.ev-section h2{
    text-align:left;
}

/* ==========================================================================
   ARCHIVED STATE

   What the ticket bar and its button look like once an event has been
   and gone.
   ========================================================================== */
/* Reads as a statement, not a button you can press */
.btn.is-done{
    background:#1a1a1a;
    border:1px solid #333;
    color:var(--sg-dim);
    cursor:default;
}

/* ==========================================================================
   CARDS

   The grid of past events. .is-nolink is for an event with nowhere to go
   yet - it strips the hover and the button rather than offering a dead
   link.
   ========================================================================== */
.ev-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap:24px;
    margin-top:26px;
}

.ev-card{
    position:relative;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--sg-border);
    border-radius:18px;
    background:var(--sg-panel);
    transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/*  One stretched link covers the whole card, so the entire card is
    clickable while the page still has exactly one link per event.       */
.ev-card-link{
    position:absolute;
    inset:0;
    z-index:2;
}

.ev-card-art{
    aspect-ratio:16 / 9;
    background-image:var(--ev-art);
    background-size:cover;
    background-position:center;
    /* Past events sit back: dimmer and less saturated than an upcoming one */
    filter:brightness(.62) saturate(.72);
    transition:filter .25s ease, transform .45s ease;
}

/*  For a card with only a logo rather than event artwork. Contained, not
    cropped, on a dark tile.                                              */
.ev-card-art.is-logo{
    background-size:min(56%, 190px);
    background-repeat:no-repeat;
    background-color:#141414;
    filter:brightness(.75);
}

.ev-card-body{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:22px 22px 24px;
    flex:1;
}

.ev-card-body h3{
    font-family:var(--sg-font-display);
    font-size:1.5rem;
    letter-spacing:-.5px;
    text-transform:uppercase;
}

.ev-card-artists{
    color:var(--sg-dim);
    font-size:.92rem;
    line-height:1.65;
}

/*  Pushed to the bottom so the buttons line up across cards of different
    heights.                                                              */
.ev-card-btn{
    margin-top:auto;
    pointer-events:none;   /* the stretched link above does the clicking */
    transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}

.ev-card:hover{
    transform:translateY(-4px);
    border-color:#3a3a3a;
    box-shadow:0 18px 40px rgba(0,0,0,.5);
}

.ev-card:hover .ev-card-art{
    filter:brightness(.86) saturate(.95);
    transform:scale(1.04);
}

.ev-card:hover .ev-card-btn{
    background:var(--sg-orange);
    border-color:var(--sg-orange);
    color:#0a0a0a;
}

.ev-card:focus-within{
    border-color:var(--sg-orange);
}

/*  A past event with no archive page yet. The card still shows - it just
    does not pretend to go anywhere.                                      */
.ev-card.is-nolink .ev-card-link{ display:none; }
.ev-card.is-nolink{ cursor:default; }
.ev-card.is-nolink:hover{ transform:none; box-shadow:none; }
.ev-card.is-nolink .ev-card-btn{ opacity:.45; }
.ev-card.is-nolink:hover .ev-card-btn{
    background:transparent;
    color:var(--sg-orange);
    border-color:var(--sg-orange);
}

/* ==========================================================================
   COUNTDOWN

   Ticks down to the doors time in the data-doors attribute on the
   markup. One value drives both the numbers and the line of text
   underneath. When it reaches zero .is-open swaps the wording.
   ========================================================================== */
.ev-countdown{
    margin-top:34px;
}

.ev-countdown-label{
    font-family:var(--sg-font-accent);
    font-size:.72rem;
    font-weight:bold;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--sg-gold);
    margin-bottom:14px;
}

.ev-countdown-units{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    list-style:none;
    margin:0 0 12px;
    padding:0;
}

.ev-countdown-units li{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;

    min-width:74px;
    padding:12px 10px;

    background:rgba(0,0,0,.42);
    border:1px solid var(--sg-border);
    border-radius:12px;
}

.ev-countdown-units b{
    font-family:var(--sg-font-display);
    font-size:clamp(1.5rem, 3.4vw, 2.2rem);
    line-height:1;
    color:#fff;
    /*  Tabular figures, so the seconds do not jog the box about as the
        digits change width.                                             */
    font-variant-numeric:tabular-nums;
}

.ev-countdown-units span{
    font-family:var(--sg-font-accent);
    font-size:.62rem;
    font-weight:bold;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--sg-dim);
}

.ev-countdown-when{
    color:var(--sg-muted);
    font-size:.9rem;
}

/* once the doors are open there is nothing left to count */
.ev-countdown.is-open .ev-countdown-label{
    color:var(--sg-orange);
    font-size:.9rem;
    letter-spacing:.2em;
}

/*  Full height, edge to edge, the same as the featured event above it. It
    is the other half of the story - what is on next, and what is coming
    after - so the two read as a pair rather than one hero and one card.  */

/* ==========================================================================
   FEATURE PANEL

   The full-height panel for the next event. .is-halloween adds the
   purple and the cobwebs, and it is scoped to this one panel so the
   theme cannot leak into the rest of the page.
   ========================================================================== */
.ev-feature{
    position:relative;
    overflow:hidden;

    /*  svh rather than vh so the address bar appearing on a phone does not
        leave the bottom of the hero cut off.                             */
    min-height:100vh;
    min-height:100svh;

    display:flex;
    align-items:center;
    border-bottom:1px solid var(--sg-border);
}

/*  Halloween treatment, kept to the section carrying .is-halloween. The
    rest of the site stays exactly as it is.                              */
.ev-feature.is-halloween{
    background:
        radial-gradient(80% 90% at 88% 18%, #3a1f5c 0%, transparent 58%),
        linear-gradient(150deg, #1b0d02 0%, #0b0b0b 62%);
}

.ev-feature.is-halloween::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:var(--sg-grain);
    opacity:.1;
    mix-blend-mode:overlay;
    pointer-events:none;
}

.ev-feature-inner{
    position:relative;
    z-index:1;
    width:100%;
    max-width:var(--sg-max-width);
    margin:0 auto;
    padding:calc(var(--sg-nav-height, 88px) + 40px) 6% 70px;

    display:grid;
    grid-template-columns:minmax(0, 1.3fr) minmax(0, .7fr);
    align-items:center;
    gap:40px;
}

.ev-web{
    position:absolute;
    top:0;
    right:0;
    width:220px;
    height:220px;
    opacity:.2;
    transform:scaleX(-1);
    pointer-events:none;
}

.ev-web path{
    fill:none;
    stroke:#fff;
    stroke-width:1.4;
}

.ev-feature-eyebrow{
    font-family:var(--sg-font-accent);
    font-size:.72rem;
    font-weight:bold;
    letter-spacing:.34em;
    text-transform:uppercase;
    color:var(--sg-dim);
    margin-bottom:20px;
}

.ev-feature-name{
    font-family:var(--sg-font-display);
    font-size:clamp(2.2rem, 6vw, 4.4rem);
    line-height:.98;
    letter-spacing:-1.5px;
    text-transform:uppercase;
    margin:16px 0 16px;
}

.ev-feature-name span{
    display:block;
    color:var(--sg-orange);
    font-size:.5em;
    margin-top:10px;
}

.ev-feature-desc{
    color:var(--sg-muted);
    font-size:1.05rem;
    margin:14px 0 0;
}

.ev-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:34px;
}

/*  The pumpkin sits in the corner rather than as a background image, so
    there is no extra file to load.                                       */
.ev-feature-art{
    position:relative;
    z-index:1;
    display:grid;
    place-items:center;
}

.ev-pumpkin{
    width:min(80%, 300px);
    height:auto;
    filter:drop-shadow(0 0 60px rgba(255,107,0,.32));
}

/* ==========================================================================
   TEASER

   The full-height panel for the event after next, deliberately quieter
   than the feature panel above it.
   ========================================================================== */
.ev-teaser-wrap{
    padding:0;
    margin:0;
    max-width:none;
}

.ev-teaser{
    position:relative;
    overflow:hidden;
    border:0;
    border-bottom:1px solid var(--sg-border);
    border-radius:0;
    text-align:center;
    isolation:isolate;

    min-height:100vh;
    min-height:100svh;
    display:flex;
    align-items:center;
}

/*  The blurred artwork. Scaled up past the edges so the blur has no soft
    border, and dimmed hard so the type stays the loudest thing here.     */
.ev-teaser::before{
    content:"";
    position:absolute;
    inset:-8%;
    background-image:var(--ev-art);
    background-size:cover;
    background-position:center;
    filter:blur(34px) saturate(1.25) brightness(.5);
    z-index:-2;
}

.ev-teaser::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(70% 90% at 50% 42%, rgba(255,107,0,.18) 0%, transparent 62%),
        linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.9) 100%);
    z-index:-1;
}

.ev-teaser-body{
    position:relative;
    padding:calc(var(--sg-nav-height, 88px) + 40px) 24px 70px;
    max-width:860px;
    margin:auto;
}

/*  SOUNDZGOOD is one long word - ten characters of Arial Black - and it was
    breaking across two lines, leaving a lone D underneath. It is never
    allowed to break, and the size is driven by the viewport so it shrinks
    to fit instead.                                                       */
.ev-teaser-word{
    font-family:var(--sg-font-display);
    font-size:min(5.6rem, 11vw);
    line-height:.94;
    letter-spacing:-2px;
    text-transform:uppercase;
    margin:22px 0 4px;
    color:#fff;
    text-shadow:0 0 60px rgba(255,107,0,.45);
    white-space:nowrap;
}

.ev-teaser-chapter{
    font-family:var(--sg-font-display);
    font-size:clamp(1.1rem, 3.6vw, 2rem);
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--sg-gold);
    margin-bottom:20px;
}

.ev-teaser-meta{
    display:flex;
    justify-content:center;
    gap:8px 20px;
    flex-wrap:wrap;
    font-family:var(--sg-font-accent);
    font-size:.82rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--sg-muted);
    margin-bottom:22px;
}

.ev-teaser-copy{
    color:var(--sg-muted);
    line-height:1.8;
    margin-bottom:26px;
}

.ev-teaser-status{
    display:inline-block;
    padding:12px 24px;
    border:1px solid var(--sg-orange);
    border-radius:50px;
    font-family:var(--sg-font-accent);
    font-size:.76rem;
    font-weight:bold;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--sg-orange);
}

/*  auto-fit rather than auto-fill: with two events the pair spreads across
    the row instead of leaving an empty third column. Add a third and it
    becomes three columns on a wide screen on its own.                     */

/* ==========================================================================
   FRIDAY NIGHTS RESIDENCY

   The weekly night at the Grand View Hotel. The whole thing is one section
   in events.html with a `hidden` attribute on it, so taking it down is
   deleting one word rather than commenting out a block of markup.

   Nothing in here sets `display` on .ev-residency itself. An author display
   beats the browser's own [hidden] rule, and a section that ignored the
   attribute meant to hide it would be a trap for whoever came next. The
   guard below makes that safe for anything added later too.
   ========================================================================== */
.events-page [hidden]{ display:none !important; }

.ev-residency{
    --ev-res-line:#282828;
    border-top:1px solid var(--ev-res-line);
}

/* ---- the banner ---- */
/*  The gradient lives here, behind the video, not on the scrim above it.
    It is opaque, and on the scrim it covered the clip completely.      */
.ev-res-hero{
    position:relative;
    overflow:hidden;
    min-height:min(56vh, 420px);
    display:flex;
    align-items:center;
    background:linear-gradient(120deg, #2a1436, #0a0a0a 70%);
}

/*  The photo is a background rather than an <img>, so a file that is not
    there yet leaves the gradient showing instead of a broken image. Swap
    the url in --ev-art when you have one. */
/*  The reel behind the banner, cropped to whatever shape the banner ends up
    once the flex column has handed it its share of the screen.          */
.ev-res-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

/*  The scrim over it. Heavy on the left where the words are, clearer on the
    right so the footage still reads as footage. The gradient underneath is
    what shows for the moment before the clip starts, and for anyone whose
    browser will not play it.                                            */
.ev-res-hero-media{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(6,6,6,.95) 26%, rgba(6,6,6,.4) 78%);
}

.ev-res-hero-inner{
    position:relative;
    width:100%;
    max-width:var(--sg-max-width);
    margin:auto;
    padding:26px 6%;
}

.ev-res-kicker,
.ev-res-label{
    font-family:var(--sg-font-accent);
    font-size:.68rem;
    font-weight:bold;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--sg-gold);
    margin-bottom:8px;
}

.ev-res-name{
    font-family:var(--sg-font-display);
    font-size:clamp(1.9rem, 4.4vw, 3.1rem);
    line-height:.94;
    letter-spacing:-1.5px;
    text-transform:uppercase;
    margin-bottom:8px;
}

.ev-res-venue{
    font-family:var(--sg-font-accent);
    font-size:clamp(.72rem, 1.7vw, .92rem);
    letter-spacing:3px;
    text-transform:uppercase;
    color:#fff;
    margin-bottom:14px;
}

/*  The three facts. Sized to their content rather than stretched, so the
    long label and the short one still line their icons up.              */
.ev-res-facts{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px, max-content));
    gap:12px 30px;
    list-style:none;
    margin:0 0 18px;
}

.ev-res-facts li{
    display:flex;
    align-items:center;
    gap:11px;
}

.ev-res-facts svg{
    width:22px;
    height:22px;
    flex:0 0 auto;
    fill:currentColor;
    color:var(--sg-gold);
}

.ev-res-facts span{
    display:grid;
    font-family:var(--sg-font-accent);
    font-size:.66rem;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--sg-dim);
    line-height:1.7;
}

.ev-res-facts b{ color:#fff; font-weight:bold; }

.ev-res-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--sg-gold);
    color:#140800;
    border-color:var(--sg-gold);
}

.ev-res-btn:hover{ background:#ffc933; border-color:#ffc933; color:#140800; }

/*  The handwritten line in the corner. Decorative, aria-hidden in the
    markup, and it simply goes when there is no room for it.            */
.ev-res-script{
    position:absolute;
    right:5%;
    bottom:14%;
    margin:0;
    font-family:var(--sg-font-script);
    font-size:clamp(1.2rem, 2.4vw, 2rem);
    line-height:1.25;
    text-align:center;
    color:#fff;
    opacity:.9;
    pointer-events:none;
}

/* ---- line up and venue ---- */
.ev-res-body{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 300px;
    gap:26px;
    align-items:start;

    /*  width:100% is load bearing. This is a flex item in a column, and
        margin:auto on one of those centres it AND shrinks it to its own
        content - so the line up column sized itself to the widest word on
        a card instead of to the page. It was 219px across, with four
        44px cards in it, the moment the cards stopped carrying a line of
        text to hold them open. Same trap as the vendor progress bar.   */
    width:100%;
    max-width:var(--sg-max-width);
    margin:auto;
    padding:18px 6%;
}

/*  Four across, fixed rather than auto-fit. The line up shares its row with
    a 300px venue card, so auto-fit was measuring against a much narrower
    column than the page width suggests and dropping the fourth Friday onto
    a line of its own. Two up on a phone, where four would be unreadable. */
.ev-fri-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
    margin-bottom:12px;
}

@media (min-width:901px){
    .ev-fri-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

/*  THE PHOTOGRAPH IS THE CARD.

    It used to be a 94px strip along the top with the name in a panel
    underneath, which made a portrait photo of somebody's face into a
    letterbox of their shoulders. Now the picture fills the card and the
    name sits on it, over a gradient that exists only to keep the name
    readable.

    A card with no DJ named yet has no photo either, so it shows the
    purple gradient with the date on it - which still looks like a card
    rather than like something failed to load.                          */
.ev-fri{
    position:relative;
    aspect-ratio:3 / 4;
    background:
        var(--ev-art, none),
        linear-gradient(140deg, #33184a, #0d0d0d 72%);
    background-size:cover;
    background-position:center 18%;
    border:1px solid var(--ev-res-line);
    border-radius:12px;
    overflow:hidden;
    transition:border-color .25s, transform .25s;
}

.ev-fri:hover{ border-color:var(--sg-gold); transform:translateY(-3px); }

/*  Kept as an element rather than folded into the card, because the date
    tab is positioned against it and because the markup is built in
    js/events.js where one shape for every card is simpler to read.     */
.ev-fri-art{
    position:absolute;
    inset:0;
}

.ev-fri-date{
    position:absolute;
    top:10px;
    left:10px;

    padding:5px 9px;
    border-radius:5px;
    background:rgba(0,0,0,.72);
    border:1px solid var(--sg-gold);
    color:var(--sg-gold);

    font-family:var(--sg-font-accent);
    font-size:.6rem;
    font-weight:bold;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

/*  The name, on the picture. The gradient is on this rather than on a
    layer of its own, so it can never end up stacked over the words it is
    there to support.                                                    */
.ev-fri-body{
    position:absolute;
    inset:auto 0 0 0;
    padding:26px 14px 14px;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.92) 0%,
        rgba(0,0,0,.72) 45%,
        rgba(0,0,0,0) 100%
    );
}

.ev-fri-body h3{
    font-family:var(--sg-font-display);
    font-size:1rem;
    letter-spacing:-.4px;
    text-transform:uppercase;
    margin:0;
}

.ev-res-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding-bottom:4px;
    border-bottom:1px solid var(--sg-dim);

    color:#fff;
    font-family:var(--sg-font-accent);
    font-size:.66rem;
    font-weight:bold;
    letter-spacing:1.6px;
    text-transform:uppercase;
}

.ev-res-link:hover{ color:var(--sg-gold); border-bottom-color:var(--sg-gold); }

.ev-venue{
    background:#121212;
    border:1px solid var(--ev-res-line);
    border-radius:12px;
    padding:0 0 16px;
    overflow:hidden;
}

/*  The pub itself. The gradient stays underneath as the fallback, so
    this still looks like a card if the photograph ever goes missing. */
.ev-venue-art{
    height:120px;
    background:
        url('images/venues/grand-view-hotel.jpg'),
        linear-gradient(140deg, #33184a, #0d0d0d 72%);
    background-size:cover;
    background-position:center 62%;
    margin-bottom:12px;
}

.ev-venue h3{
    font-family:var(--sg-font-display);
    font-size:1.05rem;
    letter-spacing:-.4px;
    text-transform:uppercase;
    margin:0 16px 8px;
}

.ev-venue > p{
    margin:0 16px 12px;
    color:var(--sg-muted);
    font-size:.88rem;
    line-height:1.65;
}

/*  The way through to the pub's own site. Underlined rather than a
    button: the buttons on this page are ours - book a DJ, apply as a
    vendor - and this one goes somewhere else.                          */
.ev-venue-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin:0 16px 16px;

    color:var(--sg-gold);
    font-family:var(--sg-font-accent);
    font-size:.66rem;
    font-weight:bold;
    letter-spacing:1.3px;
    text-transform:uppercase;
    text-decoration:none;
    border-bottom:1px solid rgba(255,183,0,.4);
    padding-bottom:3px;
    transition:color .2s ease, border-color .2s ease;
}

.ev-venue-link:hover{
    color:#fff;
    border-color:#fff;
}

/* ---- book a DJ ---- */
.ev-res-cta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:24px;

    padding:18px 6%;
    background:#0b0b0b;
    border-top:1px solid var(--ev-res-line);
}

.ev-res-cta > div{ max-width:560px; }

.ev-res-cta h3{
    font-family:var(--sg-font-display);
    font-size:clamp(1.25rem, 2.6vw, 1.6rem);
    letter-spacing:-.8px;
    text-transform:uppercase;
    margin-bottom:6px;
}

.ev-res-cta-copy{
    margin:0;
    color:var(--sg-muted);
}

/*  ONE SCREEN

    The whole residency is meant to be taken in without scrolling, so on a
    desktop it is exactly the height of the viewport and no more.

    The line up and the button underneath it are fixed - they are the point
    of the section and squeezing them makes them worse. The banner takes
    whatever is left over, which is why it is the flex:1 and has a floor
    rather than a set height. On a short window the banner gets tight; the
    line up stays readable.

    dvh rather than vh so a phone's address bar does not push it over by
    exactly its own height. min-height stops it collapsing to nothing on a
    very short window - past that point the page scrolls, which is better
    than clipping the cards.                                             */
@media (min-width:901px){
    .ev-residency{
        display:flex;
        flex-direction:column;
        height:100vh;
        height:100dvh;
        min-height:600px;
    }

    .ev-res-hero{
        flex:1 1 auto;
        min-height:250px;
    }

    .ev-res-body,
    .ev-res-cta{ flex:0 0 auto; }
}

/*  SHORT WINDOWS

    A 1366x768 laptop leaves about 720px of viewport, and the section still
    has to be one screen there. Everything gives a little: the banner loses
    its paragraph (the facts underneath say the same thing in fewer lines),
    the pictures shrink, and the padding comes in.

    Height rather than width, because this is about how much room there is
    top to bottom - a wide short window has the same problem as a narrow
    one.                                                                 */
@media (min-width:901px) and (max-height:840px){
    .ev-res-hero-inner{ padding:16px 6%; }

    .ev-res-name{ font-size:clamp(1.7rem, 3.2vw, 2.3rem); }
    .ev-res-venue{ margin-bottom:10px; }
    .ev-res-facts{ margin-bottom:0; }

    .ev-res-body{ padding:12px 6%; }
    .ev-fri-body{ padding:22px 12px 12px; }

    .ev-venue-art{ height:92px; margin-bottom:10px; }
    .ev-venue > p{ margin-bottom:10px; }
    .ev-res-cta{ padding:12px 6%; }
}

/*  Tablet and down: the venue card drops under the line up rather than
    squeezing beside it. */
@media (max-width:900px){
    .ev-res-body{ grid-template-columns:1fr; }
    .ev-res-script{ display:none; }
}

/* ==========================================================================
   RESPONSIVE

   Pinned last - these override everything above them.
   ========================================================================== */
/* Tablet: the hero stops being side by side */
@media (max-width:900px){
    .ev-feature-inner{
        grid-template-columns:1fr;
        gap:28px;
        padding-bottom:56px;
    }

    /* artwork above the words, so the words are not pushed off the bottom */
    .ev-feature-art{
        order:-1;
    }

    .ev-pumpkin{
        width:140px;
    }
}

/* Phone */
@media (max-width:600px){
    /* one card per row, and never narrower than the screen */
    .ev-grid{
        grid-template-columns:1fr;
    }

    .ev-teaser-body{
        padding:calc(var(--sg-nav-height, 78px) + 26px) 18px 46px;
    }

    /* full width buttons are easier to hit with a thumb */
    .ev-actions .btn{
        width:100%;
        text-align:center;
    }

    /*  Four boxes across a phone leaves them too narrow for the numbers,
        so they go two by two.                                           */
    .ev-countdown-units li{
        flex:1 1 calc(50% - 5px);
        min-width:0;
    }

    .ev-pumpkin{
        width:110px;
    }

    .ev-feature-inner{
        padding-bottom:44px;
    }

    .ev-card-body{
        padding:18px 18px 20px;
    }
}

@media (prefers-reduced-motion:reduce){
    .ev-card,
    .ev-card-art,
    .ev-card-btn{
        transition:none;
    }

    .ev-card:hover{ transform:none; }
    .ev-card:hover .ev-card-art{ transform:none; }
}

/* ==========================================================================
   WHAT'S ON THIS WEEK

   The strip under Friday Nights. The cards themselves are not styled here
   - they are shared with /gig-guide and live in gig-card.css. This is the
   heading, the arrows and the window the cards page across.
   ========================================================================== */
.ev-weekend{
    --ev-wk-per:4;
    --ev-wk-gap:20px;
    margin-top:clamp(40px, 6vw, 72px);
}

.ev-weekend-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:24px;
}

.ev-weekend-head h2{
    text-align:left;
    margin:0;
}

/*  The dates this heading is actually talking about. Written out by
    js/events.js, because a heading that says "this week" and nothing else
    makes somebody work out which days that means.                        */
.ev-weekend-head .section-intro{
    margin:6px 0 0;
    text-align:left;
}

.ev-weekend-actions{
    display:flex;
    align-items:center;
    gap:14px;
    flex-shrink:0;
}

.ev-wk-arrows{
    display:flex;
    gap:10px;
}

.ev-wk-arrow{
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid var(--sg-border);
    background:var(--sg-panel);
    color:#fff;
    font-size:1.5rem;
    line-height:1;
    cursor:pointer;
    transition:background-color .2s ease, border-color .2s ease,
               color .2s ease, opacity .2s ease;
}

.ev-wk-arrow:hover:not(:disabled){
    background:var(--sg-orange);
    border-color:var(--sg-orange);
    color:#0a0a0a;
}

/*  Dimmed rather than hidden at the ends: a control that disappears makes
    the row jump, and it stops telling you the row has ends.              */
.ev-wk-arrow:disabled{
    opacity:.28;
    cursor:default;
}

.ev-wk-view{
    overflow:hidden;
    /*  The cards lift on hover, so the window needs room or the lift is
        clipped. Pulled back in underneath.                              */
    padding:8px 0;
    margin:-8px 0;
}

/*  The track is exactly one window wide however many cards hang out of
    it, which makes one page exactly -100%. The script sets a number and
    the browser does the arithmetic - no width is ever measured, so this
    is right before the first paint.                                     */
.ev-wk-track{
    --ev-wk-page:0;
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:calc(
        (100% - (var(--ev-wk-per) - 1) * var(--ev-wk-gap)) / var(--ev-wk-per)
    );
    gap:var(--ev-wk-gap);
    transform:translateX(calc(var(--ev-wk-page) * (-100% - var(--ev-wk-gap))));
    transition:transform .5s cubic-bezier(.22,.61,.36,1);
}

@media (max-width:1100px){
    .ev-weekend{ --ev-wk-per:3; }
}

@media (max-width:820px){
    .ev-weekend{ --ev-wk-per:2; }
}

@media (max-width:560px){
    .ev-weekend{ --ev-wk-per:1; --ev-wk-gap:16px; }
}

@media (prefers-reduced-motion:reduce){
    .ev-wk-track{ transition:none; }
}