/* ==========================================================================
   DCB (Dynamic Content Builder) overrides — used by the Dynamic Grid pod
   Fixes: spacing conflicts, image placeholder removal, card styling
   ========================================================================== */

.dcb-card-standard-list {
    padding: 40px 0;
}

.dcb-card-standard-list .dcb-card-link {
    gap: 40px;
}

.dcb-card-wrapper,
.dcb-grid-wrapper {
    gap: 48px;
}

@media (max-width: 768px) {
    .dcb-card-wrapper,
    .dcb-grid-wrapper {
        gap: 24px;
    }
}

.dcb-card-no-image .dcb-card-content {
    padding-top: var(--space-6);
}

/* Standard Card (Media card) surface/type/colour/read-more now all come from
   the plugin's base .dcb-card tokens — this file used to redeclare all of it
   with different values (including a font-weight: 900 synthetic-bold title,
   the exact defect the spec's tokens section calls out by name) and fought
   the base on every property. Removed rather than merged. */

.dcb-grid-layout .dcb-card-content {
    padding: 0 var(--space-5, 1.25rem) var(--space-5, 1.25rem);
}

.dcb-grid-cols-2 .dcb-card-link,
.dcb-grid-cols-3 .dcb-card-link {
    flex-direction: column;
    height: 100%;
}

