/*
Theme Name: abFilmy
Theme URI: https://abfilmy.com
Author: Ramesh Dhakal
Author URI: https://rameshcodes.dev
Description: Lightweight Nepali entertainment news magazine theme.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: abfilmy
*/

/* -------------------------------------------------------------------------- */
/* Design tokens                                                              */
/* -------------------------------------------------------------------------- */
:root {
    --ab-bg:           #ffffff;
    --ab-fg:           #111111;
    --ab-muted:        #6b6b6b;
    --ab-border:       #e6e6e6;
    --ab-border-strong:#111111;
    --ab-accent:       #d6001c;
    --ab-accent-hover: #a80016;
    --ab-green:        #116f3e; /* logo green — used for buttons */
    --ab-green-hover:  #0d5730;
    --ab-overlay:      rgba(17, 17, 17, 0.55);

    --ab-container:    1280px;
    --ab-radius:       2px;
    --ab-form-radius:  6px; /* softer corners, scoped to forms/pages */

    /* Geist for Latin/English; Mukta carries Nepali (Devanagari) via per-glyph fallback */
    --ab-font-sans:    "Geist", "Mukta", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Geist everywhere — display accents share the same sans stack */
    --ab-font-serif:   var(--ab-font-sans);

    --ab-shadow-pop:   0 12px 32px rgba(0, 0, 0, 0.12);

    /* Header (frosted glass, translated from the 3-row Tailwind spec) */
    --ab-header-glass:  rgba(255, 255, 255, 0.9);
    --ab-header-solid:  rgba(255, 255, 255, 0.8);
    --ab-utility-bg:    #fafafa;
    --ab-pill:          #f4f4f5;
}

/* -------------------------------------------------------------------------- */
/* Base                                                                       */
/* -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--ab-font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ab-fg);
    background: var(--ab-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ab-accent); }

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    background: var(--ab-fg);
    color: #fff;
    padding: 12px 16px;
}
.skip-link:focus {
    left: 16px;
    top: 16px;
}

.site {
    max-width: var(--ab-container);
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
}

/* -------------------------------------------------------------------------- */
/* Header                                                                     */
/* -------------------------------------------------------------------------- */
.site-header {
    background: transparent;
    border-bottom: 1px solid var(--ab-border);
    position: sticky;
    /* Masthead (utility + main bar) scrolls up out of view; only the nav row
       rests at the top. --masthead-h is measured by JS on desktop; without it
       (mobile / no-JS) this resolves to 0 and the whole header sticks at top. */
    top: calc(-1 * var(--masthead-h, 0px));
    z-index: 100;
}

/* Opaque fallback bg for the glassy rows */
.site-header__bar,
.site-nav {
    background: var(--ab-bg);
}

/* Frosted glass is applied to the rows — NOT to .site-header — so the
   fixed-position mega-menu (desktop) and drawer/scrim (mobile) keep the
   viewport as their containing block instead of being clipped to the header. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .site-header__bar,
    .site-nav {
        background: var(--ab-header-glass);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
}

.site-header__container {
    max-width: var(--ab-container);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* ROW 1 — Utility / top bar (lg and up) */
.site-header__utility {
    border-bottom: 1px solid var(--ab-border);
    background: var(--ab-utility-bg);
    font-size: 0.72rem;
    color: var(--ab-muted);
}

.site-utility__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 34px;
}

.site-utility__date {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.site-utility__date svg { color: var(--ab-accent); }

.site-utility__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.site-utility__menu a {
    color: var(--ab-muted);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.68rem;
    transition: color 150ms ease;
}

.site-utility__menu a:hover { color: var(--ab-accent); }

/* Top-bar social icons (right side) */
.site-utility__socials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.site-utility__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--ab-muted);
    transition: color 150ms ease, background-color 150ms ease;
}

.site-utility__social:hover { color: #fff; background: var(--ab-accent); }
.site-utility__social--facebook:hover { background: #1877f2; }
.site-utility__social--youtube:hover  { background: #ff0000; }
.site-utility__social--x:hover        { background: #000; }
.site-utility__social svg { display: block; }

/* ROW 2 — Main bar */
.site-header__bar .site-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 84px;
}

/* Branding ----------------------------------------------------------------- */
.site-branding {
    display: flex;
    align-items: center;
}

.site-title {
    margin: 0;
    line-height: 1;
    letter-spacing: -0.02em;
}

.site-title a {
    font-family: var(--ab-font-serif);
    font-weight: 900;
    font-style: normal;
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: var(--ab-accent);
    display: inline-flex;
    align-items: baseline;
    text-decoration: none;
}

.site-title a:hover { color: var(--ab-accent-hover); }
.site-title__mark { color: var(--ab-accent); }
.site-title__rest { color: var(--ab-fg); }

.custom-logo-link img,
.custom-logo {
    max-height: 56px;
    width: auto;
}

/* Actions (search + hamburger) -------------------------------------------- */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Header image widget — sits on the right of the main bar, beside the logo -- */
.site-header__banner {
    flex: 1 1 auto;         /* take the space to the right of the logo */
    margin-left: 2rem;      /* logo stays left, header image fills the rest */
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 1rem;
}

.header-image__widget {
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center;         /* vertically centre the banner in the bar */
    justify-content: flex-end;
}

.header-image__widget img {
    display: block;
    height: auto;
    max-height: 110px;
    width: auto;
    max-width: 100%;
    vertical-align: middle;
}

.header-image__title {
    margin: 0 0 0.25rem;
    font-family: var(--ab-font-sans);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ab-muted);
}

.header-icon {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--ab-fg);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--ab-radius);
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.header-icon:hover {
    background: #f5f5f5;
    color: var(--ab-accent);
}

.header-icon:focus-visible {
    outline: 2px solid var(--ab-accent);
    outline-offset: 2px;
}

.header-icon[aria-expanded="true"] {
    background: var(--ab-green);
    color: #fff;
}

.header-icon svg { display: block; }

/* On desktop the inline search covers search; the toggle + hamburger are mobile-only */
.header-icon--search { display: none; }
.header-icon--menu { display: none; }

/* Primary navigation ------------------------------------------------------- */
.site-nav {
    border-top: 1px solid var(--ab-border);
    border-bottom: 1px solid var(--ab-border);
}

/* Drawer scrim + close button are mobile-only; hidden on desktop */
.site-nav__scrim { display: none; }
.site-nav__close { display: none; }

/* When the nav pins to the top (masthead scrolled away) it lifts off content */
.site-nav.is-stuck {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07);
}

.site-nav__container {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
}

/* Compact brand — hidden until the nav is stuck, then fades in beside the menu */
.site-nav__brand {
    display: inline-flex;
    align-items: center;
    align-self: center;
    max-width: 0;
    margin-right: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 260ms ease, opacity 200ms ease, margin-right 260ms ease;
}

.site-nav.is-stuck .site-nav__brand {
    max-width: 220px;
    margin-right: 0.9rem;
    opacity: 1;
    visibility: visible;
}

.site-nav__logo {
    display: block;
    max-height: 30px;
    width: auto;
}

.site-nav__brand .site-title__mark,
.site-nav__brand .site-title__rest {
    font-family: var(--ab-font-serif);
    font-weight: 900;
    font-style: normal;
    font-size: 1.25rem;
    line-height: 1;
}

.site-nav__brand .site-title__mark { color: var(--ab-accent); }
.site-nav__brand .site-title__rest { color: var(--ab-fg); }

.site-nav__brand:focus-visible {
    outline: 2px solid var(--ab-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Desktop search trigger in the nav (opens the search panel) */
.site-nav__search {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 0.5rem;
    border-radius: 50%;
    color: var(--ab-fg);
    flex: 0 0 auto;
    transition: background-color 150ms ease, color 150ms ease;
}

.site-nav__search:hover { background: #eaf5ee; color: var(--ab-green); }
.site-nav__search[aria-expanded="true"] { background: var(--ab-green); color: #fff; }
.site-nav__search:focus-visible { outline: 2px solid var(--ab-green); outline-offset: 2px; }
.site-nav__search svg { display: block; }

.site-nav__toggle {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: auto;
    padding: 0.7rem 0;
    margin-right: 0.5rem;
    border-right: 1px solid var(--ab-border);
    align-self: stretch;
    color: var(--ab-fg);
    flex: 0 0 auto;
    transition: background-color 150ms ease, color 150ms ease;
}

.site-nav__toggle:hover,
.site-nav__toggle[aria-expanded="true"] {
    background: var(--ab-accent);
    color: #fff;
}

.site-nav__toggle:focus-visible {
    outline: 2px solid var(--ab-accent);
    outline-offset: 2px;
}

.site-nav__toggle svg { display: block; }

.site-nav__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    flex: 1;
}

.site-nav__menu > li {
    position: relative;
}

.site-nav__menu > li > a {
    position: relative;
    display: inline-block;
    padding: 0.95rem 1.1rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ab-fg);
    transition: color 150ms ease;
}

.site-nav__menu > li > a:hover,
.site-nav__menu > li.current-menu-item > a,
.site-nav__menu > li.current-menu-parent > a {
    color: var(--ab-accent);
}

/* Underline is absolutely positioned so it adds no box height — this keeps the
   link's visual centre equal to its box centre, so the hamburger and compact
   logo line up with the menu text. */
.site-nav__menu > li > a::after {
    content: "";
    position: absolute;
    left: 1.1rem;
    right: 1.1rem;
    bottom: 0.6rem;
    height: 2px;
    background: var(--ab-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 180ms ease;
}

.site-nav__menu > li:hover > a::after,
.site-nav__menu > li.current-menu-item > a::after {
    transform: scaleX(1);
}

/* Active category emphasis */
.site-nav__menu > li.current-menu-item > a,
.site-nav__menu > li.current-menu-parent > a {
    font-weight: 800;
}

/* Dropdown submenus (desktop) ---------------------------------------------- */
.site-nav__menu .menu-item-has-children > a {
    padding-right: 1.9rem;
}

.site-nav__menu .menu-item-has-children > a::before {
    content: "";
    position: absolute;
    right: 1.05rem;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    opacity: 0.7;
}

.site-nav__menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--ab-bg);
    border: 1px solid var(--ab-border);
    box-shadow: var(--ab-shadow-pop);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
    z-index: 20;
}

.site-nav__menu > li:hover > .sub-menu,
.site-nav__menu > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-nav__menu .sub-menu a {
    display: block;
    padding: 0.55rem 1.1rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ab-fg);
    transition: background-color 150ms ease, color 150ms ease;
}

.site-nav__menu .sub-menu a:hover,
.site-nav__menu .sub-menu .current-menu-item > a {
    background: #f5f5f5;
    color: var(--ab-accent);
}

/* Trending ticker ---------------------------------------------------------- */
.site-ticker {
    border-bottom: 1px solid var(--ab-border);
    background: var(--ab-bg);
    overflow: hidden;
}

.site-ticker__inner {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 40px;
}

.site-ticker__label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    padding: 0 1rem 0 0;
    margin-right: 1rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ab-accent);
    border-right: 1px solid var(--ab-border);
    white-space: nowrap;
}

.site-ticker__viewport {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.site-ticker__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: ab-ticker 45s linear infinite;
}

.site-ticker__viewport:hover .site-ticker__track { animation-play-state: paused; }

.site-ticker__item {
    position: relative;
    padding-right: 2.6rem;
}

.site-ticker__item::after {
    content: "•";
    position: absolute;
    right: 1.15rem;
    color: var(--ab-accent);
}

.site-ticker__item a {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ab-fg);
    transition: color 150ms ease;
}

.site-ticker__item a:hover { color: var(--ab-accent); }

@keyframes ab-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Search panel ------------------------------------------------------------- */
.site-search-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 400;
    border-bottom: 1px solid var(--ab-border);
    background: var(--ab-bg);
    box-shadow: var(--ab-shadow-pop);
    animation: ab-slide-down 220ms ease;
}

.site-search-panel__form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
}

.site-search-panel__field {
    flex: 1;
    appearance: none;
    border: 1px solid var(--ab-border);
    background: #fff;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--ab-fg);
    border-radius: var(--ab-radius);
}

.site-search-panel__field:focus {
    outline: 2px solid var(--ab-accent);
    outline-offset: 1px;
    border-color: transparent;
}

.site-search-panel__submit {
    appearance: none;
    border: 0;
    background: var(--ab-green);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.85rem 1.3rem;
    cursor: pointer;
    font-size: 0.8rem;
    border-radius: var(--ab-radius);
    transition: background-color 150ms ease;
}

.site-search-panel__submit:hover { background: var(--ab-green-hover); }

.site-search-panel__close {
    appearance: none;
    background: transparent;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: var(--ab-muted);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 150ms ease, color 150ms ease;
}
.site-search-panel__close:hover {
    background: #eee;
    color: var(--ab-fg);
}

/* Live-search results dropdown */
.site-search-panel__inner { position: relative; }

.site-search-panel__results {
    position: absolute;
    top: calc(100% - 0.75rem);
    left: 1.25rem;
    right: 1.25rem;
    max-height: min(65vh, 480px);
    overflow-y: auto;
    background: var(--ab-bg);
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius);
    box-shadow: var(--ab-shadow-pop);
    z-index: 401;
}

.site-search-panel__result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--ab-border);
    color: var(--ab-fg);
}

.site-search-panel__result:last-child { border-bottom: 0; }

.site-search-panel__result:hover,
.site-search-panel__result.is-active {
    background: #f5f5f5;
}

.site-search-panel__result-thumb {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--ab-radius);
    overflow: hidden;
    background: #f0f0f0;
}

.site-search-panel__result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.site-search-panel__result-text { min-width: 0; }

.site-search-panel__result-title {
    display: block;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.35;
}

.site-search-panel__result-meta {
    display: block;
    font-size: 0.72rem;
    color: var(--ab-muted);
    margin-top: 0.15rem;
}

