/* =============================================================================
   Aamal Aljoud — Redesign Shared Components
   -----------------------------------------------------------------------------
   Buttons, form primitives, card foundations, section headings, breadcrumb,
   page hero and the stat strip. Page bodies are NOT redesigned here; these are
   the primitives the page phases will build on.
   ========================================================================== */

/* ============================================================ 1. BUTTONS === */

.aj-btn {
    --_bg: transparent;
    --_fg: var(--aj-text);
    --_bd: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--aj-space-2);

    padding: 0.75rem 1.375rem;
    min-height: 44px; /* comfortable touch target */

    font-family: var(--aj-font);
    font-size: var(--aj-fs-sm);
    font-weight: var(--aj-fw-medium);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;

    background-color: var(--_bg);
    color: var(--_fg);
    border: 1px solid var(--_bd);
    border-radius: var(--aj-radius-sm);
    cursor: pointer;

    transition: background-color var(--aj-duration-fast) var(--aj-ease),
        border-color var(--aj-duration-fast) var(--aj-ease),
        color var(--aj-duration-fast) var(--aj-ease),
        transform var(--aj-duration-fast) var(--aj-ease);
}

.aj-btn:hover,
.aj-btn:focus-visible {
    text-decoration: none;
}

.aj-btn:active {
    transform: translateY(1px);
}

.aj-btn:disabled,
.aj-btn[aria-disabled="true"],
.aj-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- variants --- */

.aj-btn--primary {
    --_bg: var(--aj-accent);
    --_fg: var(--aj-text-inverse);
    --_bd: var(--aj-accent);
}
.aj-btn--primary:hover,
.aj-btn--primary:focus-visible {
    --_bg: var(--aj-accent-hover);
    --_bd: var(--aj-accent-hover);
    color: var(--aj-text-inverse);
}
.aj-btn--primary:active {
    --_bg: var(--aj-accent-active);
}

.aj-btn--dark {
    --_bg: var(--aj-charcoal);
    --_fg: var(--aj-text-inverse);
    --_bd: var(--aj-charcoal);
}
.aj-btn--dark:hover,
.aj-btn--dark:focus-visible {
    --_bg: var(--aj-charcoal-soft);
    --_bd: var(--aj-charcoal-soft);
    color: var(--aj-text-inverse);
}

.aj-btn--secondary {
    --_bg: var(--aj-surface);
    --_fg: var(--aj-text);
    --_bd: var(--aj-border-strong);
}
.aj-btn--secondary:hover,
.aj-btn--secondary:focus-visible {
    --_bg: var(--aj-surface-muted);
    --_bd: var(--aj-accent-border);
    color: var(--aj-text);
}

.aj-btn--ghost {
    --_bg: transparent;
    --_fg: var(--aj-accent);
    --_bd: transparent;
    padding-inline: var(--aj-space-2);
    min-height: 36px;
}
.aj-btn--ghost:hover,
.aj-btn--ghost:focus-visible {
    --_fg: var(--aj-accent-hover);
    --_bg: var(--aj-accent-soft);
}

.aj-btn--icon {
    padding: 0;
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: var(--aj-radius-sm);
    --_fg: var(--aj-text);
    --_bd: transparent;
}
.aj-btn--icon:hover,
.aj-btn--icon:focus-visible {
    --_bg: var(--aj-surface-muted);
    --_fg: var(--aj-accent);
}

.aj-btn--sm {
    padding: 0.5rem 1rem;
    min-height: 38px;
    font-size: var(--aj-fs-caption);
}
.aj-btn--lg {
    padding: 0.9375rem 1.75rem;
    min-height: 52px;
    font-size: var(--aj-fs-body);
}
.aj-btn--block {
    width: 100%;
}

/* The reference puts a trailing arrow on most CTAs. In RTL that arrow points
   left, which is what the Lucide `arrow-left` key already gives us. */
.aj-btn .aj-icon {
    width: var(--aj-icon-sm);
    height: var(--aj-icon-sm);
}

/* ======================================================= 2. FORM PRIMITIVES */

.aj-field {
    display: block;
    margin-block-end: var(--aj-space-4);
}

.aj-label {
    display: block;
    margin-block-end: var(--aj-space-2);
    font-size: var(--aj-fs-sm);
    font-weight: var(--aj-fw-medium);
    color: var(--aj-text);
}

