/* ============================================================
   JP News (جهينة نيوز) — finaldesign «الشبكة» — interior.css
   Shared components of the INTERIOR page templates (2026-09-28):
   article · article-opinion · subsection · section · section-no-subs
   · video · contact · survey. Loaded after home.css (the card system, ad frames and
   the wire) on every interior page, never on index.html.
   Owns: nav current-state · breadcrumb · page head · sub-section
   chips · two-column page grid + rail · rail widgets · share bar ·
   text-size control · tag list · load-more · pagination · related
   grid · next/prev pager · media-type marks · ad tiers (in-read,
   square, column banner) · forms (the shared field system).
   Colour comes only from theme.css tokens (no hex here); every
   category-coloured piece reads --cat, scoped by a .cat-* class.
   ============================================================ */

/* ------------------------------------------------------------
   CURRENT PAGE IN THE NAVIGATION — the one permitted header
   difference (§3): aria-current="page" on the current category
   (and subcategory) in the flat row, the directory panel and the
   drawer. Same category bar the hover already uses; no new colour.
   ------------------------------------------------------------ */
.nav-link[aria-current="page"] {
    border-block-end-color: var(--cat, var(--color-accent));
}

.directory-link[aria-current="page"],
.drawer-sub-link[aria-current="page"] {
    color: var(--color-chrome-text);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--cat, var(--color-accent));
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.drawer-row-link[aria-current="page"] {
    background-color: var(--color-chrome-deep);
}

/* ------------------------------------------------------------
   BREADCRUMB — الرئيسية › القسم › الفرع. Hard-won fix 6 (global.css)
   zeroes its outer margin; the block spacing lives on .page-head.
   Separators are the sprite chevron turned to point FORWARD in RTL
   (rotate 90° = towards the inline end, the left), the same trick
   .section-more uses; nothing else is mirrored.
   ------------------------------------------------------------ */
.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: var(--fs-meta);
    color: var(--color-text-muted);
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
}

.breadcrumb-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: var(--space-xs);
    margin-inline-start: calc(-1 * var(--space-xs));   /* first crumb sits on the container edge */
}

.breadcrumb-item + .breadcrumb-item .breadcrumb-link {
    margin-inline-start: 0;
}

.breadcrumb-link:hover,
.breadcrumb-link:focus-visible {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.breadcrumb-sep {
    inline-size: 14px;
    block-size: 14px;
    margin-inline: 2px;
    transform: rotate(90deg);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.breadcrumb-current {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: var(--space-xs);
    color: var(--color-text);
    font-weight: 500;
}

/* ------------------------------------------------------------
   PAGE HEAD — the h1 block of a listing / section / video page.
   The category bar (the design's wayfinding mark) grows to the
   height of the title. The parent category lives in the
   breadcrumb only (the sub-section page's parent link and chips
   were removed, client 2026-09-29).
   ------------------------------------------------------------ */
.page-head {
    padding-block: var(--space-sm) var(--space-md);
    border-block-end: 1px solid var(--color-border);
    margin-block-end: var(--space-lg);
}

.page-title {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: var(--fs-2xl);
    line-height: 1.25;
    margin-block-start: var(--space-xs);
}

.page-title::before {
    content: '';
    flex-shrink: 0;
    inline-size: 6px;
    align-self: stretch;
    min-block-size: 1em;
    background-color: var(--cat, var(--color-accent));
    border-radius: var(--radius-bar, 0);
}

.page-head-dek {
    font-size: var(--fs-md);
    color: var(--color-text-muted);
    max-inline-size: 90ch;            /* one line for a ≤ 90-character dek in either font, so the web-font swap moves nothing below it */
    margin-block-start: var(--space-sm);
}

/* ------------------------------------------------------------
   SUB-SECTION CHIPS — the children of a category. WRAPS on purpose:
   التقارير الخاصة has eleven children, and a wrapped row is
   keyboard-complete with no scroll affordance to discover (every
   chip is a plain link in reading order). Current child = filled
   with the category colour; «كل …» carries the category bar.
   ------------------------------------------------------------ */
.sub-nav {
    margin-block: calc(-1 * var(--space-sm)) var(--space-lg);
}

.sub-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.sub-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-block-size: 44px;
    padding-inline: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-chip);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--color-text);
    transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.sub-chip:hover,
