/* ==========================================================================
   SOUNDZGOOD ENTERTAINMENT - page specific styles

   Loaded after style.css, so the fonts, colours and buttons all come from
   there. Everything below is scoped to #sg-ent-page, so nothing here can
   leak onto another page even where a class name is generic.

   WHAT IS IN HERE
     ACT TYPE BAR
     BANDS - RECOMMEND AND PRODUCTION
     FILTERS
     HERO
     PANEL
     SECTION HEAD
     TALENT CARDS
     MOBILE
     FOOTER TWEAK

   Sections run alphabetically. MOBILE is pinned last because it overrides
   everything above it.
   ========================================================================== */

#sg-ent-page{
    /*  One accent for the whole page, so a rebrand is a single line. */
    --ent-line:#242424;
    --ent-card:#141414;
}

/*  Several things on this page are hidden by setting the hidden attribute
    from the script, and several of them are also given a display by a rule
    below. Any author display beats the browser's own [hidden] rule, so
    without this they stay on screen - the act-type bar is display:grid and
    ignored being hidden outright.

    Third time this has caught us out on this site, after admin.css and
    vendor-signup.css. Keep it above everything that sets display.       */
#sg-ent-page [hidden]{ display:none !important; }

/*  Images are named by the markup as --ent-img and used as a background,
    never as an <img>. A path that turns out to be missing then leaves the
    gradient underneath showing rather than drawing a broken image icon. */
#sg-ent-page .sr-only{
    position:absolute;
    width:1px; height:1px;
    margin:-1px; padding:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}


/* --------------------------------------------------------------------------
   ACT TYPE BAR
   -------------------------------------------------------------------------- */
#sg-ent-page .ent-types{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:1fr;

    background:#0c0c0c;
    border-top:1px solid var(--ent-line);
    border-bottom:1px solid var(--ent-line);
    overflow-x:auto;
}

#sg-ent-page .ent-type{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:9px;

    min-width:120px;
    padding:20px 12px;

    background:none;
    border:0;
    border-right:1px solid var(--ent-line);
    border-top:2px solid transparent;
    border-bottom:2px solid transparent;

    color:var(--sg-dim);
    font-family:var(--sg-font-accent);
    font-size:.7rem;
    font-weight:bold;
    letter-spacing:1.6px;
    text-transform:uppercase;
    text-align:center;
    cursor:pointer;
    transition:color .2s, background .2s;
}

#sg-ent-page .ent-type:last-child{ border-right:0; }

#sg-ent-page .ent-type svg{
    width:26px;
    height:26px;
    fill:currentColor;
}

#sg-ent-page .ent-type:hover{
    color:#fff;
    background:rgba(255,255,255,.03);
}

/*  The chosen one is boxed rather than filled. An outline reads as "this
    one" without turning the strip into a row of solid buttons, and it
    survives on top of the dark bar where a tint alone is easy to miss.

    The box is drawn with an inset shadow rather than a border, so the cell
    does not change size when it is picked and the ones either side stay
    where they were.                                                     */
#sg-ent-page .ent-type.is-on{
    color:var(--sg-gold);
    background:rgba(255,183,0,.06);
    box-shadow:inset 0 0 0 1px var(--sg-gold);
    border-radius:4px;
}


/* --------------------------------------------------------------------------
   BANDS - RECOMMEND AND PRODUCTION
   -------------------------------------------------------------------------- */
#sg-ent-page .ent-band{
    position:relative;
    overflow:hidden;
    padding:56px 6%;
    border-top:1px solid var(--ent-line);
}

#sg-ent-page .ent-band-media{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(6,6,6,.96) 30%, rgba(6,6,6,.55) 100%),
        var(--ent-img, linear-gradient(120deg, #2a1201, #0a0a0a 70%));
    background-size:cover;
    background-position:center;
}

#sg-ent-page .ent-recommend .ent-band-media{
    --ent-img:url('images/entertainment/recommend.webp');
}

#sg-ent-page .ent-production .ent-band-media{
    --ent-img:url('images/entertainment/production.webp');
}

#sg-ent-page .ent-band-inner{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    max-width:var(--sg-max-width);
    margin:auto;
}

#sg-ent-page .ent-band-copy{
    flex:1 1 340px;
    max-width:520px;
}

#sg-ent-page .ent-band-copy h2{
    text-align:left;
    font-size:clamp(1.5rem, 3.4vw, 2.1rem);
    text-transform:uppercase;
    margin-bottom:12px;
}

