/* ================================================================
   BANAFSAJ — Internal Pages Component Library
   Built entirely on the homepage design tokens in main.css.
   RTL-first, premium editorial, fully reusable.
   ================================================================ */

/* ── Generic page shell ── */
.page {
    padding-block: var(--space-12) var(--space-16);
}

.page--tight {
    padding-block: var(--space-10) var(--space-12);
}

/* Soft editorial backdrop reused from the hero spread */
.soft-bg {
    background:
        radial-gradient(1100px 460px at 82% 0%, rgba(242, 133, 181, 0.06), transparent 60%),
        radial-gradient(900px 420px at 12% 30%, rgba(107, 91, 138, 0.05), transparent 55%),
        var(--bg-main);
}

/* ======================================================
   Breadcrumb
   ====================================================== */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font: 500 var(--text-xs)/1.6 var(--font-body);
    color: var(--text-muted);
    margin-top: var(--space-4);
}

.breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-base);
}

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

.breadcrumb__sep {
    color: var(--text-light);
    font-size: 11px;
}

.breadcrumb__current {
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
}

/* ======================================================
   Page hero (light editorial header)
   ====================================================== */
.page-hero {
    text-align: center;
    padding-block: var(--space-12) var(--space-10);
}

.page-hero__kicker {
    display: inline-block;
    font: 600 var(--text-xs)/1 var(--font-body);
    color: var(--primary-700);
    background: var(--primary-050);
    border: 1px solid rgba(242, 133, 181, 0.16);
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-5);
}

.page-hero__title {
    margin: 0 0 var(--space-4);
    font: 700 clamp(28px, 4vw, 44px)/1.2 var(--font-heading);
    color: var(--text-primary);
}

.page-hero__lead {
    max-width: 64ch;
    margin: 0 auto;
    font: 400 var(--text-md)/1.9 var(--font-body);
    color: var(--text-secondary);
}

.page-hero__breadcrumb {
    justify-content: center;
}

/* Cover hero (category pages) — image band */
.cover-hero {
    position: relative;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    min-height: clamp(240px, 32vw, 360px);
    display: flex;
    align-items: flex-end;
    isolation: isolate;
}

.cover-hero__img {
    position: absolute;
    inset: 0;
    z-index: -2;
}

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

.cover-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(36, 26, 46, 0.92) 0%, rgba(36, 26, 46, 0.55) 45%, rgba(36, 26, 46, 0.2) 100%);
}

.cover-hero__content {
    padding: clamp(var(--space-6), 4vw, var(--space-10));
    color: #fff;
    max-width: 760px;
}

.cover-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 var(--text-xs)/1 var(--font-body);
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-4);
}

.cover-hero__title {
    margin: 0 0 var(--space-3);
    font: 700 clamp(26px, 3.4vw, 40px)/1.2 var(--font-heading);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.cover-hero__desc {
    margin: 0;
    max-width: 60ch;
    font: 400 var(--text-md)/1.8 var(--font-body);
    color: rgba(255, 255, 255, 0.86);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

/* ======================================================
   Archive toolbar (filters + search + sort)
   ====================================================== */
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

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

.toolbar__count strong {
    color: var(--text-primary);
    font-weight: var(--weight-bold);
}

.toolbar__controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Inline search */
.search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--input-h);
    padding-inline: 14px;
    background: var(--bg-surface);
    border: var(--input-border);
    border-radius: var(--radius-pill);
    min-width: 220px;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.search-field:focus-within {
    border-color: rgba(242, 133, 181, 0.4);
    box-shadow: var(--focus-ring);
}

.search-field i {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.search-field input {
    border: 0;
    outline: 0;
    background: transparent;
    flex: 1;
    min-width: 0;
    font: 500 var(--text-sm)/1 var(--font-body);
    color: var(--text-primary);
}

/* Select (sort) */
.select {
    height: var(--input-h);
    padding-inline: 16px 38px;
    border: var(--input-border);
    border-radius: var(--radius-pill);
    background: var(--bg-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238e879a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 16px center;
    color: var(--text-secondary);
    font: 500 var(--text-sm)/1 var(--font-body);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

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

/* Category filter chips */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--space-8);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-medium);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font: 500 var(--text-sm)/1 var(--font-body);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--dur-2) var(--ease-out);
}

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

.chip.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-on-primary);
    box-shadow: var(--shadow-sm);
}

.chip__count {
    font-size: 11px;
    opacity: 0.75;
}

/* ======================================================
   Post card (archive grids) — mirrors the homepage lt-card
   ====================================================== */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

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

.post-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    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);
}

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

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

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

.post-card:hover .post-card__media img {
    transform: scale(1.06);
}

.post-card__cat {
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-3);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.94);
    color: var(--primary-700);
    font: 600 var(--text-xs)/1 var(--font-body);
    backdrop-filter: blur(6px);
}

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

.post-card__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);
}

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

.post-card__excerpt {
    margin: 0;
    font: 400 var(--text-sm)/1.7 var(--font-body);
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px var(--space-3);
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    font: 400 var(--text-xs)/1 var(--font-body);
    color: var(--text-muted);
}

.post-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.post-card__meta i {
    color: var(--primary-300);
    font-size: 11px;
}

.post-card__author {
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
}

/* ── Featured lead card — the big image hero (image-first) ── */
.post-card--featured {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
}

.post-card--featured .post-card__media {
    flex: 0 0 56%;
    aspect-ratio: auto;
    min-height: 320px;
}

.post-card--featured .post-card__cat {
    inset-block-start: var(--space-5);
    inset-inline-start: var(--space-5);
    padding: 7px 16px;
    font-size: var(--text-sm);
}

.post-card--featured .post-card__body {
    flex: 1;
    justify-content: center;
    gap: var(--space-3);
    padding: clamp(var(--space-6), 4vw, var(--space-10));
}

