/* ==========================================================================
   THE GIG GUIDE

   Everything here is scoped to #sg-gig-guide, so none of it can reach
   another page.
   ========================================================================== */

/*  [hidden] loses to any author display rule, and this page sets display
    on the things it hides. Without this the empty state is always on.   */
#sg-gig-guide [hidden]{ display:none !important; }

#sg-gig-guide{
    background:#0a0a0a;
}

#sg-gig-guide .gg-sr-only{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
}

/* ==========================================================================
   HERO
   ========================================================================== */
#sg-gig-guide .gg-hero{
    position:relative;
    display:flex;
    align-items:flex-end;
    min-height:min(62vh, 560px);
    padding:calc(var(--sg-nav-height, 80px) + 40px) 20px 44px;
    overflow:hidden;
    /*  The fallback sits behind the video, never over it. Stack it on top
        and the clip plays underneath an opaque gradient, which is exactly
        how the other heroes on this site broke.                         */
    background:linear-gradient(120deg, #2a1403 0%, #0a0a0a 64%);
}

#sg-gig-guide .gg-hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
}

#sg-gig-guide .gg-hero-scrim{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 52%, rgba(0,0,0,.7) 100%),
        linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.2) 40%, #0a0a0a 100%);
}

#sg-gig-guide .gg-hero-inner{
    position:relative;
    z-index:2;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:30px;
    width:100%;
    max-width:var(--sg-max-width);
    margin:auto;
}

#sg-gig-guide .gg-eyebrow{
    color:var(--sg-gold);
    font-family:var(--sg-font-accent);
    font-size:.72rem;
    font-weight:bold;
    letter-spacing:.28em;
    text-transform:uppercase;
    margin-bottom:12px;
}

#sg-gig-guide .gg-title{
    font-family:var(--sg-font-display);
    font-size:clamp(2.6rem, 7vw, 5rem);
    line-height:.9;
    letter-spacing:-2px;
    text-transform:uppercase;
    margin:0;
}

#sg-gig-guide .gg-title span{ color:var(--sg-gold); }

#sg-gig-guide .gg-lead{
    margin-top:18px;
    color:#ddd;
    line-height:1.65;
}

/*  The handwritten line. Decoration, and marked aria-hidden in the markup
    - read aloud it is four nouns in the middle of the headline.         */
#sg-gig-guide .gg-script{
    font-family:var(--sg-font-script);
    font-size:clamp(1.1rem, 2vw, 1.6rem);
    line-height:1.15;
    text-align:right;
    color:#fff;
    flex-shrink:0;
}

#sg-gig-guide .gg-script::after{
    content:"";
    display:block;
    width:54px;
    height:3px;
    margin:10px 0 0 auto;
    border-radius:2px;
    background:var(--sg-gold);
}

/* ==========================================================================
   FILTERS
   ========================================================================== */
#sg-gig-guide .gg-filters{
    border-bottom:1px solid var(--sg-border);
    background:#0c0c0c;
}

#sg-gig-guide .gg-filters-inner{
    max-width:var(--sg-max-width);
    margin:auto;
    padding:22px 20px 20px;
}

#sg-gig-guide .gg-filter-row{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

#sg-gig-guide .gg-search{
    flex:1 1 320px;
    min-width:0;
}

#sg-gig-guide .gg-search input,
#sg-gig-guide .gg-select select{
    width:100%;
    padding:13px 16px;
    border:1px solid var(--sg-border);
    border-radius:10px;
    background:var(--sg-panel);
    color:#fff;
    font-family:var(--sg-font);
    font-size:.92rem;
}

#sg-gig-guide .gg-select{ flex:0 1 210px; }

#sg-gig-guide .gg-search input:focus,
#sg-gig-guide .gg-select select:focus{
    outline:none;
    border-color:var(--sg-orange);
}

#sg-gig-guide .gg-pills,
#sg-gig-guide .gg-places{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-top:16px;
}

#sg-gig-guide .gg-pill{
    padding:9px 18px;
    border:1px solid var(--sg-border);
    border-radius:999px;
    background:var(--sg-panel);
    color:#ccc;
    font-family:var(--sg-font);
    font-size:.76rem;
    font-weight:bold;
    letter-spacing:.06em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}

#sg-gig-guide .gg-pill:hover{ border-color:#444; color:#fff; }

#sg-gig-guide .gg-pill.is-on{
    background:var(--sg-gold);
    border-color:var(--sg-gold);
    color:#0a0a0a;
}

#sg-gig-guide .gg-places-label{
    color:var(--sg-dim);
    font-family:var(--sg-font-accent);
    font-size:.7rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    margin-right:4px;
}

/*  The locations read as a line of links rather than a second row of
    pills - two identical pill rows stacked is a wall of lozenges.      */
#sg-gig-guide .gg-place{
    padding:4px 2px;
    border:0;
    background:none;
    color:var(--sg-dim);
    font-family:var(--sg-font-accent);
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    cursor:pointer;
    transition:color .2s ease;
}

#sg-gig-guide .gg-place:hover{ color:#fff; }
#sg-gig-guide .gg-place.is-on{ color:var(--sg-gold); font-weight:bold; }

/* ==========================================================================
   A BAND OF CARDS
   ========================================================================== */