.site-search-panel__result--more {
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ab-green);
    background: #fafafa;
}

.site-search-panel__result--more:hover { color: #fff; background: var(--ab-green); }

.site-search-panel__empty {
    margin: 0;
    padding: 1rem;
    color: var(--ab-muted);
    font-size: 0.9rem;
    text-align: center;
}

/* Mega menu (desktop only — opened by .site-nav__toggle) ------------------ */
.mega-menu {
    position: fixed;
    inset: 0;
    background: var(--ab-overlay);
    z-index: 200;
    animation: ab-fade-in 180ms ease;
}

.mega-menu__inner {
    background: var(--ab-bg);
    max-width: min(720px, 92vw);
    height: 100%;
    overflow-y: auto;
    box-shadow: var(--ab-shadow-pop);
    animation: ab-slide-in-left 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mega-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--ab-border);
    position: sticky;
    top: 0;
    background: var(--ab-bg);
    z-index: 1;
}

.mega-menu__heading {
    font-family: var(--ab-font-serif);
    font-style: normal;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--ab-fg);
}

.mega-menu__brand {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.mega-menu__logo {
    display: block;
    max-height: 40px;
    width: auto;
}

.mega-menu__brand .site-title__mark,
.mega-menu__brand .site-title__rest {
    font-family: var(--ab-font-serif);
    font-weight: 900;
    font-size: 1.6rem;
    line-height: 1;
}

.mega-menu__brand .site-title__mark { color: var(--ab-accent); }
.mega-menu__brand .site-title__rest { color: var(--ab-fg); }

.mega-menu__close {
    appearance: none;
    background: transparent;
    border: 0;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    color: var(--ab-fg);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: background-color 150ms ease;
}
.mega-menu__close:hover { background: #f0f0f0; }

.mega-menu__body {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

.mega-menu__categories {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
}

.mega-menu__category {
    border-bottom: 1px solid var(--ab-border);
    padding-bottom: 1.25rem;
}

.mega-menu__category:last-child { border-bottom: 0; }

.mega-menu__category-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-family: var(--ab-font-serif);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--ab-fg);
    margin-bottom: 0.65rem;
}

.mega-menu__category-link:hover { color: var(--ab-accent); }

.mega-menu__count {
    font-family: var(--ab-font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--ab-muted);
}

.mega-menu__posts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.mega-menu__post {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--ab-fg);
}

.mega-menu__thumb {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: var(--ab-radius);
    overflow: hidden;
    background: #f0f0f0;
}

.mega-menu__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mega-menu__post-title {
    font-size: 0.9rem;
    line-height: 1.35;
    transition: color 150ms ease;
}

.mega-menu__post:hover .mega-menu__post-title { color: var(--ab-accent); }

.mega-menu__empty {
    color: var(--ab-muted);
    font-style: italic;
}

body.ab-no-scroll { overflow: hidden; }

/* Animations --------------------------------------------------------------- */
@keyframes ab-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ab-slide-in-left {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
@keyframes ab-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Pages & front-end forms (Contact / Advertise)
   ========================================================================== */

.ab-page {
    max-width: var(--ab-container);
    margin: 0 auto;
    padding: 2.5rem 1rem 4.5rem;
}

.ab-page__header {
    max-width: 620px;
    margin-bottom: 2.25rem;
}

.ab-page__eyebrow {
    margin: 0 0 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ab-accent);
}

.ab-page__title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 0.85rem;
}

.ab-page__lead {
    color: var(--ab-muted);
    font-size: 1.08rem;
    line-height: 1.65;
    margin: 0;
}

/* Two-column: form (main) + info aside */
.ab-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(260px, 30%, 340px);
    gap: 2.5rem;
    align-items: start;
}

/* ---- Info aside card (contact details / why-advertise) ---- */
.ab-aside {
    border: 1px solid var(--ab-border);
    border-top: 3px solid var(--ab-accent);
    border-radius: var(--ab-form-radius);
    padding: 1.5rem 1.4rem;
    background: var(--ab-utility-bg);
}

.ab-aside__title {
    font-size: 1.05rem;
    margin: 0 0 1.15rem;
}

.ab-aside__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.15rem;
}

.ab-aside__list a {
    color: var(--ab-accent);
    word-break: break-word;
}

.ab-aside__label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ab-muted);
    margin-bottom: 0.25rem;
}

.ab-aside__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.3rem;
}

.ab-aside__points > li {
    position: relative;
    padding-left: 1.35rem;
}

.ab-aside__points > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ab-accent);
}

.ab-aside__point-title {
    display: block;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.ab-aside__point-desc {
    display: block;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ab-muted);
}

.ab-aside__point-desc a {
    color: var(--ab-accent);
    word-break: break-word;
}

/* ---- Form card ---- */
.ab-form-wrap {
    border: 1px solid var(--ab-border);
    border-left: 3px solid var(--ab-accent);
    border-radius: var(--ab-form-radius);
    background: var(--ab-bg);
    padding: 2rem 2rem 2.25rem;
    box-shadow: var(--ab-shadow-pop);
}

.ab-form {
    display: grid;
    gap: 1.35rem;
}

.ab-form__field {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    border: 0;
    padding: 0;
    min-inline-size: 0;
}

.ab-form__field label,
.ab-form__field legend {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ab-fg);
}

.ab-form__req {
    color: var(--ab-accent);
}

.ab-form input[type="text"],
.ab-form input[type="email"],
.ab-form textarea {
    width: 100%;
    padding: 0.8rem 0.95rem;
    font: inherit;
    color: var(--ab-fg);
    background: var(--ab-bg);
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-form-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ab-form input::placeholder,
.ab-form textarea::placeholder {
    color: #9a9a9a;
}

.ab-form input:hover,
.ab-form textarea:hover {
    border-color: #c4c4c4;
}

.ab-form input:focus,
.ab-form textarea:focus {
    outline: none;
    border-color: var(--ab-accent);
    box-shadow: 0 0 0 3px rgba(214, 0, 28, 0.15);
}

.ab-form textarea {
    resize: vertical;
    min-height: 8.5rem;
}

/* Segmented "You are" selector */
.ab-form__field--radio {
    display: grid;
    gap: 0.55rem;
}

.ab-form__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.ab-form__radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 1.1rem;
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-form-radius);
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ab-form__radio input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.ab-form__radio::before {
    content: "";
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid #c4c4c4;
    border-radius: 50%;
    flex: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ab-form__radio:hover {
    border-color: #c4c4c4;
}

.ab-form__radio:has(input:checked) {
    border-color: var(--ab-accent);
    background: rgba(214, 0, 28, 0.05);
    color: var(--ab-accent);
}

.ab-form__radio:has(input:checked)::before {
    border-color: var(--ab-accent);
    background: var(--ab-accent);
    box-shadow: inset 0 0 0 3px var(--ab-bg);
}

.ab-form__radio:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(214, 0, 28, 0.15);
}

/* Fallback for browsers without :has() — keep native radios usable */
@supports not (selector(:has(*))) {
    .ab-form__radio input {
        position: static;
        opacity: 1;
        width: auto;
        height: auto;
    }

    .ab-form__radio::before {
        display: none;
    }
}

.ab-form__error {
    color: var(--ab-accent);
    font-size: 0.85rem;
}

.ab-form__actions {
    margin: 0.25rem 0 0;
}

.ab-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 2rem;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--ab-green);
    border: 0;
    border-radius: var(--ab-form-radius);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

.ab-form__submit:hover {
    background: var(--ab-green-hover);
}

.ab-form__submit:active {
    transform: translateY(1px);
}

/* Notices */
.ab-form__notice {
    padding: 0.9rem 1.1rem;
    border-radius: var(--ab-form-radius);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.ab-form__notice--success {
    background: #eaf6ef;
    border: 1px solid var(--ab-green);
    color: var(--ab-green-hover);
}

.ab-form__notice--error {
    background: #fdecee;
    border: 1px solid var(--ab-accent);
    color: var(--ab-accent-hover);
}

/* Honeypot — visually hidden but present for bots */
.ab-form__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 781px) {
    .ab-page__grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .ab-form-wrap {
        padding: 1.5rem 1.25rem 1.75rem;
    }

    .ab-form__submit {
        width: 100%;
    }
}

/* ==========================================================================
   Homepage category sections (below the hero)
   ========================================================================== */

.home-section {
    max-width: var(--ab-container);
    margin: 0 auto;
    padding: 2.5rem 1rem 0;
}

.home-section:last-of-type {
    padding-bottom: 3rem;
}

.home-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    border-bottom: 2px solid var(--ab-border);
    padding-bottom: 0.6rem;
    margin-bottom: 1.25rem;
}

.home-section__header::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 64px;
    height: 2px;
    background: var(--sec, var(--ab-accent));
}

.home-section__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.home-section__title a {
    color: var(--ab-fg);
}

.home-section__see-all {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ab-muted);
    white-space: nowrap;
}

.home-section__see-all:hover {
    color: var(--sec, var(--ab-accent));
}

.home-section__see-all-arrow {
    transition: transform 0.2s ease;
}

.home-section__see-all:hover .home-section__see-all-arrow,
.home-section__see-all:focus-visible .home-section__see-all-arrow {
    transform: translateX(3px);
}

/* Header actions group: holds "See all", and (Songs) the relocated genre
   dropdown to its left, separated by a hairline "|" — e.g. "All | See all". */
.home-section__actions {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
}

.home-section__sep {
    color: var(--ab-border);
    font-weight: 400;
    user-select: none;
}

.home-section__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.4rem;
}

.home-section__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ab-fg);
    background: var(--ab-pill);
    border-radius: 999px;
    border-left: 3px solid var(--chip, var(--ab-accent));
}

.home-section__chip:hover {
    background: var(--chip, var(--ab-accent));
    color: #fff;
}

.home-section__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 1.75rem 2rem;
    align-items: start;
}

/* Lead */
.home-section__lead-thumb {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--ab-radius);
    background: #000;
    margin-bottom: 0.85rem;
}

.home-section__lead-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.home-section__lead:hover .home-section__lead-thumb img {
    transform: scale(1.03);
}

.home-section__lead-thumb .card__play {
    position: absolute;
    bottom: 0.6rem;
    right: 0.6rem;
}

.home-section__lead-title {
    margin: 0 0 0.5rem;
    font-size: 1.3rem;
    line-height: 1.25;
    font-weight: 700;
}

.home-section__lead-title a {
    color: var(--ab-fg);
}

.home-section__lead-title a:hover {
    color: var(--sec, var(--ab-accent));
}

.home-section__lead-excerpt {
    margin: 0 0 0.7rem;
    color: var(--ab-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.home-section__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--ab-muted);
}

/* Headline list */
.home-section__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.home-section__item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
}

/* Let grid-track children shrink so long, unbroken titles wrap instead of overflowing. */
.home-section__lead-body,
.home-section__item-body {
    min-width: 0;
}

.home-section__meta-sep {
    opacity: 0.6;
}

.home-section__item-thumb {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--ab-radius);
    background: #000;
}

.home-section__item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-section__item-title {
    margin: 0 0 0.25rem;
    font-size: 0.98rem;
    line-height: 1.3;
    font-weight: 600;
}

.home-section__item-title a {
    color: var(--ab-fg);
}

.home-section__item-title a:hover {
    color: var(--sec, var(--ab-accent));
}

.home-section__item-date {
    font-size: 0.75rem;
    color: var(--ab-muted);
}

/* Placeholder (no image, no video thumb) */
.home-section__ph {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--sec, var(--ab-accent));
    opacity: 0.14;
}

@media (max-width: 781px) {
    .home-section__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */
/* ROW 1 utility bar is a large-screen affordance (lg and up) */
@media (max-width: 1023px) {
    .site-header__utility { display: none; }
}

/* Inline search is an md-and-up affordance */
@media (max-width: 780px) {
    .site-header__bar .site-header__container { min-height: 68px; }
    .site-title a { font-size: 1.85rem; }

    /* Header image, compact nav brand + nav search are desktop affordances */
    .site-header__banner { display: none; }
    .site-nav__brand { display: none; }
    .site-nav__search { display: none; }

    /* Search toggle + hamburger surface on mobile */
    .header-icon--search { display: inline-flex; }
    .header-icon--menu { display: inline-flex; }

    .site-nav__toggle { display: none; }

    /* Submenus expand inline inside the drawer (no hover dropdown on touch) */
    .site-nav__menu .menu-item-has-children > a::before { display: none; }
    .site-nav__menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
    }
    .site-nav__menu .sub-menu a {
        padding-left: 2rem;
        border-top: 1px solid var(--ab-border);
    }

    /* ROW 3 nav becomes a right-hand slide-in drawer (opaque, no glass) */
    .site-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(360px, 85vw);
        background: var(--ab-bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-bottom: 0;
        border-left: 1px solid var(--ab-border);
        box-shadow: var(--ab-shadow-pop);
        transform: translateX(100%);
        transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
        visibility: hidden;
        z-index: 300;
        overflow-y: auto;
    }
    .site-nav.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .site-nav__container {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-top: 0.5rem;
        padding-bottom: 1rem;
    }

    /* Close (X) button, pinned to the top-right of the drawer */
    .site-nav__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end;
        width: 44px;
        height: 44px;
        margin: 0 -0.25rem 0.25rem 0;
        padding: 0;
        color: var(--ab-fg);
        background: transparent;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
    }
    .site-nav__close:hover { background: var(--ab-border); }
    .site-nav__close:focus-visible { outline: 2px solid var(--ab-accent); outline-offset: 2px; }
    .site-nav__close svg { display: block; }

    .site-nav__menu {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        overflow: visible;
    }
    .site-nav__menu > li {
        width: 100%;
        border-bottom: 1px solid var(--ab-border);
    }
    .site-nav__menu > li:last-child { border-bottom: 0; }
    .site-nav__menu > li > a {
        display: block;
        width: 100%;
        padding: 0.95rem 0.75rem;
        font-size: 0.85rem;
        white-space: normal;
    }
    .site-nav__menu > li > a::after { display: none; }

    /* Scrim behind the drawer — clicking it (data-toggle="nav") closes the drawer */
    .site-nav__scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--ab-overlay);
        border: 0;
        margin: 0;
        padding: 0;
        cursor: pointer;
        z-index: 250;
        opacity: 0;
        visibility: hidden;
        transition: opacity 200ms ease, visibility 200ms ease;
    }
    .site-nav.is-open ~ .site-nav__scrim {
        opacity: 1;
        visibility: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-search-panel,
    .mega-menu,
    .mega-menu__inner {
        animation: none;
    }
    .site-nav,
    .site-nav__scrim,
    .site-nav__brand {
        transition: none;
    }
    .site-ticker__track {
        animation: none;
    }
}

