/* =============================================================================
   Aamal Aljoud — Projects listing (P2)
   -----------------------------------------------------------------------------
   The same tokens, rhythm and quiet elevation as the homepage and the project
   detail page. The page is image led: a project is recognised by its picture
   first, and every text line under it is one the project actually has.

   Scope: loaded by /all-project 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-pl-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-pl-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);
}

/* section head: heading on one side, its meta on the other */
.aj-pl-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--aj-space-4);
    margin-block-end: var(--aj-space-8);
}

.aj-pl-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    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-size: var(--aj-fs-sm);
}

.aj-pl-count [data-aj-shown] {
    color: var(--aj-text);
    font-weight: var(--aj-fw-bold);
}

/* place line, shared by the feature and the card */
.aj-pl-place {
    display: flex;
    align-items: center;
    gap: var(--aj-space-2);
    margin: 0;
    color: var(--aj-text-muted);
    font-size: var(--aj-fs-sm);
}

.aj-pl-place .aj-icon {
    flex: none;
    color: var(--aj-accent);
}

/* the read-more affordance; the whole card is the link surface */
.aj-pl-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
    margin-block-start: auto;
    padding-block-start: var(--aj-space-2);
    color: var(--aj-accent);
    font-size: var(--aj-fs-sm);
    font-weight: var(--aj-fw-bold);
}

.aj-pl-cta .aj-icon {
    transition: transform var(--aj-duration) var(--aj-ease);
}

/* the badge sitting on a picture */
.aj-pl-tag {
    position: absolute;
    inset-block-start: var(--aj-space-4);
    inset-inline-start: var(--aj-space-4);
    z-index: 2;
    padding: 0.35em 0.9em;
    border-radius: var(--aj-radius-pill);
    background: rgba(255, 255, 255, 0.94);
    color: var(--aj-charcoal);
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-bold);
    box-shadow: var(--aj-shadow-sm);
    backdrop-filter: blur(4px);
}

/*
 * A project with no photograph anywhere in its collections. Rather than a stock
 * building, it gets the house motif on a branded surface and carries its own
 * name — honest about having no picture, and still recognisable.
 */
.aj-pl-blank {
    position: absolute;
    inset: 0;
    background:
        var(--aj-motif) center / clamp(120px, 30%, 200px) no-repeat,
        linear-gradient(140deg, var(--aj-accent-soft), var(--aj-surface-band));
    opacity: 0.9;
}

.aj-pl-blank__name {
    position: absolute;
    inset-inline: var(--aj-space-5);
    inset-block-end: var(--aj-space-5);
    z-index: 1;
    color: var(--aj-charcoal);
    font-size: var(--aj-fs-h4);
    font-weight: var(--aj-fw-bold);
}

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

.aj-pl-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-pl-hero__motif {
    position: absolute;
    inset-block-start: -8%;
    inset-inline-end: -6%;
    z-index: -1;
    inline-size: clamp(260px, 34vw, 520px);
    block-size: clamp(260px, 34vw, 520px);
    background: var(--aj-motif) center / contain no-repeat;
    opacity: 0.05;
    pointer-events: none;
}

.aj-pl-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    /* close enough that the picture and the words read as one opening */
    gap: clamp(var(--aj-space-6), 2.5vw, var(--aj-space-10));
}

/* without a photograph the copy simply centres in one reading column */
.aj-pl-hero--plain .aj-pl-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    max-inline-size: var(--aj-container-narrow);
    text-align: center;
}

.aj-pl-hero--plain .aj-pl-hero__copy .aj-breadcrumb {
    justify-content: center;
}

.aj-pl-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-pl-hero__lead {
    margin-block: var(--aj-space-4) var(--aj-space-6);
    max-inline-size: 46ch;
    color: var(--aj-text-secondary);
    font-size: var(--aj-fs-body-lg);
    line-height: var(--aj-lh-normal);
}

.aj-pl-hero--plain .aj-pl-hero__lead {
    margin-inline: auto;
}

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

/*
 * The picture sits on a tinted plate that runs under it and out towards the
 * copy, so it reads as part of the opening rather than a card dropped beside
 * it. The plate is drawn behind, never over the photograph.
 */
.aj-pl-hero__media {
    position: relative;
    margin: 0;
    overflow: visible;
    isolation: isolate;
    aspect-ratio: 16 / 10;
}

