/* =============================================================================
   Aamal Aljoud — Article (NEWS-DETAIL-P2)
   -----------------------------------------------------------------------------
   One story, read top to bottom: a light editorial header, the photograph, a
   single reading column, then whatever media the article actually carries and
   the stories around it. No dark banner, no sidebar.

   The news card component and its stylesheet are untouched; the related strip
   only wraps them.

   Scope: loaded by /news/{slug} only.
   ========================================================================== */

/* ============================================================== 0. MOTION = */

/*
 * Reveals are opt in — the marker class is set by a one line script in the
 * head, so with JavaScript disabled nothing is ever hidden. Reduced motion
 * opts out again, and both paths end at the same painted result.
 */
.aj-motion [data-aj-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 620ms var(--aj-ease), transform 620ms var(--aj-ease);
}

.aj-motion [data-aj-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .aj-motion [data-aj-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================ 1. MEASURE === */

/*
 * One reading measure for the whole article, so the header, the body, the
 * tags and the share row all sit on the same column.
 */
.aj-art {
    --aj-art-measure: 44rem;
    display: block;
    padding-block-end: var(--aj-section-y);
}

.aj-art-head__inner,
.aj-art-body,
.aj-art-tags,
.aj-art-share {
    max-inline-size: var(--aj-art-measure);
    margin-inline: auto;
}

/* ============================================================== 2. HEAD === */

.aj-art-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(2rem, 1.25rem + 3vw, 3.25rem) clamp(1.5rem, 1rem + 2vw, 2.25rem);
    background: linear-gradient(180deg, var(--aj-surface-muted), var(--aj-page));
    border-block-end: 1px solid var(--aj-border);
    text-align: center;
}

.aj-art-head::after {
    content: "";
    position: absolute;
    inset-block-start: -14%;
    inset-inline-end: -4%;
    z-index: -1;
    inline-size: clamp(220px, 28vw, 420px);
    block-size: clamp(220px, 28vw, 420px);
    background: var(--aj-motif) center / contain no-repeat;
    opacity: 0.05;
    pointer-events: none;
}

.aj-art-head .aj-breadcrumb {
    justify-content: center;
    margin-block-end: var(--aj-space-4);
}

/* the kinds of media the story carries, stated once at the top */
.aj-art-kinds {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--aj-space-2);
    margin: 0 0 var(--aj-space-4);
}

.aj-art-kind {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
    padding: 0.3em 0.85em;
    border: 1px solid var(--aj-accent-border);
    border-radius: var(--aj-radius-pill);
    background: var(--aj-accent-soft);
    color: var(--aj-accent-active);
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-bold);
}

.aj-art-title {
    margin: 0;
    color: var(--aj-text);
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem);
    font-weight: var(--aj-fw-bold);
    line-height: var(--aj-lh-tight);
    letter-spacing: var(--aj-ls-tight);
    text-wrap: balance;
}

.aj-art-lead {
    margin: var(--aj-space-4) 0 0;
    color: var(--aj-text-secondary);
    font-size: var(--aj-fs-body-lg);
    line-height: var(--aj-lh-normal);
}

.aj-art-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--aj-space-2) var(--aj-space-5);
    margin: var(--aj-space-5) 0 0;
    color: var(--aj-text-muted);
    font-size: var(--aj-fs-sm);
}

.aj-art-meta > span,
.aj-art-project {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
}

.aj-art-meta .aj-icon {
    color: var(--aj-accent);
}

.aj-art-project {
    color: var(--aj-accent);
    font-weight: var(--aj-fw-medium);
    text-decoration: none;
}

.aj-art-project:hover {
    text-decoration: underline;
}

/* =========================================================== 3. PICTURE === */

/*
 * Wider than the reading column and capped in height: the photograph carries
 * the top of the page without pushing the story off the screen.
 */
.aj-art-media {
    position: relative;
    overflow: hidden;
    margin: 0;
    margin-block: clamp(var(--aj-space-6), 3vw, var(--aj-space-10));
    max-inline-size: 68rem;
    margin-inline: auto;
    border-radius: var(--aj-radius-lg);
    background: var(--aj-surface-muted);
    box-shadow: var(--aj-shadow-sm);
    aspect-ratio: 16 / 9;
}

.aj-art-media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
}

.aj-art-media__blank {
    position: absolute;
    inset: 0;
    background:
        var(--aj-motif) center / clamp(140px, 26%, 240px) no-repeat,
        linear-gradient(140deg, var(--aj-accent-soft), var(--aj-surface-band));
}

/* ============================================================== 4. BODY === */

/*
 * The article's own markup comes from the dashboard untouched; only its
 * presentation is set here, and every element an editor can produce has a
 * rule so the page never falls back to browser defaults.
 */