/* -------------------------------------------------------------------------- */
/* Home hero — featured posts grid                                            */
/* -------------------------------------------------------------------------- */
.hero {
    margin: 0 0 2.25rem;
}

.hero__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 14px;
    height: clamp(440px, 46vw, 620px);
}

/* Left feature spans the full height; the wide card takes the top-right row;
   the two small cards auto-place into the remaining bottom-right cells. */
.hero-card--main { grid-column: 1 / 3; grid-row: 1 / 3; }
.hero-card--wide { grid-column: 3 / 5; grid-row: 1 / 2; }

.hero-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--ab-radius);
    background: #0b0b0f;
    isolation: isolate;
}

/* Full-card link sits beneath the text; clicks on empty space fall through. */
.hero-card__cover {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-card__media,
.hero-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-card__media img {
    transition: transform 0.6s ease, filter 0.3s ease;
}

.hero-card:hover .hero-card__media img {
    transform: scale(1.05);
    filter: brightness(0.9);
}

/* Fallback tile when a post has no featured image. */
.hero-card__media--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ph, var(--ab-accent)) 0%, #0b0b0f 115%);
}

.hero-card__ph-mark {
    font-family: var(--ab-font-sans);
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.28);
    user-select: none;
}

.hero-card__ph-ab {
    color: rgba(255, 255, 255, 0.5);
}

/* Play badge for video / audio post formats — pinned to the top-right corner. */
.hero-card__play {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #fff;
    background: rgba(17, 17, 17, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: background 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.hero-card__play svg {
    width: 55%;
    height: 55%;
}

.hero-card--small .hero-card__play {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
}

.hero-card:hover .hero-card__play {
    background: var(--ab-accent);
    transform: scale(1.08);
}

/* Legibility scrim behind the text. */
.hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.5) 30%,
        rgba(0, 0, 0, 0) 62%
    );
}

.hero-card__body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 1.25rem 1.35rem;
    color: #fff;
    pointer-events: none; /* let clicks reach the cover link... */
    transition: transform 0.25s ease;
}

.hero-card__body a {
    pointer-events: auto; /* ...except on the real links */
}

.hero-card:hover .hero-card__body {
    transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .hero-card__media img,
    .hero-card__body,
    .hero-card__play,
    .hero__all svg {
        transition: none;
    }
    .hero-card:hover .hero-card__media img,
    .hero-card:hover .hero-card__body {
        transform: none;
    }
}

.hero-card--small .hero-card__body {
    padding: 1rem 1.1rem;
}

.hero-card__cat {
    display: inline-block;
    margin-bottom: 0.7rem;
    padding: 0.28rem 0.7rem;
    font-family: var(--ab-font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    text-decoration: none;
    border-radius: var(--ab-radius);
    background: var(--ab-accent);
}

/* Keep the badge text white on hover; only lift the background a touch. */
.hero-card__cat:hover,
.hero-card__cat:focus {
    color: #fff;
    filter: brightness(1.12);
}

.hero-card__title {
    margin: 0;
    font-family: var(--ab-font-sans);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-card__title a {
    color: #fff;
    text-decoration: none;
}

/* Keep the title color/decoration steady on hover (overrides the global a:hover). */
.hero-card__title a:hover,
.hero-card__title a:focus {
    color: #fff;
    text-decoration: none;
}

.hero-card--main .hero-card__title { font-size: clamp(1.6rem, 2.5vw, 2.35rem); -webkit-line-clamp: 3; }
.hero-card--wide .hero-card__title { font-size: clamp(1.2rem, 1.7vw, 1.6rem); -webkit-line-clamp: 2; }
.hero-card--small .hero-card__title { font-size: 1.02rem; -webkit-line-clamp: 3; }

.hero-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.7rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.82);
}

.hero-card--small .hero-card__meta {
    margin-top: 0.5rem;
    font-size: 0.74rem;
}

.hero-card__author {
    font-weight: 600;
    color: #fff;
}

.hero-card__sep {
    opacity: 0.6;
}

.hero-card__stat {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.hero-card__stat svg {
    display: block;
    opacity: 0.85;
}

/* Main-card excerpt / dek */
.hero-card__dek {
    margin: 0.55rem 0 0;
    max-width: 46ch;
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Section head — eyebrow + "See all" */
.hero__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-family: var(--ab-font-sans);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ab-fg);
    text-transform: uppercase;
}

.hero__eyebrow::before {
    content: "";
    width: 4px;
    height: 1.1em;
    border-radius: 2px;
    background: var(--ab-accent);
}

.hero__all {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ab-muted);
}

.hero__all svg {
    transition: transform 0.2s ease;
}

.hero__all:hover {
    color: var(--ab-accent);
}

.hero__all:hover svg {
    transform: translateX(3px);
}

/* Category pills below the grid */
.hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ab-fg);
    background: var(--ab-pill);
    border: 1px solid var(--ab-border);
    border-radius: 999px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.hero__pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pill, var(--ab-accent));
}

.hero__pill:hover {
    color: var(--ab-fg);
    border-color: var(--pill, var(--ab-accent));
}

/* Keyboard focus ring on the hero's interactive elements */
.hero-card__title a:focus-visible,
.hero-card__cat:focus-visible,
.hero__all:focus-visible,
.hero__pill:focus-visible {
    outline: 2px solid var(--ab-accent);
    outline-offset: 2px;
    border-radius: var(--ab-radius);
}

.hero-card__title a:focus-visible,
.hero-card__cat:focus-visible {
    outline-color: #fff;
}

/* Tablet / mobile: stack into two columns with fixed aspect ratios. */
@media (max-width: 780px) {
    .hero__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
        grid-auto-rows: auto;
        height: auto;
        gap: 10px;
    }

    .hero-card {
        aspect-ratio: 3 / 2;
    }

    .hero-card--main,
    .hero-card--wide {
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 480px) {
    .hero__grid {
        grid-template-columns: 1fr;
    }

    .hero-card,
    .hero-card--main,
    .hero-card--wide {
        grid-column: 1 / -1;
        aspect-ratio: 16 / 10;
    }
}

/* -------------------------------------------------------------------------- */
/* Single post                                                                */
/* -------------------------------------------------------------------------- */

/* Two-column layout: ~70% content + ~30% sidebar */
.post-layout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 2.5rem;
    align-items: start;
}

.post-layout__main {
    min-width: 0;
}

.single-post {
    padding-top: 0.5rem;
}

/* Sticky title bar (shown by JS once the H1 scrolls out of view) */
.post-sticky {
    position: fixed;
    left: 0;
    right: 0;
    top: 56px; /* JS overrides with the pinned header height */
    z-index: 95;
    background: var(--ab-bg);
    border-bottom: 1px solid var(--ab-border);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.post-sticky.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.post-sticky__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: var(--ab-container);
    margin: 0 auto;
    padding: 0.6rem 1.25rem;
}

.post-sticky__title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--ab-font-sans);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ab-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-sticky__tools {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

@media (max-width: 600px) {
    .post-sticky__tools { display: none; }
}

.post-sticky__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background: var(--ab-accent);
    transition: width 0.1s linear;
}

/* Header */
.single-post__cat {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border-radius: var(--ab-radius);
    background: var(--ab-accent);
}

.single-post__cat:hover {
    color: #fff;
    filter: brightness(1.1);
}

.single-post__title {
    margin: 0.85rem 0 1rem;
    font-family: var(--ab-font-sans);
    font-weight: 800;
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: var(--ab-fg);
}

.single-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: var(--ab-muted);
}

.single-post__author {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.single-post__avatar {
    border-radius: 50%;
}

.single-post__byline {
    font-weight: 600;
    color: var(--ab-fg);
}

.single-post__stat {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.single-post__stat svg {
    display: block;
    opacity: 0.8;
}

/* Featured image */
.single-post__media {
    margin: 1.6rem 0;
}

.single-post__media img {
    width: 100%;
    height: auto;
    border-radius: var(--ab-radius);
}

.single-post__caption {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--ab-muted);
}

/* Reader text-size control (A- / A+) — segmented pill in the meta row */
.reader-size {
    display: inline-flex;
    align-items: stretch;
    margin-left: auto; /* pushes it to the right, opposite the byline */
    border: 1px solid var(--ab-border);
    border-radius: 999px;
    overflow: hidden;
    background: var(--ab-bg);
}

.reader-size__btn {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    padding: 0.32rem 0.72rem;
    font-family: var(--ab-font-sans);
    font-weight: 700;
    line-height: 1;
    color: var(--ab-fg);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.reader-size__btn + .reader-size__btn {
    border-left: 1px solid var(--ab-border);
}

.reader-size__btn:hover {
    color: var(--ab-accent);
    background: var(--ab-pill);
}

.reader-size__btn[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
}

.reader-size__btn[aria-disabled="true"]:hover {
    color: var(--ab-fg);
    background: transparent;
}

.reader-size__btn:focus-visible {
    outline: 2px solid var(--ab-accent);
    outline-offset: -2px;
}

.reader-size__a--sm { font-size: 0.82em; }
.reader-size__a--lg { font-size: 1.08em; }
.reader-size__sign { font-size: 0.78em; }

/* Content typography — font-size scales with the reader control */
.single-post__content {
    --reader-scale: 1;
    font-size: calc(1.075rem * var(--reader-scale));
    line-height: 1.78;
    color: var(--ab-fg);
}

.single-post__content > * {
    margin: 0 0 1.3rem;
}

.single-post__content h2 {
    margin-top: 2.2rem;
    font-size: 1.45em;
    font-weight: 700;
    line-height: 1.3;
}

.single-post__content h3 {
    margin-top: 1.8rem;
    font-size: 1.2em;
    font-weight: 700;
}

.single-post__content a {
    color: var(--ab-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.single-post__content img {
    height: auto;
    border-radius: var(--ab-radius);
}

.single-post__content figure {
    margin: 1.6rem 0;
}

/* Full-width responsive video embeds (YouTube / Vimeo / …) */
.embed-responsive {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--ab-radius);
    overflow: hidden;
}

.embed-responsive iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.single-post__content .embed-responsive {
    margin: 1.7rem 0;
}

/* YouTube facade — thumbnail + play badge, loads the player on click */
.yt-facade__link {
    position: absolute;
    inset: 0;
    display: block;
    cursor: pointer;
    background: #000;
}

.yt-facade__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yt-facade__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease;
}

.yt-facade__play svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow( 0 2px 6px rgba( 0, 0, 0, 0.35 ) );
}

.yt-facade__play-bg {
    fill: #f00;
    opacity: 0.88;
    transition: opacity 0.15s ease;
}

.yt-facade__link:hover .yt-facade__play,
.yt-facade__link:focus-visible .yt-facade__play {
    transform: translate(-50%, -50%) scale(1.08);
}

.yt-facade__link:hover .yt-facade__play-bg,
.yt-facade__link:focus-visible .yt-facade__play-bg {
    opacity: 1;
}

.yt-facade__link:focus-visible {
    outline: 3px solid var(--ab-accent);
    outline-offset: 2px;
}

.yt-facade iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .yt-facade__play {
        transition: none;
    }
}

/* Any other embedded iframe stays within the column */
.single-post__content iframe {
    max-width: 100%;
}

.single-post__content .wp-block-embed {
    margin: 1.7rem 0;
}

/* Movie fact box */
.fact-box {
    margin: 1.6rem 0;
    padding: 1.15rem 1.35rem;
    border: 1px solid var(--ab-border);
    border-left: 4px solid var(--ab-accent);
    border-radius: 10px;
    background: var(--ab-pill);
}

.fact-box__title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
    font-family: var(--ab-font-sans);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ab-fg);
}

.fact-box__title svg {
    color: var(--ab-accent);
}

.fact-box__list {
    margin: 0;
    display: grid;
    gap: 0.5rem 1.25rem;
}

.fact-box__row {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 0.5rem;
    align-items: baseline;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--ab-border);
}

.fact-box__row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.fact-box__key {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--ab-muted);
}

.fact-box__val {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ab-fg);
}

/* Star rating */
.stars {
    position: relative;
    display: inline-block;
    font-size: 1.05rem;
    line-height: 1;
    letter-spacing: 1px;
    color: #d9d9d9;
    vertical-align: middle;
}

.stars__fill {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #f5a623;
}

.stars__num {
    margin-left: 0.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ab-fg);
    vertical-align: middle;
}

@media (max-width: 400px) {
    .fact-box__row {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}

.single-post__content figcaption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--ab-muted);
    text-align: center;
}

.single-post__content ul,
.single-post__content ol {
    padding-left: 1.4rem;
}

.single-post__content li {
    margin-bottom: 0.5rem;
}

.single-post__content blockquote {
    margin: 1.6rem 0;
    padding: 0.4rem 0 0.4rem 1.15rem;
    border-left: 3px solid var(--ab-accent);
    color: var(--ab-muted);
    font-style: italic;
}