.post-card__lead {
    align-self: flex-start;
    font: 600 var(--text-xs)/1 var(--font-body);
    color: var(--primary-700);
    background: var(--primary-050);
    border: 1px solid rgba(242, 133, 181, 0.16);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
}

.post-card--featured .post-card__title {
    font: 700 clamp(22px, 2.6vw, 32px)/1.3 var(--font-heading);
    -webkit-line-clamp: 3;
}

.post-card--featured .post-card__excerpt {
    font: 400 var(--text-md)/1.8 var(--font-body);
    -webkit-line-clamp: 3;
}

/* Stack the featured lead card as soon as the grid leaves 3 columns (≤1024),
   so its text column never gets cramped beside the wide image on tablets. */
@media (max-width: 1024px) {
    .post-card--featured {
        flex-direction: column;
    }

    .post-card--featured .post-card__media {
        flex: none;
        aspect-ratio: 16 / 9;
        min-height: 0;
    }
}

/* ======================================================
   Pagination
   ====================================================== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: var(--space-12);
}

.pagination__link {
    min-width: 42px;
    height: 42px;
    padding-inline: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font: 600 var(--text-sm)/1 var(--font-body);
    text-decoration: none;
    transition: all var(--dur-2) var(--ease-out);
}

.pagination__link:hover {
    border-color: var(--primary-200);
    color: var(--primary-700);
    background: var(--bg-hover);
}

.pagination__link.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-on-primary);
}

.pagination__link[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}

.pagination__dots {
    color: var(--text-light);
    padding-inline: 4px;
}

/* ======================================================
   Stats band
   ====================================================== */
.stats-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    padding: var(--space-10);
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-card);
}

.stat {
    text-align: center;
    position: relative;
}

.stat:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--space-6) * -0.5);
    top: 12%;
    height: 76%;
    width: 1px;
    background: var(--border-light);
}

.stat__num {
    display: block;
    font: 800 clamp(28px, 3.4vw, 40px)/1 var(--font-heading);
    color: var(--primary);
    margin-bottom: 8px;
}

.stat__label {
    font: 500 var(--text-sm)/1.4 var(--font-body);
    color: var(--text-secondary);
}

/* ======================================================
   CTA band
   ====================================================== */
.cta-band {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(var(--space-10), 6vw, var(--space-16)) var(--space-6);
    border-radius: var(--radius-2xl);
    background: linear-gradient(135deg, var(--secondary-700) 0%, var(--secondary) 55%, var(--primary-700) 130%);
    color: #fff;
    isolation: isolate;
}

.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(600px 300px at 80% 0%, rgba(242, 133, 181, 0.28), transparent 60%);
}

.cta-band__title {
    margin: 0 auto var(--space-4);
    max-width: 22ch;
    font: 700 clamp(24px, 3vw, 34px)/1.3 var(--font-heading);
}

.cta-band__text {
    margin: 0 auto var(--space-8);
    max-width: 54ch;
    font: 400 var(--text-md)/1.8 var(--font-body);
    color: rgba(255, 255, 255, 0.82);
}

.cta-band__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* ======================================================
   Buttons (extend the homepage .btn)
   ====================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
}

.btn--lg {
    height: 52px;
    padding-inline: 28px;
    font-size: var(--text-md);
}

.btn--ghost {
    background: var(--bg-surface);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

.btn--ghost:hover {
    border-color: var(--primary-200);
    color: var(--primary-700);
    transform: translateY(-1px);
}

.btn--on-dark {
    background: #fff;
    color: var(--secondary-700);
}

.btn--on-dark:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

.btn--outline-light {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.btn--outline-light:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

/* ======================================================
   Editorial prose (article + legal pages)
   ====================================================== */
.prose {
    color: var(--text-reading);
    font: 400 var(--text-lg)/1.95 var(--font-body);
    max-width: 72ch;
}

.prose> :first-child {
    margin-top: 0;
}

.prose p {
    margin: 0 0 var(--space-6);
}

.prose h2 {
    margin: var(--space-10) 0 var(--space-4);
    font: 700 clamp(22px, 2.6vw, 28px)/1.3 var(--font-heading);
    color: var(--text-primary);
    scroll-margin-top: 96px;
}

.prose h3 {
    margin: var(--space-8) 0 var(--space-3);
    font: 700 var(--text-xl)/1.4 var(--font-heading);
    color: var(--text-primary);
    scroll-margin-top: 96px;
}

.prose a {
    color: var(--primary-700);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.prose ul,
.prose ol {
    margin: 0 0 var(--space-6);
    padding-inline-start: var(--space-6);
}

.prose li {
    margin-bottom: var(--space-2);
}

.prose strong {
    color: var(--text-primary);
    font-weight: var(--weight-bold);
}

.prose blockquote,
.pullquote {
    margin: var(--space-8) 0;
    padding: var(--space-2) var(--space-6);
    border-inline-start: 3px solid var(--primary);
    font: 500 clamp(20px, 2.4vw, 26px)/1.6 var(--font-heading);
    color: var(--secondary-700);
    font-style: normal;
}

.pullquote cite {
    display: block;
    margin-top: var(--space-3);
    font: 500 var(--text-sm)/1 var(--font-body);
    color: var(--text-muted);
    font-style: normal;
}

.prose figure {
    margin: var(--space-8) 0;
}

.prose figure img {
    width: 100%;
    border-radius: var(--radius-lg);
    display: block;
}

.prose figcaption {
    margin-top: var(--space-3);
    font: 400 var(--text-xs)/1.5 var(--font-body);
    color: var(--text-muted);
    text-align: center;
}

/* ======================================================
   Reading progress bar
   ====================================================== */
.reading-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    z-index: calc(var(--z-header) + 5);
    background: transparent;
}

.reading-progress__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--secondary-300));
    transition: width 80ms linear;
}

