/* ====== Arabic Typography (Google Fonts) ====== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;600;700&family=Tajawal:wght@400;500;600;700&display=swap');
/* ================================================
   BANAFSAJ REDESIGN - Design Tokens & Visual System
   ================================================ */
/* ================================================
   BANAFSAJ REDESIGN - Design Tokens & Visual System
   Editorial Luxury / Women-first UI
   ================================================ */

:root {
    /* =========================
     Brand Colors
  ========================= */
    --primary: #f285b5;
    --primary-600: #e374a7;
    --primary-700: #d46a9a;
    --primary-400: #f293bb;
    --primary-300: #f5a6c8;
    --primary-200: #f7bcd6;
    --primary-100: #f9b8d4;
    --primary-050: #fdf0f5;

    --secondary: #6b5b8a;
    --secondary-600: #5d4e7a;
    --secondary-700: #4a3d6b;
    --secondary-300: #8a7ba5;

    /* Accents (Use sparingly: badges, highlights, rare CTA) */
    --accent-warm: #e8a87c;
    --accent-gold: #c9a86c;
    --accent-soft-blue: #8cabc4;

    /* =========================
     Backgrounds
  ========================= */
    --bg-main: #faf8f6;
    --bg-surface: #ffffff;
    --bg-section: #f5f0ed;
    --bg-muted: #f9f6f3;
    --bg-hover: #fdf0f5;
    /* Brand dark surface — unifies the footer with the purple immersive sections */
    --bg-dark: #1a1229;

    /* Listening surface — the podcast band's own paper.
       Every other surface on this site is WARM (more red than blue). This one
       is the same lightness but COOL: the brand violet carried into paper, so
       the band reads as its own section without leaving the light page the
       way a dark band did. Its hairline is the same violet, kept quiet. */
    --bg-listen: #f3f0f7;
    --border-listen: rgba(107, 91, 138, 0.14);

    /* Backdrop / overlays */
    --overlay-20: rgba(0, 0, 0, 0.20);
    --overlay-35: rgba(0, 0, 0, 0.35);

    /* =========================
     Text
  ========================= */
    --text-primary: #2d2a33;
    --text-secondary: #5c5568;
    /* Darkened from #8e879a so section eyebrows/meta clear WCAG AA on light surfaces */
    --text-muted: #6f6878;
    --text-light: #b5afc0;
    --text-on-primary: #ffffff;

    /* Editorial reading colors */
    --text-reading: #26232c;
    --text-reading-muted: #6a6376;

    /* =========================
     Borders
  ========================= */
    --border-light: #ece7e2;
    --border-medium: #ddd6cf;
    --border-card: rgba(0, 0, 0, 0.04);
    /* Soft hairline used across cards/tabs/episodes (was referenced but never defined) */
    --border-subtle: #efeae4;

    /* =========================
     Shadows (Keep soft)
  ========================= */
    --shadow-sm: 0 1px 3px rgba(45, 42, 51, 0.04), 0 1px 2px rgba(45, 42, 51, 0.02);
    --shadow-md: 0 4px 16px rgba(45, 42, 51, 0.06), 0 1px 4px rgba(45, 42, 51, 0.03);
    --shadow-lg: 0 8px 32px rgba(45, 42, 51, 0.08), 0 2px 8px rgba(45, 42, 51, 0.03);
    --shadow-card: 0 2px 12px rgba(45, 42, 51, 0.04);

    /* Hover glow: tone it down (luxury = subtle) */
    --shadow-hover: 0 10px 28px rgba(242, 133, 181, 0.10), 0 4px 10px rgba(45, 42, 51, 0.05);

    /* =========================
     Typography
     (Set via @import or self-host later)
  ========================= */
    --font-heading: "Alexandria", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --font-body: "Almarai", "Tajawal", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --font-quote: "Amiri", "Almarai", serif;
    /* Legacy alias — keeps headings on one type system instead of falling back to a serif */
    --font-cairo: var(--font-heading);

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Type scale (responsive friendly) */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;
    --text-3xl: 36px;

    --lh-tight: 1.2;
    --lh-normal: 1.6;
    --lh-loose: 1.9;

    /* =========================
     Spacing Scale (8pt)
  ========================= */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* =========================
     Radius
     (flat: rectangular surfaces carry no rounding; pills/circles stay)
  ========================= */
    --radius-xs: 0;
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --radius-2xl: 0;
    --radius-pill: 999px;
    /* Alias kept for legacy references throughout the stylesheet */
    --radius-full: var(--radius-pill);

    /* =========================
     Container
  ========================= */
    --container-max: 1200px;
    --container-pad: 18px;

    /* =========================
     Z-index scale
  ========================= */
    --z-base: 1;
    --z-header: 50;
    --z-overlay: 100;
    --z-modal: 1000;

    /* =========================
     Motion
  ========================= */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --dur-1: 150ms;
    --dur-2: 250ms;
    --dur-3: 350ms;

    --transition-base: var(--dur-2) var(--ease-out);
    --transition-slow: var(--dur-3) var(--ease-out);

    /* =========================
     UI Component Tokens
     (This is where “consistency” lives)
  ========================= */
    --focus-ring: 0 0 0 4px rgba(242, 133, 181, 0.22);

    /* Buttons */
    --btn-h: 44px;
    --btn-radius: var(--radius-pill);
    --btn-pad-x: 18px;

    /* Cards */
    --card-radius: var(--radius-lg);
    --card-pad: 18px;
    --card-border: 1px solid var(--border-card);

    /* Inputs */
    --input-h: 44px;
    --input-radius: var(--radius-md);
    --input-border: 1px solid var(--border-medium);

    /* Icons (keep consistent) */
    --icon-size: 18px;
    --icon-stroke: 1.75px;
}

/* ====== Base ====== */
html {
    direction: rtl;
    /* Reserve the scrollbar gutter so opening the drawer/search/modal (scroll-lock)
       doesn't shift the whole page sideways on desktop. */
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    background: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-body);
    /* Safety net against any stray full-bleed/decorative element scrolling the page */
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

/* ====== Global keyboard focus — one premium ring for every interactive element ====== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* ====== Skip link (first focusable element) ====== */
.skip-link {
    position: fixed;
    top: var(--space-3);
    inset-inline-start: var(--space-3);
    z-index: calc(var(--z-modal) + 10);
    padding: 10px 18px;
    background: var(--primary);
    color: var(--text-on-primary);
    border-radius: var(--radius-pill);
    font: 600 var(--text-sm)/1 var(--font-heading);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--transition-base);
}

.skip-link:focus {
    transform: translateY(0);
    outline: none;
    box-shadow: var(--focus-ring);
}

.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* IMPORTANT: avoid clipping overlays */
.site-header,
.site-header * {
    overflow: visible;
}

/* ====== Icon Button ====== */
.icon-btn {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    transition: transform var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}

.icon-btn i {
    font-size: var(--icon-size);
}

.icon-btn:hover {
    background: var(--bg-hover);
    border-color: rgba(242, 133, 181, 0.22);
    transform: translateY(-1px);
}

.icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ====== Buttons ====== */
.btn {
    height: var(--btn-h);
    border-radius: var(--btn-radius);
    padding-inline: var(--btn-pad-x);
    border: 1px solid transparent;
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}

.btn--primary {
    background: var(--primary);
    color: var(--text-on-primary);
}

.btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

/* ====== Topbar ====== */
.site-topbar {
    background: var(--bg-main);
    border-bottom: 1px solid rgba(236, 231, 226, 0.6);
}

.site-topbar__inner {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.site-topbar__social {
    display: flex;
    gap: 2px;
}

.site-topbar__social .icon-btn {
    width: 32px;
    height: 32px;
    color: var(--text-muted);
    font-size: 13px;
}

.site-topbar__social .icon-btn:hover {
    color: var(--primary);
    background: transparent;
    border-color: transparent;
}

.topbar-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    border: none;
    font: 500 var(--text-xs)/1 var(--font-body);
}

/* ====== Header ====== */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(236, 231, 226, 0.45);
}

.site-header__inner {
    min-height: 72px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-10);
}

/* Brand (Protect logo from any transforms) */
.site-brand {
    display: inline-flex;
    align-items: center;
}

.site-brand__logo {
    height: 46px;
    width: auto;
    display: block;
    transform: none !important;
    filter: none;
}

/* ====== Desktop Nav ====== */
.site-nav {
    justify-self: center;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__link {
    font: 500 var(--text-sm)/1 var(--font-body);
    color: var(--text-secondary);
    text-decoration: none;
    padding: 10px 14px;
    border-radius: var(--radius-pill);
    transition: background var(--transition-base), color var(--transition-base);
    white-space: nowrap;
}

.site-nav__link:hover {
    background: rgba(242, 133, 181, 0.06);
    color: var(--text-primary);
}

.site-nav__link.is-active {
    color: var(--primary-700);
    background: transparent;
    font-weight: 600;
}

/* Dropdown trigger */
.site-nav__toggle {
    border: 0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.site-nav__chev {
    font-size: 12px;
    opacity: .65;
    transition: transform var(--transition-base);
}

.site-nav__item {
    position: relative;
}

.site-nav__item.is-open .site-nav__chev {
    transform: rotate(180deg);
}

/* Dropdown */
.subnav {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-start: 0;
    min-width: 220px;
    padding: 10px;
    margin: 0;
    list-style: none;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.site-nav__item.is-open>.subnav {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.subnav__link {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-secondary);
    font: 500 var(--text-sm)/1.4 var(--font-body);
}

.subnav__link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Actions */
.site-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* Menu button */
.menu-btn {

    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-light);
    background: var(--bg-surface);
    display: inline-grid;
    place-items: center;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    display: none;
}

.menu-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.menu-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.menu-btn__lines {
    width: 18px;
    height: 12px;
    position: relative;
}

.menu-btn__lines::before,
.menu-btn__lines::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--text-primary);
    transition: transform var(--transition-base), top var(--transition-base), opacity var(--transition-base);
}

.menu-btn__lines::before {
    top: 0;
}

.menu-btn__lines::after {
    top: 10px;
}

.menu-btn[aria-expanded="true"] .menu-btn__lines::before {
    top: 5px;
    transform: rotate(45deg);
}

.menu-btn[aria-expanded="true"] .menu-btn__lines::after {
    top: 5px;
    transform: rotate(-45deg);
}

/* ====== Drawer (Fixed, outside header) ====== */
.drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    pointer-events: none;
    /* Remove hidden links from the tab order; delay so the slide-out still plays */
    visibility: hidden;
    transition: visibility var(--dur-3);
}

.drawer[aria-hidden="false"] {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s;
}

.drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.drawer[aria-hidden="false"] .drawer__backdrop {
    opacity: 1;
}

.drawer__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: min(380px, 92vw);
    background: var(--bg-surface);
    border-inline-start: 1px solid var(--border-light);
    /* A surface enters as a surface: the full width of itself, on the
       iOS drawer curve. inset-inline-end in RTL is the LEFT edge, so
       −100% parks the panel beyond it in both directions. Exit rides the
       quicker base transition — leaving never costs what arriving bought. */
    transform: translateX(-100%);
    transition: transform var(--dur-2) var(--ease-out);
    display: flex;
    flex-direction: column;
}

.drawer[aria-hidden="false"] .drawer__panel {
    transform: translateX(0) !important;
    transition: transform 450ms var(--ease-drawer);
}

.drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-light);
}

.drawer__title {
    font: 700 var(--text-lg)/1 var(--font-heading);
}

.drawer__nav {
    padding: var(--space-4);
    overflow: auto;
}

.drawer__link,
.drawer__sublink {
    display: block;
    padding: 12px 12px;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-secondary);
    font: 600 var(--text-sm)/1.3 var(--font-heading);
}

.drawer__link:hover,
.drawer__sublink:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.drawer__link.is-active {
    background: rgba(242, 133, 181, 0.12);
    color: var(--text-primary);
}

.drawer__group {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 8px;
    margin-block: 10px;
}

.drawer__summary {
    cursor: pointer;
    list-style: none;
    padding: 10px 10px;
    border-radius: var(--radius-md);
    font: 700 var(--text-sm)/1.2 var(--font-heading);
    color: var(--text-primary);
}

.drawer__summary::-webkit-details-marker {
    display: none;
}

/* ====== Search (Fixed, outside header) ====== */
.search {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    pointer-events: none;
    visibility: hidden;
    transition: visibility var(--dur-2);
}

.search[aria-hidden="false"] {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s;
}

.search__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.search[aria-hidden="false"] .search__backdrop {
    opacity: 1;
}

.search__panel {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: min(860px, calc(100% - 24px));
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
    opacity: 0;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.search[aria-hidden="false"] .search__panel {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.search__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    align-items: center;
}

.search__input {
    height: var(--input-h);
    border-radius: var(--input-radius);
    border: var(--input-border);
    padding-inline: 14px;
    font: 500 var(--text-md)/1.2 var(--font-body);
    color: var(--text-primary);
    background: var(--bg-muted);
}

.search__input:focus {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: rgba(242, 133, 181, 0.35);
}

.search__close {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
}

/* ====== Responsive ====== */
@media (max-width: 1100px) {
    .site-nav {
        display: none;
    }

    /* Show the hamburger wherever the desktop nav is hidden (was only ≤767 → dead zone 768–1100 with no nav) */
    .menu-btn {
        display: inline-grid;
    }
}

html.is-locked,
body.is-locked {
    overflow: hidden;
}

@media (max-width: 767px) {
    .site-header__inner {
        grid-template-columns: auto auto;
        justify-content: space-between;
        gap: var(--space-4);
    }
}

/* Keep the brand + actions from overflowing on the smallest phones (≤360px) */
@media (max-width: 400px) {
    .site-brand__logo {
        height: 40px;
    }

    .site-topbar__social {
        gap: 0;
    }
}



/* ======================================================
   HERO SLIDER — full-width featured carousel (violet/pink)
   ====================================================== */
.hero-slider {
    padding-block: var(--space-8) var(--space-6);
    background:
        radial-gradient(1100px 500px at 78% 12%, rgba(242, 133, 181, 0.045), transparent 60%),
        radial-gradient(900px 400px at 15% 60%, rgba(107, 91, 138, 0.035), transparent 55%),
        var(--bg-main);
}

.hero-slider__wrap {
    position: relative;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-4, 16px);
}

