/* =============================================================================
   Aamal Aljoud — Media centre (NEWS-P2)
   -----------------------------------------------------------------------------
   Editorial rather than a card grid: one story carries the page, the rest read
   as a light list beside it, and the archive follows in the shared stacked
   card. The news card component and its stylesheet are untouched — everything
   here is a wrapper around them.

   Scope: loaded by /news 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. SHARED === */

.aj-mc-eyebrow {
    display: block;
    margin-block-end: var(--aj-space-2);
    color: var(--aj-accent);
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-bold);
    letter-spacing: 0.08em;
}

.aj-mc-title {
    margin: 0;
    color: var(--aj-text);
    font-size: var(--aj-fs-h2);
    font-weight: var(--aj-fw-bold);
    line-height: var(--aj-lh-tight);
    letter-spacing: var(--aj-ls-tight);
}

.aj-mc-head {
    margin-block-end: var(--aj-space-8);
}

.aj-mc-head--row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--aj-space-4);
}

/*
 * The wrapper each shared card sits in. It exists so the page can place a
 * media indicator over the card without the component knowing anything about
 * it, and so the grid has something of its own to address.
 */
.aj-mc-item {
    position: relative;
    display: flex;
    min-inline-size: 0;
}

.aj-mc-item > .aj-news-card {
    inline-size: 100%;
}

.aj-mc-item[hidden] {
    display: none;
}

/*
 * The media reference an article carries. It is a label, not a control: it
 * never takes a click away from the card's own link.
 */
.aj-mc-media {
    position: absolute;
    inset-block-start: var(--aj-space-4);
    inset-inline-start: var(--aj-space-4);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 30px;
    block-size: 30px;
    border-radius: var(--aj-radius-pill);
    background: var(--aj-accent-soft);
    color: var(--aj-accent);
    pointer-events: none;
}

/* over a photograph it needs its own ground to stay legible */
.aj-mc-media--on-image {
    background: rgba(255, 255, 255, 0.94);
    color: var(--aj-charcoal);
    box-shadow: var(--aj-shadow-sm);
}

/* in a brief story the thumbnail leads the row, so the indicator sits on its
   corner rather than floating at the far side of the card */
.aj-mc-item--brief .aj-mc-media {
    inset-block-start: calc(var(--aj-space-4) + var(--aj-space-2));
    inset-inline-start: calc(var(--aj-space-4) + var(--aj-space-2));
    inline-size: 26px;
    block-size: 26px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--aj-charcoal);
    box-shadow: var(--aj-shadow-sm);
}

/* ================================================================ 2. HERO = */

.aj-mc-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(2.25rem, 1.25rem + 3.5vw, 3.75rem) clamp(1.75rem, 1rem + 3vw, 3rem);
    background: linear-gradient(180deg, var(--aj-surface-muted), var(--aj-page));
    border-block-end: 1px solid var(--aj-border);
}

.aj-mc-hero::after {
    content: "";
    position: absolute;
    inset-block-start: -10%;
    inset-inline-end: -6%;
    z-index: -1;
    inline-size: clamp(240px, 32vw, 480px);
    block-size: clamp(240px, 32vw, 480px);
    background: var(--aj-motif) center / contain no-repeat;
    opacity: 0.05;
    pointer-events: none;
}

.aj-mc-hero__copy {
    max-inline-size: 52rem;
}

.aj-mc-hero__copy .aj-breadcrumb {
    margin-block-end: var(--aj-space-4);
}

.aj-mc-hero__title {
    margin: 0;
    color: var(--aj-text);
    font-size: var(--aj-fs-h1);
    font-weight: var(--aj-fw-bold);
    line-height: var(--aj-lh-tight);
    letter-spacing: var(--aj-ls-tight);
}

.aj-mc-hero__lead {
    margin-block: var(--aj-space-4) 0;
    max-inline-size: 48ch;
    color: var(--aj-text-secondary);
    font-size: var(--aj-fs-body-lg);
    line-height: var(--aj-lh-normal);
}

/* ========================================================== 3. HIGHLIGHTS = */

.aj-mc-highlights {
    padding-block: var(--aj-section-y);
}

.aj-mc-highlights__grid {
    display: grid;
    gap: clamp(var(--aj-space-5), 2vw, var(--aj-space-8));
}

/*
 * One story, a pair, or a lead with the rest beside it. The composition
 * follows the count, so the section is right at any size the archive happens
 * to be and grows into the next arrangement on its own.
 */
.aj-mc-highlights__grid[data-count="2"],
.aj-mc-highlights__grid[data-count="3"] {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: stretch;
}

.aj-mc-highlights__side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(var(--aj-space-4), 1.5vw, var(--aj-space-6));
}

/* the lead is tall enough to carry the section without swallowing the screen */
.aj-mc-item--lead .aj-news-card--overlay {
    min-block-size: clamp(320px, 34vw, 460px);
    block-size: 100%;
}

.aj-mc-highlights__grid[data-count="1"] .aj-mc-item--lead .aj-news-card--overlay {
    min-block-size: clamp(300px, 30vw, 420px);
}

/* the brief stories hug their own copy and centre against the lead — stretched
   to its full height they would be mostly empty card */
.aj-mc-item--brief {
    flex: 0 0 auto;
}

.aj-mc-item--brief .aj-news-card--brief {
    display: flex;
    inline-size: 100%;
    padding: var(--aj-space-4);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-lg);
    background: var(--aj-surface);
    transition: border-color var(--aj-duration) var(--aj-ease),
        box-shadow var(--aj-duration) var(--aj-ease);
}