/* ======================================================
   Single article layout
   ====================================================== */
.article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-10);
    align-items: start;
}

.article__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    background: var(--primary-050);
    color: var(--primary-700);
    border: 1px solid rgba(242, 133, 181, 0.16);
    font: 600 var(--text-xs)/1 var(--font-body);
    margin-bottom: var(--space-4);
}

.article__title {
    margin: 0 0 var(--space-5);
    font: 700 clamp(28px, 4.2vw, 46px)/1.25 var(--font-heading);
    color: var(--text-primary);
}

.article__byline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--border-light);
}

.article__author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
}

.article__author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--primary-050);
}

.article__author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article__author-name {
    display: block;
    font: 600 var(--text-sm)/1.3 var(--font-heading);
    color: var(--text-primary);
}

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

.article__meta-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px var(--space-4);
    margin-inline-start: auto;
    font: 400 var(--text-xs)/1 var(--font-body);
    color: var(--text-muted);
}

.article__meta-list span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.article__meta-list i {
    color: var(--primary-300);
}

.article__featured {
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin: 0;
    margin-bottom: var(--space-8);
    aspect-ratio: 16 / 9;
    background: var(--bg-muted);
}

.article__featured img,
.article__featured video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.article__featured-caption {
    margin: var(--space-3) 0 0;
    font: 400 var(--text-xs)/1.5 var(--font-body);
    color: var(--text-muted);
    text-align: center;
}

/* Article sidebar */
.article-aside {
    position: sticky;
    top: calc(72px + var(--space-5));
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.toc {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

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

.toc__title::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--primary);
}

.toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toc__list a {
    display: block;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font: 500 var(--text-sm)/1.5 var(--font-body);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-base);
    border-inline-start: 2px solid transparent;
}

.toc__list a:hover,
.toc__list a.is-active {
    background: var(--bg-hover);
    color: var(--primary-700);
    border-inline-start-color: var(--primary);
}

/* Share bar */
.share {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.share__label {
    font: 600 var(--text-xs)/1 var(--font-body);
    color: var(--text-muted);
    margin-inline-end: 4px;
}

.share__btn {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--dur-2) var(--ease-out);
}

.share__btn:hover {
    transform: translateY(-2px);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow-sm);
}

.share__btn--fb:hover { background: #1877f2; }
.share__btn--wa:hover { background: #25d366; }
.share__btn--tg:hover { background: #229ed9; }
.share__btn--x:hover  { background: #000; }
.share__btn--in:hover { background: #0a66c2; }
.share__btn--copy:hover { background: var(--primary); }

.share-toast {
    position: fixed;
    inset-block-end: var(--space-6);
    inset-inline-start: 50%;
    transform: translateX(50%) translateY(20px);
    background: var(--text-primary);
    color: #fff;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    font: 600 var(--text-sm)/1 var(--font-body);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
    z-index: var(--z-modal);
}

.share-toast.is-visible {
    opacity: 1;
    transform: translateX(50%) translateY(0);
}

/* Article action row (share + print) */
.article-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: var(--space-10) 0;
    padding: var(--space-5) 0;
    border-block: 1px solid var(--border-light);
}

.print-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding-inline: 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-medium);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font: 500 var(--text-sm)/1 var(--font-body);
    cursor: pointer;
    transition: all var(--dur-2) var(--ease-out);
}

.print-btn:hover {
    border-color: var(--primary-200);
    color: var(--primary-700);
}

/* Author bio box (end of article) */
.author-box {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-6);
    background: var(--bg-section);
    border-radius: var(--radius-xl);
    margin: var(--space-10) 0;
}

.author-box__avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid var(--bg-surface);
}

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

.author-box__name {
    margin: 0 0 4px;
    font: 700 var(--text-lg)/1.2 var(--font-heading);
    color: var(--text-primary);
}

.author-box__role {
    font: 500 var(--text-xs)/1 var(--font-body);
    color: var(--primary-700);
}

.author-box__bio {
    margin: var(--space-2) 0 0;
    font: 400 var(--text-sm)/1.7 var(--font-body);
    color: var(--text-secondary);
}

/* Prev / next navigation */
.prevnext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin: var(--space-10) 0;
}

.prevnext__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-5);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    text-decoration: none;
    transition: all var(--dur-2) var(--ease-out);
}

.prevnext__item:hover {
    border-color: var(--primary-200);
    box-shadow: var(--shadow-sm);
}

.prevnext__item--next {
    text-align: start;
}

.prevnext__item--prev {
    text-align: end;
}

.prevnext__dir {
    font: 600 var(--text-xs)/1 var(--font-body);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.prevnext__item--prev .prevnext__dir {
    justify-content: flex-end;
}

.prevnext__title {
    font: 600 var(--text-sm)/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);
}

.prevnext__item:hover .prevnext__title {
    color: var(--primary-700);
}

/* ======================================================
   Author profile page
   ====================================================== */
.profile {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8);
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-card);
}

.profile__avatar {
    width: clamp(110px, 14vw, 150px);
    height: clamp(110px, 14vw, 150px);
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 4px solid var(--primary-050);
}

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

.profile__name {
    margin: 0 0 6px;
    font: 700 clamp(24px, 3vw, 32px)/1.2 var(--font-heading);
    color: var(--text-primary);
}

.profile__role {
    display: inline-block;
    font: 600 var(--text-xs)/1 var(--font-body);
    color: var(--primary-700);
    background: var(--primary-050);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-4);
}

.profile__bio {
    margin: 0 0 var(--space-5);
    max-width: 64ch;
    font: 400 var(--text-md)/1.85 var(--font-body);
    color: var(--text-secondary);
}