.aj-pl-hero__media::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block: clamp(var(--aj-space-4), 2vw, var(--aj-space-8));
    inset-inline-start: calc(-1 * clamp(var(--aj-space-6), 3vw, var(--aj-space-12)));
    inset-inline-end: clamp(var(--aj-space-6), 3vw, var(--aj-space-12));
    border-radius: var(--aj-radius-xl);
    background: var(--aj-accent-soft);
}

.aj-pl-hero__media img {
    border-radius: var(--aj-radius-xl);
    box-shadow: var(--aj-shadow-md);
}

.aj-pl-hero__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================================== 3. SPOTLIGHT = */

.aj-pl-spotlight {
    padding-block: calc(var(--aj-section-y) * 0.9);
}

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

/*
 * The composition follows the count, so the section is right at every size the
 * catalogue happens to be — and grows into the next arrangement on its own as
 * projects are added, with no rebuild.
 *
 *   1  one wide feature, picture beside the copy
 *   2  a balanced pair
 *   3+ a lead with the rest stacked beside it
 */
.aj-pl-spotlight__grid[data-count="1"] .aj-pl-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: stretch;
}

.aj-pl-spotlight__grid[data-count="1"] .aj-pl-feature__media {
    block-size: 100%;
    min-block-size: clamp(280px, 30vw, 420px);
    aspect-ratio: auto;
}

.aj-pl-spotlight__grid[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.aj-pl-spotlight__grid[data-count="3"] {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-auto-rows: 1fr;
}

.aj-pl-spotlight__grid[data-count="3"] .aj-pl-feature--lead {
    grid-row: span 2;
}

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

.aj-pl-feature__media {
    position: relative;
    overflow: hidden;
    background: var(--aj-surface-muted);
    aspect-ratio: 16 / 10;
}

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

.aj-pl-feature__body {
    display: flex;
    flex-direction: column;
    gap: var(--aj-space-3);
    flex: 1;
    padding: clamp(var(--aj-space-5), 2vw, var(--aj-space-8));
}

.aj-pl-feature__name {
    margin: 0;
    font-size: var(--aj-fs-h3);
    font-weight: var(--aj-fw-bold);
    line-height: var(--aj-lh-snug);
}

.aj-pl-feature__name a {
    color: var(--aj-text);
    text-decoration: none;
}

/* the anchor is stretched over the whole card, so the entire surface is the
   link while the accessible name stays the project's own */
.aj-pl-feature__name a::after,
.aj-pl-card__name a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
}

.aj-pl-feature__text,
.aj-pl-card__text {
    margin: 0;
    color: var(--aj-text-secondary);
    font-size: var(--aj-fs-sm);
    line-height: var(--aj-lh-normal);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* ============================================================ 4. FILTERS = */

.aj-pl-all {
    padding-block: var(--aj-section-y) calc(var(--aj-section-y) * 0.85);
    background: var(--aj-surface-muted);
    scroll-margin-block-start: calc(var(--aj-header-h) + var(--aj-space-4));
}

/*
 * Compact on purpose: with a search and two selects the bar is a thin line of
 * controls, not a panel. It grows only if the data ever earns more filters.
 */
.aj-pl-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aj-space-2);
    margin-block-end: var(--aj-space-6);
    padding: var(--aj-space-2);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-lg);
    background: var(--aj-surface);
    box-shadow: var(--aj-shadow-xs);
}

.aj-pl-filters__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--aj-space-3);
    flex: 1 1 240px;
    padding-inline: var(--aj-space-4);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-pill);
    background: var(--aj-page);
    transition: border-color var(--aj-duration) var(--aj-ease),
        box-shadow var(--aj-duration) var(--aj-ease);
}

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

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

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

.aj-pl-filters__search input:focus {
    outline: none;
}

/* the toggle only matters on narrow frames; wide ones show the fields */
.aj-pl-filters__toggle {
    display: none;
    align-items: center;
    gap: var(--aj-space-2);
    padding: var(--aj-space-2) var(--aj-space-5);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-pill);
    background: var(--aj-surface);
    color: var(--aj-text);
    font: inherit;
    font-size: var(--aj-fs-sm);
    font-weight: var(--aj-fw-medium);
    cursor: pointer;
}

.aj-pl-filters__fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aj-space-2);
}

.aj-pl-field {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
    padding-inline: var(--aj-space-4);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-pill);
    background: var(--aj-page);
}