.sub-chip:focus-visible {
    border-color: var(--cat, var(--color-text));
    color: var(--cat, var(--color-text));
}

.sub-chip[aria-current="page"] {
    background-color: var(--cat, var(--color-primary));
    border-color: var(--cat, var(--color-primary));
    color: var(--color-on-cat);
}

.sub-chip .cat-bar {
    block-size: 14px;
}

/* ------------------------------------------------------------
   PAGE GRID — main column + 300px rail from 992. Every page with a
   rail uses the ONE standard sidebar (build/partial-rail.html, client
   2026-09-29): AD-04 square on top, then الأكثر قراءة · آخر الأخبار ·
   فيديو — static, nothing sticky. Below 992 everything is one column
   in DOM order (the rail after the main content).
   ------------------------------------------------------------ */
.page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg) var(--zone-gap);
}

.page-main {
    min-inline-size: 0;
}

.page-rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-inline-size: 0;
}

.rail-widget {
    min-inline-size: 0;
}

.rail-widget .section-label {
    margin-block-end: var(--space-sm);
}

/* The rail's video widget: one poster card + hairline rows under it */
.rail-video .card-video + .thumb-list {
    margin-block-start: var(--space-sm);
    border-block-start: 1px solid var(--color-border);
}

@media (min-width: 992px) {
    .page-grid {
        grid-template-columns: minmax(0, 1fr) var(--col-rail);
        grid-auto-flow: row;
    }

    .page-main {
        grid-column: 1;
    }

    .page-rail {
        grid-column: 2;
        grid-row: 1 / span var(--rail-span, 1);
    }
}

/* ------------------------------------------------------------
   SHARE & TOOLS BAR — share intents are plain links (user-initiated
   navigation), the rest are buttons. Every control is 44×44. Pure
   design (2026-09-29): «نسخ الرابط» and the opinion page's «أ− / أ+»
   and «طباعة» carry no script; their behaviour is the development
   team's.
   ------------------------------------------------------------ */
.share-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    padding-block: var(--space-sm);
    border-block: 1px solid var(--color-border);
}

.share-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.share-group-tools {
    margin-inline-start: auto;
}

.share-label {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-meta);
    color: var(--color-text-muted);
    margin-inline-end: var(--space-xs);
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-inline-size: 44px;
    min-block-size: 44px;
    padding-inline: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    color: var(--color-text);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-sm);
    line-height: 1;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.share-btn:hover,
.share-btn:focus-visible {
    background-color: var(--color-bg-alt);
    border-color: var(--color-text-muted);
}

.contact-social .share-btn {
    background-color: #17191C;
}

.contact-social .share-btn:hover {
    background-color: #010101;
}

/* A−/A+ read as one control: the two buttons share a frame */
.text-size-group {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
}

.text-size-group .share-btn {
    border: 0;
    border-radius: 0;
}

.text-size-group .share-btn + .share-btn {
    border-inline-start: 1px solid var(--color-border);
}

/* Compact repeat at the foot of the body: share links only */
.share-bar-compact {
    border-block-start: 0;
}

/* ------------------------------------------------------------
   TAG LIST — topic chips in a <ul>, never headings
   ------------------------------------------------------------ */
.tag-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    padding-block: var(--space-md);
}

.tag-block-label {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-meta);
    color: var(--color-text-muted);
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    min-block-size: 40px;
    padding-inline: 14px;
    margin-block: 2px;                 /* 40 + 2 + 2 = the 44px target */
    background-color: var(--color-bg-alt);
    border: 1px solid transparent;
    border-radius: var(--radius-chip);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-meta);
    color: var(--color-text);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.tag-chip:hover,
.tag-chip:focus-visible {
    border-color: var(--cat, var(--color-text));
    color: var(--cat, var(--color-text));
}

/* ------------------------------------------------------------
   LOAD MORE — one button under a list (the tribune feed, the video
   grid, the article's comments). Pure design (2026-09-29): the page
   renders its first page and the button; loading more is the
   development team's.
   ------------------------------------------------------------ */
.load-more-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding-block: var(--space-lg) var(--space-md);
}

.load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-inline-size: 240px;
    min-block-size: 48px;
    padding-inline: var(--space-lg);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-btn);
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.load-more:hover,
.load-more:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-bg);
}