.aj-mc-item--brief .aj-news-card--brief:hover {
    border-color: var(--aj-accent-border);
    box-shadow: var(--aj-shadow-sm);
}

/* ========================================================= 4. MORE NEWS === */

.aj-mc-list {
    padding-block: var(--aj-section-y);
    background: var(--aj-surface-muted);
}

.aj-mc-search {
    display: flex;
    align-items: center;
    gap: var(--aj-space-3);
    flex: 0 1 320px;
    padding-inline: var(--aj-space-4);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-pill);
    background: var(--aj-surface);
    transition: border-color var(--aj-duration) var(--aj-ease),
        box-shadow var(--aj-duration) var(--aj-ease);
}

.aj-mc-search:focus-within {
    border-color: var(--aj-accent-border);
    box-shadow: 0 0 0 3px var(--aj-focus-ring);
}

.aj-mc-search .aj-icon {
    flex: none;
    color: var(--aj-text-muted);
}

.aj-mc-search input {
    flex: 1;
    min-inline-size: 0;
    padding-block: var(--aj-space-3);
    border: 0;
    background: none;
    color: var(--aj-text);
    font: inherit;
    font-size: var(--aj-fs-sm);
}

.aj-mc-search input:focus {
    outline: none;
}

/* ---- tag chips: nothing renders until the data holds two tags ---- */

.aj-mc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aj-space-2);
    margin-block-end: var(--aj-space-6);
}

.aj-mc-tag {
    padding: var(--aj-space-2) var(--aj-space-4);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-pill);
    background: var(--aj-surface);
    color: var(--aj-text-secondary);
    font: inherit;
    font-size: var(--aj-fs-sm);
    cursor: pointer;
    transition: var(--aj-transition);
}

.aj-mc-tag:hover {
    border-color: var(--aj-accent-border);
    color: var(--aj-text);
}

.aj-mc-tag.is-active {
    border-color: var(--aj-accent);
    background: var(--aj-accent);
    color: var(--aj-text-inverse);
}

.aj-mc-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 stacked card keeps one height per row, whatever the excerpt's length */
.aj-mc-item--stacked > .aj-news-card {
    display: flex;
    flex-direction: column;
    block-size: 100%;
}

.aj-mc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--aj-space-3);
    margin: 0;
    padding: var(--aj-space-16) var(--aj-space-4);
    color: var(--aj-text-secondary);
    text-align: center;
}

.aj-mc-empty .aj-icon {
    color: var(--aj-text-muted);
}

/* ======================================================== 5. NEWSLETTER === */

/*
 * Light rather than a heavy dark block: a tinted surface with the motif behind
 * it, so the page closes without stacking a second dark band on the footer.
 */
.aj-mc-news-letter {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
    background: var(--aj-accent-soft);
    border-block-start: 1px solid var(--aj-accent-border);
}

.aj-mc-news-letter__motif {
    position: absolute;
    inset-block-start: -30%;
    inset-inline-start: -3%;
    z-index: -1;
    inline-size: clamp(240px, 28vw, 420px);
    block-size: clamp(240px, 28vw, 420px);
    background: var(--aj-motif) center / contain no-repeat;
    opacity: 0.08;
    pointer-events: none;
}

.aj-mc-news-letter__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--aj-space-6);
}

.aj-mc-news-letter__title {
    margin: 0;
    color: var(--aj-text);
    font-size: var(--aj-fs-h2);
    font-weight: var(--aj-fw-bold);
    line-height: var(--aj-lh-tight);
}

.aj-mc-news-letter__lead {
    margin: var(--aj-space-2) 0 0;
    max-inline-size: 48ch;
    color: var(--aj-text-secondary);
    font-size: var(--aj-fs-body-lg);
}

.aj-mc-news-letter__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aj-space-3);
    flex: 1 1 420px;
    justify-content: flex-end;
}

.aj-mc-field {
    display: flex;
    align-items: center;
    gap: var(--aj-space-3);
    flex: 1 1 260px;
    min-inline-size: 0;
    padding-inline: var(--aj-space-4);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-pill);
    background: var(--aj-surface);
    transition: border-color var(--aj-duration) var(--aj-ease),
        box-shadow var(--aj-duration) var(--aj-ease);
}

.aj-mc-field:focus-within {
    border-color: var(--aj-accent);
    box-shadow: 0 0 0 3px var(--aj-focus-ring);
}

.aj-mc-field .aj-icon {
    flex: none;
    color: var(--aj-text-muted);
}

.aj-mc-field input {
    flex: 1;
    min-inline-size: 0;
    padding-block: var(--aj-space-3);
    border: 0;
    background: none;
    color: var(--aj-text);
    font: inherit;
    font-size: var(--aj-fs-sm);
}

.aj-mc-field input:focus {
    outline: none;
}

/* ======================================================== 6. RESPONSIVE === */

@media (max-width: 1024px) {

    /* the lead stops competing with the pair beside it */
    .aj-mc-highlights__grid[data-count="2"],
    .aj-mc-highlights__grid[data-count="3"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-mc-highlights__side {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    }
}

@media (max-width: 768px) {

    .aj-mc-search {
        flex: 1 1 100%;
    }

    .aj-mc-item--lead .aj-news-card--overlay {
        min-block-size: clamp(260px, 60vw, 340px);
    }
}

@media (max-width: 480px) {

    .aj-mc-news-letter__form {
        flex-direction: column;
        align-items: stretch;
    }

    /* stacked, the flex basis would be read as a height and blow the field up
       into a 260px tall pill */
    .aj-mc-field {
        flex: 0 0 auto;
    }

    .aj-mc-news-letter__form .aj-btn {
        inline-size: 100%;
        justify-content: center;
    }
}