.hero-slider__swiper {
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 22px 60px -26px rgba(26, 18, 41, 0.55);
}

.hero-slide {
    position: relative;
    display: block;
    aspect-ratio: 21 / 9;
    /* no min-height: paired with aspect-ratio it forces a minimum WIDTH
       (320×21/9 = 747px) that overflows small screens and clips the title */
    color: #fff;
}

.hero-slide__media {
    position: absolute;
    inset: 0;
}

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

.hero-slide__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,
            rgba(26, 18, 41, 0.88) 0%,
            rgba(26, 18, 41, 0.45) 38%,
            rgba(26, 18, 41, 0.08) 66%,
            transparent 100%);
}

.hero-slide__content {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: clamp(20px, 4vw, 44px) clamp(20px, 4vw, 44px) clamp(40px, 5vw, 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(12px, 1.6vw, 18px);
}

.hero-slide__cat {
    display: inline-block;
    background: var(--primary);
    color: var(--text-on-primary, #fff);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.2px;
    padding: 7px 22px;
    border-radius: 999px;
    box-shadow: 0 8px 22px -8px var(--primary-700);
}

.hero-slide__title {
    margin: 0;
    max-width: 720px;
    font-weight: 800;
    font-size: clamp(1.1rem, 2.4vw, 1.95rem);
    line-height: 1.45;
    color: #fff;
    text-wrap: balance;
    background: rgba(45, 36, 64, 0.46);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 16px 30px;
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.6);
}

.hero-slide__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
}

.hero-slide__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary-300);
}

/* nav arrows — violet squares, inset on each edge (RTL) */
.hero-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 48px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    color: #fff;
    background: var(--secondary);
    border-radius: 0;
    box-shadow: 0 10px 24px -10px rgba(26, 18, 41, 0.7);
    transition: background 0.2s ease, transform 0.2s ease;
}

.hero-slider__nav:hover {
    background: var(--secondary-700);
}

.hero-slider__nav--prev {
    inset-inline-end: 6px;
}

.hero-slider__nav--next {
    inset-inline-start: 6px;
}

.hero-slider__nav.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
}

.hero-slider__pagination {
    position: absolute;
    z-index: 6;
    inset-inline: 0;
    bottom: 16px;
    display: flex;
    gap: 8px;
    justify-content: center;
    bottom: var(--swiper-pagination-bottom, 15px) !important;
}

.hero-slider__pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    background: rgba(255, 255, 255, 0.55);
    opacity: 1;
    transition: width 0.2s ease, background 0.2s ease;
}

.hero-slider__pagination .swiper-pagination-bullet-active {
    width: 26px;
    border-radius: 6px;
    background: var(--primary);
}

@media (max-width: 600px) {
    .hero-slide {
        aspect-ratio: 4 / 3;
    }

    .hero-slider__nav {
        width: 38px;
        height: 52px;
    }
}

/* ======================================================
   CATEGORY SPOTLIGHT — category box (2 posts), two boxes per row, site container
   ====================================================== */
.bnfsj-spotlight {
    padding-block: clamp(28px, 4vw, 48px);
}

.spotlight-row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 2.5vw, 32px);
    align-items: stretch;
}

.spotlight-box {
    min-width: 0;
}

/* a box with two cards takes ~twice the width of a one-card box, so a
   double + single pair fills one row */
.spotlight-box--double {
    flex: 2 1 560px;
    background: #fff;
    padding: 20px;
}

.spotlight-box--single {
    flex: 1 1 280px;
    background: #fff;
    padding: 20px;
}

.spotlight-box__cards {
    display: grid;
    gap: clamp(14px, 1.6vw, 20px);
}

.spotlight-box--double .spotlight-box__cards {
    grid-template-columns: 1fr 1fr;
}

.spotlight-box--single .spotlight-box__cards {
    grid-template-columns: 1fr;
}

.spotlight-head {
    border-bottom: 2px solid var(--border-light);
    margin-bottom: 16px;
    padding-bottom: 10px;
}

.spotlight-head__title {
    margin: 0;
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    font-weight: 800;
    text-align: start;
}

.spotlight-head__title a {
    color: var(--secondary);
    transition: color 0.2s ease;
}

.spotlight-head__title a:hover {
    color: var(--primary-700);
}

.spotlight-card {
    border: 1px solid var(--border-light);
    border-radius: 0;
    overflow: hidden;
    background: var(--bg-surface);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.spotlight-card:hover {
    box-shadow: 0 16px 40px -22px rgba(26, 18, 41, 0.4);
    transform: translateY(-2px);
}

.spotlight-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.spotlight-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.spotlight-card:hover .spotlight-card__media img {
    transform: scale(1.04);
}

.spotlight-card__body {
    padding: 14px 16px 16px;
}

.spotlight-card__author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.spotlight-card__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid var(--border-light);
    background: var(--primary-050);
}

.spotlight-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spotlight-card__author-name {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    transition: color 0.2s ease;
}

.spotlight-card__author:hover .spotlight-card__author-name {
    color: var(--primary);
}

.spotlight-card__title {
    margin: 0;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    font-weight: 800;
    line-height: 1.5;
}

.spotlight-card__title a {
    color: var(--text-primary);
    transition: color 0.2s ease;
}

.spotlight-card__title a:hover {
    color: var(--primary-700);
}

@media (max-width: 760px) {

    .spotlight-box--double,
    .spotlight-box--single {
        flex: 1 1 100%;
    }

    .spotlight-box--double .spotlight-box__cards {
        grid-template-columns: 1fr;
    }
}

/* ======================================================
   FEATURE + QUAD — big card on the right, 4 cards (2x2) on the left
   ====================================================== */
.bnfsj-featquad {
    padding-block: clamp(28px, 4vw, 48px);
}

.featquad {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* col 1 (RTL = right) = big card, col 2 (left) = 2x2 grid */
    gap: clamp(20px, 2.5vw, 32px);
    align-items: start;
}

.featquad__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 1.6vw, 20px);
}

/* enlarge the featured card */
.featquad__big .spotlight-card__media {
    aspect-ratio: 4 / 3;
}

.featquad__big .spotlight-card__body {
    padding: 16px 18px 18px;
}

.featquad__big .spotlight-card__title {
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
}

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

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

/* ======================================================
   HORIZONTAL CARDS GRID — light, image on the right / text on the left, two per row
   ====================================================== */
.bnfsj-dark-grid {
    background: var(--bg-section);
    color: var(--text-primary);
    padding-block: clamp(28px, 4vw, 48px);
}

.dark-grid__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.dark-card {
    display: grid;
    grid-template-columns: 190px 1fr;
    /* col 1 (RTL = right) holds the image; col 2 (left) the text */
    gap: 16px;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 0;
    padding: 12px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.dark-card:hover {
    box-shadow: 0 14px 36px -22px rgba(26, 18, 41, 0.35);
    transform: translateY(-2px);
}

.dark-card__media {
    display: block;
    width: 190px;
    height: 140px;
    border-radius: 0;
    overflow: hidden;
}

.dark-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.dark-card:hover .dark-card__media img {
    transform: scale(1.05);
}

.dark-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.dark-card__kicker {
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.dark-card__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.74rem;
    color: var(--text-muted);
}

.dark-card__author {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dark-card__author img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-light);
}

.dark-card__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-light);
}

.dark-card__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.55;
}

.dark-card__title a {
    color: var(--text-primary);
    transition: color 0.2s ease;
}

.dark-card__title a:hover {
    color: var(--primary-700);
}

@media (max-width: 760px) {
    .dark-grid__grid {
        grid-template-columns: 1fr;
    }
}

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

    .dark-card__media {
        width: 130px;
        height: 100px;
    }
}

/* ======================================================
   HERO SPREAD — Luxury Editorial Magazine Opening
   ====================================================== */
.hero-spread {
    padding-block: var(--space-8) var(--space-6);
    background:
        radial-gradient(1100px 500px at 78% 12%, rgba(242, 133, 181, 0.045), transparent 60%),
        radial-gradient(900px 400px at 15% 60%, rgba(107, 91, 138, 0.035), transparent 55%),
        var(--bg-main);
}

.hero-spread__wrap {
    display: grid;
    gap: var(--space-6);
}

/* ── Main Grid: Cover + Picks ── */
.hero-spread__grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: var(--space-8);
    align-items: stretch;
}

/* =========================================
   COVER — Featured Story (Magazine Style)
   ========================================= */
.hero-cover {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    box-shadow:
        0 8px 40px rgba(45, 42, 51, 0.06),
        0 2px 12px rgba(45, 42, 51, 0.03);
}

.hero-cover__media {
    position: relative;
    display: block;
    flex: 1;
    min-height: clamp(240px, 26vw, 360px);
    overflow: hidden;
    background: var(--bg-muted);
}

.hero-cover__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s var(--ease-out);
}

.hero-cover:hover .hero-cover__media img {
    transform: scale(1.04);
}

/* Content — clean, below the image (no overlay) */
.hero-cover__content {
    padding: var(--space-6) var(--space-8);
    color: var(--text-primary);
}

/* Category pill — soft pink on surface */
.hero-cover__category {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding-inline: 14px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    font: 600 var(--text-xs)/1 var(--font-body);
    background: var(--primary-050);
    border: 1px solid var(--primary-100);
    color: var(--primary-700);
    margin-bottom: var(--space-4);
    transition: background var(--transition-base), color var(--transition-base);
}

.hero-cover__category:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    text-decoration: none;
}

/* Title */
.hero-cover__title {
    margin: 0 0 var(--space-3) 0;
    font: 700 clamp(22px, 2.6vw, 34px) / 1.3 var(--font-heading);
}

.hero-cover__title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

.hero-cover__title a:hover {
    color: var(--primary-700);
}

/* Excerpt */
.hero-cover__excerpt {
    margin: 0 0 var(--space-4) 0;
    font: 400 var(--text-sm)/1.85 var(--font-body);
    color: var(--text-secondary);
    max-width: 60ch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta line */
.hero-cover__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-5);
    font: 400 var(--text-xs)/1 var(--font-body);
    color: var(--text-muted);
}

.hero-cover__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-light);
}

/* CTA — solid primary */
.hero-cover__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding-inline: 22px;
    border-radius: var(--radius-pill);
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
    text-decoration: none;
    font: 600 var(--text-sm)/1 var(--font-body);
    transition:
        background var(--transition-base),
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

.hero-cover__cta i {
    font-size: 12px;
    transition: transform var(--transition-base);
}

.hero-cover__cta:hover {
    background: var(--primary-700);
    border-color: var(--primary-700);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(242, 133, 181, 0.28);
    color: #fff;
    text-decoration: none;
}

.hero-cover__cta:hover i {
    transform: translateX(-3px);
}

/* =========================================
   EDITOR'S PICKS — Numbered Vertical List
   ========================================= */
.hero-picks {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.hero-picks__header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid rgba(236, 231, 226, 0.6);
}

.hero-picks__label {
    font: 700 var(--text-sm)/1 var(--font-heading);
    color: var(--text-primary);
    position: relative;
    padding-inline-start: var(--space-4);
}

/* Subtle accent bar before label */
.hero-picks__label::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: -2px;
    bottom: -2px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--primary), var(--primary-700));
}

/* List */
.hero-picks__list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hero-picks__item {
    flex: 1;
}

.hero-picks__item:not(:last-child) {
    border-bottom: 1px solid rgba(236, 231, 226, 0.5);
}

.hero-picks__link {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition:
        background var(--transition-base);
}

.hero-picks__link:hover {
    background: rgba(242, 133, 181, 0.04);
    text-decoration: none;
    color: inherit;
}

/* Number */
.hero-picks__num {
    font: 700 clamp(28px, 2.2vw, 36px)/1 var(--font-heading);
    color: var(--primary-100);
    flex-shrink: 0;
    min-width: 42px;
    padding-top: 2px;
    transition: color var(--transition-base);
    user-select: none;
}

.hero-picks__link:hover .hero-picks__num {
    color: var(--primary);
}

/* Body */
.hero-picks__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding-top: 4px;
}

.hero-picks__kicker {
    font: 600 11px/1 var(--font-body);
    color: var(--primary-700);
}

.hero-picks__title {
    margin: 0;
    font: 600 var(--text-md)/1.5 var(--font-heading);
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--transition-base);
}

.hero-picks__link:hover .hero-picks__title {
    color: var(--primary-700);
}

.hero-picks__time {
    font: 400 var(--text-xs)/1 var(--font-body);
    color: var(--text-muted);
}

/* =========================================
   HIGHLIGHT STRIP — Elegant, NOT ticker
   ========================================= */
.hero-strip {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.hero-strip__item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    text-decoration: none;
    color: inherit;
    transition:
        background var(--transition-base);
    min-width: 0;
}

.hero-strip__item:hover {
    background: rgba(242, 133, 181, 0.04);
    text-decoration: none;
    color: inherit;
}

.hero-strip__badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding-inline: 10px;
    border-radius: var(--radius-pill);
    background: var(--primary-050);
    color: var(--primary-700);
    font: 600 10px/1 var(--font-body);
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid rgba(242, 133, 181, 0.10);
}

.hero-strip__text {
    font: 500 var(--text-sm)/1.5 var(--font-body);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition-base);
}

.hero-strip__item:hover .hero-strip__text {
    color: var(--text-primary);
}

.hero-strip__divider {
    width: 1px;
    align-self: stretch;
    background: rgba(236, 231, 226, 0.7);
    flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .hero-spread__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .hero-cover {
        min-height: 360px;
    }

    .hero-picks {
        border-radius: var(--radius-xl);
    }

    .hero-picks__list {
        flex-direction: row;
    }

    .hero-picks__item {
        flex: 1;
    }

    .hero-picks__item:not(:last-child) {
        border-bottom: none;
        border-inline-end: 1px solid rgba(236, 231, 226, 0.5);
    }

    .hero-strip {
        flex-wrap: wrap;
    }

    .hero-strip__divider {
        display: none;
    }

    .hero-strip__item {
        flex: 1 1 calc(50% - 1px);
        min-width: 240px;
    }
}