.load-more .icon-sm {
    transition: transform var(--transition-fast);
}

/* ------------------------------------------------------------
   PAGINATION — the crawlable / no-JS path. Numbers are 44px cells;
   prev points to the inline start, next to the inline end.
   ------------------------------------------------------------ */
.pagination-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);
    padding-block: var(--space-md);
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-inline-size: 44px;
    min-block-size: 44px;
    padding-inline: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.page-link:hover,
.page-link:focus-visible {
    background-color: var(--color-bg-alt);
    border-color: var(--color-text-muted);
}

.page-link[aria-current="page"] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg);
}

.page-link-prev .icon-sm {
    transform: rotate(-90deg);     /* towards the inline start (right in RTL) */
}

.page-link-next .icon-sm {
    transform: rotate(90deg);      /* towards the inline end (left in RTL) */
}

.page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 32px;
    min-block-size: 44px;
    color: var(--color-text-muted);
}

/* ------------------------------------------------------------
   RELATED GRID — 1 / 2 / 3 columns (<576 / 576–991 / ≥992). On a
   phone every card becomes a thumb row (the .grid-3 pattern).
   ------------------------------------------------------------ */
.related-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
}

@media (min-width: 576px) {
    .related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .related-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .related-grid .card-link {
        display: grid;
        grid-template-columns: 120px minmax(0, 1fr);
        gap: var(--space-md);
        align-items: start;
    }

    .related-grid .card-title,
    .related-grid .card-kicker {
        margin-block-start: 0;
    }

    .related-grid .card-media {
        border-radius: var(--radius-card);
    }
}

/* ------------------------------------------------------------
   NEXT / PREVIOUS ARTICLE — chronological, not positional:
   «السابق» is the story published BEFORE this one, «التالي» the one
   published AFTER. The arrows follow reading direction (previous
   points to the inline start, next to the inline end) and each cell
   shows its time so the meaning is visible, not assumed.
   ------------------------------------------------------------ */
.article-pager {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    padding-block: var(--space-md);
    border-block: 1px solid var(--color-border);
}

@media (min-width: 576px) {
    .article-pager {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pager-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-block-size: 44px;
    padding: var(--space-sm);
    border-radius: var(--radius-card);
    transition: background-color var(--transition-fast);
}

.pager-link:hover,
.pager-link:focus-visible {
    background-color: var(--color-bg-alt);
}

.pager-link-next {
    text-align: end;
    align-items: flex-end;
}

.pager-dir {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-meta);
    color: var(--color-text-muted);
}

.pager-link-prev .pager-dir .icon-sm {
    transform: rotate(-90deg);
}

.pager-link-next .pager-dir .icon-sm {
    transform: rotate(90deg);
}

.pager-title {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-thumb);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.pager-link:hover .pager-title,
.pager-link:focus-visible .pager-title {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.pager-time {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

/* ------------------------------------------------------------
   MEDIA-TYPE MARK — a small disc in the corner of a thumbnail that
   says «فيديو» or «صور» without words: the play glyph or the camera,
   on the same plate/ink tokens as the video gallery. Never mirrored.
   ------------------------------------------------------------ */
.media-type {
    position: absolute;
    z-index: 1;
    inset-inline-end: 6px;
    inset-block-end: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 24px;
    block-size: 24px;
    border-radius: 50%;
    background-color: var(--color-video-plate);
    color: var(--color-video-ink);
    box-shadow: 0 0 0 1px var(--color-video-edge);
}

.media-type .icon-sm {
    inline-size: 12px;
    block-size: 12px;
}

/* ------------------------------------------------------------
   IN-READ AD — the unit for the main column of the listing pages
   (AD-03 inside a feed). Hairlines and a label keep it visibly
   separate from the rows. Never inside an article's text
   (client, 2026-09-29).
   ------------------------------------------------------------ */
.ad-inread {
    padding-block: var(--space-md);
    margin-block: var(--space-lg);
    border-block: 1px solid var(--color-border);
    --ad-max-inline-size: 728px;
    --ad-aspect-ratio: 728 / 90;
}

/* ------------------------------------------------------------
   SQUARE AD — AD-04 at the TOP of the rail (article.html, client
   2026-09-29: «place the advertisement space at the top, use square
   type»). «Square» in ad-sales terms: the 300×250 unit, the rail's
   own width, one size at every breakpoint. Static, not sticky — a
   pinned unit at the head of the rail would ride over the widgets
   under it.
   ------------------------------------------------------------ */
.ad-square {
    padding-block: 0;
    --ad-max-inline-size: 300px;
    --ad-aspect-ratio: 300 / 250;
}

/* ------------------------------------------------------------
   COLUMN BANNER — a main-column unit that must fit BESIDE the rail
   (AD-07 after the article, client 2026-09-29). The 728×90 desktop
   creative scales down proportionally when the main column is
   narrower.
   ------------------------------------------------------------ */
.ad-column-banner {
    --ad-max-inline-size: 728px;
    --ad-aspect-ratio: 728 / 90;
}

/* ------------------------------------------------------------
   FORMS — one field system for every form on the interior pages
   (2026-09-29): the article's comments, «اتصل بنا», «استبيان
   القراء». Native controls with a visible label each; every control
   44px or more; tokens only. PURE DESIGN (client, 2026-09-29): no
   script and no submission in the templates. The page shows each
   form's default state; the other states are ready here for the
   development team to switch on — aria-invalid="true" on a field,
   a p.form-error under it (named in its aria-describedby), and a
   .form-sent panel for the thank-you.
   ------------------------------------------------------------ */
.form-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

.form-title {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-lg);
    line-height: 1.3;
}

.form-note {
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--color-text-muted);
}

