/* Sugar Hill Hop - Videos: vertical Shorts grid. */

.shhyt-wrap { margin: 1.5rem 0; }
.shhyt-heading { margin: 0 0 1rem; }

.shhyt-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* auto-fit keeps tiles a sane width on any screen; the column count acts as a
       ceiling rather than a fixed value, so it degrades on narrow screens with no
       media queries. */
    grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 22vw, 220px), 1fr));
    gap: clamp(10px, 2vw, 20px);
}

/* One video per row on phones.
   440px is chosen to sit in the gap ABOVE every current phone (the widest is the
   iPhone Pro Max at 430) and below the next real device width (480). A breakpoint
   inside 320-430 would split the phone range arbitrarily - 400px, for instance,
   would give an iPhone 16 (393px) one column and an iPhone 16 Pro (402px) two. */
@media (max-width: 440px) {
    .shhyt-grid { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
    .shhyt-grid { grid-template-columns: repeat(var(--shhyt-cols, 4), 1fr); }
}

.shhyt-item { margin: 0; padding: 0; list-style: none; min-width: 0; }

.shhyt-play {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
    aspect-ratio: 9 / 16;
    line-height: 0;
}
.shhyt-play:focus-visible { outline: 3px solid #2271b1; outline-offset: 2px; }

.shhyt-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease, opacity .35s ease;
}
.shhyt-play:hover .shhyt-thumb,
.shhyt-play:focus-visible .shhyt-thumb { transform: scale(1.04); opacity: .88; }

/* Play triangle, drawn in CSS - no image request, no icon font.
   No backdrop-filter: blurring what is behind a translucent disc made its edge
   read as a smudge rather than a circle, which got more obvious once tiles went
   full width on phones. A near-opaque fill gives a clean edge over any frame. */
.shhyt-play-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .78);
    transition: background .25s ease, transform .25s ease;
}
.shhyt-play-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #fff;
    transform: translateX(2px);
}
.shhyt-play:hover .shhyt-play-icon { background: rgb(200, 16, 46); transform: scale(1.08); }

.shhyt-title {
    margin: .5rem 0 0;
    font-size: .9rem;
    line-height: 1.35;
    /* Two lines then ellipsis, so uneven title lengths cannot ragged the grid. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}
.shhyt-meta { margin: .15rem 0 0; font-size: .78rem; opacity: .7; }

/* ─── Lightbox ────────────────────────────────────────────────────────────
   The player opens here rather than inside the tile, and the size is not
   cosmetic: YouTube chooses the stream to match the RENDERED PLAYER SIZE, and
   there is no longer any way to request a resolution (setPlaybackQuality is
   unsupported, suggestedQuality ignored, vq= never official). A ~180px tile
   gets ~360p and is right to. Filling the viewport height is what gets 720p+. */
.shhyt-noscroll { overflow: hidden; }

.shhyt-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2vw, 32px);
    background: rgba(0, 0, 0, .9);
    animation: shhyt-fade .18s ease;
}
@keyframes shhyt-fade { from { opacity: 0; } to { opacity: 1; } }

.shhyt-stage { display: flex; }

.shhyt-lightbox iframe {
    display: block;
    border: 0;
    border-radius: 10px;
    background: #000;
    box-shadow: 0 10px 50px rgba(0, 0, 0, .6);
}

/* Vertical Short: go as tall as the viewport allows, then let width follow.
   min() keeps it inside narrow screens where 9:16 of 90vh would overflow. */
.shhyt-lightbox.is-short iframe {
    height: min(90vh, calc((100vw - 32px) * 16 / 9));
    width: min(calc(90vh * 9 / 16), calc(100vw - 32px));
}
/* Ordinary 16:9 upload. */
.shhyt-lightbox.is-wide iframe {
    width: min(92vw, 1280px);
    height: min(calc(92vw * 9 / 16), calc(90vh), 720px);
}

/* "Tap for sound" - only ever appears when the browser refused autoplay with
   audio and we fell back to muted playback. Sits low and centred so it is over
   the video but clear of YouTube's own controls. */
.shhyt-sound {
    position: absolute;
    left: 50%;
    bottom: clamp(56px, 12vh, 110px);
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, .82);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    cursor: pointer;
    z-index: 2;
    animation: shhyt-rise .25s ease;
}
.shhyt-sound:hover { background: rgb(200, 16, 46); }
.shhyt-sound:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@keyframes shhyt-rise {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .shhyt-sound { animation: none; }
}

.shhyt-close {
    position: absolute;
    top: clamp(6px, 1.5vw, 18px);
    right: clamp(6px, 1.5vw, 18px);
    width: 44px;
    height: 44px;
    font-size: 30px;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.shhyt-close:hover { background: rgba(255, 255, 255, .25); }
.shhyt-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .shhyt-lightbox { animation: none; }
}

.shhyt-notice {
    padding: .75rem 1rem;
    border-left: 4px solid #dba617;
    background: #fff8e5;
    font-size: .9rem;
}

@media (prefers-reduced-motion: reduce) {
    .shhyt-thumb, .shhyt-play-icon { transition: none; }
    .shhyt-play:hover .shhyt-thumb { transform: none; }
}

/* ── Browsing filter ──────────────────────────────────────────────────────
   Rendered hidden by the shortcode and revealed by the script, so a visitor
   whose JavaScript failed sees the full grid rather than controls that do
   nothing. [hidden] is honoured explicitly because the grid/flex display
   values below would otherwise override the browser default. */
.shhyt-filterbar[hidden],
.shhyt-filter-empty[hidden],
.shhyt-item[hidden],
.shhyt-filter-clear[hidden] { display: none !important; }