.aj-pl-field__label {
    color: var(--aj-text-muted);
    font-size: var(--aj-fs-caption);
    white-space: nowrap;
}

.aj-pl-field select {
    padding-block: var(--aj-space-2);
    padding-inline-end: var(--aj-space-1);
    border: 0;
    background: none;
    color: var(--aj-text);
    font: inherit;
    font-size: var(--aj-fs-sm);
    font-weight: var(--aj-fw-medium);
    cursor: pointer;
}

.aj-pl-field select:focus-visible {
    outline: 2px solid var(--aj-accent);
    outline-offset: 2px;
    border-radius: var(--aj-radius-sm);
}

.aj-pl-reset {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
    padding: var(--aj-space-2) var(--aj-space-4);
    border: 0;
    border-radius: var(--aj-radius-pill);
    background: none;
    color: var(--aj-accent);
    font: inherit;
    font-size: var(--aj-fs-sm);
    font-weight: var(--aj-fw-bold);
    cursor: pointer;
}

.aj-pl-reset:hover {
    background: var(--aj-accent-soft);
}

/* shown only when a search or a filter empties the grid */
.aj-pl-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-pl-empty .aj-icon {
    color: var(--aj-text-muted);
}

/* ============================================================== 5. GRID === */

/*
 * Auto fit rather than a fixed column count: two projects sit as two, a dozen
 * fill the row, and nothing has to change here when the catalogue grows.
 */
.aj-pl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(var(--aj-space-5), 2vw, var(--aj-space-8));
}

/*
 * The list carrying the page on its own, below three projects. The same card,
 * given the room the spotlight would have taken: wider tracks, a taller
 * picture and a heading that can hold the top of the page.
 */
.aj-pl-grid--lead {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: clamp(var(--aj-space-6), 2.5vw, var(--aj-space-10));
}

.aj-pl-grid--lead .aj-pl-card__media {
    aspect-ratio: 16 / 10;
}

.aj-pl-grid--lead .aj-pl-card__body {
    gap: var(--aj-space-4);
    padding: clamp(var(--aj-space-6), 2vw, var(--aj-space-8));
}

.aj-pl-grid--lead .aj-pl-card__name {
    font-size: var(--aj-fs-h3);
}

.aj-pl-grid--lead .aj-pl-card__text {
    font-size: var(--aj-fs-body);
}

.aj-pl-grid--lead .aj-pl-blank__name {
    font-size: var(--aj-fs-h3);
}

.aj-pl-title--lead {
    font-size: var(--aj-fs-h1);
}

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

.aj-pl-card[hidden] {
    display: none;
}

.aj-pl-card__media {
    position: relative;
    overflow: hidden;
    background: var(--aj-surface-muted);
    aspect-ratio: 4 / 3;
}

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

.aj-pl-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--aj-space-3);
    flex: 1;
    padding: var(--aj-space-6);
}

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

.aj-pl-card__name a {
    color: var(--aj-text);
    text-decoration: none;
}

/* ---- one hover language for both card kinds ---- */

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

.aj-pl-card:hover .aj-pl-card__media img,
.aj-pl-feature:hover .aj-pl-feature__media img {
    transform: scale(1.05);
}

.aj-pl-card:hover .aj-pl-cta .aj-icon,
.aj-pl-feature:hover .aj-pl-cta .aj-icon {
    transform: translateX(-4px);
}

.aj-pl-card:focus-within,
.aj-pl-feature:focus-within {
    outline: 2px solid var(--aj-accent);
    outline-offset: 2px;
}

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

    .aj-pl-card,
    .aj-pl-feature,
    .aj-pl-card__media img,
    .aj-pl-feature__media img,
    .aj-pl-cta .aj-icon {
        transition: none;
    }

    .aj-pl-card:hover,
    .aj-pl-feature:hover,
    .aj-pl-card:hover .aj-pl-card__media img,
    .aj-pl-feature:hover .aj-pl-feature__media img,
    .aj-pl-card:hover .aj-pl-cta .aj-icon,
    .aj-pl-feature:hover .aj-pl-cta .aj-icon {
        transform: none;
    }
}

/* =============================================================== 6. MAP === */

.aj-pl-reach {
    padding-block: calc(var(--aj-section-y) * 0.8);
}