@media (max-width: 767px) {
    .hero-spread {
        padding-block: var(--space-5) var(--space-5);
    }

    .hero-cover {
        min-height: 300px;
        border-radius: var(--radius-lg);
    }

    .hero-cover__title {
        font-size: clamp(19px, 5.2vw, 26px);
    }

    .hero-cover__excerpt {
        display: none;
    }

    .hero-cover__content {
        inset-inline: var(--space-5);
        inset-block-end: var(--space-5);
    }

    .hero-picks {
        border-radius: var(--radius-lg);
    }

    .hero-picks__list {
        flex-direction: column;
    }

    .hero-picks__item:not(:last-child) {
        border-inline-end: none;
        border-bottom: 1px solid rgba(236, 231, 226, 0.5);
    }

    .hero-picks__link {
        padding: var(--space-4) var(--space-5);
    }

    .hero-picks__num {
        font-size: 26px;
        min-width: 36px;
    }

    .hero-picks__title {
        font-size: var(--text-sm);
    }

    .hero-strip {
        flex-direction: column;
        border-radius: var(--radius-lg);
    }

    .hero-strip__item {
        flex: none;
        width: 100%;
        border-bottom: 1px solid rgba(236, 231, 226, 0.4);
    }

    .hero-strip__item:last-of-type {
        border-bottom: none;
    }

    .menu-btn {
        display: inline-grid;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-cover__media img {
        transition: none !important;
    }

    .hero-cover:hover .hero-cover__media img {
        transform: none !important;
    }

    .hero-cover__cta:hover i {
        transform: none !important;
    }
}


/* ======================================================
   SECTIONS 3–13 — Magazine Editorial System
   Using unified design tokens from :root.
   Section headers styled as editorial chapter dividers.
   ====================================================== */

/* ── Base Section ── */
.sec {
    padding: var(--space-12) 0;
    position: relative;
}

.sec+.sec {
    border-top: 1px solid rgba(0, 0, 0, 0.03);
}

.sec__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* ── Section Header — Editorial Chapter Divider ── */
.sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    position: relative;
    flex-wrap: wrap;
}

/* Gradient bottom rule */
.sec-head::after {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(to left, var(--primary-100) 0%, var(--border-light) 40%, transparent 100%);
}

.sec-head__right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    padding-inline-start: var(--space-6);
}

/* Vertical accent bar (via pseudo-element — no HTML change needed) */
.sec-head__right::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--primary), var(--primary-700));
    opacity: 0.7;
}

/* Ghost chapter number — editorial magazine accent */
.sec-head__chapter {
    position: absolute;
    inset-inline-start: var(--space-4);
    top: -22px;
    font: 800 82px/1 var(--font-heading);
    color: var(--primary);
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
    letter-spacing: -3px;
    /* Reset any old circle styles */
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    display: block;
    justify-content: initial;
    align-items: initial;
}

.sec-head__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Kicker — quiet editorial label */
.sec-head__kicker {
    font: 500 11px/1 var(--font-body);
    color: var(--text-muted);
}

/* Section title — signature moment */
.sec-head__title {
    margin: 0;
    font: 700 clamp(22px, 2.5vw, 28px)/1.2 var(--font-heading);
    color: var(--text-primary);
}

.sec-head__title a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--primary-100), var(--primary-100));
    background-size: 0% 2px;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    padding-bottom: 5px;
    transition: background-size 0.4s var(--ease-out), color var(--transition-base);
}

.sec-head__title a:hover {
    color: var(--primary-700);
    background-size: 100% 2px;
}

/* Subtitle / poetic subline */
.sec-head__subtitle {
    margin: 0;
    font: 400 var(--text-sm)/1.7 var(--font-body);
    color: var(--text-muted);
    max-width: 38ch;
}

/* "More" link — editorial styling */
.sec-head__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font: 500 var(--text-sm)/1 var(--font-body);
    color: var(--text-secondary);
    white-space: nowrap;
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    transition: color var(--transition-base), border-color var(--transition-base);
    align-self: flex-end;
    margin-bottom: 2px;
    flex-shrink: 0;
}

.sec-head__more i {
    font-size: 11px;
    transition: transform var(--transition-base);
}

.sec-head__more:hover {
    color: var(--primary-700);
    border-color: var(--primary-100);
    text-decoration: none;
}

.sec-head__more:hover i {
    transform: translateX(-3px);
}

/* ── Light variant for dark backgrounds ── */
.sec-head--light {
    border-bottom: none;
    margin-bottom: var(--space-6);
    padding-bottom: 0;
}

.sec-head--light::after {
    display: none;
}

.sec-head--light .sec-head__right::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3));
}

.sec-head--light .sec-head__kicker {
    color: rgba(255, 255, 255, 0.6);
}

.sec-head--light .sec-head__title {
    color: #fff;
}

.sec-head--light .sec-head__title a {
    color: #fff;
    background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3));
}

.sec-head--light .sec-head__title a:hover {
    color: var(--primary-100);
}

.sec-head--light .sec-head__subtitle {
    color: rgba(255, 255, 255, 0.6);
}

.sec-head__more--light {
    color: rgba(255, 255, 255, 0.7);
    border-color: transparent;
}

.sec-head__more--light:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

/* ── Centered variant ── */
.sec-head--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
}

.sec-head--center::after {
    display: none;
}

.sec-head--center .sec-head__right {
    padding-inline-start: 0;
    align-items: center;
}

.sec-head--center .sec-head__right::before {
    display: none;
}

.sec-head--center .sec-head__text {
    align-items: center;
}

.sec-head--center .sec-head__subtitle {
    max-width: 50ch;
}

.sec-head--center .sec-head__more {
    align-self: center;
    margin-top: var(--space-2);
}

/* ======================================================
   §2.5 — Women Voices (حضور امرأة) — Editorial Grid
   ====================================================== */
.women-voices {
    background: var(--bg-surface);
}

.women-voices__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: stretch;
}

/* Hero Article */
.wv-hero {
    display: flex;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
}

.wv-hero__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
}

.wv-hero__media {
    position: relative;
    flex: 1;
    min-height: 240px;
    overflow: hidden;
}

.wv-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.wv-hero__link:hover .wv-hero__media img {
    transform: scale(1.05);
}

.wv-hero__overlay {
    display: none;
}

.wv-hero__content {
    padding: var(--space-5) var(--space-6);
    color: var(--text-primary);
}

.wv-hero__cat {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font: 600 var(--text-xs)/1 var(--font-body);
    margin-bottom: var(--space-3);
}

.wv-hero__title {
    font: 700 clamp(1.2rem, 2vw, 1.5rem)/1.35 var(--font-heading);
    margin: 0 0 var(--space-3);
    color: var(--text-primary);
    transition: color var(--dur-2) var(--ease-out);
}

.wv-hero__link:hover .wv-hero__title {
    color: var(--primary-700);
}

.wv-hero__excerpt {
    font: 400 var(--text-md)/1.6 var(--font-body);
    color: var(--text-secondary);
    margin: 0 0 var(--space-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wv-hero__meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.wv-hero__author i {
    margin-left: 6px;
    font-size: var(--text-xs);
}

/* Articles List */
.wv-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.wv-card {
    display: flex;
    flex: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    background: var(--bg-main);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}

.wv-card:hover {
    border-color: var(--primary-200);
    box-shadow: 0 4px 20px rgba(242, 133, 181, 0.1);
}

.wv-card__link {
    display: flex;
    flex: 1;
    align-items: stretch;
    gap: var(--space-4);
    text-decoration: none;
    padding: var(--space-3);
}

.wv-card__img {
    flex: 0 0 42%;
    align-self: stretch;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.wv-card__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.wv-card:hover .wv-card__img img {
    transform: scale(1.1);
}

.wv-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.wv-card__cat {
    font: 600 var(--text-xs)/1 var(--font-body);
    color: var(--primary);
    margin-bottom: 4px;
}

.wv-card__title {
    font: 600 var(--text-sm)/1.35 var(--font-heading);
    color: var(--text-primary);
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--dur-2) var(--ease-out);
}

.wv-card:hover .wv-card__title {
    color: var(--primary-700);
}

.wv-card__meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Responsive */
@media (max-width: 900px) {
    .women-voices__grid {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .wv-hero__media {
        aspect-ratio: 16 / 9;
        max-height: none;
        min-height: 0; /* 240px base min-height × 16/9 would force 427px width */
    }

    .wv-list {
        flex-direction: row;
        overflow-x: auto;
        gap: var(--space-3);
        padding-bottom: var(--space-2);
    }

    .wv-card {
        flex: 0 0 300px;
    }

    .wv-card__img {
        flex-basis: 40%;
        min-height: 96px;
    }
}

/* ======================================================
   §2.6 — Lifestyle Tabs (الحياة الناعمة) — Tabbed Grid
   ====================================================== */
.lifestyle-tabs {
    background: var(--bg-muted);
}

/* Tabs Navigation */
.lifestyle-tabs__nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--space-6);
}

.lifestyle-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 10px 18px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font: 500 var(--text-sm)/1 var(--font-body);
    cursor: pointer;
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}

.lifestyle-tabs__tab i {
    font-size: var(--text-sm);
    opacity: 0.7;
}

.lifestyle-tabs__tab:hover {
    border-color: var(--primary-200);
    color: var(--primary-700);
}

.lifestyle-tabs__tab.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.lifestyle-tabs__tab.is-active i {
    opacity: 1;
}

/* Cards Grid */
.lifestyle-tabs__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

/* Lifestyle Card */
.lt-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}

.lt-card:hover {
    border-color: var(--primary-200);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.lt-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
}

.lt-card__img {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--bg-muted);
}

.lt-card__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.lt-card:hover .lt-card__img img {
    transform: scale(1.08);
}

.lt-card__cat {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: rgba(255, 255, 255, 0.95);
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font: 600 var(--text-xs)/1 var(--font-body);
    color: var(--primary-700);
}

.lt-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-5);
}

.lt-card__title {
    font: 600 var(--text-md)/1.45 var(--font-heading);
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--dur-2) var(--ease-out);
}

.lt-card:hover .lt-card__title {
    color: var(--primary-700);
}

.lt-card__excerpt {
    font: 400 var(--text-sm)/1.6 var(--font-body);
    color: var(--text-muted);
    margin: 0 0 var(--space-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lt-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px var(--space-4);
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.lt-card__meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lt-card__meta i {
    font-size: var(--text-xs);
    color: var(--primary-600);
}

/* Responsive */
@media (max-width: 1024px) {
    .lifestyle-tabs__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .lifestyle-tabs__nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--space-2);
    }

    .lifestyle-tabs__tab {
        flex-shrink: 0;
        padding: 8px 14px;
        font-size: var(--text-xs);
    }

    .lifestyle-tabs__grid {
        grid-template-columns: 1fr;
    }
}

/* ======================================================
   §4 — فلسطينيات — Immersive Cinematic Section
   ====================================================== */
/* ======================================================
   §4 — فلسطينيات — one compact band.
   The page's single dark moment: hero photograph with the
   story written on it, three quiet rows beside it, one line
   of quotation underneath. No slider, no second CTA.
   ====================================================== */
.palest {
    position: relative;
    overflow: hidden;
    padding: var(--space-12) 0;
}

.palest__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.palest__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(40%) blur(24px);
    transform: scale(1.06);
    opacity: 0.35;
}

.palest__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(15, 10, 24, 0.96) 0%, rgba(26, 18, 41, 0.95) 45%, rgba(45, 31, 61, 0.94) 100%);
}

.palest__container {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* Header row: title on one side, sub-category pills on the other */
.palest__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.palest__head-text .sec-head__kicker {
    color: var(--primary-100);
}

.palest__head-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
}

.palest__head-title a {
    color: #fff;
    text-decoration: none;
    transition: color var(--dur-2) var(--ease-out);
}

.palest__head-title a:hover {
    color: var(--primary-100);
}

.palest__cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.palest__cat {
    padding: var(--space-1) var(--space-4);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-full);
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}

.palest__cat:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.palest__cat--more {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.palest__cat--more:hover {
    background: var(--secondary);
    border-color: var(--secondary);
}

.palest__cat--more i {
    font-size: 0.8em;
    margin-inline-start: 4px;
}

/* One row: hero photograph + three stacked stories */
.palest__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-6);
    align-items: stretch;
}

.palest__hero {
    position: relative;
    display: block;
    min-height: 360px;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color var(--dur-2) var(--ease-out), transform 0.45s var(--ease-out);
}

.palest__hero:hover {
    border-color: rgba(242, 133, 181, 0.45);
    transform: translateY(-4px);
}

.palest__hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease-out);
}

.palest__hero:hover .palest__hero-img {
    transform: scale(1.04);
}

.palest__hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(15, 10, 24, 0.55) 62%, rgba(15, 10, 24, 0.92) 100%);
}

.palest__hero-content {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: var(--space-6);
}

.palest__hero-title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: 1.5;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.palest__hero-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--text-xs);
}

.palest__hero-author i {
    color: var(--primary-100);
    margin-inline-end: 4px;
}

/* Side rows */
.palest__side {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.palest__row {
    flex: 1;
    display: flex;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform 0.3s var(--ease-out);
}

.palest__row:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(242, 133, 181, 0.4);
    transform: translateY(-2px);
}

.palest__row-img {
    flex: 0 0 108px;
    aspect-ratio: 16 / 11;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.palest__row-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease-out);
}

.palest__row:hover .palest__row-img img {
    transform: scale(1.06);
}

.palest__row-body {
    min-width: 0;
}

.palest__row-cat {
    display: block;
    margin-bottom: 2px;
    color: var(--primary-100);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.palest__row-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: 1.6;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--dur-2) var(--ease-out);
}

.palest__row:hover .palest__row-title {
    color: var(--primary-100);
}

/* One line of quotation, not a monument */
.palest__quote {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin: var(--space-8) 0 0;
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.palest__quote-icon {
    color: var(--primary);
    font-size: var(--text-md);
}

.palest__quote-text {
    margin: 0;
    flex: 1;
    min-width: 240px;
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text-md);
    font-style: italic;
    line-height: 1.8;
}