.aj-label__required {
    color: var(--aj-error);
    margin-inline-start: 2px;
}

.aj-input,
.aj-textarea,
.aj-select {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    min-height: 48px;

    font-family: var(--aj-font);
    font-size: var(--aj-fs-sm);
    line-height: 1.5;
    color: var(--aj-text);

    background-color: var(--aj-surface-muted);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-sm);

    transition: border-color var(--aj-duration-fast) var(--aj-ease),
        background-color var(--aj-duration-fast) var(--aj-ease),
        box-shadow var(--aj-duration-fast) var(--aj-ease);
}

.aj-textarea {
    min-height: 130px;
    resize: vertical;
    line-height: var(--aj-lh-normal);
}

.aj-input::placeholder,
.aj-textarea::placeholder {
    color: var(--aj-text-muted);
    opacity: 1;
}

.aj-input:hover,
.aj-textarea:hover,
.aj-select:hover {
    border-color: var(--aj-border-strong);
}

.aj-input:focus,
.aj-textarea:focus,
.aj-select:focus {
    outline: none;
    background-color: var(--aj-surface);
    border-color: var(--aj-accent);
    box-shadow: 0 0 0 3px var(--aj-focus-ring);
}

.aj-input:disabled,
.aj-textarea:disabled,
.aj-select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background-color: var(--aj-surface-band);
}

.aj-select {
    appearance: none;
    /* room for the chevron on the inline-end side, correct in RTL */
    padding-inline-end: 2.5rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--aj-text-muted) 50%),
        linear-gradient(135deg, var(--aj-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 1.25rem) 55%, calc(100% - 1rem) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

[dir="rtl"] .aj-select {
    background-position: 1rem 55%, calc(1rem + 5px) 55%;
}

.aj-input.is-invalid,
.aj-textarea.is-invalid,
.aj-select.is-invalid {
    border-color: var(--aj-error);
}

.aj-field__error {
    display: block;
    margin-block-start: var(--aj-space-2);
    font-size: var(--aj-fs-caption);
    color: var(--aj-error);
}

.aj-field__hint {
    display: block;
    margin-block-start: var(--aj-space-2);
    font-size: var(--aj-fs-caption);
    color: var(--aj-text-muted);
}

/* Input with a leading icon (search style from the reference) */
.aj-input-group {
    position: relative;
    display: block;
}

.aj-input-group .aj-input {
    padding-inline-start: 2.75rem;
}

.aj-input-group__icon {
    position: absolute;
    inset-inline-start: var(--aj-space-4);
    inset-block-start: 50%;
    transform: translateY(-50%);
    color: var(--aj-text-muted);
    pointer-events: none;
}

/* ================================================= 3. CARD FOUNDATIONS ==== */

.aj-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--aj-surface);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-md);
    overflow: hidden;
    transition: border-color var(--aj-duration) var(--aj-ease),
        box-shadow var(--aj-duration) var(--aj-ease),
        transform var(--aj-duration) var(--aj-ease);
}

.aj-card--interactive:hover,
.aj-card--interactive:focus-within {
    border-color: var(--aj-accent-border);
    box-shadow: var(--aj-shadow-md);
    transform: translateY(-2px);
}

.aj-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--aj-surface-muted);
}

.aj-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--aj-duration-slow) var(--aj-ease);
}

.aj-card--interactive:hover .aj-card__media img {
    transform: scale(1.03);
}

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

.aj-card__meta {
    display: flex;
    align-items: center;
    gap: var(--aj-space-2);
    font-size: var(--aj-fs-caption);
    color: var(--aj-text-muted);
}

.aj-card__title {
    font-size: var(--aj-fs-h4);
    font-weight: var(--aj-fw-bold);
    color: var(--aj-text);
    line-height: var(--aj-lh-snug);
    margin: 0;
}

.aj-card__text {
    font-size: var(--aj-fs-sm);
    color: var(--aj-text-secondary);
    margin: 0;
}

.aj-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--aj-space-3);
    padding: var(--aj-space-3) var(--aj-space-5);
    border-block-start: 1px solid var(--aj-divider);
}