/* the places hold their own half of the section rather than trailing the map */
.aj-pl-reach__grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.9fr);
    align-items: stretch;
    gap: clamp(var(--aj-space-4), 1.5vw, var(--aj-space-6));
}

/* a short list beside a tall map: centred, the two halves stay in balance */
.aj-pl-places {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--aj-space-3);
}

/* the old grey name buttons are gone: each place is a card that says how many
   projects are there and flies the map to it */
.aj-pl-place-card {
    display: flex;
    align-items: center;
    gap: var(--aj-space-4);
    padding: var(--aj-space-5);
    border: 1px solid var(--aj-border);
    border-inline-start: 3px solid var(--aj-accent-border);
    border-radius: var(--aj-radius-lg);
    background: var(--aj-surface);
    box-shadow: var(--aj-shadow-xs);
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: var(--aj-transition);
}

.aj-pl-place-card:hover {
    border-color: var(--aj-accent-border);
    border-inline-start-color: var(--aj-accent);
    background: var(--aj-accent-soft);
    box-shadow: var(--aj-shadow-sm);
}

.aj-pl-place-card.is-active {
    border-color: var(--aj-accent);
    border-inline-start-color: var(--aj-accent);
    background: var(--aj-accent-soft);
    box-shadow: var(--aj-shadow-sm);
}

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

.aj-pl-place-card.is-active .aj-pl-place-card__icon {
    background: var(--aj-accent);
    color: var(--aj-text-inverse);
}

.aj-pl-place-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    flex: 1;
    min-inline-size: 0;
}

.aj-pl-place-card__body b {
    color: var(--aj-text);
    font-size: var(--aj-fs-body-lg);
    font-weight: var(--aj-fw-bold);
}

.aj-pl-place-card__body small {
    color: var(--aj-text-muted);
    font-size: var(--aj-fs-caption);
}

.aj-pl-place-card__count {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: none;
    min-inline-size: 64px;
    padding: var(--aj-space-2) var(--aj-space-3);
    border-radius: var(--aj-radius-md);
    background: var(--aj-surface-muted);
    color: var(--aj-accent);
    font-size: var(--aj-fs-h3);
    font-weight: var(--aj-fw-bold);
    line-height: 1.1;
}

.aj-pl-place-card__count small {
    color: var(--aj-text-muted);
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-regular);
}

.aj-pl-map {
    position: relative;
    overflow: hidden;
    min-block-size: clamp(320px, 38vw, 460px);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-lg);
    background: var(--aj-surface-muted);
    box-shadow: var(--aj-shadow-sm);
}

/*
 * Mapbox stamps .mapboxgl-map on its container with position: relative, and its
 * stylesheet is appended at runtime — after this one. The extra parent in the
 * selector is what keeps the canvas filling the panel rather than collapsing.
 */
.aj-pl-map .aj-pl-map__canvas {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
}

.aj-pl-map__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--aj-space-2);
    padding: var(--aj-space-6);
    background:
        var(--aj-motif) center / clamp(140px, 26%, 220px) no-repeat,
        linear-gradient(140deg, var(--aj-accent-soft), var(--aj-surface-band));
    text-align: center;
    transition: opacity var(--aj-duration-slow) var(--aj-ease);
}

.aj-pl-map__placeholder p {
    margin: 0;
    color: var(--aj-text);
    font-size: var(--aj-fs-h4);
    font-weight: var(--aj-fw-bold);
}

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

/* the map has painted: the panel fades out and stops taking clicks */
.aj-pl-map.is-ready .aj-pl-map__placeholder {
    opacity: 0;
    pointer-events: none;
}

/* ---- the map's own chrome, as the contact page has it ---- */

/* the controls, kept small and out of the way */
.aj-pl-map .mapboxgl-ctrl-group {
    border-radius: var(--aj-radius-md);
    box-shadow: var(--aj-shadow-xs);
}

/*
 * Mapbox's logo and attribution stay — the licence requires them and they are
 * never hidden or altered. They only get the quiet bottom corner, with the
 * attribution as the compact ⓘ beside the mark.
 */
.aj-pl-map .mapboxgl-ctrl-bottom-left,
.aj-pl-map .mapboxgl-ctrl-bottom-right {
    font-size: 10px;
}

.aj-pl-map .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,
.aj-pl-map .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl {
    margin: 0 6px 6px;
}