#sg-ent-page .ent-band-copy p{
    color:var(--sg-muted);
    margin-bottom:22px;
    max-width:44ch;
}

/*  The six occasions. A strip of equal cells with hairlines between them,
    which is why they are a grid and not a flex row - flex would give the
    long labels more room than the short ones and the rules would wander. */
#sg-ent-page .ent-occasions{
    display:grid;
    grid-template-columns:repeat(6, minmax(96px, 1fr));
    list-style:none;
    margin:0;

    background:rgba(10,10,10,.72);
    border:1px solid var(--ent-line);
    border-radius:12px;
    overflow:hidden;
}

#sg-ent-page .ent-occasions li{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:9px;

    padding:20px 10px;
    border-right:1px solid var(--ent-line);

    color:var(--sg-muted);
    font-family:var(--sg-font-accent);
    font-size:.66rem;
    font-weight:bold;
    letter-spacing:1.4px;
    text-transform:uppercase;
    text-align:center;
}

#sg-ent-page .ent-occasions li:last-child{ border-right:0; }

#sg-ent-page .ent-occasions svg{
    width:24px;
    height:24px;
    fill:currentColor;
    color:var(--sg-gold);
}

#sg-ent-page .ent-pillars{
    list-style:none;
    margin:0;
    text-align:right;

    font-family:var(--sg-font-accent);
    font-size:.72rem;
    font-weight:bold;
    letter-spacing:2.4px;
    text-transform:uppercase;
    color:var(--sg-muted);
    line-height:2.1;
}


/* --------------------------------------------------------------------------
   FILTERS
   -------------------------------------------------------------------------- */
#sg-ent-page .ent-filters{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:28px;
}

#sg-ent-page .ent-select select,
#sg-ent-page .ent-search input{
    width:100%;
    padding:12px 14px;
    background:#101010;
    border:1px solid var(--ent-line);
    border-radius:10px;
    color:#fff;
    font-family:var(--sg-font);
    font-size:.9rem;
}

#sg-ent-page .ent-select{ flex:0 1 190px; }

#sg-ent-page .ent-select select{
    cursor:pointer;
    appearance:none;
    /* the chevron, drawn rather than loaded */
    background-image:
        linear-gradient(45deg, transparent 50%, var(--sg-dim) 50%),
        linear-gradient(135deg, var(--sg-dim) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% + 1px),
        calc(100% - 13px) calc(50% + 1px);
    background-size:5px 5px, 5px 5px;
    background-repeat:no-repeat;
    padding-right:36px;
}

#sg-ent-page .ent-search{
    position:relative;
    flex:1 1 260px;
    display:flex;
    align-items:center;
}

#sg-ent-page .ent-search svg{
    position:absolute;
    left:14px;
    width:17px;
    height:17px;
    color:var(--sg-dim);
    pointer-events:none;
}

#sg-ent-page .ent-search input{ padding-left:40px; }

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


/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
/*  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.      */
#sg-ent-page .ent-hero{
    position:relative;
    overflow:hidden;
    min-height:min(58vh, 460px);
    display:flex;
    align-items:center;
    background:linear-gradient(120deg, #3a1a02, #0a0a0a 72%);
}

/*  The reel sits behind everything, cropped to fill whatever shape the hero
    ends up. object-fit does the cropping, so the middle of the frame stays
    in the middle at any width.                                          */
#sg-ent-page .ent-hero-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.

    No image of its own any more - the video is the picture. It kept a
    gradient underneath so the hero still looks deliberate for the moment
    before the clip starts, and for anyone whose browser will not play it. */
#sg-ent-page .ent-hero-media{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(5,5,5,.94) 26%, rgba(5,5,5,.35) 78%);
}

#sg-ent-page .ent-hero-inner{
    position:relative;
    width:100%;
    max-width:var(--sg-max-width);
    margin:auto;
    padding:64px 6%;
}

#sg-ent-page .ent-hero h1{
    font-family:var(--sg-font-display);
    font-size:clamp(2.1rem, 6vw, 4.2rem);
    line-height:.98;
    letter-spacing:-1.5px;
    text-transform:uppercase;
    margin-bottom:22px;
}

#sg-ent-page .ent-hero-types{
    font-family:var(--sg-font-accent);
    font-size:clamp(.7rem, 1.6vw, .84rem);
    font-weight:bold;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#fff;
    margin-bottom:6px;
}