/* Tags */
.single-post__tags {
    margin-top: 1.8rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.single-post__tags-label {
    font-weight: 700;
    margin-right: 0.25rem;
}

.single-post__tags a {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    background: var(--ab-pill);
    border: 1px solid var(--ab-border);
    border-radius: 999px;
    color: var(--ab-fg);
}

.single-post__tags a:hover {
    border-color: var(--ab-accent);
    color: var(--ab-accent);
}

/* -------------------------------------------------------------------------- */
/* Engagement — like + reactions                                              */
/* -------------------------------------------------------------------------- */
.post-engage {
    margin: 2.25rem 0 0;
}

.post-reactions {
    padding: 1.75rem 1.25rem;
    text-align: center;
    border: 1px solid var(--ab-border);
    border-radius: 12px;
}

.post-reactions__q {
    margin: 0 0 1.4rem;
    font-family: var(--ab-font-sans);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ab-fg);
}

.post-reactions__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.75rem, 4vw, 2.75rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.post-reactions__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 0.25rem;
    background: none;
    border: 0;
    cursor: pointer;
}

.post-reactions__pct {
    padding: 0.15rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background: var(--ab-green);
    border-radius: 999px;
}

.post-reactions__emoji {
    font-size: clamp(2.1rem, 6vw, 2.7rem);
    line-height: 1;
    transition: transform 0.15s ease;
}

.post-reactions__btn:hover .post-reactions__emoji {
    transform: scale(1.14);
}

.post-reactions__label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ab-fg);
}

.post-reactions__item--angry .post-reactions__label {
    color: var(--ab-accent);
}

.post-reactions__item.is-active .post-reactions__pct {
    background: var(--ab-accent);
}

.post-reactions__item.is-active .post-reactions__label {
    color: var(--ab-accent);
}

.post-reactions__btn:focus-visible {
    outline: 2px solid var(--ab-accent);
    outline-offset: 3px;
    border-radius: var(--ab-radius);
}

/* -------------------------------------------------------------------------- */
/* Comments                                                                   */
/* -------------------------------------------------------------------------- */
.comments-area {
    margin: 2.5rem 0 0;
    padding-top: 2rem;
    border-top: 1px solid var(--ab-border);
}

.comments-title {
    margin: 0 0 1.5rem;
    font-family: var(--ab-font-sans);
    font-size: 1.35rem;
    font-weight: 700;
}

.comment-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.comment-list .children {
    margin: 1rem 0 0 1.4rem;
    padding-left: 1.1rem;
    border-left: 2px solid var(--ab-border);
    list-style: none;
}

.abfilmy-comment {
    margin-bottom: 1.4rem;
}

.comment-body {
    display: flex;
    gap: 0.85rem;
}

.comment-avatar img {
    border-radius: 50%;
}

.comment-main {
    flex: 1;
    min-width: 0;
}

.comment-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.comment-author {
    font-weight: 700;
    color: var(--ab-fg);
}

.comment-date {
    font-size: 0.8rem;
    color: var(--ab-muted);
}

.comment-content {
    margin: 0.35rem 0 0.5rem;
    line-height: 1.65;
}

.comment-awaiting-moderation {
    font-size: 0.85rem;
    color: var(--ab-muted);
}

.comment-actions .comment-reply-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ab-accent);
}

/* Comment form */
.comment-respond {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--ab-pill);
    border: 1px solid var(--ab-border);
    border-radius: 12px;
}

.comment-reply-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
}

.comment-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
}

/* Comment textarea + notes + checkbox + submit span the full width */
.comment-form-comment,
.comment-notes,
.comment-form-cookies-consent,
.comment-form-notify,
.comment-form .form-submit {
    grid-column: 1 / -1;
}

@media (max-width: 520px) {
    .comment-form {
        grid-template-columns: 1fr;
    }
}

.comment-form p {
    margin: 0;
}

.comment-form label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ab-fg);
}

.comment-form .required {
    color: var(--ab-accent);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    font: inherit;
    color: var(--ab-fg);
    background: var(--ab-bg);
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.comment-form textarea {
    min-height: 130px;
    resize: vertical;
}

.comment-form ::placeholder {
    color: var(--ab-muted);
    opacity: 0.75;
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--ab-accent);
    box-shadow: 0 0 0 3px rgba(214, 0, 28, 0.12);
}

.comment-form__hint {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--ab-muted);
}

.comment-form .form-submit {
    margin: 0;
}

.comment-form input[type="submit"],
.comment-submit {
    padding: 0.75rem 1.6rem;
    font-family: var(--ab-font-sans);
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: var(--ab-accent);
    border: 0;
    border-radius: var(--ab-radius);
    cursor: pointer;
    transition: background 0.2s ease;
}

.comment-form input[type="submit"]:hover,
.comment-submit:hover {
    background: var(--ab-accent-hover);
}

/* Honeypot — visually removed, kept in the accessibility tree off-screen */
.abfilmy-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* Reply-notification opt-in checkbox */
.comment-form-notify {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--ab-muted);
}

.comment-form-notify input {
    width: auto;
}

/* Collapse long threads behind a "show more" */
.comment-list.is-collapsed > .abfilmy-comment:nth-child(n+6) {
    display: none;
}

.comments-loadmore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.25rem;
    padding: 0.6rem 1.3rem;
    font-family: var(--ab-font-sans);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ab-fg);
    background: var(--ab-pill);
    border: 1px solid var(--ab-border);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.comments-loadmore:hover {
    color: var(--ab-accent);
    border-color: var(--ab-accent);
}

/* Comment-count link near the reactions */
.post-engage__comments {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.25rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ab-muted);
}

.post-engage__comments:hover {
    color: var(--ab-accent);
}

/* Back-to-top floating button */
.back-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: #fff;
    background: var(--ab-accent);
    border: 0;
    border-radius: 50%;
    box-shadow: var(--ab-shadow-pop);
    cursor: pointer;
    opacity: 0;
    transform: translateY(1rem);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.back-to-top:hover {
    background: var(--ab-accent-hover);
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top {
        transition: opacity 0.2s ease;
        transform: none;
    }
}

@media (max-width: 480px) {
    .comment-list .children {
        margin-left: 0.6rem;
        padding-left: 0.7rem;
    }
    .post-reactions {
        padding: 1.25rem 0.75rem;
    }
}

/* -------------------------------------------------------------------------- */
/* Single-post extras — breadcrumbs, share, author, related, prev/next        */
/* -------------------------------------------------------------------------- */

/* Breadcrumbs */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
    font-size: 0.82rem;
    color: var(--ab-muted);
}

.breadcrumbs a {
    color: var(--ab-muted);
}

.breadcrumbs a:hover {
    color: var(--ab-accent);
}

.breadcrumbs__sep {
    opacity: 0.6;
}

.breadcrumbs__current {
    color: var(--ab-fg);
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Share row */
.post-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.8rem;
}

.post-share__label {
    margin-right: 0.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ab-fg);
}

.post-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #fff;
    background: var(--ab-fg);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.post-share__btn:hover {
    transform: translateY(-2px);
    color: #fff;
}

.post-share__btn--fb   { background: #1877f2; }
.post-share__btn--x    { background: #000; }
.post-share__btn--wa   { background: #25d366; }
.post-share__btn--copy { background: var(--ab-fg); }
.post-share__btn--native { background: var(--ab-green); }

/* Keep the native-share button hidden until JS confirms navigator.share exists
   (the display rule above would otherwise override the [hidden] attribute). */
.post-share__btn[hidden] { display: none; }

/* Compact share inside the sticky bar */
.post-share--sticky {
    margin: 0;
    gap: 0.4rem;
}

.post-share--sticky .post-share__btn {
    width: 30px;
    height: 30px;
}

.post-share--sticky .post-share__btn svg {
    width: 15px;
    height: 15px;
}

/* Author box */
.author-box {
    display: flex;
    gap: 1.1rem;
    margin-top: 2.5rem;
    padding: 1.5rem;
    background: var(--ab-pill);
    border-radius: 12px;
}

.author-box__img {
    border-radius: 50%;
}

.author-box__eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ab-muted);
}

.author-box__name {
    display: inline-block;
    margin: 0.15rem 0 0.4rem;
    font-family: var(--ab-font-sans);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ab-fg);
}

.author-box__name:hover {
    color: var(--ab-accent);
}

.author-box__bio {
    margin: 0 0 0.6rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ab-fg);
}

.author-box__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ab-accent);
}

.author-box__link:hover svg {
    transform: translateX(3px);
}

.author-box__link svg {
    transition: transform 0.2s ease;
}

/* Prev / Next navigation */
.post-nav {
    margin-top: 2.5rem;
}

.post-nav .nav-links {
    display: flex;
    gap: 1rem;
}

.post-nav .nav-previous,
.post-nav .nav-next {
    flex: 1 1 0;
    min-width: 0;
}

.post-nav .nav-next {
    text-align: right;
}

.post-nav a {
    display: block;
    padding: 1rem 1.15rem;
    border: 1px solid var(--ab-border);
    border-radius: 10px;
    transition: border-color 0.2s ease;
}

.post-nav a:hover {
    border-color: var(--ab-accent);
}

.post-nav__dir {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ab-accent);
    margin-bottom: 0.25rem;
}

.post-nav__label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ab-fg);
}

/* Related posts */
.related {
    margin-top: 2.75rem;
}

.related__title {
    margin: 0 0 1.25rem;
    font-family: var(--ab-font-sans);
    font-size: 1.35rem;
    font-weight: 700;
}

.related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.related-card__thumb {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--ab-radius);
    background: var(--ab-pill);
}

.related-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.related-card:hover .related-card__thumb img {
    transform: scale(1.05);
}

.related-card__cat {
    display: inline-block;
    margin: 0.7rem 0 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.related-card__title {
    margin: 0 0 0.4rem;
    font-family: var(--ab-font-sans);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.related-card__title a {
    color: var(--ab-fg);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-card__title a:hover {
    color: var(--ab-accent);
}

.related-card__date {
    font-size: 0.78rem;
    color: var(--ab-muted);
}

/* Copy toast */
.ab-toast {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    z-index: 200;
    transform: translate(-50%, 1rem);
    padding: 0.7rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    background: var(--ab-fg);
    border-radius: 999px;
    box-shadow: var(--ab-shadow-pop);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.ab-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Comment empty state */
.comments-empty {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
    color: var(--ab-fg);
    font-size: 1.1rem;
    font-weight: 700;
}

.comments-empty svg {
    color: var(--ab-accent);
    flex: none;
    width: 26px;
    height: 26px;
}

@media (max-width: 640px) {
    .related__grid {
        grid-template-columns: 1fr;
    }
    .post-nav .nav-links {
        flex-direction: column;
    }
    .post-nav .nav-next {
        text-align: left;
    }
    .author-box {
        flex-direction: column;
        gap: 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-share__btn:hover,
    .related-card:hover .related-card__thumb img,
    .author-box__link:hover svg {
        transform: none;
    }
}

/* -------------------------------------------------------------------------- */
/* Post sidebar (aside) — posters widget + Trending + More                    */
/* -------------------------------------------------------------------------- */
.post-layout__aside {
    min-width: 0;
    position: sticky;
    top: 6.5rem;
}

.post-aside__widgets {
    margin-bottom: 1.75rem;
}

.aside-widget + .aside-widget {
    margin-top: 1.5rem;
}

.aside-widget img {
    border-radius: var(--ab-radius);
}

.aside-block {
    margin-bottom: 1.75rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--ab-border);
    border-radius: 10px;
}

.aside-block__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.9rem;
    padding-bottom: 0.6rem;
    font-family: var(--ab-font-sans);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ab-fg);
    border-bottom: 2px solid var(--ab-fg);
}

.aside-block--trending .aside-block__title {
    color: var(--ab-accent);
    border-bottom-color: var(--ab-accent);
}

.aside-block--trending .aside-block__title svg {
    color: var(--ab-accent);
}

/* Ranked trending list */
.aside-rank {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.aside-rank__item {
    display: flex;
    gap: 0.7rem;
    align-items: baseline;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--ab-border);
}

.aside-rank__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.aside-rank__num {
    flex: none;
    font-family: var(--ab-font-sans);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ab-accent);
    opacity: 0.55;
}

.aside-rank__link {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ab-fg);
}

.aside-rank__link:hover {
    color: var(--ab-accent);
}

/* More stories (thumb + title) */
.aside-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.aside-list__item {
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--ab-border);
}

.aside-list__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.aside-list__link {
    display: flex;
    gap: 0.7rem;
    align-items: center;
}

.aside-list__thumb {
    flex: none;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: var(--ab-radius);
    background: var(--ab-pill);
}

.aside-list__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aside-list__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ab-fg);
}

.aside-list__link:hover .aside-list__title {
    color: var(--ab-accent);
}

.aside-list__date {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--ab-muted);
}

/* Stack the sidebar under the content on narrower viewports */
@media (max-width: 900px) {
    .post-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .post-layout__aside {
        position: static;
        top: auto;
    }
}

/* -------------------------------------------------------------------------- */
/* Listings — archive, search, 404 + post cards                               */
/* -------------------------------------------------------------------------- */
.listing {
    padding-top: 0.5rem;
}

.listing__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid var(--listing-accent, var(--ab-fg));
}

.listing__header-main {
    min-width: 0;
}

.listing__count {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ab-muted);
}

.listing__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
    flex: none;
}

.listing__aside .listing__count {
    margin: 0;
}

.listing__controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Archive grid sits in the 70% column, so use two columns — but never in
   list view (:not keeps this from overriding .listing__grid--list). */
.post-layout__main .listing__grid:not(.listing__grid--list) {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 560px) {
    .post-layout__main .listing__grid:not(.listing__grid--list) {
        grid-template-columns: 1fr;
    }
}