.dcb-card-standard .dcb-card-image-wrapper {
    border-radius: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.dcb-card-standard .dcb-card-image {
    transition: transform var(--transition-slow, 400ms ease);
}

.dcb-card-standard:hover .dcb-card-image {
    transform: scale(1.03);
}

/* ── List layout overrides ────────────────────────────────────────────────── */
.dcb-card-standard-list {
    background: transparent;
    border: none;
    border-top: 1px solid var(--color-border, #E4DAC8);
    border-radius: 0;
    box-shadow: none;
}

.dcb-card-standard-list:last-child {
    border-bottom: 1px solid var(--color-border, #E4DAC8);
}

.dcb-card-standard-list:hover {
    transform: none;
    box-shadow: none;
}

.dcb-card-standard-list .dcb-card-title {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

.dcb-card-standard-list .dcb-card-excerpt {
    color: var(--color-text-muted, #5A4F66);
}

.dcb-card-standard-list .dcb-card-tag {
    background: var(--color-bg-alt, #ECDFC3);
    color: var(--color-text-muted, #5A4F66);
    border-radius: var(--radius-pill, 999px);
}

.dcb-card-standard-list .dcb-card-read-more {
    border-top: none;
    padding-top: 0;
}

/* ── Load-more button ─────────────────────────────────────────────────────── */
.dcb-load-more-btn {
    border-color: var(--color-primary, #19062D);
    color: var(--color-primary, #19062D);
    background: transparent;
    font-family: var(--font-body, 'Rethink Sans', sans-serif);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    padding: 14px 40px;
    border-radius: var(--radius-pill, 999px);
    cursor: pointer;
    transition: background var(--transition-base, 250ms ease),
                color var(--transition-base, 250ms ease);
}

.dcb-load-more-btn::before { display: none; }

.dcb-load-more-btn:hover {
    background: var(--color-primary, #19062D);
    color: var(--color-white, #fff) !important;
    border-color: var(--color-primary, #19062D);
}

/* ── Filter bar ───────────────────────────────────────────────────────────── */
.dcb-filter-btn {
    border-color: var(--color-border-dark, #C9BBA0);
    color: var(--color-text-muted, #5A4F66);
    font-family: var(--font-body, 'Rethink Sans', sans-serif);
    font-size: var(--text-sm, 0.875rem);
    border-radius: var(--radius-pill, 999px);
    padding: 8px 20px;
}

.dcb-filter-btn:hover,
.dcb-filter-btn.active {
    background: var(--color-accent, #ED6D2D);
    border-color: var(--color-accent, #ED6D2D);
    color: var(--color-white, #fff);
    opacity: 1;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .dcb-card-standard-list .dcb-card-content {
        max-width: 100%;
    }

    .dcb-card-standard-list .dcb-card-image-wrapper {
        max-width: 100%;
    }
}

/* ── Compact card — Home Dynamic Grids (Services / Research) ───────────────────
   No media zone at all (spec section 3): no card box either, matching the
   established "plain content on the section background" convention already
   used here. Base .dcb-card ships a shadow token now, so it must be
   cancelled in the resting state too, not just on :hover. */

.layout-dgrid .dcb-card-compact {
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    background: transparent;
    height: 100%;
}

.layout-dgrid .dcb-card-compact:hover {
    transform: none;
    box-shadow: none;
}

.layout-dgrid .dcb-card-compact .dcb-card-content {
    padding: 0;
    gap: var(--space-2);
}

/* Same defensive title-colour pin as Career/Event — see the comment there.
   Compact sits on a light background, so navy is always correct here. */
.dcb-card-compact .dcb-card-title,
.dcb-card-compact .dcb-card-title a {
    color: var(--dcb-card-title-color, #19062D) !important;
}

/* ── Insight card — Home "What we're learning" grid (native Posts) ─────────────
   Figma "Blog / 34": 16px-rounded image, then an info row (bordered category
   tag chip + reading time), an Anton H5 title, excerpt and a Read-more chevron
   link. No card box — sits on the section background. */

.layout-dgrid .dcb-card-insight {
    border: none;
    border-radius: 0;
    box-shadow: none; /* base .dcb-card ships a shadow token — cancel it here
        too (not just on :hover) or the "no card box" card reads as boxed
        with the text flush against that shadow's implied edge. */
    overflow: visible;
    background: transparent;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    /* Cards stay left-aligned even when the section header is centred
       (grid_classes="text-center" on the Research grid — Figma centres the
       header only, card content is left-aligned). */
    text-align: left;
    align-items: flex-start;
}

.layout-dgrid .dcb-card-insight .dcb-card-content { align-items: flex-start; }
.layout-dgrid .dcb-card-insight .dcb-card-info { justify-content: flex-start; }

.layout-dgrid .dcb-card-insight:hover {
    transform: none;
    box-shadow: none;
}

.layout-dgrid .dcb-card-insight .dcb-card-image-wrapper {
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.layout-dgrid .dcb-card-insight .dcb-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto;
    transition: transform var(--transition-base);
}

.layout-dgrid .dcb-card-insight:hover .dcb-card-image { transform: scale(1.03); }

.layout-dgrid .dcb-card-insight .dcb-card-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Info row: category tag chip + reading time. */
.layout-dgrid .dcb-card-insight .dcb-card-info {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.layout-dgrid .dcb-card-insight .dcb-card-tag {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.5;
    padding: 4px 10px;
    border: 1px solid color-mix(in srgb, var(--color-text) 15%, transparent);
    border-radius: var(--radius-sm);
    color: var(--color-text);
}

.layout-dgrid .dcb-card-insight .dcb-card-readtime {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
}

.layout-dgrid .dcb-card-insight .dcb-card-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 1rem + 1.6vw, 1.75rem);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin: 0;
}

.layout-dgrid .dcb-card-insight .dcb-card-title a { color: inherit; }
.layout-dgrid .dcb-card-insight .dcb-card-title a:hover { color: var(--color-accent); }

/* Tighten the title↔excerpt gap (Figma is 8px inside the content block). */
.layout-dgrid .dcb-card-insight .dcb-card-title { margin-bottom: calc(var(--space-2) - var(--space-4)); }

.layout-dgrid .dcb-card-insight .dcb-card-excerpt {
    font-size: var(--text-base);
    line-height: 1.5;
    color: color-mix(in srgb, currentColor 70%, transparent);
    margin: 0;
}

/* The card markup's class is "dcb-card-read-more" — ".read-more" here never
   matched anything. That meant the base .dcb-card-read-more rule (styled for
   a plain <span>, not a wrapper around a real <a>) was the only thing
   applying: pointer-events:none (inherited by the nested link, making it
   unclickable) and no inline-flex on the <a> itself, so the reset's blanket
   "svg { display:block }" forced the chevron onto its own line. */
.layout-dgrid .dcb-card-insight .dcb-card-read-more {
    margin-top: var(--space-2);
    pointer-events: auto; /* this variant's real link lives inside, unlike
        the decorative-span convention the base rule assumes */
}

.layout-dgrid .dcb-card-insight .dcb-card-read-more a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-base);
}

.layout-dgrid .dcb-card-insight .dcb-card-read-more a:hover { color: var(--color-accent); }

.layout-dgrid .dcb-card-insight .dcb-card-read-more a svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform var(--transition-base);
}

.layout-dgrid .dcb-card-insight .dcb-card-read-more a:hover svg { transform: translateX(3px); }

/* ── Person card (Team) — About "Leadership" / Crèche "Our team" grids ─────
   Photo, name, role, short bio, social icons. No card box, sits on the
   section background — same "no boxed card" convention as compact/insight.
   The base .dcb-card now ships a shadow token, so it must be cancelled here
   too, not just border/background/radius, or a shadow floats with no box
   behind it. */

.layout-dgrid .dcb-card-team {
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    background: transparent;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.layout-dgrid .dcb-card-team .dcb-card-media {
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.layout-dgrid .dcb-card-team .dcb-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.layout-dgrid .dcb-card-team .dcb-card-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.layout-dgrid .dcb-card-team-title { display: flex; flex-direction: column; gap: var(--space-1); }

.layout-dgrid .dcb-card-team .dcb-card-excerpt {
    font-size: var(--text-base);
    line-height: 1.5;
    color: color-mix(in srgb, currentColor 70%, transparent);
    margin: 0;
}

.layout-dgrid .dcb-card-team-social {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.layout-dgrid .dcb-card-team-social a {
    color: var(--color-text);
    display: inline-flex;
}

.layout-dgrid .dcb-card-team-social a:hover { color: var(--color-accent); }

/* Centred team cards — used by the About "Leadership" grid (centered header
   layout). Scoped to --centered so the left-aligned crèche team grid is
   unaffected. */
.layout-dgrid--centered .dcb-card-team,
.layout-dgrid--centered .dcb-card-team .dcb-card-content,
.layout-dgrid--centered .dcb-card-team-title { align-items: center; text-align: center; }
.layout-dgrid--centered .dcb-card-team-social { justify-content: center; }

/* ── Data card — Career (Careers "Current vacancies" grid) ─────────────────
   Boxed card: inherits the base .dcb-card surface directly (no border/radius
   /background override here) rather than redeclaring slightly different
   values — "change it once, at base level" (spec section 5). */

/* An older, unscoped rule elsewhere in this legacy stack wins the cascade
   against the base title colour for this specific variant (a leftover from
   before this card had its own file section — left in place rather than
   risk removing a rule that might affect something else unseen). Pinning
   the correct navy here, scoped to .dcb-card-career only, is the safe fix:
   it can't bleed into .dcb-card-event-list, which legitimately needs white
   title text for its own dark background. */
.dcb-card-career .dcb-card-title,
.dcb-card-career .dcb-card-title a {
    color: var(--dcb-card-title-color, #19062D) !important;
}

.layout-dgrid .dcb-card-career .dcb-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-10);
}

.dcb-card-career .dcb-card-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.2;
}

/* Data rows replace the excerpt (shared with the Event data card below). */
.dcb-card-data-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dcb-card-data-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--dcb-card-body-color, var(--color-text));
}

/* A1: Keep this scope limited to one-anchor cards. Exclude insight, menu,
   career, team, and standard cards in read-more-link mode: each contains a
   second real anchor that a stretched overlay would block. AOS's [data-aos]
    rule is loaded from a CDN and wins on specificity, so this escalation is
    deliberate and must not be stripped. */
.dcb-card-list .dcb-card-title,
.dcb-card-list .dcb-card-title a,
.dcb-card-compact .dcb-card-title,
.dcb-card-compact .dcb-card-title a {
    transform: none !important;
}

.dcb-card-standard:not(:has(.dcb-card-read-more--link)) .dcb-card-title,
.dcb-card-standard:not(:has(.dcb-card-read-more--link)) .dcb-card-title a {
    transform: none !important;
}

/* A genuinely separate action (Apply / View event) — a real, visible link,
   not the decorative .dcb-card-read-more span the other variants use. Sits
   above the title's stretched click-target so it stays independently
   clickable (spec section 8 — this is the one card where two real links
   are correct, since Apply goes somewhere the title link does not). */
.dcb-card-apply {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-primary);
    font-weight: 500;
    padding: 8px 20px;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--light-border);
    margin-top: auto;
}

.dcb-card-apply:hover { color: var(--color-accent); }

/* ── Event card — Events Archive grid ──────────────────────────────────────── */

.dcb-grid-cols-2 {
    row-gap: var(--space-20);

    .dcb-card-insight .dcb-card-image-wrapper {
        aspect-ratio: 16 / 9;
    }
}

.layout-dgrid .dcb-card-event {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    flex: none;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.layout-dgrid .dcb-card-event:hover {
    transform: none;
    box-shadow: none;
}

.layout-dgrid .dcb-card-event .dcb-card-media {
    border-radius: var(--radius-xl);
    overflow: hidden;
    height: auto;
    aspect-ratio: 3 / 2;
    position: relative;
}

.layout-dgrid .dcb-card-event .dcb-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.layout-dgrid .dcb-card-event:hover .dcb-card-image { transform: scale(1.03); }

.layout-dgrid .dcb-event-date-badge {
    background-color: var(--color-white);
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    height: auto;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    display: flex;
    width: 105px;
    padding: 12px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.layout-dgrid .dcb-card-event:hover .dcb-event-date-badge { transform: none; }

.layout-dgrid .dcb-event-weekday {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-accent);
}

.layout-dgrid .dcb-event-day {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-text);
}

.layout-dgrid .dcb-event-year, .layout-dgrid .dcb-event-month-year {
    font-size: var(--text-xs);
    color: color-mix(in srgb, currentColor 60%, transparent);
}

.layout-dgrid .dcb-card-event .dcb-card-content {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Same title-colour cascade conflict fixed on the Career data card — scoped
   here too (grid mode only; .dcb-card-event-list keeps its own white title,
   which is correct for its dark background, so it must not be touched). */
.dcb-card-event:not(.dcb-card-event-list) .dcb-card-title,
.dcb-card-event:not(.dcb-card-event-list) .dcb-card-title a {
    color: var(--dcb-card-title-color, #19062D) !important;
}

.layout-dgrid .dcb-meta-separator { margin: 0 var(--space-2); }

/* ── Logo tile (partner / "trusted by" strip) — not a card, no chrome ─────── */
.dcb-logo-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: var(--space-4);
}

.dcb-logo-tile__img {
    max-width: 100%;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.65;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.dcb-logo-tile:hover .dcb-logo-tile__img {
    filter: grayscale(0);
    opacity: 1;
}

.dcb-logo-tile__text {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: color-mix(in srgb, currentColor 70%, transparent);
}