.profile__social {
    display: flex;
    gap: 8px;
}

.profile__stats {
    display: flex;
    gap: var(--space-8);
    margin-inline-start: auto;
    padding-inline-start: var(--space-8);
    border-inline-start: 1px solid var(--border-light);
}

.profile__stat {
    text-align: center;
}

.profile__stat-num {
    display: block;
    font: 800 var(--text-2xl)/1 var(--font-heading);
    color: var(--primary);
}

.profile__stat-label {
    font: 500 var(--text-xs)/1.3 var(--font-body);
    color: var(--text-muted);
}

/* Article list (compact, ranked) */
.ranked-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ranked-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--transition-base);
}

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

.ranked-item__num {
    font: 800 var(--text-xl)/1 var(--font-heading);
    color: var(--primary-100);
    min-width: 32px;
    text-align: center;
}

.ranked-item:hover .ranked-item__num {
    color: var(--primary);
}

.ranked-item__thumb {
    width: 64px;
    height: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.ranked-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ranked-item__title {
    font: 600 var(--text-sm)/1.45 var(--font-heading);
    color: var(--text-primary);
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ranked-item:hover .ranked-item__title {
    color: var(--primary-700);
}

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

/* Two-column profile body */
.profile-body {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: start;
}

/* ======================================================
   Forms (contact)
   ====================================================== */
.form {
    display: grid;
    gap: var(--space-5);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field--row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

.field__label {
    font: 600 var(--text-sm)/1 var(--font-heading);
    color: var(--text-primary);
}

.field__label .req {
    color: var(--primary);
}

.input,
.textarea {
    width: 100%;
    border: var(--input-border);
    border-radius: var(--input-radius);
    background: var(--bg-surface);
    padding: 13px 16px;
    font: 500 var(--text-md)/1.5 var(--font-body);
    color: var(--text-primary);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.input {
    height: var(--input-h);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--text-light);
}

.input:focus-visible,
.textarea:focus-visible {
    outline: none;
    border-color: rgba(242, 133, 181, 0.4);
    box-shadow: var(--focus-ring);
}

.textarea {
    min-height: 150px;
    resize: vertical;
}

.form__success {
    display: none;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: rgba(120, 190, 140, 0.12);
    border: 1px solid rgba(120, 190, 140, 0.4);
    border-radius: var(--radius-lg);
    color: #2f7a4a;
    font: 500 var(--text-sm)/1.6 var(--font-body);
}

.form__success.is-visible {
    display: flex;
}

.form__success i {
    font-size: var(--text-xl);
}

/* Contact info cards */
.info-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--dur-2) var(--ease-out);
}

.info-card:hover {
    border-color: var(--primary-200);
    box-shadow: var(--shadow-sm);
}

.info-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    background: var(--primary-050);
    color: var(--primary);
    font-size: var(--text-lg);
    flex-shrink: 0;
}

.info-card__label {
    font: 500 var(--text-xs)/1 var(--font-body);
    color: var(--text-muted);
    margin-bottom: 4px;
}

.info-card__value {
    font: 600 var(--text-sm)/1.3 var(--font-heading);
    color: var(--text-primary);
}

/* ======================================================
   FAQ accordion (native <details>)
   ====================================================== */
.faq {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 820px;
    margin-inline: auto;
}

.faq__item {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.faq__item[open] {
    border-color: var(--primary-200);
    box-shadow: var(--shadow-sm);
}

.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    cursor: pointer;
    list-style: none;
    font: 600 var(--text-md)/1.5 var(--font-heading);
    color: var(--text-primary);
}

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

.faq__q i {
    flex-shrink: 0;
    color: var(--primary);
    transition: transform var(--transition-base);
}

.faq__item[open] .faq__q i {
    transform: rotate(180deg);
}

.faq__a {
    padding: 0 var(--space-6) var(--space-6);
    margin: 0;
    font: 400 var(--text-md)/1.85 var(--font-body);
    color: var(--text-secondary);
}

/* ======================================================
   Empty state (search no results / 404)
   ====================================================== */
.empty-state {
    text-align: center;
    padding: var(--space-16) var(--space-6);
    max-width: 540px;
    margin-inline: auto;
}

.empty-state__icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto var(--space-6);
    background: var(--primary-050);
    color: var(--primary);
    font-size: 38px;
}

.empty-state__title {
    margin: 0 0 var(--space-3);
    font: 700 var(--text-2xl)/1.3 var(--font-heading);
    color: var(--text-primary);
}

.empty-state__text {
    margin: 0 0 var(--space-6);
    font: 400 var(--text-md)/1.8 var(--font-body);
    color: var(--text-secondary);
}

/* ======================================================
   About page bespoke blocks
   ====================================================== */
.split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(var(--space-8), 5vw, var(--space-16));
    align-items: center;
}

.split__media {
    border-radius: var(--radius-2xl);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: var(--shadow-lg);
}

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

.section-eyebrow {
    display: inline-block;
    font: 600 var(--text-xs)/1 var(--font-body);
    color: var(--primary-700);
    margin-bottom: var(--space-3);
}

.section-title {
    margin: 0 0 var(--space-5);
    font: 700 clamp(24px, 3vw, 34px)/1.25 var(--font-heading);
    color: var(--text-primary);
}

.section-text {
    font: 400 var(--text-md)/1.9 var(--font-body);
    color: var(--text-secondary);
}

.section-text p {
    margin: 0 0 var(--space-4);
}

/* Vision / mission duo */
.vm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
}

.vm-card {
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    position: relative;
    overflow: hidden;
}

.vm-card--dark {
    background: linear-gradient(150deg, var(--secondary-700), var(--secondary));
    border: 0;
    color: #fff;
}

.vm-card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: grid;
    place-items: center;
    font-size: var(--text-xl);
    margin-bottom: var(--space-5);
    background: var(--primary-050);
    color: var(--primary);
}