.palest__quote-cite {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-xs);
    font-style: normal;
}

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

    .palest__hero {
        min-height: 300px;
    }
}

@media (max-width: 640px) {
    .palest {
        padding: var(--space-10) 0;
    }

    .palest__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .palest__hero {
        min-height: 240px;
    }

    .palest__hero-content {
        padding: var(--space-4);
    }

    .palest__hero-title {
        font-size: var(--text-lg);
    }

    .palest__row-img {
        flex-basis: 96px;
    }
}

/* ======================================================
   §5 — Series Showcase (سلاسل) — 3-Column Layout
   ====================================================== */
.series-showcase {
    position: relative;
    padding: var(--space-12) 0;
    overflow: hidden;
    background: var(--bg-muted);
}

.series-showcase__bg {
    display: none;
}

.series-showcase__container {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* 3-Column Grid */
.series-grid {
    display: grid;
    /* minmax(0,…) so the featured image can't force a track wider than its column */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.series-grid__col-title {
    font: 600 var(--text-sm)/1 var(--font-heading);
    color: var(--text-secondary);
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

/* Featured Series Card */
.series-card-featured {
    display: block;
    text-decoration: none;
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}

.series-card-featured:hover {
    border-color: var(--primary-200);
    box-shadow: 0 8px 30px rgba(242, 133, 181, 0.12);
    transform: translateY(-4px);
}

.series-card-featured__cover {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.series-card-featured__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.series-card-featured:hover .series-card-featured__cover img {
    transform: scale(1.08);
}

.series-card-featured__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
}

.series-card-featured__badge {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: var(--primary);
    color: #fff;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font: 600 var(--text-xs)/1 var(--font-body);
}

.series-card-featured__body {
    padding: var(--space-4);
}

.series-card-featured__title {
    font: 700 var(--text-md)/1.3 var(--font-heading);
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
    transition: color var(--dur-2) var(--ease-out);
}

.series-card-featured:hover .series-card-featured__title {
    color: var(--primary-700);
}

.series-card-featured__desc {
    font: 400 var(--text-sm)/1.6 var(--font-body);
    color: var(--text-muted);
    margin: 0 0 var(--space-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.series-card-featured__meta {
    display: flex;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.series-card-featured__meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.series-card-featured__meta i {
    color: var(--primary-300);
    font-size: var(--text-xs);
}

/* Episodes List */
.series-eps-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.series-ep {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    text-decoration: none;
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}

.series-ep:hover {
    border-color: var(--primary-200);
    background: var(--bg-main);
}

.series-ep__num {
    width: 36px;
    height: 36px;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 var(--text-sm)/1 var(--font-heading);
    flex-shrink: 0;
}

.series-ep__info {
    flex: 1;
    min-width: 0;
}

.series-ep__title {
    font: 600 var(--text-sm)/1.4 var(--font-heading);
    color: var(--text-primary);
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--dur-2) var(--ease-out);
}

.series-ep:hover .series-ep__title {
    color: var(--primary-700);
}

.series-ep__author {
    font-size: var(--text-xs);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.series-ep__author i {
    font-size: var(--text-xs);
}

/* Other Series List */
.series-other-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.series-other {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}

.series-other:hover {
    background: var(--bg-surface);
}

.series-other__cover {
    width: 76px;
    height: 90px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.series-other__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.series-other:hover .series-other__cover img {
    transform: scale(1.1);
}

.series-other__info {
    flex: 1;
    min-width: 0;
}

.series-other__title {
    font: 600 var(--text-sm)/1.35 var(--font-heading);
    color: var(--text-primary);
    margin: 0 0 4px;
    transition: color var(--dur-2) var(--ease-out);
}

.series-other:hover .series-other__title {
    color: var(--primary-700);
}

.series-other__count {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Series Responsive */
@media (max-width: 1024px) {
    .series-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .series-grid__more {
        grid-column: 1 / -1;
    }

    .series-other-list {
        flex-direction: row;
        overflow-x: auto;
        gap: var(--space-4);
        padding-bottom: var(--space-2);
    }

    .series-other {
        flex-direction: column;
        text-align: center;
        flex-shrink: 0;
        width: 100px;
    }

    .series-other__cover {
        width: 80px;
        height: 100px;
    }
}

@media (max-width: 768px) {
    .series-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .series-grid__col-title {
        margin-top: var(--space-4);
    }

    .series-grid__featured .series-grid__col-title {
        margin-top: 0;
    }
}

/* ======================================================
   §6 — Creative Hub (إبداعات بنفسج) — Pinterest-Style
   ====================================================== */
.creative-hub {
    padding: var(--space-12) 0;
    background: var(--bg-surface);
    color: var(--text-primary);
}

.creative-hub .sec-head__kicker {
    color: var(--primary);
}

.creative-hub .sec-head__title a {
    color: var(--text-primary);
}

.creative-hub .sec-head__subtitle {
    color: var(--text-secondary);
}

.creative-hub__container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* Category Tabs */
.creative-hub__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: var(--space-10);
}

.creative-hub__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-medium);
    background: var(--bg-main);
    color: var(--text-secondary);
    font: 500 var(--text-sm)/1 var(--font-body);
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base), background-color var(--transition-base), color var(--transition-base), opacity var(--transition-base);
}

.creative-hub__tab i {
    font-size: 14px;
    color: var(--text-muted);
}

.creative-hub__tab:hover {
    border-color: var(--primary);
    color: var(--text-primary);
    background: var(--bg-hover);
}

.creative-hub__tab.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-on-primary);
    box-shadow: 0 6px 20px rgba(242, 133, 181, 0.25);
}

.creative-hub__tab.is-active i {
    color: var(--text-on-primary);
}

/* Masonry Grid */
.creative-hub__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    gap: var(--space-5);
    margin-bottom: var(--space-10);
}

/* Creative Items */
.creative-item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    display: block;
}

.creative-item__media {
    position: absolute;
    inset: 0;
}

.creative-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.creative-item:hover .creative-item__media img {
    transform: scale(1.08);
}

.creative-item__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%);
    transition: background var(--transition-base);
}

.creative-item:hover .creative-item__overlay {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.1) 100%);
}

.creative-item__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font: 600 11px/1 var(--font-body);
    backdrop-filter: blur(10px);
    z-index: 2;
}

.creative-item--story .creative-item__badge {
    background: rgba(242, 133, 181, 0.9);
    color: #fff;
}

.creative-item--infographic .creative-item__badge {
    background: rgba(201, 168, 108, 0.9);
    color: #fff;
}

.creative-item--banafsajiyat .creative-item__badge {
    background: rgba(107, 91, 138, 0.9);
    color: #fff;
}

.creative-item__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-5);
    z-index: 2;
    transform: translateY(10px);
    opacity: 0.9;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base), background-color var(--transition-base), color var(--transition-base), opacity var(--transition-base);
}

.creative-item:hover .creative-item__content {
    transform: translateY(0);
    opacity: 1;
}

.creative-item__title {
    font: 600 16px/1.5 var(--font-heading);
    color: #fff;
    margin: 0 0 8px;
}

.creative-item__excerpt {
    font: 400 var(--text-sm)/1.6 var(--font-body);
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 10px;
    display: none;
}

.creative-item--featured .creative-item__excerpt {
    display: block;
}

.creative-item__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 400 var(--text-xs)/1 var(--font-body);
    color: rgba(255, 255, 255, 0.6);
}

/* Grid Item Sizes */
.creative-item--featured {
    grid-column: span 1;
    grid-row: span 2;
}

.creative-item--tall {
    grid-row: span 2;
}

/* Quote Card */
.creative-item--quote {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-700) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}

.creative-quote {
    text-align: center;
    margin: 0;
}

.creative-quote__icon {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: var(--space-4);
    display: block;
}

.creative-quote__text {
    font: 600 18px/1.6 var(--font-heading);
    color: #fff;
    margin: 0 0 var(--space-3);
}

.creative-quote__cite {
    font: 400 var(--text-sm)/1 var(--font-body);
    color: rgba(255, 255, 255, 0.7);
    font-style: normal;
}

/* CTA */
.creative-hub__cta {
    text-align: center;
}

.creative-hub__btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 36px;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--text-on-primary);
    font: 600 var(--text-md)/1 var(--font-heading);
    text-decoration: none;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base), background-color var(--transition-base), color var(--transition-base), opacity var(--transition-base);
    box-shadow: var(--shadow-md);
}

.creative-hub__btn:hover {
    background: var(--primary-700);
    gap: 16px;
    box-shadow: 0 8px 22px rgba(242, 133, 181, 0.22);
}

/* Creative Hub Responsive */
@media (max-width: 900px) {
    .creative-hub {
        padding: var(--space-12) 0;
    }

    .creative-hub__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
    }

    .creative-item--featured {
        grid-column: span 2;
        grid-row: span 2;
    }
}

@media (max-width: 600px) {
    .creative-hub {
        padding: var(--space-10) 0;
    }

    .creative-hub__tabs {
        gap: 8px;
    }

    .creative-hub__tab {
        padding: 10px 16px;
        font-size: 13px;
    }

    .creative-hub__tab i {
        display: none;
    }

    .creative-hub__grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 160px;
        gap: var(--space-3);
    }

    .creative-item--featured {
        grid-column: span 2;
        grid-row: span 1;
    }

    .creative-item--tall {
        grid-row: span 1;
    }

    .creative-item__badge {
        padding: 5px 10px;
        font-size: 10px;
    }

    .creative-item__title {
        font-size: 14px;
    }

    .creative-item__content {
        padding: var(--space-4);
    }

    .creative-hub__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ======================================================
   §7 — Long Reads (فكر) — Editorial Deep Dive
   ====================================================== */
.longread {
    background: var(--bg-surface);
    padding: var(--space-12) 0;
    position: relative;
}

/* Decorative accent */
.longread::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--secondary-300), var(--primary-100));
    border-radius: 3px;
}

.longread__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
}

.longread-card {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-10) var(--space-8);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base), background-color var(--transition-base), color var(--transition-base), opacity var(--transition-base);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

/* article image — bleeds to the card edges, rounded top corners */
.longread-card__media {
    margin: calc(var(--space-10) * -1) calc(var(--space-8) * -1) var(--space-6);
    height: 190px;
    overflow: hidden;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    position: relative;
    z-index: 1;
}

.longread-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.longread-card:hover .longread-card__media img {
    transform: scale(1.05);
}

/* Decorative quote mark */
.longread-card::before {
    content: '\201C';
    position: absolute;
    top: var(--space-6);
    inset-inline-end: var(--space-6);
    font: 700 80px/1 var(--font-heading);
    color: var(--primary-050);
    pointer-events: none;
}

.longread-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    text-decoration: none;
}

.longread-card__topline {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.longread-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary-300), var(--secondary));
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 14px;
}

.longread-card__cat {
    font: 700 11px/1 var(--font-body);
    color: var(--secondary);
}

.longread-card__reading {
    font: 500 var(--text-xs)/1 var(--font-body);
    color: var(--text-muted);
    margin-inline-start: auto;
    padding: 6px 12px;
    background: var(--bg-muted);
    border-radius: var(--radius-pill);
}

.longread-card__title {
    font: 700 clamp(20px, 2.5vw, 26px)/1.4 var(--font-heading);
    color: var(--text-primary);
    margin: 0 0 var(--space-5);
}

.longread-card:hover .longread-card__title {
    color: var(--primary-700);
}

.longread-card__excerpt {
    font: 400 var(--text-md)/1.9 var(--font-body);
    color: var(--text-reading-muted);
    margin: 0 0 var(--space-6);
    flex-grow: 1;
}

.longread-card__author {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-light);
    margin-top: auto;
}

.longread-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-050), var(--primary-100));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 16px;
    flex-shrink: 0;
}

.longread-card__authorName {
    font: 600 var(--text-sm)/1 var(--font-heading);
    color: var(--text-primary);
    display: block;
    margin-bottom: 4px;
}

.longread-card__date {
    font: 400 var(--text-xs)/1 var(--font-body);
    color: var(--text-muted);
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .longread__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .longread-card {
        padding: var(--space-6);
    }

    .longread-card::before {
        font-size: 60px;
        top: var(--space-4);
    }
}

/* ======================================================
   §11 — Blogs Pro (مدونات) — Premium Author Cards
   ====================================================== */
.blogs-pro {
    background: var(--bg-muted);
}

.blogs-pro__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

/* Author Card */
.author-card {
    background: var(--bg-main);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    border: 1px solid var(--border-subtle);
    transition: box-shadow var(--dur-2) var(--ease-out);
}

.author-card:hover {
    box-shadow: var(--shadow-lg);
}

.author-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.author-card__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid var(--primary-050);
}

.author-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-card__info {
    flex: 1;
    min-width: 0;
}

.author-card__name {
    font: 700 var(--text-md)/1.3 var(--font-heading);
    color: var(--text-primary);
    margin: 0 0 2px;
}

.author-card__role {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.author-card__follow {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-decoration: none;
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}

.author-card__follow:hover {
    background: var(--primary-050);
    border-color: var(--primary);
    color: var(--primary);
}

.author-card__posts {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.author-card__post {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
    border: 1px solid transparent;
}

.author-card__post:hover {
    border-color: var(--primary-100);
    background: var(--primary-050);
}

.author-card__post-title {
    font: 500 var(--text-sm)/1.5 var(--font-heading);
    color: var(--text-primary);
    flex: 1;
    transition: color var(--dur-2);
}

.author-card__post:hover .author-card__post-title {
    color: var(--primary);
}

.author-card__post-date {
    font-size: var(--text-xs);
    color: var(--text-muted);
    flex-shrink: 0;
}

.author-card__view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font: 600 var(--text-sm)/1 var(--font-cairo);
    color: var(--primary);
    text-decoration: none;
    padding: var(--space-2);
    transition: gap var(--dur-2) var(--ease-out);
}

.author-card__view-all:hover {
    gap: var(--space-3);
}

.author-card__view-all i {
    font-size: var(--text-xs);
    transition: transform var(--dur-2);
}

.author-card__view-all:hover i {
    transform: translateX(-3px);
}

/* Responsive */
@media (max-width: 900px) {
    .blogs-pro__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .blogs-pro__grid {
        grid-template-columns: 1fr;
    }
}

/* ======================================================
   §12 — Quick Pro (مختارات سريعة) — Trending Picks
   ====================================================== */
.quick-pro {
    background: var(--bg-surface);
}

.quick-pro__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

/* Quick Pick Card */
.quick-pick {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-main);
    border-radius: var(--radius-lg);
    text-decoration: none;
    border: 1px solid var(--border-subtle);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
    position: relative;
}