.aj-art-body {
    color: var(--aj-text);
    font-size: 1.0625rem;
    line-height: var(--aj-lh-relaxed);
}

/*
 * One rhythm for the whole body: every block starts flush, and every block
 * after the first is pushed off the one before it. Headings override this
 * with their own, larger margins below.
 */
.aj-art-body > * {
    margin-block: 0;
}

.aj-art-body > * + * {
    margin-block-start: var(--aj-space-5);
}

.aj-art-body h2,
.aj-art-body h3,
.aj-art-body h4 {
    margin-block: var(--aj-space-10) var(--aj-space-3);
    color: var(--aj-text);
    font-weight: var(--aj-fw-bold);
    line-height: var(--aj-lh-snug);
}

.aj-art-body h2 {
    font-size: var(--aj-fs-h3);
}

.aj-art-body h3 {
    font-size: var(--aj-fs-h4);
}

.aj-art-body h4 {
    font-size: var(--aj-fs-body-lg);
}

.aj-art-body ul,
.aj-art-body ol {
    padding-inline-start: var(--aj-space-6);
}

.aj-art-body li + li {
    margin-block-start: var(--aj-space-2);
}

.aj-art-body ul {
    list-style: disc;
}

.aj-art-body ol {
    list-style: decimal;
}

.aj-art-body a {
    color: var(--aj-accent);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

.aj-art-body a:hover {
    color: var(--aj-accent-active);
}

.aj-art-body strong,
.aj-art-body b {
    font-weight: var(--aj-fw-bold);
}

.aj-art-body blockquote {
    padding: var(--aj-space-4) var(--aj-space-6);
    border-inline-start: 3px solid var(--aj-accent);
    background: var(--aj-surface-muted);
    border-radius: var(--aj-radius-md);
    color: var(--aj-text-secondary);
    font-size: var(--aj-fs-body-lg);
}

.aj-art-body img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--aj-radius-md);
}

.aj-art-body figcaption {
    margin-block-start: var(--aj-space-2);
    color: var(--aj-text-muted);
    font-size: var(--aj-fs-caption);
    text-align: center;
}

/* ====================================================== 5. TAGS + SHARE === */

.aj-art-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aj-space-3);
    margin-block-start: var(--aj-space-10);
}

.aj-art-tags__label,
.aj-art-share__label {
    color: var(--aj-text-muted);
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-bold);
}

.aj-art-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aj-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.aj-art-tag {
    padding: 0.3em 0.85em;
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-pill);
    background: var(--aj-surface);
    color: var(--aj-text-secondary);
    font-size: var(--aj-fs-sm);
}

/* a row of three small actions, not a toolbar */
.aj-art-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aj-space-2);
    margin-block-start: var(--aj-space-8);
    padding-block-start: var(--aj-space-6);
    border-block-start: 1px solid var(--aj-divider);
}

.aj-art-share__label {
    margin-inline-end: var(--aj-space-2);
}

.aj-art-share__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 38px;
    block-size: 38px;
    padding: 0;
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-pill);
    background: var(--aj-surface);
    color: var(--aj-text-secondary);
    cursor: pointer;
    transition: var(--aj-transition);
}

.aj-art-share__btn:hover {
    border-color: var(--aj-accent-border);
    background: var(--aj-accent-soft);
    color: var(--aj-accent);
}

.aj-art-share__btn:focus-visible {
    outline: 2px solid var(--aj-accent);
    outline-offset: 2px;
}

/* the copy confirmation, shown by the script for a moment */
.aj-art-share__done {
    position: absolute;
    inset-block-end: calc(100% + var(--aj-space-2));
    inset-inline-start: 50%;
    transform: translateX(50%);
    padding: 0.25em 0.7em;
    border-radius: var(--aj-radius-sm);
    background: var(--aj-charcoal);
    color: var(--aj-text-inverse);
    font-size: var(--aj-fs-caption);
    white-space: nowrap;
}

/* =========================================================== 6. MEDIA === */

.aj-art-showcase {
    margin-block-start: clamp(var(--aj-space-10), 4vw, var(--aj-space-16));
    padding-block: clamp(var(--aj-space-8), 3vw, var(--aj-space-12));
    background: var(--aj-surface-muted);
    border-block: 1px solid var(--aj-border);
}

.aj-art-showcase__title {
    margin: 0 0 var(--aj-space-6);
    color: var(--aj-text);
    font-size: var(--aj-fs-h3);
    font-weight: var(--aj-fw-bold);
    text-align: center;
}