.form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-inline-size: 0;
}

.form-label {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-sm);
}

.form-label-optional {
    font-family: var(--font-secondary);
    font-weight: 400;
    color: var(--color-text-muted);
}

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

.form-input {
    inline-size: 100%;
    min-block-size: 44px;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-field);
    font-family: var(--font-secondary);
    font-size: var(--fs-md);
    line-height: 1.6;
}

.form-input:focus {
    outline: 2px solid var(--color-focus);
    outline-offset: 1px;
}

.form-input[aria-invalid="true"] {
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

.form-textarea {
    min-block-size: 140px;
    resize: vertical;
}

.form-input-ltr {
    text-align: start;             /* the field is dir="ltr", so start = left */
}

/* A select draws its own chevron from the sprite, so it reads the same
   in every browser and mirrors nothing */
.form-select {
    position: relative;
    display: block;
}

.form-select .form-input {
    appearance: none;
    padding-inline-end: calc(var(--space-md) + 24px);
    cursor: pointer;
}

.form-select-icon {
    position: absolute;
    inset-inline-end: var(--space-md);
    inset-block-start: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

/* One checkbox with its sentence (consent): the whole row is the target */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    min-block-size: 44px;
    padding-block: var(--space-xs);
    font-size: var(--fs-sm);
    line-height: 1.7;
    cursor: pointer;
}

.form-check input {
    flex-shrink: 0;
    inline-size: 20px;
    block-size: 20px;
    margin: 3px 0 0;
    accent-color: var(--color-primary);
}

.form-check input[aria-invalid="true"] {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.form-hint {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.form-count {
    align-self: flex-end;
    font-variant-numeric: tabular-nums;
}

.form-error {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-accent);
}

.form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-md);
}

.form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 180px;
    min-block-size: 48px;
    padding-inline: var(--space-lg);
    background-color: var(--color-primary);
    color: var(--color-bg);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-btn);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-sm);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.form-submit:hover,
.form-submit:focus-visible {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.form-sent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-inline-start: 4px solid var(--color-primary);
    font-weight: 500;
}

.form-sent .icon-sm {
    flex-shrink: 0;
    margin-block-start: 4px;
}

@media (min-width: 576px) {
    .form-panel {
        padding: var(--space-lg);
    }

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

@media (max-width: 575px) {
    .form-submit {
        inline-size: 100%;
    }
}

/* ------------------------------------------------------------
   SMALL SHARED PIECES
   ------------------------------------------------------------ */
/* A section heading row followed by a grid: the home page's label row */
.section-block {
    margin-block-start: var(--space-lg);
}

/* Relative time on a feed row: the <time> keeps the machine value */
.time-rel {
    white-space: nowrap;
}

/* Zone padding between the page head and the footer */
.page-body {
    padding-block-end: var(--space-lg);
}

@media (max-width: 575px) {
    .page-title {
        font-size: 26px;
    }

    .load-more {
        inline-size: 100%;
    }
}