/* ==========================================
   FACULTY
   ========================================== */

.post-type-archive-sp2_directory #faculty-directory.flexible-content-area-block .wp-block-columns,
.single-sp2_directory .flexible-content-area-block .wp-block-columns {
    gap: var(--space-2xl);
}

/* ── Faculty single: full-height sidebar background column ──────────────────
   The wp:columns block renders full-width (no container wrapper). We paint
   the sidebar background using ::before so it stretches the full row height
   instead of clipping to the sidebar content height. The sidebar column's
   content is padded to align with the site container grid.
─────────────────────────────────────────────────────────────────────────── */
.faculty-body-columns {
    position: relative;
}

.faculty-body-columns::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 25%;
    background: linear-gradient(180deg, #F7F7F7 0%, rgb(247 247 247 / 0%) 106.92%);
    pointer-events: none;
}

/* Align sidebar content with the site container; sticky so it follows scroll */
.faculty-body-columns > .wp-block-column:first-child {
    position: sticky;
    top: var(--space-xl);
    align-self: start;
    padding-inline-start: var(--space-xl);
    padding-block: var(--space-xl);
}

/* Align main content column with the site container. The sidebar+main widths
   (25% + 66.66%) leave ~8% dead space on the right; widen the main column to
   fill it (25% + 75% = 100%). A right pad keeps the content off the container
   edge while the inner .container blocks supply the base gutter.
   The double selector overrides WordPress core's explicit-width column rule. */
.faculty-body-columns.wp-block-columns > .wp-block-column:last-child {
    flex-basis: 75%;
    flex-grow: 1;
    padding-inline-start: var(--space-2xl);
    padding-inline-end: var(--space-2xl);
    padding-block: var(--space-xl);
}

/* ── Faculty single: stacked layout (WP columns stack at <= 781px) ───────────
   Reset the desktop two-column overrides so the sidebar and main content flow
   cleanly stacked: drop the sticky sidebar (it overlapped the main content),
   the 25%-width background bar, and the asymmetric column padding.
─────────────────────────────────────────────────────────────────────────── */
@media (width <= 781px) {
    .faculty-body-columns::before {
        display: none;
    }

    /* Full-width sidebar background block instead of the 25% bar; no sticky.
       The sidebar has no inner .container, so it needs the site gutter itself.
       Double .wp-block-columns qualifier matches the desktop rule's specificity
       so this override actually wins inside the media query. */
    .faculty-body-columns.wp-block-columns > .wp-block-column:first-child {
        position: static;
        top: auto;
        padding-inline: var(--space-md);
        padding-block: var(--space-lg);
        background: linear-gradient(180deg, var(--wp--preset--color--gray-light) 0%, rgb(247 247 247 / 0%) 100%);
    }

    /* The inner .container gutter does not resolve on this template (it computes
       to 0), so the stacked main column supplies its own horizontal gutter —
       matched to the sidebar (--space-md) for a consistent edge on mobile. The
       double .wp-block-columns qualifier is required to beat the higher-specificity
       desktop :last-child rule (padding-inline: var(--space-2xl)). */
    .faculty-body-columns.wp-block-columns > .wp-block-column:last-child {
        padding-inline: var(--space-md);
        padding-block: var(--space-lg);
    }
}

.post-type-archive-sp2_directory .card-body {
     padding: var(--space-md);
}

.post-type-archive-sp2_directory .card-title {
     font-size: var(--font-size-h6);
}

/* ── Faculty archive: mobile 2-column layout with right-sized headshots ──────
   The archive grid (3mw-base dynamic-archive-grid) gives each card
   .col-4 .col-md-6 .col-sm-12, so at ≤768px the base grid forces each card to
   span 12 (one across, full-width). A full-width card with the parent theme's
   mobile .card-media height (160px) crops each portrait into a short, wide band
   — heads get cut and the photos read as oversized. Drop to 2 across and give
   the media a portrait aspect ratio so the headshots scale with the narrower
   card width. Exclude .col-12 so the full-width no-results message still spans
   the whole row.
─────────────────────────────────────────────────────────────────────────── */
@media (width <= 768px) {
    .post-type-archive-sp2_directory .dynamic-archive-grid-wrapper .row > [class*="col-"]:not(.col-12) {
        grid-column: span 6;
    }

    /* Portrait-friendly media box: override the base 160px fixed height with an
       aspect ratio so the headshot scales to the 2-col card width instead of
       cropping to a wide letterbox. */
    .post-type-archive-sp2_directory .card-media {
        height: auto;
        aspect-ratio: 3 / 4;
    }
}

.single-sp2_directory .dropdown-accordion-rows__grid {
     row-gap: var(--space-sm);
}

.single-sp2_directory .dynamic-archive-grid-wrapper .section-header {
     margin-bottom: var(--space-md);
}

.single-sp2_directory .dropdown-accordion-rows__title,
.single-sp2_directory .dynamic-archive-grid-wrapper .section-title {
     text-align: left;
     margin-top: 0;
     margin-bottom: 0;
     font-size: var(--font-size-h4);
}

.single-sp2_directory .dropdown-accordion-rows--layout-stacked .dropdown-accordion-rows__accordions {
     max-width: 100%;
}

.single-sp2_directory .dropdown-accordion-rows__accordions .dropdown-accordion-rows__title {
     font-size: var(--font-size-h5);
}

.single-sp2_directory .dynamic-archive-grid-wrapper .section-header--center .section-title {
     margin-left: 0;
}

/* ── Faculty single: accordion background + section spacing ──────────────────
   Publication accordions (and any authored accordions) use a light grey panel.
   Consecutive publication sections and the following Related News grid need
   consistent vertical rhythm.
─────────────────────────────────────────────────────────────────────────── */

/* Light grey accordion items — safety net so authored accordions match the
   publications block's has-gray-light-background-color utility. */
.single-sp2_directory .dropdown-accordion-rows__item {
     background-color: var(--wp--preset--color--gray-light);
}

/* Space between stacked publication sections (each is its own accordion group). */
.single-sp2_directory .faculty-publications-section + .faculty-publications-section {
     margin-top: var(--space-xl);
}

.single-sp2_directory .faculty-publications-block {
     border-bottom: 1px solid var(--color-border-light);
}

/* Space between the publications block and the Related News grid that follows.
   The grid renders as a sibling <section class="dynamic-archive-grid-wrapper …">. */
.single-sp2_directory .faculty-publications-block + .dynamic-archive-grid-wrapper {
     margin-top: var(--space-2xl);
}


.info-list__item {
     margin-bottom: var(--space-sm);
}

/* ── Faculty archive card: subheading row ── */
.faculty-card__subheading {
     margin: 0;
     margin-top: var(--space-xs);
     font-size: var(--font-size-small);
     color: var(--color-text-secondary);
     line-height: var(--line-height-normal);
}

/* ── Block editor preview placeholders ── */
.faculty-publications-preview {
     padding: 1rem;
     opacity: 0.5;
}

@media (width <= 786px) {
     .single-sp2_directory .dropdown-accordion-rows__item .dropdown-accordion-rows__header-title {
          font-size: var(--font-size-lead) !important;
     }
}