#sg-ent-page .ent-hero-kicker{
    font-family:var(--sg-font-accent);
    font-size:clamp(.66rem, 1.5vw, .78rem);
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--sg-muted);
    margin-bottom:28px;
}

/*  The handwritten line in the corner. Decorative, so it is aria-hidden in
    the markup and simply disappears when there is no room for it.      */
#sg-ent-page .ent-hero-script{
    position:absolute;
    right:5%;
    bottom:12%;
    margin:0;
    font-family:var(--sg-font-script);
    font-size:clamp(1.3rem, 2.6vw, 2.1rem);
    line-height:1.25;
    text-align:center;
    color:#fff;
    opacity:.92;
    pointer-events:none;
}

#sg-ent-page .ent-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
}

#sg-ent-page .ent-hero-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:18px 26px;
}

/*  The play control. A ring and two lines of text rather than a second
    solid button - there is one primary action on this hero and it is
    "browse the talent"; the reel is an aside, and two filled buttons side
    by side made them argue.                                             */
#sg-ent-page .ent-play{
    display:inline-flex;
    align-items:center;
    gap:13px;
    padding:0;
    background:none;
    border:0;
    color:#fff;
    text-align:left;
    cursor:pointer;
}

#sg-ent-page .ent-play-ring{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    flex:0 0 auto;
    border:1px solid rgba(255,255,255,.55);
    border-radius:50%;
    transition:border-color .2s, background .2s;
}

#sg-ent-page .ent-play-ring svg{ width:18px; height:18px; fill:currentColor; }

#sg-ent-page .ent-play-label{
    font-family:var(--sg-font-accent);
    font-size:.68rem;
    font-weight:bold;
    letter-spacing:1.6px;
    text-transform:uppercase;
    line-height:1.6;
}

#sg-ent-page .ent-play:hover{ color:var(--sg-orange); }

#sg-ent-page .ent-play:hover .ent-play-ring{
    border-color:var(--sg-orange);
    background:rgba(255,107,0,.12);
}

/* ---- the reel ---- */
#sg-ent-page .ent-video{
    width:min(900px, 94vw);
    background:#000;
}

#sg-ent-page .ent-video video{
    display:block;
    width:100%;
    max-height:80vh;
}


/* --------------------------------------------------------------------------
   PANEL
   -------------------------------------------------------------------------- */
#sg-ent-page .ent-panel{
    width:min(560px, 92vw);
    padding:0;
    border:1px solid var(--ent-line);
    border-radius:16px;
    background:var(--ent-card);
    color:#fff;
    overflow:hidden;
}

#sg-ent-page .ent-panel::backdrop{
    background:rgba(0,0,0,.72);
}

#sg-ent-page .ent-panel-close{
    position:absolute;
    top:12px;
    right:12px;
    z-index:2;

    width:34px;
    height:34px;
    display:grid;
    place-items:center;

    background:rgba(0,0,0,.55);
    border:1px solid var(--ent-line);
    border-radius:50%;
    color:#fff;
    font-size:1.3rem;
    line-height:1;
    cursor:pointer;
}

#sg-ent-page .ent-panel-close:hover{ border-color:var(--sg-orange); color:var(--sg-orange); }

/*  Wider and shallower than the card, so it crops harder still - 12% keeps
    the face in a band under a third of the photograph's height. */
#sg-ent-page .ent-panel-media{
    height:190px;
    background:
        linear-gradient(to top, rgba(10,10,10,.9), rgba(10,10,10,.3)),
        var(--ent-img, linear-gradient(140deg, #2a1201, #0a0a0a 70%));
    background-size:cover;
    background-position:center 12%;
    display:grid;
    place-items:center;
}

#sg-ent-page .ent-panel-body{ padding:22px; }

#sg-ent-page .ent-panel-body h3{
    font-family:var(--sg-font-display);
    font-size:1.5rem;
    text-transform:uppercase;
    letter-spacing:-.5px;
    margin:10px 0 18px;
}

#sg-ent-page .ent-panel-body h4{
    font-family:var(--sg-font-accent);
    font-size:.68rem;
    font-weight:bold;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:var(--sg-gold);
    margin-bottom:5px;
}

#sg-ent-page .ent-panel-body p{
    color:var(--sg-muted);
    margin-bottom:16px;
}


/* --------------------------------------------------------------------------
   SECTION HEAD
   -------------------------------------------------------------------------- */