.quick-pick:hover {
    border-color: var(--primary-200);
    box-shadow: 0 4px 20px rgba(242, 133, 181, 0.1);
    transform: translateY(-2px);
}

.quick-pick__icon {
    width: 44px;
    height: 44px;
    background: var(--primary-050);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: var(--text-md);
    flex-shrink: 0;
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}

.quick-pick:hover .quick-pick__icon {
    background: var(--primary);
    color: #fff;
}

.quick-pick__body {
    flex: 1;
    min-width: 0;
}

.quick-pick__cat {
    display: block;
    font: 600 var(--text-xs)/1 var(--font-cairo);
    color: var(--primary);
    margin-bottom: 4px;
}

.quick-pick__title {
    font: 600 var(--text-sm)/1.4 var(--font-heading);
    color: var(--text-primary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--dur-2);
}

.quick-pick:hover .quick-pick__title {
    color: var(--primary-700);
}

.quick-pick__arrow {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: var(--text-xs);
    opacity: 0;
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}

.quick-pick:hover .quick-pick__arrow {
    opacity: 1;
    left: var(--space-4);
    color: var(--primary);
}

/* Responsive */
@media (max-width: 1024px) {
    .quick-pro__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .quick-pro__grid {
        grid-template-columns: 1fr;
    }

    .quick-pick {
        padding: var(--space-3);
    }

    .quick-pick__icon {
        width: 40px;
        height: 40px;
        font-size: var(--text-md);
    }
}

/* ======================================================
   §13 — Ambassadors Showcase (سفراء بنفسج) — Minimal Design
   ====================================================== */
.ambassadors-showcase {
    background: var(--bg-surface);
}

.ambassadors-showcase__track {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    padding-bottom: var(--space-4);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ambassadors-showcase__track::-webkit-scrollbar {
    display: none;
}

/* Ambassador Card */
.amb-showcase-card {
    position: relative;
    flex-shrink: 0;
    width: 140px;
}

.amb-showcase-card__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.amb-showcase-card__avatar {
    width: 80px;
    height: 80px;
    margin-bottom: var(--space-3);
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border-subtle);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}

.amb-showcase-card:hover .amb-showcase-card__avatar {
    border-color: var(--primary);
    transform: scale(1.05);
}

.amb-showcase-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.amb-showcase-card__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.amb-showcase-card__name {
    font: 600 var(--text-sm)/1.3 var(--font-heading);
    color: var(--text-primary);
    margin: 0;
    transition: color var(--dur-2) var(--ease-out);
}

.amb-showcase-card:hover .amb-showcase-card__name {
    color: var(--primary);
}

.amb-showcase-card__country {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.amb-showcase-card__link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* Join Card */
.amb-showcase-card--join .amb-showcase-card__join-icon {
    width: 80px;
    height: 80px;
    margin-bottom: var(--space-3);
    border-radius: 50%;
    background: var(--bg-muted);
    border: 2px dashed var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--text-lg);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}

.amb-showcase-card--join:hover .amb-showcase-card__join-icon {
    border-color: var(--primary);
    background: var(--primary-050);
    color: var(--primary);
}

.amb-showcase-card--join .amb-showcase-card__country {
    font-size: var(--text-xs);
}

/* Responsive */
@media (max-width: 768px) {
    .amb-showcase-card {
        width: 120px;
    }

    .amb-showcase-card__avatar,
    .amb-showcase-card--join .amb-showcase-card__join-icon {
        width: 64px;
        height: 64px;
    }
}

/* ======================================================
   Footer Pro — Premium Design
   ====================================================== */
.footer-pro {
    background: var(--bg-dark);
    color: rgba(255, 255, 255, 0.7);
}

.footer-pro__main {
    padding: var(--space-12) 0;
}

.footer-pro__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
    gap: var(--space-8);
}

/* Brand Column */
.footer-pro__brand {
    max-width: 320px;
}

.footer-pro__logo {
    display: inline-block;
    margin-bottom: var(--space-4);
}

.footer-pro__logo img {
    height: 45px;
    /* Uploaded logos are whitened wholesale so any colour survives the dark
       footer. The theme's own footer cut is ALREADY white with the petal cut
       out of the square — the filter would fill that hole back in. */
    filter: brightness(0) invert(1);
}

.footer-pro__logo--native img {
    filter: none;
    height: 52px;
}

.footer-pro__desc {
    font-size: var(--text-sm);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 var(--space-5);
}

/* Newsletter */
.footer-pro__newsletter {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.footer-pro__newsletter-title {
    font: 600 var(--text-sm)/1 var(--font-cairo);
    color: #fff;
    margin: 0 0 var(--space-3);
}

.footer-pro__form {
    display: flex;
    gap: var(--space-2);
}

.footer-pro__input {
    flex: 1;
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    font: 400 var(--text-sm)/1 var(--font-cairo);
    color: #fff;
    outline: none;
    transition: border-color var(--dur-2);
}

.footer-pro__input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.footer-pro__input:focus {
    border-color: var(--primary);
}

.footer-pro__submit {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    background: var(--primary);
    border: none;
    border-radius: var(--radius-md);
    color: #fff;
    cursor: pointer;
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-pro__submit:hover {
    background: var(--primary-600);
    transform: translateY(-2px);
}

/* Links Columns */
.footer-pro__links {
    padding-top: var(--space-2);
}

.footer-pro__title {
    font: 700 var(--text-md)/1 var(--font-heading);
    color: #fff;
    margin: 0 0 var(--space-4);
    position: relative;
    padding-bottom: var(--space-2);
}

.footer-pro__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
}

.footer-pro__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.footer-pro__list a {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.footer-pro__list a::before {
    content: '';
    width: 0;
    height: 1px;
    background: var(--primary);
    transition: width var(--dur-2) var(--ease-out);
}

.footer-pro__list a:hover {
    color: #fff;
    padding-right: var(--space-2);
}

.footer-pro__list a:hover::before {
    width: 12px;
}

/* Social Column */
.footer-pro__social-col {
    padding-top: var(--space-2);
}

.footer-pro__social {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.footer-pro__social-link {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-md);
    text-decoration: none;
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}

/* The icon glyph, whatever the dashboard row asks for. Some brand glyphs
   (YouTube) are solid tiles: at a large size, painted with the row's
   icon_color, they read as giant colored slabs — so the size is pinned and
   the inline color is muted; the brand color shows as the hover background
   instead. */
.footer-pro__social-link i {
    font-size: 15px !important;
    line-height: 1;
    color: rgba(255, 255, 255, 0.65) !important;
}

.footer-pro__social-link:hover {
    transform: translateY(-3px);
    background: var(--primary);
    border-color: var(--primary);
}

.footer-pro__social-link:hover i {
    color: #fff !important;
}

.footer-pro__social-link--fb:hover {
    background: #1877F2;
    color: #fff;
}

.footer-pro__social-link--tw:hover {
    background: #000;
    color: #fff;
}

.footer-pro__social-link--ig:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
}

.footer-pro__social-link--yt:hover {
    background: #FF0000;
    color: #fff;
}

.footer-pro__social-link--sc:hover {
    background: #FF5500;
    color: #fff;
}

/* App Badges */
.footer-pro__apps-label {
    display: block;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: var(--space-2);
}

.footer-pro__apps-badges {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.footer-pro__app-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: var(--text-xs);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}

.footer-pro__app-badge i {
    font-size: var(--text-lg);
}

.footer-pro__app-badge:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--primary);
    color: #fff;
}

/* Bottom Bar */
.footer-pro__bottom {
    background: rgba(0, 0, 0, 0.2);
    padding: var(--space-4) 0;
}

.footer-pro__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-pro__copy {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

.footer-pro__copy strong {
    color: var(--primary-600);
}

.footer-pro__made {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

.footer-pro__heart {
    display: inline-block;
}


/* Responsive */
@media (max-width: 1024px) {
    .footer-pro__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }

    .footer-pro__brand {
        grid-column: span 2;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .footer-pro__grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-pro__brand {
        grid-column: span 2;
    }

    .footer-pro__social-col {
        grid-column: span 2;
    }

    .footer-pro__social {
        justify-content: center;
    }

    .footer-pro__apps-badges {
        flex-direction: row;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .footer-pro__grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-pro__brand,
    .footer-pro__links,
    .footer-pro__social-col {
        grid-column: 1;
    }

    .footer-pro__title::after {
        right: 50%;
        transform: translateX(50%);
    }

    .footer-pro__list {
        align-items: center;
    }

    .footer-pro__list a:hover {
        padding-right: 0;
    }

    .footer-pro__bottom-inner {
        flex-direction: column;
        gap: var(--space-2);
    }
}

/* ======================================================
   Sections — Responsive (live selectors only)
   ====================================================== */
@media (max-width: 1024px) {
    .longread__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .sec {
        padding: var(--space-8) 0;
    }

    .sec-head {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-5);
    }

    .sec-head__title {
        font-size: clamp(24px, 6vw, 34px);
    }

    .sec-head__more {
        align-self: flex-start;
    }

    .longread-card__title {
        font-size: var(--text-lg);
    }
}

@media (max-width: 480px) {
    .sec {
        padding: var(--space-6) 0;
    }

    .sec__container {
        padding: 0 var(--space-4);
    }
}

/* Reduced motion — global guard: neutralizes transitions AND infinite animations */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================
   فيديو بنفسج — the screening room

   The stage holds the video and NOTHING else. Everything the
   episode has to say — its title, its standfirst, its date, its
   watch button — lives in the column beside it.

   That single move is what fixes the section. While the text sat
   inside the video card, the card ran 516px tall and the list
   column had to stretch to match it; with only two or three
   episodes it never could, so the YouTube tile was given
   `flex: 1` to absorb the gap. The CTA was structural filler,
   and it looked like it. Move the text across and the column
   fills with content that belongs there.

   No gradients, no lift, no shadow: a video frame is an object
   on the page, not a floating card. The one dark surface here is
   the stage itself, which is what a screen is.
   ============================================================ */
.video-showcase {
    position: relative;
    /* Was --space-16 (64px) — the only section on the page not on
       the 48px rhythm. */
    padding: var(--space-12) 0;
    background: var(--bg-main);
}

/* Three areas: the stage, the aside beside it, and a strip of the remaining
   episodes UNDER the stage. The strip exists because the episode list used to
   run taller than the video and leave a slab of dead space beneath it — the
   overflow now sits exactly where that space was, and the two columns end
   together. The aside stretches to the stage column's full height and its
   queue rows absorb the difference, so neither column ever trails a void. */
.vs__grid {
    display: grid;
    /* RTL: the first named column is the RIGHT one — the aside, where reading
       begins. The stage keeps the left, as it always has. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "aside stage"
        "aside under";
    gap: clamp(var(--space-6), 3.5vw, var(--space-8));
    row-gap: 0;
}

.vs__stage-wrap { grid-area: stage; }
.vs__aside { grid-area: aside; }

.vs__understrip {
    grid-area: under;
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: var(--space-5) 0 0;
    border-block-start: 1px solid var(--border-light);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
    align-content: stretch;
    min-width: 0;
}

.vs__understrip .vs__queue-item {
    display: flex;
}

.vs__understrip .vs__queue-item {
    border: 0;
    min-width: 0;
}

/* A strip card: the episode's frame on top, its number and title beneath.
   The whole card is the button, same as every other row in the section. */
.vs__ucard {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0;
    border: 0;
    background: transparent;
    text-align: start;
    font: inherit;
    cursor: pointer;
}

/* The card's frame absorbs the column's leftover height: 16:9 is its floor,
   and any surplus makes the photograph taller (object-fit crops it), so
   levelling the columns shows MORE image rather than more nothing. */
.vs__ucard-media {
    position: relative;
    flex: 1;
    min-height: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-section);
}

.vs__ucard-media img {
    position: absolute;
    inset: 0;
}

.vs__ucard-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-2) var(--ease-out);
}

.vs__ucard:hover .vs__ucard-media img {
    transform: scale(1.03);
}

.vs__ucard-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    box-shadow: inset 0 0 0 1px rgba(26, 18, 41, 0.14);
    pointer-events: none;
}

.vs__ucard .vs__row-mark {
    z-index: 2;
}

.vs__ucard:hover .vs__row-mark,
.vs__ucard:focus-visible .vs__row-mark,
.vs__queue-item.is-active .vs__ucard .vs__row-mark {
    opacity: 1;
}

.vs__ucard:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.vs__ucard .vs__row-text {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-2);
}

.vs__queue-item.is-active .vs__ucard .vs__row-title {
    color: var(--secondary-700);
}

.vs__understrip-channel {
    grid-column: 1 / -1;
}

/* ---------- Stage ---------- */

/* The wrapper the docking logic addresses. It must never carry a
   transform: a transformed ancestor becomes the containing block of the
   fixed corner player and drags it out from under the cursor. */
.vs__stage-wrap {
    min-width: 0;
}

.vs__stage {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-dark);
}

/* A 1px inner edge, not an outer shadow. It is what makes the frame read as a
   lit screen rather than a hole cut in the page — and it costs no blur, no
   elevation and no space around the element. */
.vs__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
    pointer-events: none;
}

/* A thin violet glaze over every still. These frames come from different
   sources at different sizes — one is 1200x630, another 320x310 upscaled — and
   without this they read as a mixed bag rather than one programme. */
.vs__glaze {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(107, 91, 138, 0.16);
    pointer-events: none;
    transition: opacity var(--dur-3) var(--ease-out);
}

.vs__play:hover ~ .vs__glaze,
.vs__stage:hover .vs__glaze {
    opacity: .45;
}