.vm-card--dark .vm-card__icon {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.vm-card__title {
    margin: 0 0 var(--space-3);
    font: 700 var(--text-xl)/1.3 var(--font-heading);
}

.vm-card__text {
    margin: 0;
    font: 400 var(--text-md)/1.85 var(--font-body);
    color: var(--text-secondary);
}

.vm-card--dark .vm-card__text {
    color: rgba(255, 255, 255, 0.85);
}

/* Values grid */
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

.value-card {
    padding: var(--space-7);
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.value-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.value-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
    background: var(--primary-050);
    color: var(--primary);
}

.value-card__title {
    margin: 0 0 var(--space-2);
    font: 700 var(--text-lg)/1.3 var(--font-heading);
    color: var(--text-primary);
}

.value-card__text {
    margin: 0;
    font: 400 var(--text-sm)/1.75 var(--font-body);
    color: var(--text-secondary);
}

/* Why-us list */
.why-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-8);
}

.why-item {
    display: flex;
    gap: var(--space-4);
}

.why-item__check {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: var(--primary-050);
    color: var(--primary);
    font-size: var(--text-sm);
}

.why-item__title {
    margin: 0 0 4px;
    font: 700 var(--text-md)/1.4 var(--font-heading);
    color: var(--text-primary);
}

.why-item__text {
    margin: 0;
    font: 400 var(--text-sm)/1.7 var(--font-body);
    color: var(--text-secondary);
}

/* ======================================================
   404
   ====================================================== */
.error-page {
    text-align: center;
    padding-block: var(--space-16);
}

.error-page__code {
    font: 800 clamp(96px, 18vw, 180px)/0.9 var(--font-heading);
    background: linear-gradient(135deg, var(--primary), var(--secondary-300));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--space-4);
}

.error-page__title {
    margin: 0 0 var(--space-3);
    font: 700 clamp(24px, 3vw, 32px)/1.3 var(--font-heading);
    color: var(--text-primary);
}

.error-page__text {
    margin: 0 auto var(--space-8);
    max-width: 48ch;
    font: 400 var(--text-md)/1.8 var(--font-body);
    color: var(--text-secondary);
}

/* ======================================================
   Section block helper
   ====================================================== */
.block {
    margin-block: clamp(var(--space-12), 8vw, var(--space-16));
}

.block--tight {
    margin-block: var(--space-10);
}

.block__head {
    text-align: center;
    max-width: 60ch;
    margin: 0 auto var(--space-10);
}

.block__head .section-title {
    margin-bottom: var(--space-3);
}

.block__head .section-text {
    font-size: var(--text-md);
}

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

    /* TOC + sidebar share are a desktop enhancement; in-article share/print
       cover tablet & mobile, so hide the whole aside to avoid a lone box. */
    .article-aside {
        display: none;
    }

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

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

    .stats-band {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8) var(--space-6);
    }

    .stat:nth-child(2)::after {
        display: none;
    }
}

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

    .split--reverse .split__media {
        order: -1;
    }

    .vm-grid,
    .values-grid,
    .why-list,
    .prevnext {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile {
        flex-direction: column;
        text-align: center;
    }

    .profile__bio {
        margin-inline: auto;
    }

    .profile__social {
        justify-content: center;
    }

    .profile__stats {
        margin: var(--space-2) 0 0;
        padding: var(--space-5) 0 0;
        border-inline-start: 0;
        border-top: 1px solid var(--border-light);
        width: 100%;
        justify-content: space-around;
    }

    .toolbar {
        align-items: stretch;
    }

    .toolbar__controls {
        width: 100%;
    }

    .search-field {
        flex: 1;
    }

    .article__title {
        font-size: clamp(24px, 7vw, 32px);
    }

    .article__meta-list {
        margin-inline-start: 0;
        width: 100%;
    }
}

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

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

    .stats-band {
        grid-template-columns: 1fr 1fr;
        padding: var(--space-6);
    }

    .pagination__link--text span {
        display: none;
    }
}

/* ======================================================
   Print (single article)
   ====================================================== */
@media print {
    .site-topbar,
    .site-header,
    .footer-pro,
    .article-aside,
    .article-actions,
    .prevnext,
    .related,
    .reading-progress,
    .breadcrumb,
    .skip-link {
        display: none !important;
    }

    .article {
        grid-template-columns: 1fr;
    }

    .prose {
        max-width: none;
        font-size: 12pt;
        color: #000;
    }
}

/* ======================================================
   Podcast — «بودكاست بنفسج»
   The archive page (/podcast) and the pieces the homepage
   band reuses: the play button, the waveform, the rows.

   The programme gets the site's own dark surface
   (--bg-dark, shared with the footer and the dark bands)
   for its header and its featured episode, then hands over
   to the light page for the archive list. Listening is a
   different mode from reading, and the surface says so
   without inventing a colour.
   ====================================================== */

.pod-page__head {
    background: var(--bg-dark);
    padding-block: var(--space-10) var(--space-8);
}

.pod-page__head-inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    text-align: center;
}

.pod-page__crumb {
    justify-content: center;
    margin-bottom: var(--space-6);
}

.pod-page__crumb a,
.pod-page__crumb .breadcrumb__current,
.pod-page__crumb .breadcrumb__sep {
    color: rgba(255, 255, 255, 0.62);
}

.pod-page__crumb a:hover {
    color: #fff;
}

.pod-page__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 var(--text-xs)/1 var(--font-body);
    color: var(--primary-200);
    background: rgba(242, 133, 181, 0.12);
    border: 1px solid rgba(242, 133, 181, 0.24);
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-5);
}

.pod-page__title {
    margin: 0 0 var(--space-3);
    font: 700 clamp(28px, 4vw, 44px)/1.2 var(--font-heading);
    color: #fff;
}