#sg-gig-guide .gg-band{
    padding:clamp(44px, 6vw, 72px) 0;
}

#sg-gig-guide .gg-band.is-alt{
    background:#0d0d0d;
    border-top:1px solid var(--sg-border);
    border-bottom:1px solid var(--sg-border);
}

#sg-gig-guide .gg-band-inner{
    max-width:var(--sg-max-width);
    margin:auto;
    padding:0 20px;
}

#sg-gig-guide .gg-band-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:26px;
}

#sg-gig-guide .gg-band-head h2{
    font-family:var(--sg-font-display);
    font-size:clamp(1.7rem, 3.4vw, 2.4rem);
    letter-spacing:-1px;
    text-transform:uppercase;
    text-align:left;
    margin:0;
}

#sg-gig-guide .gg-band-sub{
    margin-top:6px;
    color:var(--sg-dim);
    font-size:.92rem;
}

#sg-gig-guide .gg-arrows{ display:flex; gap:10px; }

#sg-gig-guide .gg-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;
}

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

#sg-gig-guide .gg-arrow:disabled{ opacity:.28; cursor:default; }

/*  The weekend row is a plain grid that wraps - however many are on, they
    all show. The highlights row below pages instead.                    */
#sg-gig-guide .gg-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
    gap:20px;
}

#sg-gig-guide .gg-view{
    --gg-per:4;
    overflow:hidden;
    padding:8px 0;
    margin:-8px 0;
}

#sg-gig-guide .gg-track{
    --gg-page:0;
    --gg-gap:20px;
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - (var(--gg-per) - 1) * var(--gg-gap)) / var(--gg-per));
    gap:var(--gg-gap);
    transform:translateX(calc(var(--gg-page) * (-100% - var(--gg-gap))));
    transition:transform .5s cubic-bezier(.22,.61,.36,1);
}

#sg-gig-guide .gg-empty{
    padding:26px 0;
    color:var(--sg-dim);
    font-size:.95rem;
}

/* ==========================================================================
   CLOSING BAND
   ========================================================================== */
/*  The trailer stage behind it - the same photograph the services page
    uses for that slide, so it is already in the browser's cache for
    anybody who has been there, and there is no second copy of it in the
    repository.

    Dark on the left where the words are and open on the right where the
    stage is, rather than one flat wash over the whole thing: the point of
    putting a photograph here is that you can see it.

    The gradients are listed before the image on purpose. A background
    stacks first-on-top, so the image has to come last or it covers the
    scrim and the type goes unreadable over it - which is exactly how the
    heroes on this site broke, twice.                                    */
#sg-gig-guide .gg-cta{
    position:relative;
    padding:clamp(56px, 8vw, 96px) 20px;
    border-top:1px solid var(--sg-border);
    background:
        /*  Only as dark as the words need. Heavy behind the headline on
            the left, gone by the middle so the stage is a photograph
            rather than a shape, and a touch back at the right edge to
            stop the balloons fizzing against the page.                 */
        linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.58) 40%,
                               rgba(0,0,0,.18) 70%, rgba(0,0,0,.3) 100%),
        /*  75% down, not centred. The photograph is 1536x1024 and the
            SoundzGood 2.0 banner sits about 64% of the way down it, so
            centring the picture in a band this wide and shallow cuts the
            banner off along the bottom edge. At 75% the band lands in the
            middle of the strip: the visible slice works out at roughly
            400-890 of the original's 1024, and the banner occupies
            590-720 of that.                                             */
        url('images/services/trailer-stage.webp') 50% 75% / cover no-repeat,
        linear-gradient(120deg, #2a1403 0%, #0a0a0a 64%);
}

#sg-gig-guide .gg-cta-inner{
    max-width:var(--sg-max-width);
    margin:auto;
}

#sg-gig-guide .gg-cta h2{
    font-family:var(--sg-font-display);
    font-size:clamp(2rem, 5vw, 3.4rem);
    line-height:.94;
    letter-spacing:-1.5px;
    text-transform:uppercase;
    text-align:left;
    margin:0;
}

#sg-gig-guide .gg-cta h2 span{ color:var(--sg-gold); }

#sg-gig-guide .gg-cta p{
    margin:18px 0 24px;
    color:#ddd;
    line-height:1.65;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
    #sg-gig-guide .gg-view{ --gg-per:3; }
}

@media (max-width:900px){
    /*  The handwriting is the first thing to go: beside a headline this
        size on a narrow screen it is two columns fighting for the width. */
    #sg-gig-guide .gg-script{ display:none; }
}

@media (max-width:820px){
    #sg-gig-guide .gg-view{ --gg-per:2; }
    #sg-gig-guide .gg-select{ flex:1 1 160px; }
}

@media (max-width:560px){
    #sg-gig-guide .gg-view{ --gg-per:1; }

    #sg-gig-guide .gg-grid{
        grid-template-columns:1fr;
    }

    #sg-gig-guide .gg-places{
        /*  Seven locations will not fit, so they scroll sideways rather
            than stacking into a paragraph of links.                    */
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-bottom:6px;
    }

    #sg-gig-guide .gg-place{ white-space:nowrap; }
}

@media (prefers-reduced-motion:reduce){
    #sg-gig-guide .gg-track{ transition:none; }
}