/* Badge / chip used on media corners and for tags */
.aj-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-1);
    padding: 0.3125rem 0.75rem;
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-medium);
    color: var(--aj-text);
    background-color: var(--aj-surface);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-pill);
}

.aj-badge--accent {
    color: var(--aj-accent);
    background-color: var(--aj-accent-soft);
    border-color: var(--aj-accent-border);
}

.aj-card__badge {
    position: absolute;
    inset-block-start: var(--aj-space-3);
    inset-inline-start: var(--aj-space-3);
    z-index: var(--aj-z-base);
}

/* Simple responsive grid for card collections */
.aj-grid {
    display: grid;
    gap: var(--aj-space-6);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.aj-grid--2 {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
}

/* ===================================================== 4. SECTION HEADING = */

.aj-section-heading {
    display: flex;
    flex-direction: column;
    gap: var(--aj-space-3);
    margin-block-end: var(--aj-space-10);
    max-width: 62ch;
}

.aj-section-heading--center {
    align-items: center;
    text-align: center;
    margin-inline: auto;
}

.aj-section-heading__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-medium);
    color: var(--aj-accent);
    letter-spacing: 0.02em;
}

/* The short rule that sits next to the eyebrow in the reference */
.aj-section-heading__eyebrow::after {
    content: "";
    inline-size: 28px;
    block-size: 1px;
    background-color: var(--aj-accent-border);
}

.aj-section-heading--center .aj-section-heading__eyebrow::before {
    content: "";
    inline-size: 28px;
    block-size: 1px;
    background-color: var(--aj-accent-border);
}

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

.aj-section-heading__desc {
    font-size: var(--aj-fs-body);
    color: var(--aj-text-secondary);
    line-height: var(--aj-lh-normal);
    margin: 0;
}

/* ========================================================= 5. BREADCRUMB == */

.aj-breadcrumb {
    display: block;
}

.aj-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aj-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--aj-fs-caption);
}

.aj-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
    color: var(--aj-text-muted);
}

.aj-breadcrumb__link {
    color: inherit;
    text-decoration: none;
    transition: color var(--aj-duration-fast) var(--aj-ease);
}

.aj-breadcrumb__link:hover,
.aj-breadcrumb__link:focus-visible {
    color: var(--aj-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.aj-breadcrumb__item[aria-current="page"] {
    color: var(--aj-text);
    font-weight: var(--aj-fw-medium);
}

.aj-breadcrumb__sep {
    color: var(--aj-border-strong);
}

/* On an image hero the breadcrumb sits on the overlay */
.aj-breadcrumb--on-media .aj-breadcrumb__item {
    color: rgba(255, 255, 255, 0.75);
}
.aj-breadcrumb--on-media .aj-breadcrumb__item[aria-current="page"] {
    color: #fff;
}
.aj-breadcrumb--on-media .aj-breadcrumb__sep {
    color: rgba(255, 255, 255, 0.45);
}
.aj-breadcrumb--on-media .aj-breadcrumb__link:hover,
.aj-breadcrumb--on-media .aj-breadcrumb__link:focus-visible {
    color: #fff;
}

/* ========================================================== 6. PAGE HERO == */

.aj-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(220px, 16vw + 130px, 340px);
    padding-block: var(--aj-space-12) var(--aj-space-10);
    background-color: var(--aj-surface-muted);
    overflow: hidden;
    isolation: isolate;
}

.aj-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

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

.aj-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to left,
        rgba(32, 36, 43, 0.78) 0%,
        rgba(32, 36, 43, 0.55) 45%,
        rgba(32, 36, 43, 0.2) 100%
    );
}

[dir="ltr"] .aj-hero__overlay {
    background: linear-gradient(
        to right,
        rgba(32, 36, 43, 0.78) 0%,
        rgba(32, 36, 43, 0.55) 45%,
        rgba(32, 36, 43, 0.2) 100%
    );
}

.aj-hero__inner {
    display: flex;
    flex-direction: column;
    gap: var(--aj-space-3);
    width: 100%;
}

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

.aj-hero__subtitle {
    font-size: var(--aj-fs-body-lg);
    line-height: var(--aj-lh-snug);
    margin: 0;
    max-width: 58ch;
}