.listing__subtitle {
    margin: 2.5rem 0 1.25rem;
    padding-bottom: 0.6rem;
    font-family: var(--ab-font-sans);
    font-size: 1.25rem;
    font-weight: 700;
    border-bottom: 2px solid var(--ab-fg);
}

/* Sort control */
.sort-control {
    display: inline-flex;
    background: var(--ab-pill);
    border: 1px solid var(--ab-border);
    border-radius: 999px;
    padding: 2px;
}

.sort-control__btn {
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ab-muted);
    border-radius: 999px;
}

.sort-control__btn:hover {
    color: var(--ab-fg);
}

.sort-control__btn.is-active {
    color: #fff;
    background: var(--ab-accent);
}

/* Load more */
.load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.load-more {
    padding: 0.75rem 1.8rem;
    font-family: var(--ab-font-sans);
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: var(--ab-accent);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.load-more:hover {
    background: var(--ab-accent-hover);
}

.load-more.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

.load-more.is-loading .load-more__text::after {
    content: "…";
}

/* Author archive card */
.author-card {
    display: flex;
    gap: 1.1rem;
    align-items: center;
    margin-bottom: 1.75rem;
    padding: 1.25rem 1.4rem;
    background: var(--ab-pill);
    border-radius: 12px;
}

.author-card__img {
    border-radius: 50%;
    flex: none;
}

.author-card__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ab-muted);
}

.author-card__name {
    margin: 0.1rem 0 0.35rem;
    font-family: var(--ab-font-sans);
    font-size: 1.3rem;
    font-weight: 800;
}

.author-card__bio {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ab-fg);
}

/* Category sub-filter dropdown */
.subfilter-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

.subfilter-dd {
    position: relative;
}

.subfilter-dd__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    font-family: var(--ab-font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ab-fg);
    background: var(--ab-pill);
    border: 1px solid var(--ab-border);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.subfilter-dd__toggle:hover {
    border-color: var(--ab-accent);
    color: var(--ab-accent);
}

.subfilter-dd__chevron {
    transition: transform 0.2s ease;
}

.subfilter-dd__toggle[aria-expanded="true"] .subfilter-dd__chevron {
    transform: rotate(180deg);
}

.subfilter-dd__menu {
    position: absolute;
    right: 0;
    top: 100%; /* flush with the toggle — no dead zone for hover */
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 210px;
    max-height: 340px;
    overflow-y: auto;
    margin-top: 0.4rem;
    padding: 0.4rem;
    background: var(--ab-bg);
    border: 1px solid var(--ab-border);
    border-radius: 10px;
    box-shadow: var(--ab-shadow-pop);
}

/* Invisible bridge across the visual gap so the menu stays open while the
   pointer travels from the toggle to the menu. */
.subfilter-dd__menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.4rem;
    height: 0.4rem;
}

/* The [hidden] attribute must win over the display:flex above. */
.subfilter-dd__menu[hidden] {
    display: none;
}

/* Open on hover / keyboard focus on hover-capable (desktop) devices. */
@media (hover: hover) and (pointer: fine) {
    .subfilter-dd:hover .subfilter-dd__menu,
    .subfilter-dd:focus-within .subfilter-dd__menu {
        display: flex;
    }
    .subfilter-dd:hover .subfilter-dd__chevron,
    .subfilter-dd:focus-within .subfilter-dd__chevron {
        transform: rotate(180deg);
    }
}

.subfilter-dd__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.65rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ab-fg);
    border-radius: 6px;
}

.subfilter-dd__item:hover {
    color: var(--ab-accent);
    background: var(--ab-pill);
}

/* Popular searches (reuse .hero__pill styling) */
.popular-searches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.popular-searches__label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ab-muted);
    margin-right: 0.25rem;
}

/* Highlighted search terms */
mark {
    background: rgba(214, 0, 28, 0.16);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

/* Grid / List view toggle */
.view-toggle {
    display: inline-flex;
    flex: none;
    background: var(--ab-bg);
    border: 1px solid var(--ab-border);
    border-radius: 999px;
    overflow: hidden;
}

.view-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 36px;
    color: var(--ab-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.view-toggle__btn + .view-toggle__btn {
    border-left: 1px solid var(--ab-border);
}

.view-toggle__btn:hover {
    color: var(--ab-fg);
}

.view-toggle__btn.is-active {
    color: #fff;
    background: var(--ab-accent);
}

.view-toggle__btn:focus-visible {
    outline: 2px solid var(--ab-accent);
    outline-offset: -2px;
}

.listing__title {
    margin: 0;
    font-family: var(--ab-font-sans);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ab-fg);
}

.listing__desc {
    margin-top: 0.5rem;
    color: var(--ab-muted);
    font-size: 0.95rem;
}

.listing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.listing__empty {
    padding: 2rem 0;
    font-size: 1.05rem;
    color: var(--ab-muted);
}

.listing__empty--search {
    max-width: 460px;
}

.listing__empty--search p {
    margin-bottom: 1rem;
}

/* Post card */
.card {
    display: flex;
    flex-direction: column;
}

.card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--ab-radius);
    background: var(--ab-pill);
}

.card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.card:hover .card__thumb img {
    transform: scale(1.05);
}

.card__ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--ab-font-sans);
    font-weight: 800;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, var(--ph, var(--ab-accent)) 0%, #0b0b0f 120%);
}

.card__ph-ab {
    color: rgba(255, 255, 255, 0.55);
}

.card__play {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #fff;
    background: rgba(17, 17, 17, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
}

.card__body {
    padding-top: 0.7rem;
}

.card__cat {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.card__title {
    margin: 0.35rem 0 0.4rem;
    font-family: var(--ab-font-sans);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
}

.card__title a {
    color: var(--ab-fg);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__title a:hover {
    color: var(--ab-accent);
}

.card__excerpt {
    margin: 0 0 0.6rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ab-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--ab-muted);
}

.card__author {
    font-weight: 600;
    color: var(--ab-fg);
}

.card__stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--ab-muted);
}

.card__stat {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
}

.card__stat svg {
    display: block;
    opacity: 0.8;
}

/* ==========================================================================
   Featured-story banner (top of archives when a post is flagged Featured)
   ========================================================================== */
.featured-story {
    --fs-accent: var(--ab-accent);
    margin: 0 0 2rem;
}

.featured-story__top {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.featured-story__eyebrow {
    flex: none;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fs-accent);
}

.featured-story__rule {
    flex: 1;
    height: 1px;
    background: var(--ab-border);
}

.featured-story__date {
    flex: none;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ab-muted);
}

.featured-story__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    background: var(--ab-surface, #fff);
    border: 1px solid var(--ab-border);
    border-radius: calc(var(--ab-radius) * 1.5);
    overflow: hidden;
    color: inherit;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.featured-story__card:hover {
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.1);
}

.featured-story__media {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    background: var(--ab-border);
}

.featured-story__media img,
.featured-story__media .home-section__ph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.featured-story__card:hover .featured-story__media img {
    transform: scale(1.04);
}

.featured-story__cat {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fs-accent);
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.featured-story__body {
    display: flex;
    flex-direction: column;
    padding: 2rem 2.25rem;
}

.featured-story__rt {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ab-muted);
}

.featured-story__title {
    margin: 0.9rem 0 0;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ab-fg);
}

.featured-story__card:hover .featured-story__title {
    color: var(--ab-accent);
}

.featured-story__excerpt {
    margin: 0.9rem 0 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ab-muted);
}

.featured-story__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ab-border);
}

.featured-story__author {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}

.featured-story__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
}

.featured-story__author-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.featured-story__author-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ab-fg);
}

.featured-story__author-date {
    font-size: 0.78rem;
    color: var(--ab-muted);
}

.featured-story__cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ab-fg);
}

.featured-story__cta-arrow {
    transition: transform 0.2s ease;
}

.featured-story__card:hover .featured-story__cta-arrow {
    transform: translateX(3px);
}

.featured-story__card:hover .featured-story__cta {
    color: var(--ab-accent);
}

@media (max-width: 680px) {
    .featured-story__card {
        grid-template-columns: 1fr;
    }

    .featured-story__media {
        min-height: 200px;
        aspect-ratio: 16 / 9;
    }

    .featured-story__body {
        padding: 1.35rem 1.35rem 1.5rem;
    }

    .featured-story__foot {
        flex-wrap: wrap;
    }
}

/* Featured lead card — first card spans full width on page 1 (grid view only) */
.listing__grid--featured:not(.listing__grid--list) .card:first-child {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--ab-border);
}

.listing__grid--featured:not(.listing__grid--list) .card:first-child .card__thumb {
    width: 55%;
    flex: none;
    aspect-ratio: 16 / 9;
}

.listing__grid--featured:not(.listing__grid--list) .card:first-child .card__body {
    flex: 1;
    min-width: 0;
    padding-top: 0;
}

.listing__grid--featured:not(.listing__grid--list) .card:first-child .card__title {
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
}

.listing__grid--featured:not(.listing__grid--list) .card:first-child .card__excerpt {
    -webkit-line-clamp: 3;
    font-size: 0.98rem;
}

@media (max-width: 640px) {
    .listing__grid--featured:not(.listing__grid--list) .card:first-child {
        flex-direction: column;
        gap: 0.7rem;
        align-items: stretch;
    }
    .listing__grid--featured:not(.listing__grid--list) .card:first-child .card__thumb {
        width: 100%;
        aspect-ratio: 16 / 10;
    }
}

/* List view — single column, horizontal cards (wins over the responsive
   grid-column rules below thanks to the extra class in the selector) */
.listing__grid--list {
    grid-template-columns: 1fr;
    gap: 1rem;
}

.listing__grid--list .card {
    flex-direction: row;
    gap: 1.15rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ab-border);
}

.listing__grid--list .card__thumb {
    width: 240px;
    flex: none;
    aspect-ratio: 16 / 10;
}

.listing__grid--list .card__body {
    flex: 1;
    min-width: 0;
    padding-top: 0;
}

.listing__grid--list .card__title {
    font-size: 1.2rem;
}

.listing__grid--list .card__excerpt {
    -webkit-line-clamp: 3;
}

@media (max-width: 560px) {
    .listing__grid--list .card {
        gap: 0.8rem;
    }
    .listing__grid--list .card__thumb {
        width: 120px;
    }
    .listing__grid--list .card__title {
        font-size: 1rem;
    }
    .listing__grid--list .card__excerpt {
        display: none;
    }
}

/* Pagination */
.pagination {
    margin-top: 2.5rem;
}

.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 0.75rem;
    font-weight: 600;
    color: var(--ab-fg);
    background: var(--ab-bg);
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius);
}

.pagination a.page-numbers:hover {
    border-color: var(--ab-accent);
    color: var(--ab-accent);
}

.pagination .page-numbers.current {
    color: #fff;
    background: var(--ab-accent);
    border-color: var(--ab-accent);
}

.pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
}

/* Search form */
.search-form {
    display: flex;
    gap: 0.5rem;
    max-width: 460px;
}

.search-form__field {
    flex: 1;
    padding: 0.7rem 0.9rem;
    font: inherit;
    color: var(--ab-fg);
    background: var(--ab-bg);
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius);
}

.search-form__field:focus {
    outline: none;
    border-color: var(--ab-accent);
    box-shadow: 0 0 0 3px rgba(214, 0, 28, 0.12);
}

.search-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    color: #fff;
    background: var(--ab-accent);
    border: 0;
    border-radius: var(--ab-radius);
    cursor: pointer;
}

.search-form__submit:hover {
    background: var(--ab-accent-hover);
}

/* 404 */
.error-404 {
    max-width: 640px;
    margin: 0 auto;
    padding: 2rem 0 3rem;
    text-align: center;
}

.error-404__code {
    margin: 0;
    font-family: var(--ab-font-sans);
    font-size: clamp(4rem, 14vw, 7rem);
    font-weight: 900;
    line-height: 1;
    color: var(--ab-accent);
}

.error-404__title {
    margin: 0.25rem 0 0.6rem;
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 800;
}

.error-404__text {
    margin: 0 auto 1.5rem;
    max-width: 460px;
    color: var(--ab-muted);
}

.error-404__search {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.error-404__cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}

.error-404__recent {
    text-align: left;
    margin-top: 2rem;
}

.error-404__recent .listing__title {
    font-size: 1.25rem;
    margin-bottom: 1.1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--ab-fg);
}

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

@media (max-width: 560px) {
    .listing__grid {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */
.site-footer {
    position: relative;
    background:
        radial-gradient(1200px 400px at 80% 0%, rgba(214, 0, 28, 0.05), transparent 60%),
        linear-gradient(180deg, #fafafa 0%, #f1f1f1 100%);
    color: var(--ab-fg);
    margin-top: 4.5rem;
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ab-accent) 0%, var(--ab-accent) 38%, var(--ab-fg) 38%, var(--ab-fg) 100%);
}

.site-footer__inner {
    max-width: var(--ab-container);
    margin: 0 auto;
    padding: 4rem 1.5rem 0;
    position: relative;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.35fr;
    gap: 2.5rem;
    padding-bottom: 3rem;
}

/* Section titles ----------------------------------------------------------- */
.footer-col__eyebrow {
    display: inline-block;
    font-family: var(--ab-font-sans);
    font-size: 0.78rem;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ab-accent);
    margin: 0 0 1.2rem;
    line-height: 1.2;
    position: relative;
    padding-left: 1.8rem;
}

.footer-col__eyebrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1.3rem;
    height: 2px;
    background: var(--ab-accent);
}

.footer-col__eyebrow--small {
    margin: 1.75rem 0 0.7rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--ab-muted);
}

.footer-col__eyebrow--small::before { background: var(--ab-muted); }

.footer-col__title {
    margin: 0 0 1.35rem;
    font-family: var(--ab-font-serif);
    font-size: 1.6rem;
    font-weight: 800;
    font-style: normal;
    color: var(--ab-fg);
    letter-spacing: -0.015em;
    line-height: 1.15;
    position: relative;
    padding-bottom: 0.85rem;
}

