/* ==========================================================================
   ENTERTAINMENT - entertainment.html, the talent roster (js/site/entertainment.js
   builds the cards). On top of site.css: the banner, section head, slider
   arrows, inputs and buttons come from there. Everything is .ent-

   HERO       the type lines and play button in the banner
   TYPES      the act type bar
   BANDS      recommend and production bands
   FILTERS    search and selects
   HEAD       section heading rule and blurb, count, empty state
   CARDS      the talent cards
   PANEL      the artist pop-up
   Each section carries its own phone rules.
   ========================================================================== */

/* ==========================================================================
   HERO
   ========================================================================== */
.ent-hero {
    --banner-tint: var(--sg-poster-ink);
}

.ent-hero-types {
    font-family: var(--sg-font-accent);
    font-size: clamp(0.7rem, 1.6vw, 0.84rem);
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sg-white);
    margin: 22px 0 6px;
}

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

/* Play the reel: a ring and text, so "browse the talent" stays the main button */
.ent-play {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--sg-white);
    text-align: left;
    cursor: pointer;
}

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

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

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

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

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

/* The reel pop-up */
.ent-video {
    width: min(900px, 94vw);
    background: var(--sg-night);
}

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

/* ==========================================================================
   TYPES
   ========================================================================== */
.ent-types {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: var(--sg-night);
    border-top: 1px solid var(--sg-border);
    border-bottom: 1px solid var(--sg-border);
    overflow-x: auto;
}

.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(--sg-border);
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    color: var(--sg-dim);
    font-family: var(--sg-font-accent);
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition:
        color 0.2s,
        background 0.2s;
}

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

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

.ent-type:hover {
    color: var(--sg-white);
    background: rgba(255, 255, 255, 0.03);
}

/* The chosen one: an inset outline, so the cell keeps its size */
.ent-type.is-on {
    color: var(--sg-gold);
    background: rgba(255, 183, 0, 0.06);
    box-shadow: inset 0 0 0 1px var(--sg-gold);
    border-radius: 4px;
}

@media (max-width: 900px) {
    /* the type bar scrolls sideways instead of squeezing seven cells */
    .ent-types {
        grid-auto-columns: minmax(108px, auto);
        justify-content: start;
    }
}

/* ==========================================================================
   BANDS - photo behind (as a background, so a missing file shows the gradient)
   ========================================================================== */
.ent-band {
    position: relative;
    overflow: hidden;
    padding: 56px 6%;
    border-top: 1px solid var(--sg-border);
}

.ent-band-media {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(6, 6, 6, 0.96) 30%, rgba(6, 6, 6, 0.55) 100%),
        var(--ent-img, linear-gradient(120deg, var(--sg-poster-ink), var(--sg-night) 70%));
    background-size: cover;
    background-position: center;
}

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

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

.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;
}

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

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

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

/* The six occasions, every cell the same width */
.ent-occasions {
    display: grid;
    grid-template-columns: repeat(6, minmax(96px, 1fr));
    list-style: none;
    margin: 0;
    background: rgba(10, 10, 10, 0.72);
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    overflow: hidden;
}

.ent-occasions li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 20px 10px;
    border-right: 1px solid var(--sg-border);
    color: var(--sg-muted);
    font-family: var(--sg-font-accent);
    font-size: 0.66rem;
    font-weight: bold;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-align: center;
}

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

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

.ent-pillars {
    list-style: none;
    margin: 0;
    text-align: right;
    font-family: var(--sg-font-accent);
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--sg-muted);
    line-height: 2.1;
}

@media (max-width: 900px) {
    .ent-occasions {
        grid-template-columns: repeat(3, 1fr);
    }

    .ent-occasions li:nth-child(3n) {
        border-right: 0;
    }

    .ent-pillars {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .ent-band {
        padding: 40px 5%;
    }
}

/* ==========================================================================
   FILTERS - inputs from site.css .form; the select gets a drawn chevron
   ========================================================================== */
.ent-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

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

.ent-select select {
    cursor: pointer;
    appearance: none;
    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;
}

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

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

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

@media (max-width: 768px) {
    .ent-select {
        flex: 1 1 140px;
    }
}

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

.ent-head {
    align-items: center;
}

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

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

.ent-pager {
    margin-left: auto;
}

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

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

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

@media (max-width: 768px) {
    .ent-section {
        padding: 40px 5%;
    }

    .ent-pager {
        margin-left: 0;
    }
}

/* ==========================================================================
   CARDS - the photo is the card, the words sit over it
   ========================================================================== */
.ent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* four across on a computer */
    gap: 18px;
}

.ent-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 310px;
    background: var(--ent-img, none), linear-gradient(140deg, var(--sg-purple-dark), var(--sg-night) 72%);
    background-size: cover;
    background-position: center 18%; /* keeps the head in frame */
    border: 1px solid var(--sg-border);
    border-radius: 14px;
    overflow: hidden;
    transition:
        border-color 0.25s,
        transform 0.25s;
}

.ent-card:hover {
    border-color: var(--sg-ink-soft);
    transform: translateY(-3px);
}

/* Covers the card under the words: clicking the photo opens the panel */
.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;
}

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

/* Stand-in glyph while there is no photo */
.ent-card-glyph {
    width: 46px;
    height: 46px;
    fill: var(--sg-white);
    opacity: 0.16;
}

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

/* Outlined badge with a dark wash, readable over any photo */
.ent-badge {
    align-self: flex-start;
    margin-bottom: 10px;
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(10, 10, 10, 0.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: 0.62rem;
    font-weight: bold;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* The words, over a gradient, above the hit area so the link clicks */
.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, 0.95) 28%, rgba(8, 8, 8, 0.78) 58%, rgba(8, 8, 8, 0) 100%);
}

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

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

.ent-card-genres i {
    font-style: normal;
    opacity: 0.6;
}

/* Home town */
.ent-card-loc {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 4px 0 0;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--sg-paper-line);
    opacity: 0.85;
}

.ent-card-loc svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: var(--sg-orange);
    stroke-width: 2;
    flex: none;
}

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

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

/* The enquiry button fills the bottom of the card */
.ent-view {
    width: 100%;
    margin-top: auto;
}

@media (max-width: 768px) {
    .ent-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }

    .ent-card {
        min-height: 250px;
    }

    .ent-card-media {
        padding-bottom: 80px;
    }
}

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

/* ==========================================================================
   PANEL - the artist pop-up
   ========================================================================== */
.ent-panel {
    width: min(560px, 92vw);
    padding: 0;
    border: 1px solid var(--sg-border);
    border-radius: 16px;
    background: var(--sg-panel);
    color: var(--sg-white);
    overflow: hidden;
}

.ent-panel::backdrop {
    background: rgba(0, 0, 0, 0.72);
}

.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, 0.55);
    border: 1px solid var(--sg-border);
    border-radius: 50%;
    color: var(--sg-white);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

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

.ent-panel-media {
    height: 190px;
    background:
        linear-gradient(to top, rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0.3)),
        var(--ent-img, linear-gradient(140deg, var(--sg-poster-ink), var(--sg-night) 70%));
    background-size: cover;
    background-position: center 12%; /* keeps the face in view */
    display: grid;
    place-items: center;
}

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

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

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

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