.shhyt-filterbar {
    margin: 0 0 1.25rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}

/* The disclosure. Collapsed by default in the markup; the script reopens it if
   the visitor left it open last time, and does so BEFORE the bar is revealed so
   a restored panel never visibly snaps open after paint. */
.shhyt-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 2px;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    list-style: none;
    width: max-content;
}
/* Safari still draws the disclosure triangle through this pseudo-element. */
.shhyt-filters-toggle::-webkit-details-marker { display: none; }
.shhyt-filters-toggle:focus-visible { outline: 3px solid #2271b1; outline-offset: 2px; border-radius: 4px; }

/* Chevron drawn in CSS - no image request, no icon font - rotating to point
   down when the panel is open. */
.shhyt-filters-toggle::before {
    content: "";
    width: .5em;
    height: .5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .18s ease;
    opacity: .7;
}
.shhyt-filters-panel[open] > .shhyt-filters-toggle::before { transform: rotate(45deg); }

.shhyt-filters-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4em;
    height: 1.4em;
    padding: 0 .4em;
    border-radius: 999px;
    background: #b3202e;
    color: #fff;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
}
.shhyt-filters-badge[hidden] { display: none; }

.shhyt-filters {
    /* One row per group. A two-column grid rather than a flex wrap, so every
       row's options start at the same x whatever the headings are called - with
       flex they staggered, which is what made it read as cluttered. */
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 10px clamp(10px, 1.6vw, 18px);
    /* No bottom padding: the separation from the running total below is owned
       entirely by .shhyt-filter-foot, so the open and closed panel leave exactly
       the same gap rather than 4px and 2px respectively. */
    padding: 12px 0 0;
}

/* The wrapper contributes no box of its own, so its label and options become
   cells of the grid above and take part in that alignment. Safe for assistive
   tech here because the group semantics live on .shhyt-filter-options, not on
   this element. */
.shhyt-filter-group { display: contents; }

.shhyt-filter-label {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .65;
    white-space: nowrap;
}

.shhyt-filter-options { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

.shhyt-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .9rem;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.shhyt-chip:hover { border-color: currentColor; background: rgba(0, 0, 0, .05); }
.shhyt-chip:focus-visible { outline: 3px solid #2271b1; outline-offset: 2px; }

/* The pressed state is carried by aria-pressed as well as the class, so the
   styling and what a screen reader announces cannot drift apart. */
.shhyt-chip.is-active,
.shhyt-chip[aria-pressed="true"] {
    background: #b3202e;
    border-color: #b3202e;
    color: #fff;
}

.shhyt-chip-count { font-size: .75em; opacity: .6; font-variant-numeric: tabular-nums; }
.shhyt-chip[aria-pressed="true"] .shhyt-chip-count { opacity: .8; }

.shhyt-filter-select {
    font: inherit;
    font-size: .9rem;
    padding: 5px 10px;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    max-width: 100%;
}

/* The running total sits under the controls rather than in the options column,
   so it does not reflow them as the number changes.

   The top margin has to clear the 10px gap BETWEEN filter rows by enough to read
   as a separate zone - at 2px the count looked like a fifth filter row that had
   lost its buttons. It is the only thing providing that separation, so the gap is
   identical whether the panel is open or shut. */
.shhyt-filter-foot {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.shhyt-filter-count {
    margin: 0;
    font-size: .8rem;
    opacity: .6;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: baseline;
}

/* Slightly stronger than the count it follows: the count is context, the
   summary is what you actually chose. */
.shhyt-filter-summary { opacity: .95; font-weight: 600; }
.shhyt-filter-summary:not(:empty)::before { content: "\2014"; margin-right: 6px; opacity: .45; font-weight: 400; }

.shhyt-filter-clear {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .8rem;
    text-decoration: underline;
    cursor: pointer;
    opacity: .7;
}
.shhyt-filter-clear:hover { opacity: 1; }
.shhyt-filter-clear:focus-visible { outline: 3px solid #2271b1; outline-offset: 2px; }

.shhyt-filter-empty { margin: 1.5rem 0; opacity: .75; }

@media (max-width: 640px) {
    /* Headings move above their options: two columns leaves too little room for
       the chips once the label has taken its share. */
    .shhyt-filters { grid-template-columns: 1fr; gap: 4px; }
    .shhyt-filters-toggle { padding: 8px 2px; }
    .shhyt-filter-label { margin-top: 8px; }
    .shhyt-filter-group:first-child .shhyt-filter-label { margin-top: 0; }
    /* The row scrolls sideways rather than wrapping into a tall block that
       would push the videos themselves off the screen. */
    .shhyt-filter-options {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .shhyt-filter-options::-webkit-scrollbar { display: none; }
    .shhyt-chip { flex: 0 0 auto; }
    .shhyt-filter-foot { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .shhyt-chip,
    .shhyt-filters-toggle::before { transition: none; }
}

@media (prefers-color-scheme: dark) {
    .shhyt-filterbar { border-bottom-color: rgba(255, 255, 255, .16); }
    .shhyt-chip,
    .shhyt-filter-select { border-color: rgba(255, 255, 255, .24); }
    .shhyt-chip:hover { background: rgba(255, 255, 255, .08); }
}

/* The readable facts under each title - level, style, date, length. Quieter than
   the title but not so faint it reads as decoration: it is page content, and the
   only text a crawler or a reader gets about what the video actually is. */
.shhyt-facts {
    margin: .15rem 0 0;
    font-size: .78rem;
    line-height: 1.45;
    opacity: .72;
}