/* ============================================================================
   GT GoodJob5 Layout — static rules (the parts that can live in pure CSS).
   The dynamic parts (moving the Biography node, building the MERCH list, and
   the two measured sizes) are handled by js/goodjob5.js.
   Checkpoint: "Goodjob5 — Releases + Artists locked" (2026-07-06).
   ============================================================================ */

/* ---- Anti-flash: hide the artist layout until js/goodjob5.js has moved the
   Biography section into the left column, so visitors never see the bio
   "jump" from the centre column. js/goodjob5.js reveals it the instant that
   move is done. As a safety net, the animation auto-reveals after 1.2s even
   if the script fails to run, so the page can never stay blank. ---- */
main {
    visibility: hidden;
    animation: gtGoodjob5Reveal 0s linear 1.2s forwards;
}
@keyframes gtGoodjob5Reveal {
    to { visibility: visible; }
}

/* ---- Type scale: 13px body, 15px headings across the artist columns ---- */
main > div > section,
main > div > section *,
main article.artist-bio > section,
main article.artist-bio > section * {
    font-size: 13px !important;
    line-height: 1.5 !important;
}
main > div > section > h1,
main > div > section > h2,
main > div > section > h3,
main > div > section > h4,
main article.artist-bio > section > h1,
main article.artist-bio > section > h2,
main article.artist-bio > section > h3,
main article.artist-bio > section > h4 {
    font-size: 15px !important;
}

/* ---- Hide the "Biography" heading once the bio is moved under the photo ---- */
main > div > section.gt-bio > h1,
main > div > section.gt-bio > h2,
main > div > section.gt-bio > h3,
main > div > section.gt-bio > h4 {
    display: none !important;
}

/* ---- Bio anchor: when the mobile "BIO" button jumps to the bio, leave a
   small gap above it so it doesn't sit flush against the header. ---- */
section.gt-bio {
    scroll-margin-top: 24px !important;
}

/* ---- Mobile only: extra breathing room above the EXPLORE block so it isn't
   crowded under the bio when the columns stack vertically. On mobile EXPLORE is
   the first section of the CENTRE column (main article.artist-bio), NOT the left
   div, so the selector must reach it there. Both selectors carry two classes so
   they out-specify the generic `margin:0 !important` reset above. The gap is
   16px to match the site's unified vertical rhythm (every other stacked section
   sits 16px below the previous one), so bio -> EXPLORE reads consistently. ---- */
@media (max-width: 767px) {
    main article.artist-bio > section.gt-explore,
    main > div > section.gt-explore {
        margin-top: 16px !important;
    }
}

/* ---- Merch list: strip any inherited bullet/border decorations ---- */
#gt-merch-sec ul li::after,
#gt-merch-sec ul li::before {
    content: none !important;
    border: 0 !important;
    display: none !important;
}

/* ---- Column gap + kill stray section side padding ---- */
@media (min-width: 768px) {
    main { column-gap: 16px !important; }
}
main > div > section,
main article.artist-bio > section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ---- Square artist photo; hide the slick dot nav on DESKTOP only ----
   On mobile the grey gallery switcher (.slick-nav) must stay visible so
   visitors can flip between multiple artist images. ---- */
.artist-images {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    overflow: hidden !important;
}
@media (min-width: 768px) {
    .slick-nav { display: none !important; }
}
.artist-images .slick-list,
.artist-images .slick-track,
.artist-images .slick-slide,
.artist-images .slick-slide > div {
    height: 100% !important;
}
.artist-images img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
}

/* ---- Media panel (MUSIC / VIDEO / MERCH) artwork: never stretch ----
   The parent theme sets object-fit:fill on these thumbnails, which distorts
   them on wide screens where the media box is no longer perfectly square.
   Switching to object-fit:cover keeps every thumbnail at its true proportions
   at ANY screen width — square covers stay square, video stills keep their
   shape — so nothing can ever stretch. (We deliberately do NOT force an
   aspect-ratio here, so landscape video stills are not cropped to squares.) */
#artist-content img {
    object-fit: cover !important;
}

/* ---- Uniform 16px vertical rhythm + top-align the three columns ---- */
@media (min-width: 768px) {
    main > div,
    main article.artist-bio { align-self: start !important; }
}
main > div > section,
main article.artist-bio > section {
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
}
main > div > section:last-child,
main article.artist-bio > section:last-child {
    margin-bottom: 0 !important;
}
main > div > .artist-images { margin-bottom: 16px !important; }
main > div > section > h1,
main > div > section > h2,
main > div > section > h3,
main > div > section > h4,
main article.artist-bio > section > h1,
main article.artist-bio > section > h2,
main article.artist-bio > section > h3,
main article.artist-bio > section > h4 {
    padding-bottom: 5px !important;
    margin: 0 !important;
}

/* ---- Center column: first section drops 16px to sit on the 194px line ---- */
@media (min-width: 768px) {
    main article.artist-bio > section:first-child { margin-top: 16px !important; }
}

/* ---- Right column tabs: MUSIC / VIDEO / MERCH ----
   Keep the theme's NATIVE tab bar exactly as designed: the labels are compact
   text sitting at the top of the media column, split into three EQUAL thirds
   (MUSIC left, VIDEO middle, MERCH right) with the album art following ~20px
   below via the theme's own leading spacer. We deliberately do NOT force the bar
   to a tall fixed height or vertically re-centre the text — an earlier "50px bar
   with centred labels" experiment added an empty band around the tabs and pushed
   the album down, which read wrong. The only thing we assert here is the equal-
   thirds split (the theme already does this, so this is just insurance and a no-
   op on top of the native `repeat(3, minmax(0,1fr))` grid). ---- */
@media (min-width: 768px) {
    #artist-content nav.nav-lg ul.inner-nav {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
    #artist-content nav.nav-lg ul.inner-nav li.menuItem {
        text-align: center !important;
    }
}

/* ---- Short pages: don't let the footer inflate ----
   The parent theme forces a viewport-based min-height on <main> (a sticky-footer
   trick). On artists with little content the leftover vertical space is absorbed
   by the footer's grid row, ballooning the thin prev/next bar (e.g. the "3421"
   page) from ~49px to ~88px with big empty gaps top and bottom. Dropping that
   min-height on desktop lets <main> size to its columns, so the footer keeps its
   natural height and sits just below the content. Tall pages already exceed the
   min-height, so they are completely unaffected. ---- */
@media (min-width: 768px) {
    #main { min-height: 0 !important; }
}

/* ---- Media panel: top-aligned, flex column so the inner scroller fills it ----
   The exact height is set per-page by js/goodjob5.js (gt-media-cap), because it
   depends on the measured height of the left column for that artist.
   NOTE: no top margin here. The MUSIC/VIDEO/MERCH nav is meant to sit flush
   under the artist-name header, exactly like the theme's native (plugin-off)
   look. An earlier 16px top margin pushed the whole tab bar down and left an
   empty band above the tabs ("extra padding in the top area of MVM"), so it is
   deliberately omitted. ---- */
@media (min-width: 768px) {
    #artist-content {
        align-self: start !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    #artist-content > article.overflow-auto {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }
}