.pod-page__tagline {
    margin: 0 0 var(--space-4);
    font: 400 var(--text-lg)/1.5 var(--font-quote);
    color: var(--primary-200);
}

.pod-page__lead {
    max-width: 62ch;
    margin: 0 auto;
    font: 400 var(--text-md)/1.9 var(--font-body);
    color: rgba(255, 255, 255, 0.74);
}

.pod-page__count {
    margin: var(--space-6) 0 0;
    font: 500 var(--text-sm)/1 var(--font-body);
    color: rgba(255, 255, 255, 0.56);
}

.pod-page__count-num {
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-bold);
    color: #fff;
}

/* ---------- Featured episode ---------- */

.pod-feature {
    background: var(--bg-dark);
    display: grid;
    grid-template-columns: clamp(200px, 24vw, 280px) minmax(0, 1fr);
    gap: clamp(var(--space-6), 4vw, var(--space-10));
    align-items: center;
    padding-block: 0 var(--space-12);
    padding-inline: max(var(--container-pad), calc((100% - var(--container-max)) / 2));
}

.pod-feature__art {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--secondary-700);
}

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

.pod-feature__body {
    min-width: 0;
}

.pod-feature__eyebrow {
    display: inline-block;
    font: 600 var(--text-xs)/1 var(--font-body);
    letter-spacing: .02em;
    color: var(--primary-300);
    margin-bottom: var(--space-3);
}

.pod-feature__title {
    margin: 0 0 var(--space-3);
    font: 700 clamp(20px, 2.4vw, 30px)/1.35 var(--font-heading);
    color: #fff;
}

.pod-feature__desc {
    margin: 0 0 var(--space-4);
    max-width: 58ch;
    font: 400 var(--text-md)/1.8 var(--font-body);
    color: rgba(255, 255, 255, 0.72);
}

.pod-feature__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--space-6);
    font: 500 var(--text-sm)/1 var(--font-body);
    color: rgba(255, 255, 255, 0.56);
}

.pod-meta__len {
    font-variant-numeric: tabular-nums;
}

.pod-meta__dot {
    opacity: .5;
}

.pod-feature__controls {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-5);
}

/* The same running clock the homepage band prints, on the dark hero. */
.pod-feature__clock {
    font: 500 var(--text-xs)/1 var(--font-body);
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.62);
    white-space: nowrap;
    direction: ltr;
}

/* ---------- Play button ---------- */

/* The play control, skinned by the ground it sits on.
 *
 * The brand pink is a light tint: white on it measures 2.39:1, and no shade in
 * the pink ramp reaches 4.5 (the darkest, --primary-700, stops at 3.32). So the
 * control follows the surface instead of the accent — on light ground it is the
 * DARKEST thing present (violet, white glyph: 6.02), on dark ground the
 * BRIGHTEST (pink, dark glyph: 7.57). Either way it is unmistakably the button,
 * and either way the glyph is legible.
 */
.pod-play {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--secondary);
    color: #fff;
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background var(--transition-base), transform var(--dur-1) var(--ease-out);
}

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

/* Dark grounds: the archive's hero and the player bar. */
.pod-feature .pod-play,
.pod-page__head .pod-play {
    background: var(--primary);
    color: var(--bg-dark);
}

.pod-feature .pod-play:hover {
    background: var(--primary-400);
}

.pod-play:active {
    transform: scale(.97);
}

.pod-play--lg {
    height: 52px;
    padding-inline: 26px;
    font-size: var(--text-md);
}

.pod-play--sm {
    width: 40px;
    height: 40px;
    padding: 0;
}

/* An optical nudge: a play triangle reads off-centre inside a circle, and
   the pause glyph does not need it. */
.pod-play__icon {
    font-size: 14px;
    margin-inline-start: 2px;
}

.pod-play.is-playing .pod-play__icon {
    margin-inline-start: 0;
}

.pod-play.is-loading {
    background: var(--primary-400);
    cursor: progress;
}

/* ---------- Waveform ---------- */

/* The waveform is drawn once and skinned by whatever surface it lands on:
   white ink on the archive's dark hero, violet ink on the homepage band's
   light paper. One component, two grounds, no duplicated markup. */
.pod-wave {
    --wave-base: rgba(255, 255, 255, 0.22);
    --wave-played: var(--primary-300);
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    position: relative;
}

.pod-wave svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.pod-wave__base {
    fill: var(--wave-base);
}

/* The played portion: the same bars, clipped to the progress fraction. The
   clip is a custom property set from JS, so nothing re-renders per frame.
   RTL: the episode starts at the RIGHT edge, so the played part grows
   leftward and the inset is taken off the left. */
.pod-wave__played {
    fill: var(--wave-played);
    clip-path: inset(0 0 0 calc(100% - var(--pod-progress, 0%)));
}

/* A waveform that seeks. The pointer affordance is here; the keyboard path to
   the same control is the player bar's range input, which is why this stays
   out of the tab order rather than becoming a second focus stop for one
   action. */
.pod-wave--seek {
    cursor: pointer;
    touch-action: none;
}

.pod-wave--seek::after {
    content: "";
    position: absolute;
    /* A taller hit area than the bars are drawn — a 48px strip of thin bars is
       hard to hit precisely, and the extra height costs nothing visually. */
    inset-block: -8px;
    inset-inline: 0;
}

/* ---------- Archive list ---------- */

.pod-page__list-wrap {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    padding-block: var(--space-12) var(--space-16);
}

.pod-list__heading {
    margin: 0 0 var(--space-6);
    font: 700 var(--text-xl)/1.3 var(--font-heading);
    color: var(--text-primary);
}

.pod-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-block-start: 1px solid var(--border-light);
}