.vs__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity var(--dur-2) var(--ease-out);
}

/* The whole poster is the play target — a 72px circle inside a 660px
   frame is a small thing to ask a reader to hit. */
.vs__play {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    display: grid;
    place-items: center;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.vs__play:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: -4px;
}

.vs__play-mark {
    position: relative;
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    /* Dark glyph on the light pink: white would measure 2.39:1. */
    color: var(--bg-dark);
    font-size: 21px;
    /* A play triangle reads off-centre inside a circle. */
    padding-inline-start: 5px;
    transition: transform var(--dur-2) var(--ease-out);
}

/* A ring held off the mark. It grows on hover instead of the mark itself
   swelling — the target stays exactly where the eye put it. */
.vs__play-mark::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.55);
    transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out);
}

.vs__play:hover .vs__play-mark {
    transform: scale(1.04);
}

.vs__play:hover .vs__play-mark::before {
    transform: scale(1.18);
    opacity: .5;
}

/* While a video runs, the poster and its play target step aside for the
   player shell that fills the same box. */
.vs__stage.is-playing .vs__poster,
.vs__stage.is-playing .vs__play {
    opacity: 0;
    pointer-events: none;
}

/* ---------- Stage states ---------- */

.vs__state {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-6);
    text-align: center;
    background: var(--bg-dark);
    color: #fff;
}

.vs__state[hidden] {
    display: none;
}

.vs__state--gone i {
    font-size: 30px;
    color: var(--primary-300);
    margin-bottom: var(--space-2);
}

.vs__state-title {
    margin: 0;
    font: 600 var(--text-md)/1.5 var(--font-heading);
}

.vs__state-text {
    margin: 0;
    max-width: 34ch;
    font: 400 var(--text-sm)/1.7 var(--font-body);
    color: rgba(255, 255, 255, 0.68);
}

/* Waiting for YouTube. A ring the size of the play mark it replaces, in
   the same place, so nothing jumps when the video takes over. */
.vs__spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.22);
    border-top-color: var(--primary);
    animation: vs-spin 900ms linear infinite;
}

@keyframes vs-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Resume / away chips ---------- */

.vs__resume {
    position: absolute;
    inset-block-end: var(--space-4);
    inset-inline-start: var(--space-4);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.95);
    color: var(--secondary-700);
    font: 600 var(--text-xs)/1 var(--font-body);
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

.vs__resume[hidden] {
    display: none;
}

.vs__resume:hover {
    background: var(--secondary);
    color: #fff;
}

.vs__away {
    position: absolute;
    inset-block-end: var(--space-4);
    inset-inline: var(--space-4);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(26, 18, 41, 0.86);
    color: #fff;
    font: 500 var(--text-xs)/1.4 var(--font-body);
}

.vs__away[hidden] {
    display: none;
}

/* ---------- Aside ---------- */

.vs__aside {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.vs__aside .vs__channel {
    margin-block-start: auto;
    padding-block-start: var(--space-3);
}

.vs__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
    font: 600 var(--text-xs)/1 var(--font-body);
    letter-spacing: .02em;
    color: var(--secondary);
}

/* The run number, set large enough to act as the section's editorial mark. */
.vs__no {
    font: 700 var(--text-xl)/1 var(--font-heading);
    font-variant-numeric: tabular-nums;
    color: var(--secondary-700);
}

.vs__eyebrow-rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--border-light);
}

.vs__eyebrow-label {
    color: var(--text-muted);
}

.vs__title {
    margin: 0 0 var(--space-3);
    /* Bigger and tighter than a card headline: this is the one thing in the
       section a reader should be able to read from across the room. */
    font: 700 clamp(21px, 2.3vw, 31px)/1.28 var(--font-heading);
    letter-spacing: -0.01em;
    color: var(--text-primary);
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vs__desc {
    margin: 0 0 var(--space-5);
    font: 400 var(--text-sm)/1.85 var(--font-body);
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vs__desc:empty {
    display: none;
}

.vs__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.vs__watch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding-inline: 22px;
    border: 0;
    border-radius: var(--radius-pill);
    /* On light ground the control is the darkest thing present: white on the
       brand pink measures 2.39:1, on this violet 6.02:1. */
    background: var(--secondary);
    color: #fff;
    font: 600 var(--text-sm)/1 var(--font-body);
    cursor: pointer;
    transition: background var(--transition-base), transform var(--dur-1) var(--ease-out);
}

.vs__watch:hover {
    background: var(--secondary-600);
}

.vs__watch:active {
    transform: scale(.97);
}

.vs__watch i {
    font-size: .85em;
}

.vs__date {
    font: 500 var(--text-xs)/1 var(--font-body);
    color: var(--text-muted);
}

/* ---------- Queue ---------- */

.vs__queue-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-2);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--border-light);
    font: 600 var(--text-xs)/1 var(--font-body);
    letter-spacing: .02em;
    color: var(--text-muted);
}

.vs__queue-count {
    font-variant-numeric: tabular-nums;
    color: var(--secondary);
}

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

.vs__queue-item + .vs__queue-item {
    border-block-start: 1px solid var(--border-light);
}

/* The row IS the control — a thumbnail and a headline the reader is already
   aiming at beat a 40px button beside them. */
.vs__row {
    width: 100%;
    display: grid;
    grid-template-columns: auto 104px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
    border: 0;
    background: transparent;
    text-align: start;
    font: inherit;
    cursor: pointer;
    transition: background var(--dur-1) var(--ease-out);
}

.vs__row:hover {
    background: var(--bg-hover);
}

.vs__row:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* Quiet, but readable: --text-light measured 2.01:1 here. The number is still
   the secondary thing in the row — small, set apart, and darkening only on
   hover — without dropping under the contrast floor to say so. */
.vs__row-no {
    width: 2.2ch;
    font: 700 var(--text-sm)/1 var(--font-heading);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    transition: color var(--dur-1) var(--ease-out);
}

.vs__row:hover .vs__row-no,
.vs__queue-item.is-active .vs__row-no {
    color: var(--secondary);
}

.vs__row-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-section);
}

/* The same 1px edge the stage carries, at row scale — the thumbnails read as
   little screens rather than pasted photos. */
.vs__row-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    box-shadow: inset 0 0 0 1px rgba(26, 18, 41, 0.14);
    pointer-events: none;
}

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

.vs__row-mark {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(26, 18, 41, 0.5);
    color: #fff;
    font-size: 13px;
    opacity: 0;
    transition: opacity var(--dur-1) var(--ease-out);
}

.vs__row:hover .vs__row-mark,
.vs__row:focus-visible .vs__row-mark,
.vs__queue-item.is-active .vs__row-mark {
    opacity: 1;
}

.vs__row-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vs__row-title {
    font: 600 var(--text-sm)/1.45 var(--font-heading);
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vs__row-meta {
    font: 400 var(--text-xs)/1 var(--font-body);
    color: var(--text-muted);
}

/* Playing now: an edge mark and a tint, the same signal the podcast queue
   gives, so the two media sections behave alike. */
.vs__queue-item.is-active .vs__row {
    background: var(--bg-hover);
    box-shadow: inset 3px 0 0 0 var(--primary);
}

.vs__queue-item.is-active .vs__row-title {
    color: var(--secondary-700);
}

/* An episode YouTube no longer serves: still listed, because the row is the
   client's to remove from the dashboard, but plainly marked and not playable. */
.vs__queue-item.is-gone .vs__row {
    cursor: not-allowed;
}

/* Muted, but still readable: the client has to be able to read this row to
   know which one to remove from the dashboard, and «unavailable» is said with
   a label below rather than by fading the text under the contrast floor. */
.vs__queue-item.is-gone .vs__row-title,
.vs__queue-item.is-gone .vs__row-meta {
    color: var(--text-muted);
}

.vs__row-gone {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    margin-block-start: 2px;
    padding: 3px 8px;
    background: var(--bg-section);
    border: 1px solid var(--border-medium);
    color: var(--text-secondary);
    font: 600 11px/1.4 var(--font-body);
}

.vs__queue-item.is-gone .vs__row-thumb img {
    filter: grayscale(1);
    opacity: .55;
}

.vs__queue-item.is-gone .vs__row-mark {
    opacity: 1;
    background: rgba(26, 18, 41, 0.62);
}

/* ---------- Channel link ---------- */

/* A link, not a tile. It used to be a card with `flex: 1` whose job was to
   absorb the column's leftover height — the biggest single element in the
   list, and the one with the least to say. */
.vs__channel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-block-start: var(--space-4);
    font: 600 var(--text-sm)/1 var(--font-body);
    color: var(--secondary-700);
    text-decoration: none;
    transition: color var(--transition-base), gap var(--dur-1) var(--ease-out);
}

.vs__channel:hover {
    color: var(--primary-700);
    gap: 14px;
}

.vs__channel .fa-youtube {
    font-size: 17px;
    color: #c4302b;
}

.vs__channel-arrow {
    font-size: .8em;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
    .vs__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "stage"
            "aside"
            "under";
        gap: var(--space-6);
        row-gap: var(--space-6);
    }

    .vs__understrip {
        margin-block-start: 0;
    }

    /* Two columns of episodes under a full-width stage — the rows stay rows,
       they just sit side by side. */
    .vs__queue {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-4);
    }

    .vs__queue-item + .vs__queue-item {
        border-block-start: 0;
    }

    .vs__queue-item {
        border-block-start: 1px solid var(--border-light);
    }
}

@media (max-width: 640px) {
    .video-showcase {
        padding: var(--space-8) 0;
    }

    .vs__queue,
    .vs__understrip {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The thumbnail shrinks but the row stays a row: the old layout turned
       each episode into a 342px card — taller than the featured video, which
       inverted the whole hierarchy on a phone.
       All THREE columns must be declared. Naming only two left the text to
       wrap onto a second grid row, which pushed each row past 300px and
       inverted the hierarchy again at 414px. */
    .vs__row {
        grid-template-columns: auto 76px minmax(0, 1fr);
        gap: var(--space-2);
    }

    .vs__row-no {
        width: 2ch;
        font-size: var(--text-xs);
    }

    .vs__play-mark {
        width: 56px;
        height: 56px;
        font-size: 17px;
    }
}


/* ============================================================
   Player — one shell, two states.
   Centered cinema modal, or a floating corner dock that keeps
   playing while the reader browses. Docking is a class swap on
   the same element, so playback never restarts.
   ============================================================ */
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}

.video-modal.is-active {
    display: flex;
}

.video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 10, 21, 0.92);
    backdrop-filter: blur(16px);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.video-modal.is-visible .video-modal__backdrop {
    opacity: 1;
}

.video-modal__container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    z-index: 1;
}

.video-modal__panel {
    position: relative;
    background: #16101f;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    transform: scale(0.94) translateY(24px);
    opacity: 0;
    transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
}

.video-modal.is-visible .video-modal__panel {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Top bar: minimize + close, floating over the player */
.video-modal__topbar {
    position: absolute;
    top: 0;
    inset-inline: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    z-index: 10;
    background: linear-gradient(180deg, rgba(10, 6, 15, 0.65) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.video-modal__panel:hover .video-modal__topbar,
.video-modal__panel:focus-within .video-modal__topbar {
    opacity: 1;
    pointer-events: auto;
}

.video-modal__minimize {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-full);
    color: #fff;
    font-size: var(--text-sm);
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background var(--dur-2) var(--ease-out);
}

.video-modal__minimize:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.video-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.video-modal__close:hover {
    background: rgba(255, 255, 255, 0.24);
    transform: rotate(90deg);
}

/* Player body */
.video-modal__player {
    position: relative;
    background: #000;
}

.video-modal__iframe-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.video-modal__iframe-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-modal__loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    background: #0a060f;
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-sm);
    pointer-events: none;
    z-index: 2;
}

.video-modal__spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255, 255, 255, 0.12);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: modal-spin 1s linear infinite;
}

@keyframes modal-spin {
    to { transform: rotate(360deg); }
}

/* Resume veil (a docked video that survived a page change) */
.video-modal__resume {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    border: 0;
    cursor: pointer;
    background-color: #0a060f;
    background-size: cover;
    background-position: center;
    color: #fff;
}

.video-modal__resume::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 10, 21, 0.55);
    transition: background var(--dur-2) var(--ease-out);
}

.video-modal__resume:hover::before {
    background: rgba(15, 10, 21, 0.4);
}

.video-modal__resume-play {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding-inline-start: 4px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 17px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.video-modal__resume-label {
    position: relative;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

/* Info bar */
.video-modal__info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.video-modal__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: #fff;
    min-width: 0;
}

.video-modal__dock-actions {
    display: none;
    gap: var(--space-2);
    flex: 0 0 auto;
}

.video-modal__dock-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-out);
}

.video-modal__dock-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ---------- Docked (floating mini-player) ---------- */
.video-modal.is-docked {
    pointer-events: none;
    padding: 0;
}

.video-modal.is-docked .video-modal__backdrop {
    opacity: 0;
    pointer-events: none;
}

.video-modal.is-docked .video-modal__container {
    position: fixed;
    bottom: var(--space-4);
    left: var(--space-4);
    width: 340px;
    max-width: calc(100vw - var(--space-8));
    pointer-events: auto;
    animation: bn-dock-in 0.35s var(--ease-out);
}