/* on-media variant (default when a background image is supplied) */
.aj-hero--media .aj-hero__title {
    color: #fff;
}
.aj-hero--media .aj-hero__subtitle {
    color: rgba(255, 255, 255, 0.86);
}

/* plain variant, no image */
.aj-hero--plain {
    background-color: var(--aj-surface-muted);
    border-block-end: 1px solid var(--aj-border);
    align-items: center;
    min-height: auto;
    padding-block: var(--aj-space-12);
}
.aj-hero--plain .aj-hero__title {
    color: var(--aj-text);
}
.aj-hero--plain .aj-hero__subtitle {
    color: var(--aj-text-secondary);
}

.aj-hero__breadcrumb {
    margin-block-start: var(--aj-space-2);
}

/* ========================================================= 7. STAT PANEL == */

/*
 * A premium stats panel rather than a rigid strip: no hard outline, a soft
 * plate, dividers that fade out at both ends, and cells sized to their own
 * figure so a seven digit number is not squeezed into a quarter.
 */
.aj-stats {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--aj-surface);
    border-radius: var(--aj-radius-xl);
    box-shadow:
        0 0 0 1px var(--aj-divider),
        var(--aj-shadow-md);
    overflow: hidden;
}

/* Reading order in a cell: icon on the reading edge, copy beside it, and the
   pair centred in whatever width the cell ends up with. */
.aj-stat {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(var(--aj-space-3), 1vw, var(--aj-space-5));
    padding: clamp(var(--aj-space-8), 2.4vw, var(--aj-space-10)) var(--aj-space-6);
    flex: 1 1 auto;
    min-inline-size: 200px;
}

/* dividers drawn on the cell's leading edge, fading out top and bottom */
.aj-stat + .aj-stat::before {
    content: "";
    position: absolute;
    inset-block: var(--aj-space-5);
    inset-inline-start: 0;
    inline-size: 1px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--aj-divider) 24%,
        var(--aj-divider) 76%,
        transparent 100%
    );
}

.aj-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 58px;
    block-size: 58px;
    flex: 0 0 auto;
    color: var(--aj-accent);
    background-color: var(--aj-accent-soft);
    border-radius: var(--aj-radius-lg);
}

/* the copy stacks: label above, figure below */
.aj-stat__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--aj-space-1);
    min-width: 0;
}

.aj-stat__label {
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-medium);
    letter-spacing: 0.02em;
    color: var(--aj-text-muted);
}

.aj-stat__value {
    display: flex;
    align-items: baseline;
    gap: 0;
    line-height: 1.05;
    white-space: nowrap;
}

/* The mark sits on the reading edge of the figure and carries the icon colour,
   so "more than" is read before the number itself. */
.aj-stat__plus {
    font-size: clamp(1.25rem, 0.95rem + 0.85vw, 1.75rem);
    font-weight: var(--aj-fw-bold);
    color: var(--aj-accent);
    margin-inline-end: 3px;
}

.aj-stat__number {
    font-size: clamp(1.625rem, 1.2rem + 1.1vw, 2.25rem);
    font-weight: var(--aj-fw-bold);
    color: var(--aj-text);
    /* isolated so the grouped digits keep their own latin run */
    direction: ltr;
    unicode-bidi: isolate;
    /* the animated digits must not reflow the row as they grow */
    font-variant-numeric: tabular-nums;
}

.aj-stat__unit {
    margin-inline-start: var(--aj-space-2);
    font-size: var(--aj-fs-sm);
    font-weight: var(--aj-fw-regular);
    color: var(--aj-text-secondary);
    white-space: nowrap;
}

/* Two up: the cell that starts a row draws a rule above it instead of one
   against the plate edge. */
@media (max-width: 1024px) {
    .aj-stat {
        padding: var(--aj-space-6) var(--aj-space-5);
        min-inline-size: 46%;
    }
    .aj-stat:nth-child(odd)::before {
        display: none;
    }
    .aj-stat:nth-child(n + 3)::after {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline: var(--aj-space-5);
        block-size: 1px;
        background: linear-gradient(
            to left,
            transparent 0%,
            var(--aj-divider) 18%,
            var(--aj-divider) 82%,
            transparent 100%
        );
    }
}