#sg-ent-page .ent-section{
    max-width:var(--sg-max-width);
    margin:auto;
    padding:56px 6%;
}

#sg-ent-page .ent-head{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px 24px;
    margin-bottom:26px;
}

#sg-ent-page .ent-head h2{
    text-align:left;
    margin:0;
    font-size:clamp(1.7rem, 4vw, 2.6rem);
    text-transform:uppercase;
}

#sg-ent-page .ent-head-rule{
    flex:0 1 90px;
    height:1px;
    background:var(--sg-dim);
    opacity:.5;
}

#sg-ent-page .ent-head-blurb{
    flex:1 1 320px;
    margin:0;
    color:var(--sg-muted);
    font-family:var(--sg-font-accent);
    font-size:.72rem;
    letter-spacing:1.2px;
    text-transform:uppercase;
    line-height:1.9;
}

#sg-ent-page .ent-pager{
    display:flex;
    gap:8px;
    margin-left:auto;
}

#sg-ent-page .ent-arrow{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;

    background:none;
    border:1px solid var(--ent-line);
    border-radius:50%;
    color:#fff;
    font-size:1.2rem;
    line-height:1;
    cursor:pointer;
    transition:border-color .2s, color .2s, opacity .2s;
}

#sg-ent-page .ent-arrow:hover:not(:disabled){
    border-color:var(--sg-orange);
    color:var(--sg-orange);
}

#sg-ent-page .ent-arrow:disabled{
    opacity:.35;
    cursor:default;
}

#sg-ent-page .ent-count{
    margin-top:20px;
    color:var(--sg-dim);
    font-size:.82rem;
}

#sg-ent-page .ent-empty{
    padding:38px 20px;
    text-align:center;
    color:var(--sg-muted);
    background:#101010;
    border:1px solid var(--ent-line);
    border-radius:14px;
}

#sg-ent-page .ent-empty a{ color:var(--sg-orange); }


/* --------------------------------------------------------------------------
   TALENT CARDS
   -------------------------------------------------------------------------- */
/*  200px rather than 230: the reference sits four cards across a desktop,
    and at 230 the fourth dropped to a second row on anything under about
    1200px wide.                                                        */
#sg-ent-page .ent-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:18px;
}

/*  THE PHOTOGRAPH IS THE CARD

    It used to sit in a strip across the top with the name and the button in
    a solid panel underneath. Now it fills the whole thing and the words sit
    over it, which is what makes the card about the artist rather than about
    the box the artist is in.

    THE CROP
    These are portraits and this is a tall box, but still a crop - centred,
    MAXZI's card showed his chest and the decks with his face cut off
    above the frame. 18% from the top is where a head is in a portrait. Set
    once here, because it is true of every photograph of a person standing
    up.                                                                   */
#sg-ent-page .ent-card{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    min-height:310px;

    background:
        var(--ent-img, none),
        linear-gradient(140deg, #2b1a3d, #0d0d0d 72%);
    background-size:cover;
    background-position:center 18%;

    border:1px solid var(--ent-line);
    border-radius:14px;
    overflow:hidden;
    transition:border-color .25s, transform .25s;
}

#sg-ent-page .ent-card:hover{
    border-color:#3a3a3a;
    transform:translateY(-3px);
}

/*  Covers the whole card, under the words, so clicking anywhere on the
    photograph opens the artist panel. It carries no picture of its own any
    more - it is a hit area, and the holder of the stand-in glyph.

    The padding pushes the glyph up out of the area the words cover, so it
    is centred in the part of the card you can actually see.             */
#sg-ent-page .ent-card-media{
    position:absolute;
    inset:0;
    z-index:1;

    display:grid;
    place-items:center;
    padding-bottom:96px;

    width:100%;
    background:none;
    border:0;
    cursor:pointer;
    font:inherit;
    color:inherit;
    text-align:inherit;
}

/*  The stand-in for a photograph that is not there yet, and only that.

    It used to stay on at low opacity once a photo loaded, on the theory
    that a dark picture still wanted something in the middle of it. In
    practice it was a headphone watermark sitting over somebody's face. A
    card with a photograph has no need of a symbol for one.             */
#sg-ent-page .ent-card-glyph{
    width:46px;
    height:46px;
    fill:#fff;
    opacity:.16;
}

#sg-ent-page .ent-card.has-photo .ent-card-glyph{ display:none; }