.footer-col__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38px;
    height: 3px;
    background: var(--ab-accent);
}

/* Brand column ------------------------------------------------------------- */
.footer-brand {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 1rem;
    line-height: 1;
}

.footer-brand__text {
    font-family: var(--ab-font-serif);
    font-weight: 900;
    font-style: normal;
    font-size: 2.75rem;
    letter-spacing: -0.02em;
    color: var(--ab-accent);
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
}

.footer-brand__mark { color: var(--ab-accent); }
.footer-brand__rest { color: var(--ab-fg); }

.footer-brand .custom-logo,
.footer-brand .custom-logo-link img {
    max-height: 64px;
    width: auto;
}

.footer-tagline {
    margin: 0;
    max-width: 38ch;
    color: var(--ab-muted);
    font-size: 1rem;
    line-height: 1.65;
    font-style: italic;
    border-left: 3px solid var(--ab-accent);
    padding: 0.15rem 0 0.15rem 1rem;
}

.footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.footer-contact__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--ab-fg);
    font-size: 0.95rem;
}

.footer-contact__item svg {
    flex: 0 0 auto;
    color: var(--ab-accent);
    width: 20px;
    height: 20px;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.footer-contact__item a {
    color: var(--ab-fg);
    text-decoration: none;
    transition: color 150ms ease;
    font-weight: 500;
}

.footer-contact__item a:hover {
    color: var(--ab-accent);
}

/* Link list (Categories) --------------------------------------------------- */
.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.footer-links--grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
}

.footer-links a {
    color: var(--ab-fg);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 150ms ease, transform 150ms ease;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    line-height: 1.3;
}

.footer-links__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ab-fg);
    flex: 0 0 auto;
    transition: background-color 150ms ease, transform 150ms ease;
}

.footer-links a:hover {
    color: var(--ab-accent);
    transform: translateX(2px);
}

.footer-links a:hover .footer-links__dot {
    background: var(--ab-accent);
    transform: scale(1.6);
}

/* Socials ------------------------------------------------------------------ */
.footer-socials__intro {
    margin: 0 0 1.1rem;
    color: var(--ab-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    max-width: 28ch;
}

.footer-socials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.footer-social {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.8rem 0.4rem 0.4rem;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    color: var(--ab-fg);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.footer-social__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ab-fg);
    color: #fff;
    flex: 0 0 auto;
    transition: background-color 180ms ease;
}

.footer-social__icon svg {
    display: block;
    width: 12px;
    height: 12px;
}

.footer-social:hover {
    color: #fff;
    background: var(--ab-fg);
    border-color: var(--ab-fg);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.footer-social:hover .footer-social__icon {
    background: var(--ab-accent);
}

.footer-social--facebook:hover { background: #1877f2; border-color: #1877f2; }
.footer-social--youtube:hover  { background: #ff0000; border-color: #ff0000; }
.footer-social--x:hover        { background: #000;    border-color: #000;    }

.footer-social--facebook:hover .footer-social__icon,
.footer-social--youtube:hover .footer-social__icon,
.footer-social--x:hover .footer-social__icon {
    background: rgba(255, 255, 255, 0.18);
}

/* Bottom copyright bar ----------------------------------------------------- */
.site-footer__bottom {
    border-top: 1px solid #e0e0e0;
    padding: 1.5rem 1.25rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
}

.site-footer__copyright {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ab-muted);
    letter-spacing: 0.04em;
}

.site-footer__copyright::before {
    content: "★";
    color: var(--ab-accent);
    margin-right: 0.55rem;
    font-size: 0.75rem;
    vertical-align: 1px;
}

@media (max-width: 980px) {
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
    .footer-col--brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .site-footer__inner { padding: 3rem 1.25rem 0; }
    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
    .footer-links--grid { grid-template-columns: 1fr; }
    .footer-brand__text { font-size: 2.25rem; }
    .footer-col__title { font-size: 1.4rem; }
}

/* News layout: big lead + 2x2 grid */
.home-lead-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1.75rem 2rem;
    align-items: start;
}

.home-lead-grid__lead-thumb {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--ab-radius);
    background: #000;
    margin-bottom: 0.85rem;
}

.home-lead-grid__lead-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.home-lead-grid__lead:hover .home-lead-grid__lead-thumb img {
    transform: scale(1.03);
}

.home-lead-grid__lead-thumb .card__play {
    position: absolute;
    bottom: 0.6rem;
    right: 0.6rem;
}

.home-lead-grid__lead-title {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.home-lead-grid__lead-title a {
    color: var(--ab-fg);
}

.home-lead-grid__lead-title a:hover {
    color: var(--sec, var(--ab-accent));
}

.home-lead-grid__lead-excerpt {
    margin: 0 0 0.7rem;
    color: var(--ab-muted);
    font-size: 0.98rem;
    line-height: 1.6;
}

.home-lead-grid__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.1rem;
}

.home-lead-grid__card {
    min-width: 0;
}

.home-lead-grid__card-thumb {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--ab-radius);
    background: #000;
    margin-bottom: 0.55rem;
}

.home-lead-grid__card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-lead-grid__card-thumb .card__play {
    position: absolute;
    bottom: 0.4rem;
    right: 0.4rem;
}

.home-lead-grid__card-title {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    line-height: 1.3;
    font-weight: 600;
}

.home-lead-grid__card-title a {
    color: var(--ab-fg);
}

.home-lead-grid__card-title a:hover {
    color: var(--sec, var(--ab-accent));
}

.home-lead-grid__card-date {
    font-size: 0.75rem;
    color: var(--ab-muted);
}

@media (max-width: 781px) {
    .home-lead-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 430px) {
    .home-lead-grid__cards {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------- */
/* Gallery layout: full-bleed dark band, subcategory tabs, featured + grid     */
/* -------------------------------------------------------------------------- */

/* Full-width dark band. The section stays in normal flow (so its content keeps
   aligning with the other sections' container). A 100vw box-shadow paints the
   dark background edge-to-edge; clip-path trims it to the band's own height.
   box-shadow never contributes to scroll width, so there is no horizontal
   overflow and the sticky header is untouched. */
.home-section--gallery {
    position: relative;
    margin: 2.5rem auto;
    padding: 2.75rem 1rem;
    color: #fff;
    background: #14161c;
    box-shadow: 0 0 0 100vw #14161c;
    clip-path: inset(0 -100vw);
}

/* Dark-theme chrome overrides */
.home-section--gallery .home-section__title a,
.home-section--gallery .home-section__see-all {
    color: #fff;
}

/* Gallery "See all" keeps its colour on hover; only the arrow animates. */
.home-section--gallery .home-section__see-all:hover,
.home-section--gallery .home-section__see-all:focus-visible {
    color: #fff;
}

.home-section--gallery .home-section__header {
    border-bottom-color: rgba(255, 255, 255, 0.16);
}

.home-section--gallery .home-section__header::before {
    background: var(--ab-accent);
}

.home-section--gallery .home-gallery__card-title {
    color: #fff;
}

.home-section--gallery .home-gallery__card-meta {
    color: rgba(255, 255, 255, 0.55);
}

/* Subcategory tabs */
.home-gallery-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.home-gallery-tabs__tab {
    appearance: none;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.55rem 1.15rem;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.home-gallery-tabs__tab:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

.home-gallery-tabs__tab.is-active {
    color: #fff;
    background: var(--ab-accent);
    border-color: transparent;
}

.home-gallery-tabs__tab:focus-visible {
    outline: 2px solid var(--ab-accent);
    outline-offset: 2px;
}

.home-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem 2rem;
    align-items: start;
}

/* Featured (overlay) */
.home-gallery__featured-link {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--ab-radius);
    background: #000;
    color: #fff;
}

.home-gallery__featured-media,
.home-gallery__featured-media img,
.home-gallery__featured-media .home-section__ph {
    display: block;
    width: 100%;
    height: 100%;
}

.home-gallery__featured-media img {
    object-fit: cover;
    transition: transform 0.4s ease;
}

.home-gallery__featured-link:hover .home-gallery__featured-media img {
    transform: scale(1.04);
}

.home-gallery__featured-overlay {
    position: absolute;
    inset: auto 0 0 0;
    display: block;
    padding: 2.75rem 1.1rem 1.1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
}

.home-gallery__featured-title {
    margin: 0;
    font-size: clamp(1.15rem, 2vw, 1.6rem);
    line-height: 1.2;
    font-weight: 700;
    color: #fff;
}

/* 2x2 grid */
.home-gallery__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
}

.home-gallery__card-thumb {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--ab-radius);
    background: var(--ab-border);
    margin-bottom: 0.6rem;
}

.home-gallery__card-thumb img,
.home-gallery__card-thumb .home-section__ph {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-gallery__card-thumb img {
    transition: transform 0.4s ease;
}

.home-gallery__card-thumb:hover img {
    transform: scale(1.05);
}

.home-gallery__card-title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--ab-fg);
}

.home-gallery__card-title a {
    color: inherit;
    text-decoration: none;
}

.home-gallery__card-title a:hover {
    color: var(--ab-accent);
}

.home-gallery__card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--ab-muted);
}

@media (max-width: 781px) {
    .home-gallery {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 430px) {
    .home-gallery__cards {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------- */
/* News layout: featured + list (70%) + News Sidebar widget area (30%)       */
/* -------------------------------------------------------------------------- */
.home-news--has-aside {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 2rem;
    align-items: start;
}

/* With a populated News Sidebar the whole section becomes a 70/30 grid: the
   header and news content stack in the 70% column while the widget aside spans
   the full height of the 30% column, so the widget's top aligns with the header
   / "See all" instead of starting below it. `display: contents` on .home-news
   promotes its main/aside children into the section grid. */
@media (min-width: 782px) {
    .home-section--aside {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "header  aside"
            "content aside"
            ".       aside";
        column-gap: 2rem;
        align-items: start;
    }

    .home-section--aside .home-section__header {
        grid-area: header;
    }

    .home-section--aside .home-news {
        display: contents;
    }

    .home-section--aside .home-news__main {
        grid-area: content;
    }

    .home-section--aside .home-news__aside {
        grid-area: aside;
    }
}

.home-news__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem 2rem;
    align-items: start;
}

/* Featured (overlay) */
.home-news__featured-link {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--ab-radius);
    background: #000;
    color: #fff;
}

.home-news__featured-media,
.home-news__featured-media img,
.home-news__featured-media .home-section__ph {
    display: block;
    width: 100%;
    height: 100%;
}

.home-news__featured-media img {
    object-fit: cover;
    transition: transform 0.4s ease;
}

.home-news__featured-link:hover .home-news__featured-media img {
    transform: scale(1.04);
}

.home-news__featured-date {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 999px;
}

.home-news__featured-link .card__play {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
}

.home-news__featured-overlay {
    position: absolute;
    inset: auto 0 0 0;
    display: block;
    padding: 2.75rem 1.1rem 1.1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
}

.home-news__featured-title {
    margin: 0 0 0.7rem;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    line-height: 1.2;
    font-weight: 700;
    color: #fff;
}

.home-news__featured-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.92);
}

.home-news__featured-author {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.home-news__featured-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: block;
}

.home-news__featured-comments {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* Headline list (text left, thumb right) */
.home-news__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-news__item + .home-news__item {
    border-top: 1px solid var(--ab-border);
}

.home-news__item-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: 0.9rem;
    align-items: start;
    padding: 0.9rem 0;
}

.home-news__item:first-child .home-news__item-link {
    padding-top: 0;
}

.home-news__item-title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--ab-fg);
}

.home-news__item-link:hover .home-news__item-title {
    color: var(--ab-accent);
}

.home-news__item-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--ab-muted);
}

.home-news__item-date {
    font-size: 0.75rem;
    color: var(--ab-muted);
}

.home-news__item-thumb,
.home-news__item-thumb img,
.home-news__item-thumb .home-section__ph {
    display: block;
    width: 100%;
    height: 100%;
}

.home-news__item-thumb {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--ab-radius);
    background: #000;
}

.home-news__item-thumb img {
    object-fit: cover;
}

/* Widget aside */
.home-news__aside {
    display: grid;
    gap: 1.5rem;
    align-content: start;
}

/* Tighten widget spacing (match the other sidebars): the grid gap is the only
   space between widgets, and block-image figures inside a widget don't add their
   own margins — so multiple items in one widget sit close together. */
.home-news__aside .aside-widget + .aside-widget {
    margin-top: 0;
}

.home-news__aside figure {
    margin: 0;
}

@media (max-width: 781px) {
    .home-news--has-aside {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .home-news__inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* -------------------------------------------------------------------------- */
/* Home layout: Article grid (compact square-thumb + title cards)             */
/* -------------------------------------------------------------------------- */

.home-articles__main {
    min-width: 0;
}

.home-articles__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem 1.75rem;
}

.home-articles__item {
    min-width: 0;
}

.home-articles__link {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
}

.home-articles__thumb {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--ab-radius);
    background: #000;
}

.home-articles__thumb img,
.home-articles__thumb .home-section__ph {
    display: block;
    width: 100%;
    height: 100%;
}

.home-articles__thumb img {
    object-fit: cover;
    transition: transform 0.3s ease;
}

.home-articles__link:hover .home-articles__thumb img {
    transform: scale(1.05);
}

.home-articles__thumb .card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.home-articles__text {
    min-width: 0;
}

.home-articles__title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--ab-fg);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-articles__link:hover .home-articles__title {
    color: var(--ab-accent);
}

/* Widget aside (only rendered when the Article Sidebar has widgets). Spacing
   between stacked media comes from ONE source (the grid gap): the global
   widget-to-widget margin and the default block-image figure margins are zeroed
   so multiple posters/images/GIFs sit close together instead of far apart. */
.home-articles__aside {
    display: grid;
    gap: 0.75rem;
}