/* Once the cells wrap to one per row, every join is a horizontal rule. */
@media (max-width: 720px) {
    .aj-stat {
        min-inline-size: 100%;
        justify-content: flex-start;
    }
    .aj-stat:nth-child(n + 3)::after {
        display: none;
    }
    .aj-stat + .aj-stat::before {
        display: block;
        inset-block: 0 auto;
        inset-inline: var(--aj-space-5);
        inline-size: auto;
        block-size: 1px;
        background: linear-gradient(
            to left,
            transparent 0%,
            var(--aj-divider) 18%,
            var(--aj-divider) 82%,
            transparent 100%
        );
    }
}

/* ========================================================= 8. NEWS CARD === */

/*
 * Two weights, deliberately unlike each other:
 *   --overlay  the lead story, carried by its picture with a light wash across
 *              the lower edge only
 *   --brief    a secondary story, a small thumbnail with the copy beside it on
 *              the page ground — no card, no wash
 */

/* ---- shared ---- */

.aj-news-card__date,
.aj-news-card__cta {
    align-self: flex-start;
}

.aj-news-card__date {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
    font-size: var(--aj-fs-caption);
    letter-spacing: 0.02em;
}

.aj-news-card__title {
    margin: 0;
    font-weight: var(--aj-fw-bold);
    line-height: var(--aj-lh-snug);
    /* the full headline stays in the DOM; only its display is capped */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* one line only; the stored copy is untouched */
.aj-news-card__excerpt {
    font-size: var(--aj-fs-caption);
    line-height: var(--aj-lh-snug);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.aj-news-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-medium);
}

.aj-news-card__cta .aj-icon {
    transition: transform var(--aj-duration) var(--aj-ease);
}

.aj-news-card:hover .aj-news-card__cta .aj-icon,
.aj-news-card a:focus-visible .aj-news-card__cta .aj-icon {
    transform: translateX(-4px);
}

[dir="ltr"] .aj-news-card:hover .aj-news-card__cta .aj-icon {
    transform: translateX(4px);
}

/* ---- lead: overlay ---- */

.aj-news-card--overlay {
    position: relative;
    border-radius: var(--aj-radius-lg);
    overflow: hidden;
    background-color: var(--aj-surface-band);
}

.aj-news-card__link {
    position: relative;
    display: block;
    block-size: 100%;
    min-block-size: 340px;
    aspect-ratio: 16 / 10;
    text-decoration: none;
    isolation: isolate;
}

.aj-news-card__img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    /* the copy runs along the bottom edge, so the crop leans upward and keeps
       the subject of the photograph clear of it */
    object-position: 50% 28%;
    z-index: -2;
    transition: transform 600ms var(--aj-ease);
}

/*
 * Only a whisper of shade along the base, enough to seat the caption plate on
 * a bright picture. The photograph itself is never dimmed.
 */
.aj-news-card__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to top,
        rgba(16, 19, 24, 0.28) 0%,
        rgba(16, 19, 24, 0.1) 22%,
        rgba(16, 19, 24, 0) 44%
    );
}

.aj-news-card--overlay:hover .aj-news-card__img,
.aj-news-card__link:focus-visible .aj-news-card__img {
    transform: scale(1.03);
}

/*
 * The copy sits on its own light plate rather than on the picture. Several of
 * these images are posters carrying their own headline, and no wash light
 * enough to leave the photograph alone can also silence that; frosted glass
 * does both, and keeps the block light instead of dark.
 */
.aj-news-card__body {
    position: absolute;
    inset-block-end: clamp(var(--aj-space-3), 1.2vw, var(--aj-space-5));
    inset-inline: clamp(var(--aj-space-3), 1.2vw, var(--aj-space-5));
    display: flex;
    flex-direction: column;
    /* stretch, not flex-start: a shrink-to-fit clamped box overruns its plate */
    align-items: stretch;
    gap: var(--aj-space-2);
    padding: clamp(var(--aj-space-5), 1.8vw, var(--aj-space-6));
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border-radius: var(--aj-radius-md);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .aj-news-card__body {
        background-color: rgba(255, 255, 255, 0.97);
    }
}

.aj-news-card--overlay .aj-news-card__date {
    color: var(--aj-text-muted);
}

.aj-news-card--overlay .aj-news-card__title {
    font-size: clamp(1.1875rem, 0.95rem + 0.9vw, 1.625rem);
    color: var(--aj-text);
}