/* the copyright reads left to right whatever the page direction */
.aj-pl-map .mapboxgl-ctrl-attrib {
    direction: ltr;
    background: rgba(255, 255, 255, 0.88);
    border-radius: var(--aj-radius-pill);
    color: var(--aj-text-secondary);
}

.aj-pl-map .mapboxgl-ctrl-attrib a {
    color: var(--aj-text-secondary);
}

.aj-pl-map .mapboxgl-ctrl-attrib.mapboxgl-compact-show {
    padding-inline-end: 26px;
}

.aj-pl-map .mapboxgl-ctrl-attrib-button {
    background-color: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    box-shadow: var(--aj-shadow-xs);
}

/*
 * The contact page's pin: a dark round body, a point under it, and the
 * company mark on a light disc. On this map each pin is a button that opens
 * its project, so it also answers hover and keyboard focus.
 */
.aj-pl-marker {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* black: on this map the ring is a fine line, and the logo does the talking */
    background: #000;
    box-shadow: 0 4px 12px rgba(32, 36, 43, 0.3);
    cursor: pointer;
    transition: transform var(--aj-duration) var(--aj-ease);
}

/* the point: drawn under the body, centred on the anchor */
.aj-pl-marker::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    inline-size: 0;
    block-size: 0;
    margin-block-start: -6px;
    margin-inline-start: -7px;
    border-inline: 7px solid transparent;
    border-block-start: 12px solid #000;
    filter: drop-shadow(0 2px 2px rgba(32, 36, 43, 0.18));
}

/* the light disc the mark sits on — all but 1px of the body, so the ring
   around it is a single hairline */
.aj-pl-marker__mark {
    position: relative;
    z-index: 1;
    display: block;
    inline-size: 42px;
    block-size: 42px;
    border-radius: 50%;
    background-color: var(--aj-surface);
    overflow: hidden;
}

/* the project's own logo, as large as the disc allows: its colours, its
   proportions, and only a hair of room at the edge */
.aj-pl-marker__mark--logo {
    background-image: var(--aj-marker-logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-origin: content-box;
    padding: 2px;
    box-sizing: border-box;
}

/* the company mark, masked out of the disc, for a project with no logo;
   without mask support the disc stays plain */
@supports (mask-image: url("#m")) or (-webkit-mask-image: url("#m")) {
    .aj-pl-marker__mark:not(.aj-pl-marker__mark--logo)::before {
        content: "";
        position: absolute;
        inset: 4px;
        background-color: var(--aj-charcoal);
        -webkit-mask-image: var(--aj-marker-art);
        mask-image: var(--aj-marker-art);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }
}

.aj-pl-marker:hover {
    transform: translateY(-2px);
}

.aj-pl-marker:focus-visible {
    outline: 2px solid var(--aj-accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .aj-pl-marker {
        transition: none;
    }

    .aj-pl-marker:hover {
        transform: none;
    }
}

.aj-pl-popup .mapboxgl-popup-content {
    padding: 0;
    overflow: hidden;
    border-radius: var(--aj-radius-md);
    box-shadow: var(--aj-shadow-md);
    font-family: var(--aj-font);
    direction: rtl;
}

.aj-pl-popup .mapboxgl-popup-close-button {
    inset-inline-end: 4px;
    inset-inline-start: auto;
    color: var(--aj-charcoal);
    font-size: 20px;
    line-height: 1;
}

.aj-pl-popup__media {
    display: block;
    inline-size: 100%;
    block-size: 118px;
    object-fit: cover;
}

.aj-pl-popup__body {
    padding: var(--aj-space-4);
    inline-size: 236px;
}

.aj-pl-popup__name {
    margin: 0 0 var(--aj-space-1);
    color: var(--aj-text);
    font-size: var(--aj-fs-body);
    font-weight: var(--aj-fw-bold);
}

.aj-pl-popup__place {
    margin: 0 0 var(--aj-space-3);
    color: var(--aj-text-muted);
    font-size: var(--aj-fs-caption);
}

/* the parent is here because the shell paints links white on dark surfaces,
   and that rule would otherwise win inside the popup */
.aj-pl-popup .aj-pl-popup__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: var(--aj-accent);
    font-size: var(--aj-fs-sm);
    font-weight: var(--aj-fw-bold);
    text-decoration: none;
}

/* =============================================================== 7. CTA === */

/*
 * Steel blue rather than the near black of the footer below it: the band still
 * closes the page, but in the site's own accent family instead of a second
 * heavy dark block stacked on the first.
 */
.aj-pl-cta-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(2rem, 1.25rem + 3vw, 3.25rem);
    background: var(--aj-accent-active);
    color: var(--aj-text-inverse);
}

