/*
 * ui.artist-responsive.css - the Artists' Nook on small screens.
 * ---------------------------------------------------------------------------
 * Owner, 2026-09-11: "this needs to be reactful ... particularly the header -
 * it can scroll with the page. The nav bits - content rating and entity nav -
 * those can be smaller font sized to make them fit better."
 *
 * Loaded by php/partials/blocks/artist-header.php, so it rides every Nook page
 * and never citadel. ui.responsive.css is shared by both trees and stays
 * byte-identical; the Nook's own choices live here instead.
 */

/* ===========================================================================
   1. SUB-HEADER NAV CONTROLS - smaller type, every width
   ---------------------------------------------------------------------------
   The rating picker already steps its own type down as its container narrows
   (ui.buttongroup.css @container). A plain ".artist-subheader
   .buttongroup-option" rule would OUT-RANK those steps and freeze the size, so
   the steps are restated here one notch lower, at the same specificity.
   =========================================================================== */

.artist-subheader .buttongroup-option {
    font-size: 0.74rem;
    padding: 0.3rem 0.4rem;
}
.artist-subheader .buttongroup-locked {
    font-size: 0.74rem;
    padding: 0.3rem 0.4rem;
}
@container (max-width: 600px) {
    .artist-subheader .buttongroup-option,
    .artist-subheader .buttongroup-locked { font-size: 0.68rem; padding: 0.3rem 0.25rem; }
}
@container (max-width: 500px) {
    .artist-subheader .buttongroup-option,
    .artist-subheader .buttongroup-locked { font-size: 0.62rem; padding: 0.28rem 0.12rem; letter-spacing: -0.01em; }
}
@container (max-width: 410px) {
    .artist-subheader .buttongroup-option,
    .artist-subheader .buttongroup-locked { font-size: 0.56rem; padding: 0.26rem 0.08rem; letter-spacing: -0.02em; }
}

/* Entity nav (First / Back / List / Next / Last - no New on the Nook). */
.artist-subheader .entity-nav-row {
    gap: 4px !important;
}
.artist-subheader .entity-nav-row .btn {
    font-size: 0.72rem;
    padding: 0.2rem 0.3rem;
    white-space: nowrap;
}

/* ===========================================================================
   2. SMALL SCREENS  (<= 768px)
   =========================================================================== */

@media (max-width: 768px) {

    /* THE HEADER SCROLLS WITH THE PAGE. The shell is a fixed-height frame:
       html/body are height:100vh (pages.css), <body> and <main> carry inline
       overflow:hidden, and only .content scrolls (index.php) - so the header,
       outside that scroller, never moves and eats the top of a small screen.
       Hand the scroll back to the document; !important is what beats the
       inline styles. The nav drawer is position:fixed at this width
       (ui.responsive.css), so it is unaffected. */
    html,
    body {
        height: auto !important;
        min-height: 100%;
        overflow-y: visible !important;
    }
    main,
    main > .content {
        overflow: visible !important;
    }

    /* Five nav buttons fit ONE row once the type is small. ui.responsive.css
       wraps them ~3 per row for citadel's six; out-rank that here. */
    .artist-subheader .entity-nav-row {
        flex-wrap: nowrap;
    }
    .artist-subheader .entity-nav-row > .ctrl-wrapper,
    .artist-subheader .entity-nav-row > .control {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    .artist-subheader .entity-nav-row .btn {
        width: 100%;
        min-height: 36px;
        font-size: 0.68rem;
        padding: 0.2rem 0.15rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* The sub-header title: a little less, so the stacked header stays short. */
    .artist-subheader h2 {
        font-size: 1.05rem;
    }
}

/* Phones: the top row (mark + name + job title + avatar) is too much for
   480px. Keep the mark, the name and the avatar; drop the job-title line. The
   mark's own small-screen steps (and the caption it drops below 600px) live in
   ui.logo.css - since 2026-09-25 the header carries the animated Ravenbreath
   mark, not the h1/h2 title stack these rules used to size. */
@media (max-width: 480px) {
    .artist-site-header .profile-status {
        display: none;
    }
    /* Let a LONG name give way (ellipsis) rather than crowd the mark. */
    .artist-site-header .profile-username {
        display: block;
        max-width: 10ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Very small phones: the nav keeps its one row by dropping the letter
   spacing and a hair of type; the arrows still read. */
@media (max-width: 380px) {
    .artist-subheader .entity-nav-row .btn {
        font-size: 0.62rem;
        letter-spacing: -0.02em;
        padding: 0.2rem 0.08rem;
    }
}