.aj-news-card--overlay .aj-news-card__excerpt {
    color: var(--aj-text-secondary);
}

.aj-news-card--overlay .aj-news-card__cta {
    margin-block-start: var(--aj-space-1);
    color: var(--aj-accent-active);
}

/* ---- secondary: brief ---- */

.aj-news-card--brief {
    display: flex;
}

.aj-news-card__row {
    display: grid;
    grid-template-columns: clamp(96px, 10vw, 132px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(var(--aj-space-3), 1.1vw, var(--aj-space-5));
    inline-size: 100%;
    text-decoration: none;
}

.aj-news-card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--aj-radius-md);
    background-color: var(--aj-surface-band);
}

.aj-news-card__thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms var(--aj-ease);
}

.aj-news-card--brief:hover .aj-news-card__thumb img,
.aj-news-card__row:focus-visible .aj-news-card__thumb img {
    transform: scale(1.04);
}

.aj-news-card__brief {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
}

.aj-news-card--brief .aj-news-card__date {
    color: var(--aj-text-muted);
}

.aj-news-card--brief .aj-news-card__title {
    font-size: var(--aj-fs-body);
    color: var(--aj-text);
    transition: color var(--aj-duration) var(--aj-ease);
}

.aj-news-card--brief:hover .aj-news-card__title {
    color: var(--aj-accent-active);
}

.aj-news-card--brief .aj-news-card__excerpt {
    color: var(--aj-text-secondary);
}

.aj-news-card--brief .aj-news-card__cta {
    color: var(--aj-accent-active);
}

/* The blurb is served in full but never drawn in the column: three compact
   rows have no room for it, and the headline is what is being scanned. */
.aj-news-card--brief .aj-news-card__excerpt {
    display: none;
}

@media (max-width: 480px) {
    .aj-news-card__row {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: var(--aj-space-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .aj-news-card__img,
    .aj-news-card__thumb img,
    .aj-news-card__cta .aj-icon {
        transition: none;
    }
}

/* ---- stacked variant — light card for the media centre (D9) ---- */

.aj-news-card--stacked .aj-card__title a {
    color: inherit;
    text-decoration: none;
}

.aj-news-card--stacked .aj-card__text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =============================================== 9. AUCTION GATEWAY CARD == */

/*
 * An investment gateway, not a service tile: a wide plate whose left half is a
 * light architectural panel carrying the platform mark, with the copy and a
 * deliberate call to action on the reading edge.
 */
.aj-auction-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    background-color: var(--aj-surface);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-lg);
    transition: border-color var(--aj-duration) var(--aj-ease),
        box-shadow var(--aj-duration) var(--aj-ease);
}

.aj-auction-card:hover {
    border-color: var(--aj-border-strong);
    box-shadow: var(--aj-shadow-md);
}

/*
 * Photographic panel: the platform's own picture, calmed by a white wash, with
 * the mark sitting straight on it — no plate, no border, no inner card.
 */
.aj-auction-card__visual {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 244px;
    padding: var(--aj-space-8);
    background-color: var(--aj-surface-muted);
    background-image: var(--aj-auction-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* The wash that lifts the photograph and keeps the panel light, with a soft
   bloom under the mark so it reads clearly without sitting in a box. */
.aj-auction-card__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            closest-side at 50% 50%,
            rgba(255, 255, 255, 0.6) 0%,
            rgba(255, 255, 255, 0.28) 62%,
            rgba(255, 255, 255, 0) 100%
        ),
        rgba(255, 255, 255, 0.74);
    pointer-events: none;
}

/* the busier of the two pictures needs a little more of it */
.aj-auction-card--alt .aj-auction-card__visual::after {
    background:
        radial-gradient(
            closest-side at 50% 50%,
            rgba(255, 255, 255, 0.68) 0%,
            rgba(255, 255, 255, 0.3) 62%,
            rgba(255, 255, 255, 0) 100%
        ),
        rgba(255, 255, 255, 0.8);
}

/* the mark reserves its own box so a lazily loaded file cannot shift the card */
.aj-auction-card__logo {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: min(240px, 74%);
    block-size: clamp(104px, 10vw, 140px);
}

.aj-auction-card__logo img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
}