.home-articles__aside .aside-widget + .aside-widget {
    margin-top: 0;
}

.home-articles__aside figure {
    margin: 0;
}

/* 70/30 split: promote the grid + aside into the section's aside grid (the
   shared .home-section--aside rules define the columns/areas). The grid drops to
   three columns to fit the narrower 70% content column. */
@media (min-width: 782px) {
    .home-section--aside .home-articles {
        display: contents;
    }

    .home-section--aside .home-articles__main {
        grid-area: content;
    }

    .home-section--aside .home-articles__aside {
        grid-area: aside;
    }

    .home-articles--has-aside .home-articles__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Smaller desktops / large tablets: three columns for the full-width grid. */
@media (max-width: 1024px) {
    .home-articles__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Tablet / mobile: two columns, and the aside stacks under the grid. */
@media (max-width: 781px) {
    .home-articles--has-aside {
        display: block;
    }

    .home-articles__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-articles__aside {
        margin-top: 1.75rem;
    }
}

/* Phones: single column. */
@media (max-width: 520px) {
    .home-articles__grid {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------- */
/* Home layout: Feature hero (lead story + 2 secondary, magazine style)       */
/* -------------------------------------------------------------------------- */

.home-feature {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 2rem;
    align-items: start;
}

/* Lead: a large image with the category + headline + date overlaid on a bottom
   gradient (same treatment as the News / Gallery featured cards). */
.home-feature__lead-link {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--ab-radius);
    background: #000;
    color: #fff;
}

.home-feature__lead-media,
.home-feature__lead-media img,
.home-feature__lead-media .home-section__ph {
    display: block;
    width: 100%;
    height: 100%;
}

.home-feature__lead-media img {
    object-fit: cover;
    transition: transform 0.4s ease;
}

.home-feature__lead-link:hover .home-feature__lead-media img {
    transform: scale(1.04);
}

.home-feature__lead-link .card__play {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
}

.home-feature__lead-overlay {
    position: absolute;
    inset: auto 0 0 0;
    display: block;
    padding: 4rem 1.5rem 1.4rem;
    background: linear-gradient(
        to top,
        rgba(12, 12, 16, 0.92) 0%,
        rgba(12, 12, 16, 0.78) 24%,
        rgba(12, 12, 16, 0.44) 54%,
        rgba(12, 12, 16, 0.12) 80%,
        transparent 100%
    );
    transition: background 0.3s ease;
}

.home-feature__lead-link:hover .home-feature__lead-overlay {
    background: linear-gradient(
        to top,
        rgba(12, 12, 16, 0.95) 0%,
        rgba(12, 12, 16, 0.85) 24%,
        rgba(12, 12, 16, 0.55) 54%,
        rgba(12, 12, 16, 0.18) 80%,
        transparent 100%
    );
}

/* Category label: a short leading rule in the category's own colour (inherited
   from the inline `color`) ties the label's text and colour together. */
.home-feature__cat {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}

.home-feature__cat::before {
    content: "";
    width: 1.1rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.home-feature__lead-overlay .home-feature__cat {
    margin-bottom: 0.6rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.home-feature__lead-title {
    margin: 0 0 0.7rem;
    font-size: clamp(1.35rem, 1rem + 1.3vw, 2.05rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.home-feature__date {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.82);
}

.home-feature__date-icon {
    flex: none;
    opacity: 0.9;
}

/* Right column: two stacked secondary stories. */
.home-feature__aside {
    display: grid;
    gap: 1.25rem;
    align-content: start;
}

.home-feature__secondary-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--ab-radius);
    background: #000;
    margin-bottom: 0.6rem;
}

.home-feature__secondary-media img,
.home-feature__secondary-media .home-section__ph {
    display: block;
    width: 100%;
    height: 100%;
}

.home-feature__secondary-media img {
    object-fit: cover;
}

.home-feature__secondary-title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
    font-weight: 600;
}

.home-feature__secondary-title a {
    color: var(--ab-fg);
    text-decoration: none;
    transition: color 0.18s ease;
}

.home-feature__secondary-title a:hover {
    color: var(--sec, var(--ab-accent));
}

/* Mini: square thumbnail left + category/title right. */
.home-feature__mini {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
    border-top: 1px solid var(--ab-border);
    padding-top: 1.25rem;
}

.home-feature__mini-thumb {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--ab-radius);
    background: #000;
}

.home-feature__mini-thumb img,
.home-feature__mini-thumb .home-section__ph {
    display: block;
    width: 100%;
    height: 100%;
}

.home-feature__mini-thumb img {
    object-fit: cover;
}

.home-feature__mini-body {
    min-width: 0;
}

.home-feature__mini-title {
    margin: 0.3rem 0 0;
    font-size: 0.95rem;
    line-height: 1.3;
    font-weight: 600;
}

.home-feature__mini-title a {
    color: var(--ab-fg);
    text-decoration: none;
    transition: color 0.18s ease;
}

.home-feature__mini-title a:hover {
    color: var(--sec, var(--ab-accent));
}

/* Tablet & below: the lead image stacks above the aside list. */
@media (max-width: 900px) {
    .home-feature {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-feature__lead-media img,
    .home-feature__lead-overlay,
    .home-feature__secondary-title a,
    .home-feature__mini-title a {
        transition: none;
    }

    .home-feature__lead-link:hover .home-feature__lead-media img {
        transform: none;
    }
}

/* -------------------------------------------------------------------------- */
/* Home layout: Top Charts (view-ranked strip — Songs)                        */
/* -------------------------------------------------------------------------- */

.home-chart {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

/* Oversized Devanagari rank numeral in the section accent — the signature. */
.home-chart__rank {
    font-weight: 800;
    line-height: 1;
    color: var(--sec, var(--ab-accent));
    font-variant-numeric: tabular-nums;
}

/* Featured #1. */
.home-chart__lead-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--ab-radius);
    background: #000;
}

.home-chart__lead-media img,
.home-chart__lead-media .home-section__ph {
    display: block;
    width: 100%;
    height: 100%;
}

.home-chart__lead-media img {
    object-fit: cover;
    transition: transform 0.4s ease;
}

.home-chart__lead-media:hover img {
    transform: scale(1.04);
}

.home-chart__lead-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    margin-top: 0.9rem;
}

.home-chart__rank--lead {
    font-size: clamp(2.6rem, 2rem + 2vw, 3.9rem);
}

.home-chart__lead-text {
    min-width: 0;
}

.home-chart__lead-title {
    margin: 0 0 0.4rem;
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
    line-height: 1.2;
    font-weight: 700;
}

.home-chart__lead-title a {
    color: var(--ab-fg);
    text-decoration: none;
    transition: color 0.18s ease;
}

.home-chart__lead-title a:hover {
    color: var(--sec, var(--ab-accent));
}

/* Ranked list #2..N. */
.home-chart__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-chart__item + .home-chart__item {
    border-top: 1px solid var(--ab-border);
}

.home-chart__item-link {
    display: grid;
    grid-template-columns: auto 72px minmax(0, 1fr);
    align-items: center;
    gap: 0.95rem;
    padding: 0.7rem 0;
}

.home-chart__item:first-child .home-chart__item-link {
    padding-top: 0;
}

.home-chart__item .home-chart__rank {
    font-size: 1.5rem;
    min-width: 1.4ch;
    text-align: center;
}

.home-chart__item-thumb {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--ab-radius);
    background: #000;
}

.home-chart__item-thumb img,
.home-chart__item-thumb .home-section__ph {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-chart__item-thumb .card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    border-width: 1.5px;
}

.home-chart__item-body {
    min-width: 0;
}

.home-chart__item-title {
    margin: 0 0 0.25rem;
    font-size: 0.98rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--ab-fg);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.18s ease;
}

.home-chart__item-link:hover .home-chart__item-title {
    color: var(--sec, var(--ab-accent));
}

/* Row meta: view-count stat, or the date before any views accumulate. */
.home-chart__views,
.home-chart__date {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--ab-muted);
}

/* Tablet & below: the featured stacks above the ranked list. */
@media (max-width: 900px) {
    .home-chart {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-chart__lead-media img,
    .home-chart__lead-title a,
    .home-chart__item-title {
        transition: none;
    }

    .home-chart__lead-media:hover img {
        transform: none;
    }
}

/* Genre tabs (Songs): the subcategory chips act as a tablist that swaps the
   chart panel and repoints "See all" (setupSectionTabs). Reuses the chip pill
   styling; the active tab is filled with its own accent, like the chip hover. */
.home-chart-tabs__nav {
    margin-bottom: 1.4rem;
}

/* Genre selector: a hover / focus dropdown (the subcategory list). The trigger
   shows the active genre + a chevron that flips when the menu opens; the menu
   reveals on hover, keyboard focus (focus-within), and touch focus. */
.section-dropdown {
    position: relative;
    display: inline-block;
}

.section-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.42rem 0.6rem 0.42rem 1rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ab-fg);
    background: var(--ab-pill);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.section-dropdown__arrow {
    flex: none;
    transition: transform 0.2s ease;
}

.section-dropdown:hover .section-dropdown__arrow,
.section-dropdown:focus-within .section-dropdown__arrow {
    transform: rotate(180deg);
}

.section-dropdown__menu {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    z-index: 30;
    min-width: 210px;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem;
    background: var(--ab-bg);
    border: 1px solid var(--ab-border);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.13);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.section-dropdown:hover .section-dropdown__menu,
.section-dropdown:focus-within .section-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Docked at the right of the header: open the menu leftward so it stays in view. */
.section-dropdown--end .section-dropdown__menu {
    right: 0;
    left: auto;
}

.section-dropdown__option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    color: var(--ab-fg);
    background: none;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.section-dropdown__dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--chip, var(--ab-accent));
}

.section-dropdown__option:hover {
    background: var(--ab-pill);
}

.section-dropdown__option.is-active {
    color: #fff;
    background: var(--chip, var(--ab-accent));
}

.section-dropdown__option.is-active .section-dropdown__dot {
    background: #fff;
}

.section-dropdown__trigger:focus-visible,
.section-dropdown__option:focus-visible {
    outline: 2px solid var(--sec, var(--ab-accent));
    outline-offset: 2px;
}

.home-chart-tabs__panel[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .section-dropdown__arrow,
    .section-dropdown__menu,
    .section-dropdown__option {
        transition: none;
    }
}

/* Optional 30% widget sidebar (Songs Sidebar): the chart sits in 70% and the
   widgets in 30% via the shared .home-section--aside grid; full-width when the
   sidebar is empty. Widget spacing is tightened to match the Article Sidebar. */
.home-chart-wrap__main {
    min-width: 0;
}

.home-chart-wrap__aside {
    display: grid;
    gap: 0.75rem;
}

.home-chart-wrap__aside .aside-widget + .aside-widget {
    margin-top: 0;
}

.home-chart-wrap__aside figure {
    margin: 0;
}

@media (min-width: 782px) {
    .home-section--aside .home-chart-wrap {
        display: contents;
    }

    .home-section--aside .home-chart-wrap__main {
        grid-area: content;
    }

    .home-section--aside .home-chart-wrap__aside {
        grid-area: aside;
    }
}

/* -------------------------------------------------------------------------- */
/* Dark band modifier + Movie spotlight layout                                */
/* -------------------------------------------------------------------------- */

/* Full-width dark band (same technique as the gallery band): a 100vw box-shadow
   paints the background edge-to-edge, clip-path trims it to the band's height. */
.home-section--dark {
    position: relative;
    margin: 2.5rem auto;
    padding: 2.75rem 1rem;
    color: #fff;
    background: #14161c;
    box-shadow: 0 0 0 100vw #14161c;
    clip-path: inset(0 -100vw);
}

.home-section--dark .home-section__title a,
.home-section--dark .home-section__see-all {
    color: #fff;
}

.home-section--dark .home-section__see-all:hover,
.home-section--dark .home-section__see-all:focus-visible {
    color: #fff;
}

.home-section--dark .home-section__header {
    border-bottom-color: rgba(255, 255, 255, 0.16);
}

/* Big autoplaying featured movie + a row of three cards. */
.home-movies {
    display: grid;
    gap: 1.5rem;
}

.home-movies__lead {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
    background: #000;
}

.home-movies__lead-media {
    position: absolute;
    inset: 0;
}

.home-movies__lead-media img,
.home-movies__lead-media .home-section__ph,
.home-movies__lead-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.home-movies__lead-media img {
    object-fit: cover;
}

.home-movies__lead-video {
    border: 0;
    pointer-events: none;
}

.home-movies__lead-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.35rem;
    padding: 1.75rem;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.25) 42%, transparent 68%);
}

.home-movies__lead-title {
    margin: 0;
    max-width: 42ch;
    font-size: clamp(1.3rem, 1rem + 1.4vw, 2.1rem);
    line-height: 1.18;
    font-weight: 800;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.home-movies__lead-date {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.82);
}

/* Phones: drop the title out of the image overlay so it no longer covers the
   video — media stays 16/9, title + date sit below it on the dark band. */
@media (max-width: 600px) {
    .home-movies__lead {
        aspect-ratio: auto;
        overflow: visible;
        background: transparent;
    }

    .home-movies__lead-media {
        position: relative;
        aspect-ratio: 16 / 9;
        border-radius: 16px;
        overflow: hidden;
    }

    .home-movies__lead-overlay {
        position: static;
        justify-content: flex-start;
        padding: 0.85rem 0.25rem 0;
        background: none;
    }

    .home-movies__lead-title {
        font-size: 1.15rem;
        text-shadow: none;
    }
}

.home-movies__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.home-movies__card-link {
    display: block;
    text-decoration: none;
    color: #fff;
}

.home-movies__card-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    margin-bottom: 0.7rem;
}