/*  Outlined rather than filled. A solid orange block sat on top of the
    photograph and was the first thing the eye landed on - louder than the
    artist, which is the wrong way round on a card whose job is to sell the
    artist.

    It still needs to be readable over whatever is behind it, so there is a
    dark wash under the outline rather than nothing at all. backdrop-filter
    blurs what shows through where the browser supports it; where it does
    not, the wash on its own is enough.                                   */
#sg-ent-page .ent-badge{
    align-self:flex-start;
    margin-bottom:10px;
    padding:5px 10px;
    border-radius:6px;
    background:rgba(10,10,10,.45);
    border:1px solid var(--sg-orange);
    color:var(--sg-orange);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

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

/*  Over the photograph rather than under it. The gradient fades up out of
    the picture so the words have something solid behind them without the
    card turning back into a panel with a lid on it.

    Above the hit area in the stacking order, so the enquiry link is
    clickable - the picture button covers the whole card underneath.     */
#sg-ent-page .ent-card-body{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    padding:64px 16px 16px;

    background:linear-gradient(
        to top,
        rgba(8,8,8,.95) 28%,
        rgba(8,8,8,.78) 58%,
        rgba(8,8,8,0) 100%
    );
}

#sg-ent-page .ent-card-body h3{
    font-family:var(--sg-font-display);
    font-size:1.1rem;
    letter-spacing:-.4px;
    text-transform:uppercase;
    margin-bottom:8px;
}

#sg-ent-page .ent-card-genres{
    margin:0 0 12px;
    color:var(--sg-orange);
    font-family:var(--sg-font-accent);
    font-size:.68rem;
    font-weight:bold;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

#sg-ent-page .ent-card-genres i{ font-style:normal; opacity:.6; }

#sg-ent-page .ent-card-events{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px 8px;
    margin:0 0 16px;
    color:var(--sg-muted);
    font-size:.8rem;
}

#sg-ent-page .ent-card-events svg{
    width:20px;
    height:20px;
    flex:0 0 auto;
    fill:currentColor;
    opacity:.75;
}

#sg-ent-page .ent-card-media:focus-visible{
    outline:2px solid var(--sg-orange);
    outline-offset:-3px;
}

/*  A link now rather than a button, so it needs the link underline taken
    off and the block shape put back on.                                */
#sg-ent-page .ent-view{
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    margin-top:auto;
    padding:11px 14px;

    background:#1c1c1c;
    border:1px solid var(--ent-line);
    border-radius:9px;
    color:#fff;

    font-family:var(--sg-font-accent);
    font-size:.68rem;
    font-weight:bold;
    letter-spacing:1.4px;
    text-transform:uppercase;
    cursor:pointer;
    transition:background .2s, border-color .2s, color .2s;
}

#sg-ent-page .ent-view:hover{
    background:var(--sg-orange);
    border-color:var(--sg-orange);
    color:#140800;
}


/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */
@media (max-width:900px){
    /*  The bar stops trying to fit seven cells across and scrolls sideways
        instead, which is readable where seven squeezed cells are not. */
    #sg-ent-page .ent-types{
        grid-auto-columns:minmax(108px, auto);
        justify-content:start;
    }

    #sg-ent-page .ent-occasions{
        grid-template-columns:repeat(3, 1fr);
    }

    /*  With three per row the right-hand rule of the third cell sits on the
        edge of the box and reads as a stray line. */
    #sg-ent-page .ent-occasions li:nth-child(3n){ border-right:0; }

    #sg-ent-page .ent-pillars{ text-align:left; }
}

@media (max-width:768px){
    #sg-ent-page .ent-hero-script{ display:none; }

    #sg-ent-page .ent-hero-inner,
    #sg-ent-page .ent-section,
    #sg-ent-page .ent-band{ padding-left:5%; padding-right:5%; }

    #sg-ent-page .ent-section,
    #sg-ent-page .ent-band{ padding-top:40px; padding-bottom:40px; }

    #sg-ent-page .ent-grid{
        grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
        gap:12px;
    }

    #sg-ent-page .ent-card{ min-height:250px; }
    #sg-ent-page .ent-card-media{ padding-bottom:80px; }

    #sg-ent-page .ent-select{ flex:1 1 140px; }

    #sg-ent-page .ent-pager{ margin-left:0; }
}

@media (prefers-reduced-motion:reduce){
    #sg-ent-page .ent-card:hover{ transform:none; }
}