@keyframes bn-dock-in {
    from { transform: translateY(12px) scale(0.96); opacity: 0.4; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.video-modal.is-docked .video-modal__panel {
    border-radius: var(--radius-xl);
    box-shadow:
        0 12px 40px rgba(26, 18, 41, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.video-modal.is-docked .video-modal__topbar {
    display: none;
}

.video-modal.is-docked .video-modal__info {
    padding: var(--space-2) var(--space-3);
}

.video-modal.is-docked .video-modal__title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-modal.is-docked .video-modal__dock-actions {
    display: flex;
}

.video-modal.is-docked .video-modal__player {
    cursor: pointer;
}


@media (max-width: 640px) {
    .video-modal {
        padding: var(--space-3);
    }

    .video-modal__minimize span {
        display: none;
    }

    .video-modal__minimize {
        width: 42px;
        height: 42px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .video-modal__topbar {
        opacity: 1;
        pointer-events: auto;
    }

    .video-modal__info {
        padding: var(--space-3) var(--space-4);
    }

    .video-modal.is-docked .video-modal__container {
        left: var(--space-3);
        right: var(--space-3);
        width: auto;
        max-width: none;
        bottom: var(--space-3);
    }
}

/* ============================================================
   Inline hero player — the featured card IS the player.
   Playing hides the cover in place; scrolling away mid-play
   floats the same element to a corner (position swap only, so
   playback never restarts).
   ============================================================ */
.bn-player {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    background: #0a060f;
}

.bn-player[hidden] {
    display: none;
}

.bn-player__frame {
    position: relative;
    flex: 1;
    min-height: 0;
}

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

/* Slim chrome — only the floating state needs it */
.bn-player__bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: #16101f;
    color: #fff;
}

.bn-player__bar-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.bn-player__bar-actions {
    display: flex;
    gap: var(--space-1);
    flex: 0 0 auto;
}

.bn-player__bar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-out);
}

.bn-player__bar-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Cover fades out under the player while a video runs */
/* Floating corner state — same element, new position */
.bn-player.is-floating {
    position: fixed;
    inset: auto;
    left: var(--space-4);      /* physical corner, away from the RTL reading edge */
    bottom: var(--space-4);
    width: 340px;
    max-width: calc(100vw - var(--space-8));
    z-index: 9998;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow:
        0 12px 40px rgba(26, 18, 41, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    animation: bn-dock-in 0.35s var(--ease-out);
}

.bn-player.is-floating .bn-player__frame {
    flex: none;
    aspect-ratio: 16 / 9;
}

.bn-player.is-floating .bn-player__bar {
    display: flex;
}

/* «متابعة المشاهدة» chip on the cover */
@media (max-width: 640px) {
    .bn-player.is-floating {
        left: var(--space-3);
        right: var(--space-3);
        width: auto;
        max-width: none;
        bottom: var(--space-3);
    }
}

/* While the player floats, its host card must not transform on hover:
   a transformed ancestor becomes the containing block of the fixed
   player, which would yank it out from under the cursor (a flicker). */
.vs__stage-wrap.is-away {
    transform: none;
}

/* The stage the player left: cover returns, quiet, with one badge. */
/* A spotlight row whose every box was skipped leaves no band behind. */
.bnfsj-spotlight:has(.spotlight-row:empty) {
    display: none;
}

/* ============================================================
   Editorial pass (audit implementation)
   Three voices for section headings, a cover-weight hero, real
   mobile compositions, and the small consistencies that read as
   a human hand. Ordered last so it wins the cascade.
   ============================================================ */

/* ---------- 1 · Section heading tiers ---------- */
/* Tier A — the flagship editorial moments */
.lifestyle-tabs .sec-head__title,
.palest__head-title {
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
}

/* Tier C — service shelves: quiet, no ceremony */
.quick-pro .sec-head__title,
.ambassadors-showcase .sec-head__title {
    font-size: 20px;
    font-weight: 700;
}

.quick-pro .sec-head__kicker,
.ambassadors-showcase .sec-head__kicker,
.blogs-pro .sec-head__kicker,
.longread .sec-head__kicker,
.creative-hub .sec-head__kicker,
.series-showcase .sec-head__kicker {
    display: none;
}

/* Balanced wrapping wherever a headline can orphan a word */
.sec-head__title,
.hero-slide__title,
.lt-card__title,
.longread-card__title,
.spotlight-card__title,
.video-hero__title,
.video-card__title,
.palest__hero-title,
.palest__row-title {
    text-wrap: balance;
}

/* ---------- 2 · The hero is the cover ---------- */
.hero-slide__title {
    font-size: clamp(1.5rem, 3.4vw, 3rem);
    line-height: 1.35;
    max-width: 780px;
}

@media (max-width: 640px) {
    .hero-slider .hero-slide {
        aspect-ratio: 3 / 4;   /* cover-format; min-height would force width */
    }

    .hero-slide__title {
        font-size: 1.5rem;
        padding: 12px 18px;
    }
}

/* ---------- 3 · Links can be found by keyboard ---------- */
a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* ---------- 4 · Touch targets ---------- */
.sec-head__more {
    min-height: 36px;
    align-items: center;
}

.palest__cat,
.lifestyle-tabs__tab,
.creative-hub__tab {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
}

/* ---------- 5 · Card image proportions ---------- */
.lt-card__img,
.longread-card__media {
    aspect-ratio: 16 / 10;
}

.lt-card__img img,
.longread-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- 6 · The dark band breathes ---------- */
.palest {
    margin-block: var(--space-8);
}

/* ---------- 7 · مختارات سريعة as a numbered digest ---------- */
.quick-pro__grid {
    counter-reset: bn-quick;
}

.quick-pick {
    counter-increment: bn-quick;
}

.quick-pick__icon {
    position: relative;
    background: transparent !important;
    border: 1px solid var(--border-subtle);
}

.quick-pick__icon i {
    display: none;
}

.quick-pick__icon::before {
    content: counter(bn-quick, arabic-indic);
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--primary-700, var(--primary));
}

/* ---------- 8 · Type consistencies ---------- */
body {
    line-height: 1.8;
}

.lt-card__meta,
.longread-card__date,
.video-card__meta,
.palest__hero-meta,
.video-hero__date {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

::selection {
    background: var(--primary-100);
    color: var(--text-primary);
}

/* ---------- 9 · Mobile is a composition, not a stack ---------- */
@media (max-width: 640px) {
    /* Standard cards become horizontal digest rows: photograph the size
       of a stamp, headline doing the work, excerpt spared. */
    .lifestyle-tabs__grid .lt-card {
        flex-direction: row;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2);
    }

    .lifestyle-tabs__grid .lt-card__img {
        flex: 0 0 112px;
        aspect-ratio: 1 / 1;
        border-radius: var(--radius-md);
        overflow: hidden;
        align-self: center;
    }

    .lt-card__excerpt,
    .lt-card__body > .lt-card__meta i {
        display: none;
    }

    .lt-card__body {
        padding: var(--space-2) 0;
        min-width: 0;
    }

    .lt-card__title {
        font-size: var(--text-sm);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* فكر keeps its own composition, just without the essay excerpt */
    .longread-card__excerpt {
        display: none;
    }

    /* The feature-quad's supporting cards join the digest too */
    .featquad__grid .spotlight-card:not(:first-child) {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-3);
    }

    .featquad__grid .spotlight-card:not(:first-child) .spotlight-card__media {
        flex: 0 0 112px;
        aspect-ratio: 1 / 1;
    }

    /* Series: the shelf shows the series, the episodes wait inside */
    .series-eps-list .series-ep:nth-child(n+4) {
        display: none;
    }

    .series-other-list .series-other:nth-child(n+4) {
        display: none;
    }
}

/* Mobile heading scale keeps the same three voices (an older rule
   inflated every title to 34px on small screens, drowning the tiers) */
@media (max-width: 768px) {
    .sec-head__title {
        font-size: 22px;
    }

    .lifestyle-tabs .sec-head__title,
    .palest__head-title {
        font-size: 28px;
    }

    .quick-pro .sec-head__title,
    .ambassadors-showcase .sec-head__title {
        font-size: 18px;
    }
}

/* ============================================================
   Type voice (font swap companion)
   Alexandria sits taller and wider than IBM Plex — headings get
   the breathing room the new face asks for, quotations move to
   the naskh accent, and small labels stop asking Almarai for a
   weight it does not carry.
   ============================================================ */
.palest__quote-text,
.creative-quote__text {
    font-family: var(--font-quote);
    font-style: italic;
    font-size: 1.15em;
}

/* Alexandria's counters are roomier: card titles read better a
   touch smaller with more line air than Plex needed. */
.lt-card__title,
.longread-card__title,
.spotlight-card__title,
.video-card__title,
.palest__row-title {
    line-height: 1.7;
}

.sec-head__title {
    line-height: 1.45;
}

.hero-slide__title {
    line-height: 1.5;
}

/* Almarai has no 500 — labels that asked for it get the real 400
   with slightly tightened size instead of a synthesized weight. */
.sec-head__kicker,
.lt-card__meta,
.video-card__meta,
.video-hero__date,
.palest__hero-meta {
    font-weight: 400;
}

/* The cover speaks in the headline voice, not the reading voice. */
.hero-slide__title {
    font-family: var(--font-heading);
}

/* ============================================================
   Hero: the cover treatment.
   The frosted centered box grew into a slab that ate the
   photograph. A magazine cover writes its headline ON the
   image — bottom-anchored on the scrim, start-aligned, the
   photograph doing the work above it.
   ============================================================ */
.hero-slide__content {
    align-items: flex-start;
    text-align: start;
    inset-inline: 0;
    padding: clamp(20px, 3vw, 40px);
    gap: 10px;
}

.hero-slide__title {
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    max-width: 21ch;
    font-size: clamp(1.35rem, 2.5vw, 2.25rem);
    line-height: 1.45;
    text-shadow: 0 2px 18px rgba(15, 10, 24, 0.65), 0 1px 3px rgba(15, 10, 24, 0.5);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* the scrim carries the reading: deeper at the base, clear on top */
.hero-slide__overlay {
    background: linear-gradient(to top,
        rgba(15, 10, 24, 0.82) 0%,
        rgba(15, 10, 24, 0.45) 30%,
        rgba(15, 10, 24, 0.08) 55%,
        transparent 75%);
}

.hero-slide__meta {
    text-shadow: 0 1px 10px rgba(15, 10, 24, 0.6);
}

@media (max-width: 640px) {
    .hero-slide__title {
        font-size: 1.3rem;
        -webkit-line-clamp: 3;
    }

    .hero-slide__content {
        padding: 16px 16px 34px;
    }
}

/* ============================================================
   سلاسل: the three columns agree on one height.
   The episodes list is the natural driver; the featured cover
   absorbs the difference by growing its photograph, and the
   other-series rows distribute theirs. Stacked layouts below
   1024px revert to natural heights untouched.
   ============================================================ */
@media (min-width: 1025px) {
    .series-grid {
        align-items: stretch;
    }

    .series-grid__featured,
    .series-grid__other {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .series-card-featured {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .series-card-featured__cover {
        aspect-ratio: auto;
        flex: 1;
        min-height: 300px;
    }

    .series-other-list {
        flex: 1;
    }

    .series-other {
        flex: 1;
        min-height: 0;
    }
}

/* مدونات: three writer cards agree on one height — posts fill the
   middle, «عرض جميع المقالات» pins to one baseline. */
.blogs-pro .author-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blogs-pro .author-card__posts {
    flex: 1;
}

/* ============================================================
   Motion language (audit implementation)
   One pressed feel for everything tappable, one transition for
   a filtered grid, and the hero cover changing as a cover.
   ============================================================ */

/* Pressed: the site finally pushes back. 120ms in, instant enough
   to read as contact rather than animation. */
.sec-head__more:active,
.palest__cat:active,
.lifestyle-tabs__tab:active,
.creative-hub__tab:active,
.video-hero__watch-btn:active,
.quick-pick:active,
.icon-btn:active,
.menu-btn:active,
.to-top:active,
.hero-slider__nav:active,
.series-other:active,
.video-card:active,
.lt-card:active,
.palest__row:active {
    transform: scale(0.97);
    transition-duration: var(--dur-1);
}

/* Filtered grids change as one surface, not twelve cards. The JS
   drops .is-filtering on the grid for one frame batch. */
.lifestyle-tabs__grid,
.creative-hub__grid {
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.lifestyle-tabs__grid.is-filtering,
.creative-hub__grid.is-filtering {
    opacity: 0;
    transform: translateY(8px);
}

@media (prefers-reduced-motion: reduce) {
    .lifestyle-tabs__grid.is-filtering,
    .creative-hub__grid.is-filtering {
        transform: none;
    }
}

/* The hero cover crossfades between stories: continuity of place,
   no horizontal shove through the masthead. */
.hero-slider__swiper .swiper-slide {
    transition-property: opacity;
}

/* The resume veils are display:flex — which silently beats the hidden
   attribute, leaving the veil painted over a playing video (sound with
   no picture). hidden must always mean hidden. */
.video-modal__resume[hidden],
.video-hero__resume[hidden],
.bn-player[hidden] {
    display: none !important;
}

/* «قناة بنفسج» tile — the honest filler for a short episode list */
/* ============================================================
   One hover voice for every headline.
   Card titles never underline (the browser default leaks in
   wherever a reset was forgotten); the hover is always the same
   deep rose. Article-body links (.prose a) keep their underline —
   running text is a different contract.
   ============================================================ */
.sec-head__title a,
.spotlight-head__title a,
.spotlight-card__title a,
.dark-card__title a,
.hero-cover__title a,
.wv-hero__title a,
.wv-card__title a,
.lt-card__title a,
.longread-card__title a,
.series-card-featured__title a,
.series-ep__title a,
.series-other__title a,
.quick-pick__title a,
.video-card__title a,
.palest__row-title a,
.author-card__post-title a {
    text-decoration: none;
}

.series-card-featured:hover .series-card-featured__title,
.series-other:hover .series-other__title,
.wv-hero__link:hover .wv-hero__title,
.wv-card:hover .wv-card__title {
    color: var(--primary-700);
}

/* Author byline links: same contract as the headlines — a name is
   not underlined running text. */
a.spotlight-card__author,
a.longread-card__author,
a.wv-card__author,
a.author-card__header,
a.hero-picks__author,
.spotlight-card__author,
.longread-card__author,
.wv-card__author,
.author-card__header {
    text-decoration: none;
}

/* ======================================================
   بودكاست بنفسج — the homepage band (BNFSJ_PODCAST)

   A LIGHT section, deliberately.

   The band used to sit on --bg-dark. That is the footer's
   own surface, byte for byte, and the footer opens with
   zero top padding — so the two met as one continuous dark
   mass and the band stopped reading as a section at all.
   It was also the only dark stop in a page of twelve light
   ones, which reads as an accident rather than a decision.

   So it earns its own identity a different way: every other
   surface on this page is WARM (#faf8f6, #f9f6f3, #ffffff —
   all more red than blue), and this one is COOL — the
   brand's violet carried into paper. Same lightness family
   as the page, unmistakably its own temperature. The violet
   then does its real work as INK: the eyebrow, the queue
   labels, the waveform.

   Hierarchy, in reading order: section label → featured
   episode → its transport → the queue → all episodes.
   The featured column is 1.55fr against the queue's 1fr,
   so the two are never mistaken for equals.
   ====================================================== */

.pod-band {
    background: var(--bg-listen);
    padding-block: var(--space-12);
    /* Hairlines in the section's own ink. The one at the bottom is what
       separates it from the footer; the one at the top separates it from
       whatever light section the client orders above it. */
    border-block: 1px solid var(--border-listen);
}

/* `.sec + .sec` sets a fainter top rule on every consecutive section and has
   the same specificity, so the band's own top hairline needs a selector that
   matches it — not !important. */
.sec + .pod-band {
    border-block-start-color: var(--border-listen);
}

.pod-band__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(var(--space-6), 4vw, var(--space-10));
    align-items: start;
}

/* ---------- Featured episode ---------- */

.pod-band__feature {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.pod-band__lead {
    display: grid;
    grid-template-columns: clamp(150px, 17vw, 190px) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: center;
    min-width: 0;
}

.pod-band__art {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--bg-section);
}

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

.pod-band__feature-body {
    min-width: 0;
}

.pod-band__eyebrow {
    display: inline-block;
    font: 600 var(--text-xs)/1 var(--font-body);
    letter-spacing: .02em;
    color: var(--secondary);
    margin-bottom: var(--space-2);
}

.pod-band__title {
    margin: 0 0 var(--space-3);
    font: 700 clamp(19px, 2vw, 26px)/1.35 var(--font-heading);
    color: var(--text-primary);
    text-wrap: balance;
    /* The artwork sets this column's height; a long headline must live
       inside it rather than stretch the band. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pod-band__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    font: 500 var(--text-sm)/1.4 var(--font-body);
    color: var(--text-secondary);
}

.pod-band__programme {
    color: var(--secondary-700);
    font-weight: var(--weight-semibold);
}

/* ---------- Transport: play · waveform · clock ---------- */

.pod-band__transport {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--border-listen);
}

.pod-band__clock {
    font: 500 var(--text-xs)/1 var(--font-body);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    white-space: nowrap;
    /* 00:12 / 04:57 reads left-to-right even on an RTL page. */
    direction: ltr;
}

.pod-band__clock-sep {
    opacity: .55;
    margin-inline: 3px;
}

/* ---------- Queue ---------- */

.pod-band__queue {
    min-width: 0;
}

.pod-band__queue-head {
    margin: 0 0 var(--space-3);
    font: 600 var(--text-xs)/1 var(--font-body);
    letter-spacing: .02em;
    color: var(--text-muted);
}

.pod-band__list {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    border-block-start: 1px solid var(--border-listen);
}

.pod-band__row {
    border-block-end: 1px solid var(--border-listen);
}

/* The whole row is the control. A 40px button beside a title the reader is
   already aiming at is a smaller target for the same intent. */
.pod-band__row-btn {
    width: 100%;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
    border: 0;
    background: transparent;
    text-align: start;
    font: inherit;
    cursor: pointer;
    transition: background var(--dur-1) var(--ease-out);
}

.pod-band__row-btn:hover {
    background: var(--bg-hover);
}

.pod-band__row-art {
    position: relative;
    width: 48px;
    height: 48px;
    overflow: hidden;
    background: var(--bg-section);
}

.pod-band__row-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The cue mark appears over the thumbnail on hover — the affordance lands on
   the artwork the reader is already looking at, instead of asking for a
   separate button. */
.pod-band__row-cue {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(45, 42, 51, 0.55);
    color: #fff;
    font-size: 13px;
    opacity: 0;
    transition: opacity var(--dur-1) var(--ease-out);
}

.pod-band__row-btn:hover .pod-band__row-cue,
.pod-band__row-btn:focus-visible .pod-band__row-cue,
.pod-band__row.is-playing .pod-band__row-cue {
    opacity: 1;
}

.pod-band__row-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pod-band__row-title {
    font: 600 var(--text-sm)/1.45 var(--font-heading);
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pod-band__row-meta {
    font: 400 var(--text-xs)/1 var(--font-body);
    color: var(--text-muted);
}

.pod-band__row-len {
    font: 500 var(--text-xs)/1 var(--font-body);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    white-space: nowrap;
}

/* The row being heard: the violet ink again, on the leading edge. */
.pod-band__row.is-playing .pod-band__row-btn {
    background: var(--bg-hover);
    box-shadow: inset 3px 0 0 0 var(--primary);
}

.pod-band__row.is-playing .pod-band__row-title {
    color: var(--secondary-700);
}

/* ---------- All episodes ---------- */

.pod-band__all-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-block-start: var(--space-3);
    font: 600 var(--text-sm)/1 var(--font-body);
    color: var(--secondary-700);
    text-decoration: none;
    transition: color var(--transition-base), gap var(--dur-1) var(--ease-out);
}

.pod-band__all-link:hover {
    color: var(--primary-700);
    gap: 14px;
}

.pod-band__all-count {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
    .pod-band__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-8);
    }
}

@media (max-width: 560px) {
    .pod-band {
        padding-block: var(--space-8);
    }

    /* The artwork leads and the text follows it, so the headline gets the
       full width at the size where it needs it most. */
    .pod-band__lead {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
        justify-items: center;
        text-align: center;
    }

    .pod-band__art {
        width: min(220px, 58vw);
    }

    .pod-band__meta {
        justify-content: center;
    }

    /* The transport keeps the play button and the clock on one line and gives
       the waveform the row beneath — at this width it would otherwise be a
       smudge between two controls. */
    .pod-band__transport {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: var(--space-3);
    }

    .pod-band__transport .pod-wave {
        grid-column: 1 / -1;
        grid-row: 2;
        height: 40px;
    }

    .pod-band__clock {
        justify-self: end;
    }
}

/* The band's own waveform ink: violet on light paper, and the pink accent for
   what has already played — the same pink as the play button beside it, so the
   two read as one control. */
.pod-band .pod-wave {
    --wave-base: rgba(107, 91, 138, 0.26);
    --wave-played: var(--primary);
    height: 56px;
}

/* The count beside the section title — how many episodes there are, which is
   information the header could always have carried and did not. */
.vs__head-count {
    display: inline-block;
    margin-inline-start: 10px;
    font: 600 var(--text-sm)/1 var(--font-body);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    vertical-align: middle;
}

/* Switching episodes: the poster cross-fades rather than snapping. transform
   and opacity only, and nothing at all when the reader has asked for less. */
.vs__poster.is-swapping {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .vs__glaze,
    .vs__play-mark,
    .vs__play-mark::before,
    .vs__poster,
    .vs__row,
    .vs__row-no,
    .vs__row-mark,
    .vs__channel {
        transition: none;
    }

    .vs__play:hover .vs__play-mark,
    .vs__play:hover .vs__play-mark::before {
        transform: none;
    }
}

/* ======================================================
   Motion identity — moving between pages

   One idea: the picture you pressed is the picture at the
   top of the page you land on. The article opens OUT of
   the card instead of replacing it.

   The browser does the hard part. `@view-transition` opts
   this multi-page site in; bn-transition.js names the two
   images the same thing for the length of one navigation
   and then takes the name back. Everything below is the
   choreography around that pair.
   ====================================================== */

@view-transition {
    navigation: auto;
}

:root {
    /* Motion tokens. The site already had --dur-1/2/3 for component work;
       these are for navigation, which is a longer, more deliberate gesture. */
    --motion-fast: 220ms;
    --motion-base: 460ms;
    --motion-slow: 620ms;

    /* Editorial, not springy: leaves quickly, arrives calmly, never overshoots.
       An image that bounces at the end of its travel reads as a toy. */
    --motion-ease: cubic-bezier(0.22, 0.61, 0.20, 1);
    /* For things that only leave — no need to decelerate into nothing. */
    --motion-ease-out: cubic-bezier(0.4, 0, 0.9, 0.45);
}

/* ---------- The press ---------- */

/* The one thing that must happen inside 100ms: an answer. A hair of scale on
   the image alone, so nothing around it moves and no layout is touched. */
.bn-vt-pressed {
    transform: scale(1.015);
    transition: transform var(--motion-fast) var(--motion-ease);
}

/* ---------- The travelling image ---------- */

/* The morph pair. The browser tweens position, size and radius between the
   card's image and the article's hero; what it needs from us is the right
   fit and a curve with some authority. */
::view-transition-old(*),
::view-transition-new(*) {
    animation-duration: var(--motion-base);
    animation-timing-function: var(--motion-ease);
}

/* A cover changes aspect ratio on the way — a 16:10 card thumbnail becoming a
   16:9 hero. Crossfading two differently-cropped copies of one photograph is
   what makes a morph look like a dissolve; holding both to `cover` and letting
   the group animate the frame is what makes it look like one image moving. */
::view-transition-group(.bn-cover) {
    animation-duration: var(--motion-base);
}

::view-transition-image-pair(.bn-cover) {
    isolation: auto;
}

::view-transition-old(.bn-cover),
::view-transition-new(.bn-cover) {
    animation: none;
    mix-blend-mode: normal;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

/* ---------- The rest of the page ---------- */

/* Everything that is not the cover recedes rather than disappears: the page
   the reader is leaving loses its hold for a moment, so the moving image is
   unambiguously the subject. */
html[data-bn-vt="morph"]::view-transition-old(root) {
    animation: bn-recede var(--motion-base) var(--motion-ease) both;
}

html[data-bn-vt="morph"]::view-transition-new(root) {
    animation: bn-emerge var(--motion-base) var(--motion-ease) both;
}

@keyframes bn-recede {
    to { opacity: 0; transform: scale(0.985); }
}

@keyframes bn-emerge {
    from { opacity: 0; transform: scale(1.008); }
}

/* ---------- Links with no picture ---------- */

/* A category, a writer, a static page: there is no image to carry, so the
   page turns instead. A single clean edge sweeping across — the editorial
   equivalent of a page being turned, not a screen being loaded. */
html[data-bn-vt="wipe"]::view-transition-old(root) {
    animation: bn-wipe-out var(--motion-fast) var(--motion-ease-out) both;
}

html[data-bn-vt="wipe"]::view-transition-new(root) {
    animation: bn-wipe-in var(--motion-base) var(--motion-ease) both;
}

@keyframes bn-wipe-out {
    to { opacity: 0; }
}

/* RTL: the new page is revealed from the right, the direction reading starts. */
@keyframes bn-wipe-in {
    from { clip-path: inset(0 0 0 100%); }
    to { clip-path: inset(0 0 0 0); }
}

/* ---------- Arriving ---------- */

/*
 * The content is revealed as one block, slightly behind the cover.
 *
 * Deliberately NOT a per-element cascade: a page where the eyebrow, the
 * headline and the byline each perform their own entrance reads as a slideshow
 * of parts. The offsets below are small enough that the eye reads a single
 * reveal with a leading edge — the cover settles, the words follow it.
 */
@media (prefers-reduced-motion: no-preference) {
    html.bn-vt-arriving .article__badge,
    html.bn-vt-arriving .article__title,
    html.bn-vt-arriving .article__byline,
    html.bn-vt-arriving .article__actions,
    html.bn-vt-arriving .prose > :nth-child(-n+3) {
        animation: bn-settle var(--motion-fast) var(--motion-ease) both;
    }

    html.bn-vt-arriving .article__badge   { animation-delay: 35ms; }
    html.bn-vt-arriving .article__title   { animation-delay: 55ms; }
    html.bn-vt-arriving .article__byline  { animation-delay: 90ms; }
    html.bn-vt-arriving .article__actions { animation-delay: 120ms; }
    html.bn-vt-arriving .prose > :nth-child(-n+3) { animation-delay: 150ms; }

    @keyframes bn-settle {
        from { opacity: 0; transform: translate3d(0, 8px, 0); }
        to   { opacity: 1; transform: none; }
    }
}

/* ---------- Fallback wipe (no cross-document transitions) ---------- */

/*
 * Firefox, and anything else without the API. Same gesture, done by hand:
 * one edge crossing the page, in the site's own dark. It is put up by the
 * press and taken down by the next document — there is no timer, no invented
 * progress, and nothing that can outlive the navigation. A page that answers
 * in 40ms never shows it at all.
 */
.bn-wipe {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: var(--bg-dark);
    transform: scaleX(0);
    transform-origin: right center;   /* RTL: enters from the reading edge */
    will-change: transform;
}

.bn-wipe.is-open {
    transform: scaleX(1);
    transition: transform var(--motion-base) var(--motion-ease);
}

/* The mark rides the leading edge rather than sitting in the middle waiting to
   be looked at — it is a signal that the site is turning a page, not a screen
   asking for patience. */
.bn-wipe__mark {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--space-8);
    transform: translateY(-50%);
    font: 700 var(--text-xl)/1 var(--font-heading);
    color: #fff;
    opacity: 0;
    letter-spacing: .04em;
}

.bn-wipe.is-open .bn-wipe__mark {
    opacity: 1;
    transition: opacity var(--motion-fast) var(--motion-ease) 120ms;
}

/* ---------- Phones ---------- */

@media (max-width: 640px) {
    :root {
        /* Shorter travel on a small screen: the same gesture reads faster
           because the distance the image covers is a third of the desktop's. */
        --motion-base: 380ms;
        --motion-slow: 480ms;
    }

    /* The receding scale is imperceptible at this size and costs a repaint of
       the whole viewport on hardware that can least afford it. */
    @keyframes bn-recede {
        to { opacity: 0; }
    }

    @keyframes bn-emerge {
        from { opacity: 0; }
    }
}

/* ---------- Reduced motion ---------- */

/*
 * No morph, no wipe, no reveal — and no waiting either. The navigation is a
 * cut, which is what a reader who asked for less motion is asking for.
 */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }

    .bn-vt-pressed {
        transform: none;
        transition: none;
    }

    .bn-wipe,
    .bn-wipe.is-open {
        display: none;
    }
}