.home-movies__card-media img,
.home-movies__card-media .home-section__ph {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.home-movies__card-link:hover .home-movies__card-media img {
    transform: scale(1.05);
}

.home-movies__card-media .card__play {
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
}

.home-movies__card-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 600;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-movies__card-link:hover .home-movies__card-title {
    color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 640px) {
    .home-movies__row {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-movies__card-media img {
        transition: none;
    }
}

/* -------------------------------------------------------------------------- */
/* Home block: Cinema release board (Upcoming / Next Release / Now Showing)    */
/* -------------------------------------------------------------------------- */

.home-cinema__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    align-items: start;
}

.home-cinema__col {
    min-width: 0;
}

.home-cinema__head {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.55rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--ab-border);
}

.home-cinema__head::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 48px;
    height: 2px;
    background: var(--sec, var(--ab-accent));
}

.home-cinema__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--sec, var(--ab-accent));
}

/* Featured slider (crossfade). */
.home-cinema__slider {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    margin-bottom: 1rem;
}

.home-cinema__slides {
    position: absolute;
    inset: 0;
}

.home-cinema__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.home-cinema__slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
}

.home-cinema__lead-link {
    position: absolute;
    inset: 0;
    display: block;
    color: #fff;
}

.home-cinema__lead-media,
.home-cinema__lead-media img,
.home-cinema__lead-media .home-section__ph {
    display: block;
    width: 100%;
    height: 100%;
}

.home-cinema__lead-media {
    position: relative;
}

/* Dark tint over the whole slide so the white title reads on any image. */
.home-cinema__lead-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.home-cinema__lead-media img {
    object-fit: cover;
    transition: transform 0.4s ease;
}

.home-cinema__lead-link:hover .home-cinema__lead-media img {
    transform: scale(1.05);
}

.home-cinema__lead-link .card__play {
    top: 0.7rem;
    right: 0.7rem;
}

.home-cinema__lead-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.6rem 1rem 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.62) 38%, rgba(0, 0, 0, 0.18) 72%, transparent 100%);
}

.home-cinema__lead-title {
    margin: 0;
    font-size: clamp(1.2rem, 0.95rem + 0.8vw, 1.6rem);
    line-height: 1.2;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

/* Keep the title white on hover (override the global a:hover accent). */
.home-cinema__lead-link:hover .home-cinema__lead-title {
    color: #fff;
}

/* Slider dots */
.home-cinema__dots {
    position: absolute;
    right: 0.7rem;
    bottom: 0.7rem;
    z-index: 3;
    display: flex;
    gap: 0.35rem;
}

.home-cinema__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.home-cinema__dot.is-active {
    background: #fff;
    transform: scale(1.25);
}

.home-cinema__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-cinema__item + .home-cinema__item {
    border-top: 1px solid var(--ab-border);
}

.home-cinema__item-link {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 0;
}

.home-cinema__item:first-child .home-cinema__item-link {
    padding-top: 0;
}

.home-cinema__item-thumb {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
}

.home-cinema__item-thumb img,
.home-cinema__item-thumb .home-section__ph {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-cinema__item-title {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--ab-fg);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 900px) {
    .home-cinema__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .home-cinema__grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-cinema__lead-media img,
    .home-cinema__slide,
    .home-cinema__dot {
        transition: none;
    }
    .home-cinema__lead-link:hover .home-cinema__lead-media img {
        transform: none;
    }
}

/* -------------------------------------------------------------------------- */
/* Home block: TV cluster (Series + Reality Shows shelves + 30% widget aside)  */
/* -------------------------------------------------------------------------- */

.home-tv__grid {
    display: grid;
    gap: 2rem;
}

.home-tv__main {
    min-width: 0;
    display: grid;
    gap: 2rem;
}

.home-tv__block {
    min-width: 0;
}

.home-tv__shelf {
    position: relative;
}

.home-tv__track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
}

.home-tv__track::-webkit-scrollbar {
    display: none;
}

.home-tv__card {
    flex: 0 0 clamp(200px, 30%, 250px);
    min-width: 0;
    scroll-snap-align: start;
}

/* Auto-scrolling shelves must not snap (the marquee would re-snap every frame),
   and their per-frame scroll writes must be instant, not smooth-animated. */
.home-tv__shelf[data-shelf-autoscroll] .home-tv__track {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

/* Scroll arrows — appear on hover/focus, hidden when there is nothing to scroll. */
.home-tv__arrow {
    position: absolute;
    top: 37%;
    transform: translateY(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.72);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.home-tv__arrow--prev {
    left: 0.4rem;
}

.home-tv__arrow--next {
    right: 0.4rem;
}

.home-tv__shelf:hover .home-tv__arrow,
.home-tv__arrow:focus-visible {
    opacity: 1;
}

.home-tv__arrow:hover {
    background: rgba(17, 17, 17, 0.92);
}

.home-tv__arrow:disabled {
    opacity: 0;
    pointer-events: none;
}

.home-tv__card-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    margin-bottom: 0.7rem;
}

.home-tv__card-thumb img,
.home-tv__card-thumb .home-section__ph {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.home-tv__card-thumb:hover img {
    transform: scale(1.05);
}

.home-tv__card-thumb .card__play {
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
}

.home-tv__card-title {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.3;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-tv__card-title a {
    color: var(--ab-fg);
    transition: color 0.18s ease;
}

.home-tv__card-title a:hover {
    color: var(--sec, var(--ab-accent));
}

/* Widget aside (only when the Series Sidebar has widgets). */
.home-tv__aside {
    display: grid;
    gap: 0.75rem;
}

.home-tv__aside .aside-widget + .aside-widget {
    margin-top: 0;
}

.home-tv__aside figure {
    margin: 0;
}

/* 70/30 split when the sidebar is populated. */
@media (min-width: 782px) {
    .home-tv__grid--aside {
        grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
        align-items: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-tv__card-thumb img,
    .home-tv__card-title a {
        transition: none;
    }
    .home-tv__card-thumb:hover img {
        transform: none;
    }
    .home-tv__track {
        scroll-behavior: auto;
    }
}

/* -------------------------------------------------------------------------- */
/* Nav hover mega panels (desktop) ----------------------------------------- */
/* -------------------------------------------------------------------------- */

@media (min-width: 782px) {
    /* Anchor the full-width panel to the menu row, not the hovered item. */
    .site-nav__menu { position: relative; }
    .site-nav__menu > li.has-mega { position: static; }

    .site-nav__mega {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        z-index: 60;
        background: var(--ab-bg);
        border: 1px solid var(--ab-border);
        border-top: 2px solid var(--ab-accent);
        border-radius: 0 0 var(--ab-radius) var(--ab-radius);
        box-shadow: var(--ab-shadow-pop);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(6px);
        transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
    }

    .site-nav__menu > li.has-mega:hover > .site-nav__mega,
    .site-nav__menu > li.has-mega:focus-within > .site-nav__mega {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition: opacity 160ms ease, transform 160ms ease, visibility 0s;
    }

    .site-nav__mega-inner {
        max-width: var(--ab-container);
        margin: 0 auto;
        padding: 1.5rem;
    }

    .site-nav__mega-all {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--ab-fg);
        margin-bottom: 1.1rem;
    }
    .site-nav__mega-all:hover { color: var(--ab-accent); }

    .site-nav__mega-cols {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: 1.25rem 1.5rem;
    }
    .site-nav__mega-col { min-width: 0; }

    .site-nav__mega-heading {
        display: block;
        font-weight: 600;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--ab-accent);
        padding-bottom: 0.5rem;
        margin-bottom: 0.75rem;
        border-bottom: 1px solid var(--ab-border);
    }
    .site-nav__mega-heading:hover { color: var(--ab-fg); }

    .site-nav__mega-posts,
    .site-nav__mega-recent {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0.7rem;
    }
    .site-nav__mega-recent {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem 1.25rem;
    }

    .site-nav__mega-post {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        color: var(--ab-fg);
    }

    .site-nav__mega-thumb {
        flex: 0 0 auto;
        width: 48px;
        height: 48px;
        border-radius: var(--ab-radius);
        overflow: hidden;
        background: #f0f0f0;
    }
    .site-nav__mega-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .site-nav__mega-title {
        font-size: 0.88rem;
        line-height: 1.35;
        transition: color 150ms ease;
    }
    .site-nav__mega-post:hover .site-nav__mega-title { color: var(--ab-accent); }
}

/* Panels are desktop-only; the mobile drawer handles navigation below 782px. */
@media (max-width: 781px) {
    .site-nav__mega { display: none; }
}

/* -------------------------------------------------------------------------- */
/* Widget Gallery block → fade slider (auto-crossfade slideshow in sidebars)  */
/* -------------------------------------------------------------------------- */

.aside-widget .wp-block-gallery.is-fade-slider {
    position: relative;
    display: block;
    margin: 0;
    gap: 0;
    overflow: hidden;
    border-radius: var(--ab-radius);
    background: #000;
}

.aside-widget .wp-block-gallery.is-fade-slider > figure.wp-block-image {
    position: absolute;
    inset: 0;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.aside-widget .wp-block-gallery.is-fade-slider > figure.wp-block-image.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease;
}

.aside-widget .wp-block-gallery.is-fade-slider > figure.wp-block-image > a,
.aside-widget .wp-block-gallery.is-fade-slider > figure.wp-block-image > div {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.aside-widget .wp-block-gallery.is-fade-slider > figure.wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
}

.wp-gallery-slider__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.5rem;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 0.3rem;
}

.wp-gallery-slider__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.2s ease;
}

.wp-gallery-slider__dot.is-active {
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .aside-widget .wp-block-gallery.is-fade-slider > figure.wp-block-image {
        transition: none;
    }
}

/* -------------------------------------------------------------------------- */
/* Home block: Shows cluster (Series shelf + Articles grid | 30% widget col)  */
/* -------------------------------------------------------------------------- */

.home-shows__grid {
    display: grid;
    gap: 2rem;
}

.home-shows__main {
    min-width: 0;
    display: grid;
    gap: 2rem;
}

.home-shows__block {
    min-width: 0;
}

/* Articles grid inside the 70% left column: three across. */
.home-shows .home-articles__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Right widget column. */
.home-shows__aside {
    display: grid;
    gap: 1.5rem;
    align-content: start;
}

.home-shows__widget {
    min-width: 0;
}

.home-shows__widget-title {
    position: relative;
    margin: 0 0 0.9rem;
    padding-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ab-accent);
    border-bottom: 2px solid var(--ab-border);
}

.home-shows__widget-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 40px;
    height: 2px;
    background: var(--ab-accent);
}

/* Tighten stacked media within a widget area. */
.home-shows__widget .aside-widget + .aside-widget {
    margin-top: 0.75rem;
}

.home-shows__widget figure {
    margin: 0;
}

/* 70/30 split when the right column has widgets. */
@media (min-width: 782px) {
    .home-shows__grid--aside {
        grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
        align-items: start;
    }
}

@media (max-width: 640px) {
    .home-shows .home-articles__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 440px) {
    .home-shows .home-articles__grid {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------- */
/* Home block: Showtimes strip (Upcoming / Next Release / Now Showing widgets) */
/* -------------------------------------------------------------------------- */

.home-showtimes__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    align-items: start;
}

.home-showtimes__col {
    min-width: 0;
}

.home-showtimes__title {
    position: relative;
    margin: 0 0 1rem;
    padding-bottom: 0.55rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ab-accent);
    border-bottom: 2px solid var(--ab-border);
}

.home-showtimes__title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 44px;
    height: 2px;
    background: var(--ab-accent);
}

.home-showtimes__body .aside-widget + .aside-widget {
    margin-top: 0.75rem;
}

.home-showtimes__body figure {
    margin: 0;
}

@media (max-width: 600px) {
    .home-showtimes__grid {
        grid-template-columns: 1fr;
    }
}

/* Showtimes widget areas (Upcoming / Next Release / Now Showing) stacked inside
   the News sidebar. */
.home-news__showtime {
    position: relative;
    min-width: 0;
}

/* Thin light-red divider between showtimes blocks, fading to transparent at
   both ends. Centered in the grid gap; not shown after the last block. */
.home-news__showtime:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.75rem;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(214, 0, 28, 0.4) 50%, transparent);
}

.home-news__showtime .home-showtimes__title {
    margin-bottom: 0.7rem;
    font-size: 1rem;
}

/* -------------------------------------------------------------------------- */
/* Videos block (below the News list, in the News left column) + widget links */
/* -------------------------------------------------------------------------- */

.home-videos {
    margin-top: 2rem;
}

/* Featured video — autoplays muted in view (setupMovieAutoplay), like Movies. */
.home-videos__lead {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    margin-bottom: 1.25rem;
}

.home-videos__lead-media {
    position: absolute;
    inset: 0;
}

.home-videos__lead-media img,
.home-videos__lead-media .home-section__ph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.home-videos__lead-media img {
    object-fit: cover;
}

.home-videos__lead-media .card__play {
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
}

.home-videos__lead-media.is-playing .card__play {
    display: none;
}

.home-videos__lead-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.15) 55%, transparent 100%);
}

.home-videos__lead-title {
    margin: 0;
    font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
    line-height: 1.2;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.home-videos__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.home-videos__card {
    min-width: 0;
}

.home-videos__card .yt-facade {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.6rem;
}

.home-videos__card-title {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.3;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-videos__card-title a {
    color: var(--ab-fg);
    transition: color 0.18s ease;
}

.home-videos__card-title a:hover {
    color: var(--sec, var(--ab-accent));
}

@media (max-width: 560px) {
    .home-videos__row {
        grid-template-columns: 1fr;
    }
}

/* Sticky News sidebar: on desktop the showtimes column sticks below the header
   as you scroll the taller News + Videos content, so no dead gap shows beside
   it. Only where the 70/30 grid is active. */
@media (min-width: 782px) {
    .home-news__aside {
        position: sticky;
        top: calc(var(--masthead-h, 0px) + 1.25rem);
        align-self: start;
    }
}