/*
 * One item fills the reading measure; two share the row on a wide screen and
 * stack below it. The embeds are never allowed to run the full page width.
 */
.aj-art-showcase__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    align-items: start;
    justify-content: center;
    gap: clamp(var(--aj-space-5), 2vw, var(--aj-space-8));
    max-inline-size: 62rem;
    margin-inline: auto;
}

.aj-art-showcase__grid > * {
    min-inline-size: 0;
}

.aj-art-embed {
    margin: 0;
}

/* a 16:9 well the frame fills, whatever the viewport */
.aj-art-embed__frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--aj-radius-lg);
    background: var(--aj-charcoal);
    box-shadow: var(--aj-shadow-sm);
    aspect-ratio: 16 / 9;
}

.aj-art-embed__frame iframe {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
}

.aj-art-embed__caption {
    margin-block-start: var(--aj-space-3);
    color: var(--aj-text-secondary);
    font-size: var(--aj-fs-sm);
    line-height: var(--aj-lh-snug);
}

/* ---- the X piece ---- */

.aj-art-x {
    margin: 0;
}

/*
 * Until the script reports the post mounted, the raw blockquote stays out of
 * the page and the card stands in its place. The moment it mounts, they swap.
 */
.aj-art-x__embed {
    display: none;
}

.aj-art-x.is-embedded .aj-art-x__embed {
    display: block;
}

.aj-art-x.is-embedded [data-aj-x-fallback] {
    display: none;
}

.aj-art-x__embed .twitter-tweet {
    margin-inline: auto !important;
}

/* ---- the card every failed embed falls back to ---- */

.aj-art-fallback {
    display: flex;
    align-items: center;
    gap: var(--aj-space-4);
    padding: var(--aj-space-5);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-lg);
    background: var(--aj-surface);
    box-shadow: var(--aj-shadow-xs);
    color: inherit;
    text-decoration: none;
    transition: var(--aj-transition);
}

.aj-art-fallback:hover {
    border-color: var(--aj-accent-border);
    box-shadow: var(--aj-shadow-sm);
    transform: translateY(-2px);
}

.aj-art-fallback:focus-visible {
    outline: 2px solid var(--aj-accent);
    outline-offset: 2px;
}

.aj-art-fallback__icon {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 46px;
    block-size: 46px;
    border-radius: var(--aj-radius-md);
    background: var(--aj-accent-soft);
    color: var(--aj-accent);
}

.aj-art-fallback--x .aj-art-fallback__icon {
    background: var(--aj-charcoal);
    color: var(--aj-text-inverse);
}

.aj-art-fallback__body {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    flex: 1;
    min-inline-size: 0;
}

.aj-art-fallback__body b {
    color: var(--aj-text);
    font-size: var(--aj-fs-body);
    font-weight: var(--aj-fw-bold);
}

.aj-art-fallback__body small {
    color: var(--aj-text-secondary);
    font-size: var(--aj-fs-sm);
}

.aj-art-fallback > .aj-icon {
    flex: none;
    color: var(--aj-text-muted);
}

@media (prefers-reduced-motion: reduce) {

    .aj-art-fallback,
    .aj-art-share__btn {
        transition: none;
    }

    .aj-art-fallback:hover {
        transform: none;
    }
}

/* ============================================================ 7. RELATED = */

.aj-art-related {
    margin-block-start: clamp(var(--aj-space-10), 4vw, var(--aj-space-16));
}

.aj-art-related__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--aj-space-3);
    margin-block-end: var(--aj-space-6);
}

.aj-art-related__title {
    margin: 0;
    color: var(--aj-text);
    font-size: var(--aj-fs-h2);
    font-weight: var(--aj-fw-bold);
    letter-spacing: var(--aj-ls-tight);
}

.aj-art-related__all {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
    color: var(--aj-accent);
    font-size: var(--aj-fs-sm);
    font-weight: var(--aj-fw-bold);
    text-decoration: none;
}

.aj-art-related__all:hover {
    text-decoration: underline;
}

.aj-art-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(var(--aj-space-5), 2vw, var(--aj-space-8));
}

/* the shared stacked card keeps one height per row */
.aj-art-related__grid > .aj-news-card {
    display: flex;
    flex-direction: column;
    block-size: 100%;
}

/* ======================================================== 8. RESPONSIVE === */

@media (max-width: 768px) {

    .aj-art-media {
        aspect-ratio: 4 / 3;
    }

    .aj-art-body {
        font-size: 1rem;
    }

    .aj-art-share {
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {

    .aj-art-head {
        text-align: start;
    }

    .aj-art-head .aj-breadcrumb,
    .aj-art-kinds,
    .aj-art-meta {
        justify-content: flex-start;
    }
}