.pod-row {
    display: grid;
    grid-template-columns: auto 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-block-end: 1px solid var(--border-light);
    transition: background var(--dur-1) var(--ease-out);
}

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

.pod-row__num {
    width: 2.5ch;
    text-align: center;
    font: 500 var(--text-sm)/1 var(--font-body);
    font-variant-numeric: tabular-nums;
    color: var(--text-light);
}

.pod-row__art {
    width: 56px;
    height: 56px;
    overflow: hidden;
    background: var(--bg-section);
}

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

.pod-row__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Two lines then ellipsis: a long title must not push the row past its
   neighbours and break the list's rhythm. */
.pod-row__title {
    font: 600 var(--text-md)/1.45 var(--font-heading);
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pod-row__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 400 var(--text-xs)/1 var(--font-body);
    color: var(--text-muted);
}

.pod-row__len {
    font-variant-numeric: tabular-nums;
}

/* The row currently playing: a bar on its leading edge and a tinted ground,
   so the reader can find what they are hearing while scrolling. */
.pod-row.is-playing {
    background: var(--primary-050);
    box-shadow: inset 3px 0 0 0 var(--primary);
}

.pod-row.is-playing .pod-row__title {
    color: var(--primary-700);
}

/* ---------- Load more ---------- */

.pod-more {
    display: flex;
    justify-content: center;
    margin-top: var(--space-8);
}

.pod-more__btn {
    height: var(--btn-h);
    padding-inline: var(--btn-pad-x);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-pill);
    font: 600 var(--text-sm)/1 var(--font-body);
    transition: border-color var(--transition-base), color var(--transition-base), transform var(--dur-1) var(--ease-out);
}

.pod-more__btn[disabled] {
    opacity: .6;
    cursor: progress;
}