/*
 * White artwork is painted through a mask instead of being tinted with a
 * filter: the outline and its proportions come from the file untouched.
 * Without mask support nothing is drawn, which is quieter than a solid block.
 */
.aj-auction-card__logo--painted {
    display: none;
}

@supports (mask-image: url("#m")) or (-webkit-mask-image: url("#m")) {
    .aj-auction-card__logo--painted {
        display: block;
        background-color: var(--aj-auction-logo-tint, var(--aj-charcoal));
        -webkit-mask-image: var(--aj-auction-logo);
        mask-image: var(--aj-auction-logo);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }
}

.aj-auction-card__body {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--aj-space-3);
    padding: clamp(var(--aj-space-8), 3vw, var(--aj-space-10));
}

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

.aj-auction-card__text {
    font-size: var(--aj-fs-body);
    line-height: var(--aj-lh-snug);
    color: var(--aj-text-secondary);
    margin: 0;
}

/* the auction counts stay secondary information, never a competing badge */
.aj-auction-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aj-space-2) var(--aj-space-5);
    margin: 0;
    padding-block-start: var(--aj-space-3);
    font-size: var(--aj-fs-caption);
    color: var(--aj-text-muted);
}

.aj-auction-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
}

.aj-auction-card__meta .aj-icon {
    color: var(--aj-accent);
}

.aj-auction-card__footer {
    margin-block-start: var(--aj-space-4);
}

@media (max-width: 860px) {
    .aj-auction-card {
        grid-template-columns: 1fr;
    }
    /* stacked, the card stays image led */
    .aj-auction-card__visual {
        grid-column: 1;
        grid-row: 1;
        min-block-size: 178px;
        padding: var(--aj-space-6);
    }
    .aj-auction-card__body {
        grid-column: 1;
        grid-row: 2;
        padding: var(--aj-space-6) var(--aj-space-6) var(--aj-space-8);
    }
    .aj-auction-card__logo {
        block-size: 96px;
    }
    .aj-auction-card__footer .aj-btn {
        inline-size: 100%;
        justify-content: center;
    }
}

/* ================================================== TURNING LOGO ===== */

/*
 * The Narjis lockup as two layers — the rosette turning, the words still —
 * set over the square the original file draws. Each layer sits where its own
 * viewBox places it inside that square (112.5 units a side), so the lockup is
 * the size and in the place the single picture was.
 *
 * The rosette's eight fold symmetry makes a slow full turn read as a drift:
 * one a minute, as on the home page card.
 *
 * Without CSS masks the whole picture is shown, still, and the layers are
 * never drawn. The ink is --aj-logo-ink, set by the section the logo is in.
 */
.aj-turning-logo {
    position: relative;
    display: block;
    aspect-ratio: 1;
}

.aj-turning-logo .aj-turning-logo__whole {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.aj-turning-logo__orn,
.aj-turning-logo__word {
    display: none;
}

@keyframes aj-turning-logo {
    to {
        transform: rotate(360deg);
    }
}

@supports (mask-image: url("#m")) or (-webkit-mask-image: url("#m")) {
    .aj-turning-logo .aj-turning-logo__whole {
        display: none;
    }

    .aj-turning-logo__orn,
    .aj-turning-logo__word {
        display: block;
        position: absolute;
        background-color: var(--aj-logo-ink, #fff);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }

    /* viewBox 67.20 31.00 44.05 45.55 */
    .aj-turning-logo__orn {
        left: 59.736%;
        top: 27.559%;
        width: 39.156%;
        height: 40.486%;
        -webkit-mask-image: url("../../images/redesign/narjis-ornament.svg");
        mask-image: url("../../images/redesign/narjis-ornament.svg");
        animation: aj-turning-logo 60s linear infinite;
    }

    /* viewBox 0 40.97 69.47 37.34 */
    .aj-turning-logo__word {
        left: 0;
        top: 36.420%;
        width: 61.75%;
        height: 33.188%;
        -webkit-mask-image: url("../../images/redesign/narjis-wordmark.svg");
        mask-image: url("../../images/redesign/narjis-wordmark.svg");
    }
}

/* after the block above, so it wins: @supports adds no specificity */
@media (prefers-reduced-motion: reduce) {
    .aj-turning-logo__orn {
        animation: none;
    }
}