.aj-pl-cta-band__motif {
    position: absolute;
    inset-block-start: -20%;
    inset-inline-start: -4%;
    z-index: -1;
    inline-size: clamp(240px, 30vw, 460px);
    block-size: clamp(240px, 30vw, 460px);
    background: var(--aj-motif) center / contain no-repeat;
    opacity: 0.09;
    filter: invert(1);
    pointer-events: none;
}

.aj-pl-cta-band__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--aj-space-6);
}

.aj-pl-cta-band__title {
    margin: 0;
    font-size: var(--aj-fs-h2);
    font-weight: var(--aj-fw-bold);
    line-height: var(--aj-lh-tight);
}

.aj-pl-cta-band__lead {
    margin: var(--aj-space-3) 0 0;
    max-inline-size: 52ch;
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--aj-fs-body-lg);
    line-height: var(--aj-lh-normal);
}

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

@media (max-width: 1024px) {

    /* the map stops competing for width and takes the full column */
    .aj-pl-reach__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-pl-places {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .aj-pl-place-card {
        flex: 1 1 240px;
    }

    .aj-pl-spotlight__grid[data-count="3"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-pl-spotlight__grid[data-count="3"] .aj-pl-feature--lead {
        grid-row: auto;
    }
}

@media (max-width: 900px) {

    /* the hero picture leads, the copy follows: reading order never changes */
    .aj-pl-hero__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-pl-hero__media {
        order: -1;
        aspect-ratio: 16 / 9;
    }

    /* stacked, the plate has nothing to reach towards, and reaching past the
       container edge would only cost a scrollbar */
    .aj-pl-hero__media::before {
        display: none;
    }

    .aj-pl-spotlight__grid[data-count="1"] .aj-pl-feature,
    .aj-pl-spotlight__grid[data-count="2"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-pl-spotlight__grid[data-count="1"] .aj-pl-feature__media {
        min-block-size: 0;
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 768px) {

    /*
     * The selects collapse behind one toggle so the search stays the whole
     * width of the bar; opening them lays them out as full rows.
     */
    .aj-pl-filters__toggle {
        display: inline-flex;
    }

    .aj-pl-filters__fields {
        display: none;
        flex-direction: column;
        align-items: stretch;
        inline-size: 100%;
    }

    .aj-pl-filters__fields.is-open {
        display: flex;
    }

    .aj-pl-field {
        justify-content: space-between;
        inline-size: 100%;
    }

    .aj-pl-field select {
        flex: 1;
        min-inline-size: 0;
        text-align: end;
    }

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

@media (max-width: 480px) {

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

    .aj-pl-card__body,
    .aj-pl-feature__body {
        padding: var(--aj-space-5);
    }

    .aj-pl-place-card {
        flex: 1 1 100%;
    }

    .aj-pl-cta-band__inner .aj-btn {
        inline-size: 100%;
        justify-content: center;
    }
}

/* ============================================ PHONES AND FOLDABLES ===== */

/*
 * Up to 720px — a phone, and a foldable folded or open; the iPad mini and
 * wider are untouched. As on the home page: a shorter picture, buttons and
 * links centred, a card's summary kept to three lines (the whole of it is
 * on the project's own page), two cards to a row where a foldable opens.
 */
@media (max-width: 720px) {

    .aj-pl-hero__copy > .aj-btn {
        display: flex;
        inline-size: fit-content;
        margin-inline: auto;
    }

    .aj-pl-card__media {
        aspect-ratio: 16 / 10;
    }
    .aj-pl-card__body {
        align-items: stretch;
    }
    .aj-pl-card__text {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        line-clamp: 3;
        overflow: hidden;
    }
    .aj-pl-card .aj-pl-cta,
    .aj-pl-feature .aj-pl-cta {
        align-self: center;
    }

    .aj-pl-cta-band__inner {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }
    .aj-pl-cta-band__actions {
        display: flex;
        justify-content: center;
    }
}

@media (min-width: 560px) and (max-width: 720px) {
    .aj-pl-grid,
    .aj-pl-grid--lead {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}