.pod-more__rest {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

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

@media (max-width: 860px) {
    .pod-feature {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
        justify-items: center;
        text-align: center;
    }

    .pod-feature__art {
        width: min(280px, 70vw);
    }

    .pod-feature__meta {
        justify-content: center;
    }

    /* The waveform takes its own row: it is the seek control, so it keeps the
       full width rather than being squeezed between the button and the clock. */
    .pod-feature__controls {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: var(--space-3);
        width: 100%;
    }

    .pod-feature__controls .pod-wave {
        grid-column: 1 / -1;
        grid-row: 2;
        height: 40px;
    }

    .pod-feature__clock {
        justify-self: end;
    }
}

@media (max-width: 560px) {
    .pod-page__head {
        padding-block: var(--space-8) var(--space-6);
    }

    .pod-row {
        grid-template-columns: 48px minmax(0, 1fr) auto;
        gap: var(--space-3);
    }

    /* The index is the first thing to go: on a phone the artwork already
       identifies the row and the number is only ever decoration. */
    .pod-row__num {
        display: none;
    }

    .pod-row__art {
        width: 48px;
        height: 48px;
    }

    .pod-row__title {
        font-size: var(--text-sm);
    }
}

/* ======================================================
   bn-audio — the persistent podcast player

   One bar for the whole site. On a desktop it is a card in
   the bottom corner, out of the reading column; on a phone
   it is the full-width strip that shape has to become, sat
   above the home indicator.

   It appears only once something is playing (or once a
   saved position is found), and the page is given exactly
   its height in padding at that moment, so the last row of
   content is never trapped underneath it and nothing
   shifts while the reader is reading.
   ====================================================== */

.bnp {
    position: fixed;
    inset-block-end: 16px;
    /* Centred, not cornered. Both bottom corners are already spoken for on
       this site — the back-to-top button holds one and the shared «فعّل
       إشعارات الأخبار» bell (z-index 1040, so it wins) holds the other, and a
       bar in either corner ends up underneath one of them. The middle is the
       only place that is the site's to give. */
    inset-inline: 0;
    margin-inline: auto;
    width: min(440px, calc(100vw - 32px));
    /* Above the back-to-top button (900), below the header's own overlays. */
    z-index: 940;
    background: var(--bg-dark);
    border: 1px solid rgba(242, 133, 181, 0.22);
    box-shadow: 0 12px 40px rgba(26, 18, 41, 0.34);
    color: #fff;
    font-family: var(--font-body);
}

.bnp[hidden] {
    display: none;
}

/* ---------- Seek ---------- */

.bnp__track {
    position: relative;
    height: 4px;
    background: rgba(255, 255, 255, 0.14);
}

/* Scaled, not resized: the width of a bar changing 60 times a second is a
   layout every frame; a transform is not. */
.bnp__track-fill {
    position: absolute;
    inset: 0;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: right center;
    will-change: transform;
}

/* A real range input, sat invisibly over the bar: keyboard, Home/End, and
   every assistive technology come free, and the drawn bar is what shows. */
.bnp__seek {
    position: absolute;
    inset-block: -8px;
    inset-inline: 0;
    width: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

.bnp__seek:focus-visible {
    opacity: 1;
    outline: none;
}

.bnp__seek:focus-visible + * ,
.bnp__track:focus-within {
    box-shadow: var(--focus-ring);
}

/* ---------- Body ---------- */

.bnp__body {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

.bnp__toggle {
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-pill);
    /* Dark ground: the brightest thing on the bar, with a dark glyph — white on
       this pink is 2.39:1, the dark ink is 7.57:1. */
    background: var(--primary);
    color: var(--bg-dark);
    cursor: pointer;
    transition: background var(--transition-base), transform var(--dur-1) var(--ease-out);
}

.bnp__toggle:hover {
    background: var(--primary-400);
}

.bnp__toggle:active {
    transform: scale(.94);
}

.bnp__toggle-icon {
    font-size: 15px;
    margin-inline-start: 2px;
}

.bnp.is-playing .bnp__toggle-icon {
    margin-inline-start: 0;
}

.bnp.is-loading .bnp__toggle {
    background: var(--primary-400);
    cursor: progress;
}

.bnp__art {
    flex: none;
    width: 44px;
    height: 44px;
    overflow: hidden;
    background: var(--secondary-700);
}

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

.bnp__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bnp__title {
    font: 600 var(--text-sm)/1.35 var(--font-heading);
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bnp__album {
    font: 400 var(--text-xs)/1 var(--font-body);
    color: rgba(255, 255, 255, 0.52);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bnp__times {
    font: 500 var(--text-xs)/1 var(--font-body);
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.62);
    white-space: nowrap;
    /* The timeline reads left-to-right even here: 00:12 / 04:57, never the
       reverse. */
    direction: ltr;
}

.bnp__times-sep {
    opacity: .5;
    margin-inline: 3px;
}

.bnp__volume {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bnp__mute,
.bnp__close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.66);
    cursor: pointer;
    border-radius: var(--radius-pill);
    transition: color var(--transition-base), background var(--transition-base);
}

.bnp__mute:hover,
.bnp__close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
}

.bnp__volume-range {
    width: 68px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* ---------- Resume, error, live region ---------- */

/* Restored from another page: the bar says so, once, instead of looking like
   something that failed to start. */
.bnp.is-resumable:not(.is-playing) .bnp__album::after {
    content: " · متابعة الاستماع";
    color: var(--primary-300);
}

.bnp__error {
    margin: 0;
    padding: var(--space-2) var(--space-4) var(--space-3);
    font: 400 var(--text-xs)/1.6 var(--font-body);
    color: var(--primary-200);
    border-block-start: 1px solid rgba(255, 255, 255, 0.10);
}

.bnp__error[hidden] {
    display: none;
}

.bnp__error a {
    color: #fff;
    text-decoration: underline;
}

/* Announced, never drawn. */
.bnp__live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Room for the bar ---------- */

/* The clearance goes on the FOOTER, not on <body>.
   body's background is --bg-main, a light cream, while the footer is the dark
   surface — so padding on the body painted a pale strip UNDER the dark footer
   every time an episode played. Put the same space inside the footer and it
   wears the footer's own colour, which is what the reader should see below the
   last row of the page. The footer's own padding-block-end is 0, so nothing is
   overridden, and every page in this theme ends with it. */
/*body.has-bnp .footer-pro {*/
/*    padding-block-end: 96px;*/
/*}*/

/* The two floating controls step over the bar rather than under it.
   `.push-bell` belongs to a partial shared by all 21 sites, so it is lifted
   from here — this stylesheet is bnfsj's alone — and never by editing the
   partial's own rule. It carries z-index 1040 against the bar's 940, so
   without this it would sit ON the bar rather than behind it. */
body.has-bnp .to-top {
    inset-block-end: 108px;
}

body.has-bnp .push-bell {
    inset-block-end: 104px;
}

/* ---------- Phone ---------- */

@media (max-width: 640px) {
    .bnp {
        inset-inline: 0;
        inset-block-end: 0;
        width: 100%;
        border-inline: 0;
        border-block-end: 0;
        /* Clear of the home indicator on a notched phone. */
        padding-block-end: env(safe-area-inset-bottom, 0px);
    }

    .bnp__body {
        /* Duration, volume and mute leave: a phone has hardware volume keys,
           and the numbers cost the title the width it needs. */
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .bnp__times,
    .bnp__volume {
        display: none;
    }

    body.has-bnp .footer-pro {
        padding-block-end: calc(76px + env(safe-area-inset-bottom, 0px));
    }

    body.has-bnp .to-top {
        inset-block-end: calc(88px + env(safe-area-inset-bottom, 0px));
    }

    body.has-bnp .push-bell {
        inset-block-end: calc(88px + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------- Motion ---------- */

/* The bar arrives from the edge it lives on — a short slide that says where
   it came from, once. */
@media (prefers-reduced-motion: no-preference) {
    .bnp {
        animation: bnp-rise var(--dur-3) var(--ease-out) both;
    }

    @keyframes bnp-rise {
        from { transform: translateY(12px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .bnp__track-fill {
        transition: transform 200ms linear;
    }
}

/* ======================================================
   Podcast — motion

   Audio has no picture, so the only moment that needs
   motion is the one the reader cannot see: between the
   press and the first sound. Everything else about the
   state — which row is playing, where the episode has
   reached — is already said by a colour, an edge and a
   number that do not move.

   No entrance animation for the band (the page has no
   reveal system to match), no equalizer running for the
   length of an episode, nothing on scroll.
   ====================================================== */

/* The press is registered, the sound has not started yet. A slow breath on
   the button, not a spinner: the wait is usually under a second, and a
   spinner appearing and vanishing that fast is noise. */
@media (prefers-reduced-motion: no-preference) {
    .pod-play.is-loading,
    .bnp.is-loading .bnp__toggle {
        animation: pod-waiting 1.1s var(--ease-out) infinite;
    }

    @keyframes pod-waiting {
        0%, 100% { opacity: 1; }
        50% { opacity: .55; }
    }
}

/* Reduced motion: every moving part of the player stops. The states stay —
   they were never carried by movement. */
@media (prefers-reduced-motion: reduce) {
    .bnp {
        animation: none;
    }

    .bnp__track-fill {
        transition: none;
    }

    .pod-play,
    .pod-row,
    .pod-band__row,
    .pod-band__all-link,
    .pod-more__btn,
    .bnp__toggle {
        transition: none;
    }

    .pod-play:active,
    .bnp__toggle:active {
        transform: none;
    }

    /* The loading state is announced by colour alone. */
    .pod-play.is-loading,
    .bnp.is-loading .bnp__toggle {
        animation: none;
        opacity: .75;
    }
}