/* ==========================================================================
   Standard Component Styles
   File: css/components/standard.css
   Visual overrides for components rendered in interior template contexts.
   Depends on: css/components/base.css
   ========================================================================== */

.campaign-hero {
    width: 100% !important;
    margin-left: 0 !important;
}


/* ==========================================================================
   Feature Highlight
   ========================================================================== */
.feature-highlight {
    margin: var(--space-s) 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}

.feature-highlight-text,
.feature-highlight-image {
    max-width: 100% !important;
}

.feature-img-uploaded {
    border-top-right-radius: 60px !important;
}

@media (max-width: 768px) {
    .feature-highlight-image {
        padding-top: 30px !important;
    }

    .feature-img-uploaded {
        border-top-right-radius: 40px !important;
    }
}


/* ==========================================================================
   Announcement Component
   ========================================================================== */
.announcement {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 40px 20px;
}

.announcement .announcement-heading {
    font-family: var(--font-family-primary);
    font-size: 1.5rem;
    color: var(--color-rose-medium);
    font-weight: 600;
    margin: 0;
    padding: 0;
    max-width: var(--component-max-width);
}

.announcement .announcement-text {
    font-weight: 500;
    margin: 10px 0 0 0;
    padding: 0;
    max-width: 900px;
    font-family: var(--font-family-primary);
    font-size: var(--copy-size-standard);
    line-height: 1.5;
}

/* ==========================================================================
   CTA Block
   ========================================================================== */
.campaign-cta {
    background: var(--color-blue-medium);
    border-bottom-left-radius: 0;
    padding: var(--component-padding-block) 0;
    text-align: left;
}

.campaign-cta-container {
    justify-content: flex-start;
}

.cta-heading {
    font-family: var(--font-family-secondary);
    font-size: clamp(32px, 3vw + 20px, 52px);
    font-weight: var(--fw-medium);
    color: var(--color-california-gold);
    margin: 0 0 var(--space-m) 0;
    line-height: 1.2;
}

.cta-excerpt {
    font-family: var(--font-family-primary);
    font-size: clamp(14px, 1vw + 10px, 18px);
    font-weight: var(--fw-regular);
    color: var(--color-white);
    margin: 0 var(--component-padding-inline) var(--space-l);
    line-height: 1.5;
    max-width: 700px;
    opacity: 0.9;
    text-align: left;
}


.cta-button {
    font-size: var(--fs-500);
    padding: 0.6rem 1.25rem;
    max-width: max-content;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-family-primary);
    font-weight: var(--fw-regular);
    text-decoration: none !important;
    color: var(--color-black) !important;
    background-color: var(--color-white);
    border: 1px solid var(--color-black);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
        background-color: #FFE18D;

}

.cta-button:active {
    background-color: var(--color-california-gold);
    color: var(--color-black);
    border: 1px solid var(--color-black);
}

/* ==========================================================================
   Infographic / Stats
   ========================================================================== */
.campaign-infographic {
    background-color: var(--color-white);
    padding: var(--component-padding-block) 0;
}

.campaign-infographic-container {
    max-width: var(--component-max-width);
    margin: 0 auto;
    padding: 0 !important;
}

.infographic-grid {
    gap: 20px !important;
}

.stat-card {
    padding: 0 !important;
}

.infographic-heading {
    font-family: var(--font-family-primary);
    font-size: clamp(24px, 2vw + 14px, 34px);
    font-weight: var(--fw-semibold);
    color: var(--color-berkeley-blue);
    margin: 0 0 var(--space-xl) 0;
    text-align: center;
}

.icon-placeholder {
    background-color: var(--color-blue-light);
    color: var(--color-berkeley-blue);
}

.stat-number {
    font-family: var(--font-family-primary);
    font-size: clamp(28px, 2vw + 14px, 28px);
    font-weight: var(--fw-bold);
    color: #474747;
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.stat-divider {
    border: none;
    border-top: 1px solid #343434;
    margin: var(--space-s) 0;
    width: 70px;
}

.stat-text {
    font-family: var(--font-family-primary);
    font-size: clamp(14px, 1vw + 8px, 16px);
    font-weight: var(--fw-regular);
    color: var(--color-black);
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   Photo + Text CTAs
   On standard templates the component lives inside .page-content rather than
   a full-width campaign layout. Structural padding is tightened so the 2×2
   grid works at narrower widths; all visual design (fonts, colors, weights,
   backgrounds, border-radii, buttons) stays identical to campaign.
   ========================================================================== */

/*
 * Visual styles — identical to campaign.
 * base.css provides the grid structure, image handling, and block flex layout.
 * campaign.css adds the colours / typography but doesn't load on standard
 * templates, so we replicate those visual rules here.
 */
.campaign-photo-text-ctas {
    background-color: var(--color-white) !important;
}

.ptc-block-grey {
    background-color: var(--color-grey-light) !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.ptc-block-grey .ptc-heading {
    color: var(--color-black) !important;
}

.ptc-block-grey .ptc-excerpt {
    color: var(--color-black) !important;
}

.ptc-block-blue {
    background-color: var(--color-blue-medium) !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
}

.ptc-block-blue .ptc-heading {
    color: var(--color-white) !important;
}

.ptc-block-blue .ptc-excerpt {
    color: var(--color-white) !important;
    opacity: 0.9;
}

.ptc-image-top-right {
    grid-column: 2 !important;
    grid-row: 1 !important;
    border-top-left-radius: var(--background-component-radius) !important;
    overflow: hidden !important;
}

.ptc-image-bottom-left {
    grid-column: 1 !important;
    grid-row: 2 !important;
    border-top-right-radius: var(--background-component-radius) !important;
    overflow: hidden !important;
}

/* Typography */
.ptc-heading {
    font-family: var(--font-family-primary) !important;
    font-size: clamp(20px, 2vw + 12px, 30px) !important;
    font-weight: 800 !important;
    margin: 0 0 var(--space-m) 0 !important;
    line-height: 1.2 !important;
}

.ptc-excerpt {
    font-family: var(--font-family-primary) !important;
    font-size: clamp(14px, 1vw + 8px, 16px) !important;
    font-weight: var(--fw-regular) !important;
    line-height: 1.5 !important;
    margin: 0 0 var(--space-l) 0 !important;
}

/* Buttons — same design as campaign */
.ptc-button {
    display: inline-block !important;
    font-family: var(--font-family-primary) !important;
    font-size: var(--fs-400) !important;
    font-weight: 300 !important;
    padding: var(--space-xs) var(--space-l) !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease, color 0.3s ease,
                transform 0.2s ease, box-shadow 0.3s ease !important;
    align-self: flex-start !important;
}

.ptc-button-outline {
    color: var(--color-blue-dark) !important;
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-blue-dark) !important;
}

.ptc-button-outline:hover,
.ptc-button-outline:focus {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.ptc-button-outline:focus {
    outline: 1px solid var(--color-blue-dark) !important;
    outline-offset: 4px !important;
}

.ptc-button-outline-light {
    color: var(--color-blue-dark) !important;
    background-color: white !important;
    border: 1px solid var(--color-blue-dark) !important;
}

.ptc-button-outline-light:hover,
.ptc-button-outline-light:focus {
    background-color: var(--color-white) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.ptc-button-outline-light:focus {
    outline: 1px solid var(--color-california-gold) !important;
    outline-offset: 4px !important;
}

/*
 * Structural overrides — scale spacing for .page-content context.
 * Campaign uses 140px outer / 100px inner which is too generous
 * for a constrained column. We tighten proportionally.
 */
.ptc-grid {
    padding: var(--space-s) 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.ptc-block {
    padding: clamp(30px, 4vw, 60px) !important;
}

.ptc-image {
    min-height: 250px !important;
}

/* ── Tablet (≤ 1023px) ─────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .ptc-block {
        padding: var(--space-l) var(--mobile-horizontal-padding) !important;
    }

    .ptc-image-top-right {
        border-top-left-radius: 80px !important;
    }

    .ptc-image-bottom-left {
        border-top-right-radius: 80px !important;
    }
}

/* ── Mobile (≤ 768px) — single column stack ────────────────────────────────── */
/* Order: Image 1 → Block 1 (grey) → Image 2 → Block 2 (blue)               */
@media (max-width: 768px) {
    .ptc-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto auto !important;
    }

    .ptc-image-top-right {
        grid-column: 1 !important;
        grid-row: 1 !important;
        border-top-left-radius: 60px !important;
        border-top-right-radius: 0 !important;
    }

    .ptc-block-grey {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .ptc-image-bottom-left {
        grid-column: 1 !important;
        grid-row: 3 !important;
        border-top-right-radius: 60px !important;
        border-top-left-radius: 0 !important;
    }

    .ptc-block-blue {
        grid-column: 1 !important;
        grid-row: 4 !important;
    }

    .ptc-block {
        padding: var(--space-l) var(--mobile-horizontal-padding) !important;
    }

    .ptc-image {
        min-height: 220px !important;
    }

    .ptc-heading {
        font-size: clamp(20px, 4vw, 26px) !important;
    }

    .ptc-excerpt {
        font-size: clamp(14px, 2vw, 16px) !important;
    }

    .ptc-button {
        font-size: var(--fs-400) !important;
        padding: var(--space-s) var(--space-l) !important;
    }
}

.ptc-button-bold {
    padding: 0.6rem 1.25rem;
    max-width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-family-primary);
    font-weight: var(--fw-regular);
    text-decoration: none !important;
    color: var(--color-black) !important;
    background-color: var(--color-white);
    border: 1px solid var(--color-black);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.ptc-button-bold:hover {
    background-color: #FFE18D;
}

.ptc-button-bold:active {
    background-color: var(--color-california-gold);
    color: var(--color-black);
    border: 1px solid var(--color-black);
}


/* ── Small mobile (≤ 480px) ────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .ptc-image {
        min-height: 180px !important;
    }

    .ptc-image-top-right {
        border-top-left-radius: 40px !important;
    }

    .ptc-image-bottom-left {
        border-top-right-radius: 40px !important;
    }
}

/* ==========================================================================
   Testimonial
   ========================================================================== */
.campaign-testimonial {
    background-color: var(--color-white);
    padding: var(--space-s) 0 !important;
}

.campaign-testimonial-container {
    display: grid;
    grid-template-columns: 35% 65%;
    align-items: center;
    gap: var(--space-2xl);
    padding: 0 !important;
}

.campaign-testimonial-container .testimonial-image-wrapper {
    width: calc(100% - 50px);
    margin: 25px auto;
}

.testimonial-bg-rectangle {
    background-color: var(--color-california-gold);
    border-bottom-left-radius: 80px;
}

.testimonial-image {
    border-bottom-right-radius: 80px;
}

.testimonial-content {
    text-align: left;
}

.testimonial-quote {
    font-family: var(--font-family-secondary);
    font-size: clamp(16px, 1vw + 10px, 20px);
    font-weight: var(--fw-semibold);
    color: var(--color-black);
    line-height: 1.5;
    margin: 0 0 10px 0 !important;
}

.testimonial-divider {
    border: none;
    border-top: 1px solid var(--color-black);
    width: 50px;
    margin: 0 0 10px 0 !important;
}

.testimonial-name {
    font-family: var(--font-family-secondary);
    font-size: clamp(15px, 1vw + 10px, 18px);
    font-weight: var(--fw-semibold);
    color: var(--color-black);
    margin: 0 0 0 0 !important;
}

.testimonial-position {
    font-family: var(--font-family-primary);
    font-size: clamp(13px, 0.8vw + 10px, 12px) !important;
    font-weight: var(--fw-regular);
    color: var(--color-black);
    margin: 0 !important;
}

/* ==========================================================================
   Text Blocks
   ========================================================================== */

/*
 * Design is identical to campaign — same fonts, weights, colors throughout.
 * Only structural differences for the interior context:
 *   - transparent background (template is already white)
 *   - reduced vertical padding (content flow, not a standalone section)
 *   - container max-width/padding deferred to the template wrapper
 */

.campaign-text-blocks {
    background-color: transparent;
    padding: var(--space-2xl) 0;
}

.campaign-text-blocks .campaign-text-blocks-container {
    max-width: 100% !important;
    padding: 0 !important;
}

.campaign-text-blocks .text-blocks-heading {
    font-family: var(--font-family-secondary);
    font-size: clamp(24px, 1.5vw + 18px, 36px);
    font-weight: 400;
    color: var(--color-black);
    margin: 0 auto var(--space-2xl) auto;
    text-align: center;
    line-height: 1.2;
    max-width: 400px;
}

.campaign-text-blocks .text-block-subheading {
    font-family: var(--font-family-primary);
    font-size: clamp(16px, 1vw + 10px, 20px);
    font-weight: var(--fw-semibold);
    color: var(--color-black);
    margin: 0 0 var(--space-xs) 0;
    line-height: 1.3;
}

.campaign-text-blocks .text-block-text {
    font-family: var(--font-family-primary);
    font-size: clamp(13px, 0.8vw + 9px, 15px);
    font-weight: var(--fw-regular);
    color: var(--color-black);
    line-height: 1.4;
    margin: 0;
    display: inline;
}

.campaign-text-blocks .text-block-arrow {
    color: var(--color-science-blue);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1023px) {
    .campaign-infographic {
        padding: var(--space-xl) 0;
    }

    .campaign-infographic-container {
        padding: 0 var(--mobile-horizontal-padding) !important;
    }

    .infographic-grid {
        gap: var(--space-l) !important;
    }

    .stat-card {
        padding: var(--space-m) !important;
        gap: var(--space-m);
    }

    .icon-placeholder {
        width: 60px;
        height: 60px;
    }

    .icon-placeholder svg {
        width: 30px;
        height: 30px;
    }

    .campaign-testimonial-container {
        grid-template-columns: 40% 60%;
        gap: var(--space-xl);
    }

    .campaign-text-blocks .text-blocks-grid {
        gap: var(--space-l) var(--space-xl);
    }

    .campaign-text-blocks .text-block-subheading {
        font-size: clamp(15px, 1.5vw + 8px, 18px);
    }

    .campaign-text-blocks .text-block-text {
        font-size: clamp(13px, 1vw + 8px, 14px);
    }
}

@media (max-width: 768px) {
    .cta-heading {
        font-size: clamp(26px, 5vw, 36px);
    }

    .cta-excerpt {
        font-size: clamp(15px, 2vw, 18px);
    }

    .cta-button {
        padding: var(--space-s) var(--space-l);
        font-size: var(--fs-400);
    }

    .campaign-infographic {
        padding: var(--space-l) 0;
    }

    .infographic-heading {
        font-size: clamp(24px, 4vw, 32px);
        margin-bottom: var(--space-l);
    }

    .infographic-grid {
        grid-template-columns: 1fr;
        gap: var(--space-m) !important;
    }

    .stat-card {
        padding: var(--space-m) !important;
    }

    .stat-number {
        font-size: clamp(32px, 6vw, 48px);
    }

    .stat-text {
        font-size: clamp(14px, 2vw, 16px);
    }

    .campaign-testimonial-container {
        grid-template-columns: 1fr;
    }

    .campaign-testimonial-container .testimonial-image-wrapper {
        width: 200px;
        margin: 25px auto;
    }

    .testimonial-content {
        text-align: center;
    }

    .testimonial-divider {
        margin: 0 auto var(--space-m) auto !important;
    }

    .testimonial-quote {
        font-size: clamp(15px, 2vw, 18px);
    }

    .campaign-text-blocks .text-blocks-heading {
        font-size: clamp(20px, 3.5vw, 28px);
        margin-bottom: var(--space-xl);
    }

    .campaign-text-blocks .text-blocks-grid {
        grid-template-columns: 1fr;
        gap: var(--space-l);
    }

    .campaign-text-blocks .text-block-subheading {
        font-size: clamp(15px, 2.5vw, 18px);
    }

    .campaign-text-blocks .text-block-text {
        font-size: clamp(13px, 2vw, 14px);
    }

    .campaign-text-blocks .text-block-arrow {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 480px) {
    .stat-icon {
        flex: 0 0 25%;
    }

    .icon-placeholder {
        width: 50px;
        height: 50px;
    }

    .icon-placeholder svg {
        width: 24px;
        height: 24px;
    }

    .stat-divider {
        width: 40px;
    }
}

/* ==========================================================================
   Tabbed List
   Interior templates only.
   ========================================================================== */
.tabbed-list {
    margin: var(--space-s) 0 !important;
    font-family: var(--font-family-primary);
}

/* ── Tab row ─────────────────────────────────────────────────────────────────── */
.tabbed-list-tabs {
    display: flex;
    gap: 0;
}

.tabbed-list-tab {
    font-family: var(--font-family-primary);
    font-size: clamp(14px, 1vw + 8px, 16px);
    font-weight: var(--fw-semibold);
    padding: 14px 28px;
    border: none;
    border-radius: 0 30px 0 0;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    flex: 1;
    text-align: center;
    margin-right: 3px;

    /* Inactive state (default) */
    background-color: var(--color-berkeley-blue);
    color: var(--color-white);
}

.tabbed-list-tab:last-child {
    margin-right: 0;
}

.tabbed-list-tab:hover {
    opacity: 0.9;
}

.tabbed-list-tab:focus-visible {
    outline: 2px solid var(--color-berkeley-blue);
    outline-offset: 2px;
}

/* Active tab */
.tabbed-list-tab.is-active {
    background-color: var(--color-california-gold);
    color: var(--color-black);
}

/* ── Content panel ───────────────────────────────────────────────────────────── */
.tabbed-list-panel {
    background-color: var(--color-white);
    border-radius: 0 0 0 80px;
    padding: 20px 40px 40px 150px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

h3.tabbed-list-heading {
    font-family: var(--font-family-primary);
    font-size: 16px !important;
    font-weight: var(--fw-semibold) !important;
    color: var(--color-berkeley-blue) !important;
    margin: 0 0 var(--space-s) 0;
    line-height: 1.3;
}

.tabbed-list-text {
    font-family: var(--font-family-primary);
    font-size: clamp(14px, 1vw + 8px, 16px) !important;
    font-weight: var(--fw-regular) !important;
    color: var(--color-black) !important;
    line-height: 1.5;
    margin: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tabbed-list-tab {
        padding: 10px 18px;
        font-size: 13px;
    }

    .tabbed-list-panel {
        padding: 30px 24px 30px 36px;
        border-radius: 0 0 0 50px;
    }
}

@media (max-width: 650px) {
    .tabbed-list-tab {
        padding: 8px 14px;
        font-size: 12px;
    }

    .tabbed-list-panel {
        padding: 24px 20px 24px 28px;
        border-radius: 0 0 0 40px;
    }
}
/* ==========================================================================
   Inserts — Vertical & Horizontal
   Standard/interior template context only.
   No campaign.css entry needed — template-restricted in the picker and
   these components are never placed on campaign/front-page templates.
   ========================================================================== */

/* ── Shared base ─────────────────────────────────────────────────────────── */
.sacomms-insert {
    padding: 1.25rem 1.5rem;
    border-bottom-right-radius: 80px;
    box-sizing: border-box;
}

/* ── Background colour variants ──────────────────────────────────────────── */
.sacomms-insert--bg-grey-light  { background-color: #F0F1F1; }
.sacomms-insert--bg-blue-light  { background-color: var(--color-blue-light); }
.sacomms-insert--bg-gold-medium { background-color: var(--color-gold-medium); }
.sacomms-insert--bg-blue-medium { background-color: var(--color-blue-medium); }

/* ── Heading ─────────────────────────────────────────────────────────────── */
.page-content .sacomms-insert__heading {
    font-family: var(--font-family-secondary);
    font-size: clamp(1.0625rem, 0.6vw + 0.875rem, 1.375rem);
    font-weight: 600;
    color: var(--color-berkeley-blue);
    line-height: 1.25;
    margin: 0 0 0.625rem 0;
}

/* ── Body content wrapper ────────────────────────────────────────────────── */
.page-content .sacomms-insert__body {
    margin: 0 0 1rem 0;
}

.page-content .sacomms-insert--bg-blue-medium .sacomms-insert__body ul {
    color: white;
}

/* Remove bottom margin when body is the last child (no button present) */
.page-content .sacomms-insert__body:last-child {
    margin-bottom: 0;
}
.page-content .sacomms-insert__body ul, 
.page-content .sacomms-insert__body ol {
    padding-left: 35px;
}

/* Paragraphs generated by wpautop / TinyMCE visual editor */
.page-content .sacomms-insert__body p {
    font-family: var(--font-family-primary);
    font-size: 0.975rem;
    font-weight: 500;
    color: var(--color-black);
    line-height: 1.5;
    margin: 0 0 0.75rem 0;
}

.page-content .sacomms-insert__body p:last-child {
    margin-bottom: 0;
}

/* Inline links within body copy */
.page-content .sacomms-insert__body a {
    color: var(--color-berkeley-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.page-content .sacomms-insert__body a:hover {
    text-decoration: none;
}

.page-content .sacomms-insert__body a:focus-visible {
    outline: 2px solid var(--color-berkeley-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Accessibility: colour overrides for dark blue background ────────────
   --color-blue-medium (#004aae) is dark enough that both --color-berkeley-blue
   (#002676) and black (#000000) fail WCAG AA contrast against it.
   Overriding to white restores compliance across heading, body, and links.  */
.sacomms-insert--bg-blue-medium .sacomms-insert__heading {
    color: var(--color-white) !important;
}

.sacomms-insert--bg-blue-medium .sacomms-insert__body p {
    color: var(--color-white) !important;
}

.sacomms-insert--bg-blue-medium .sacomms-insert__body a {
    color: var(--color-white) !important;
}

.sacomms-insert--bg-blue-medium .sacomms-insert__body a:focus-visible {
    outline-color: var(--color-white) !important;
}

/* ── Vertical variant ────────────────────────────────────────────────────── */
.sacomms-insert--vertical {
    float: left;
    width: 260px;
    margin: 0.125rem 1.75rem 1.25rem 0;
}

/* ── Horizontal variant ──────────────────────────────────────────────────── */
.sacomms-insert--horizontal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 1.75rem 0;
    text-align: center;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .sacomms-insert--vertical {
        width: 220px;
        margin-right: 1.5rem;
    }
}

@media (max-width: 768px) {
    .sacomms-insert--vertical {
        width: 190px;
        margin-right: 1.25rem;
    }
}

@media (max-width: 650px) {
    /* Collapse float — insert becomes a full-width block on small mobile */
    .sacomms-insert--vertical {
        float: none;
        width: 100%;
        margin: 0 0 1.5rem 0;
    }
}

/* ==========================================================================
   Single Staff Member
   ========================================================================== */

/* Position | Email row */
.staff-meta {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: var(--space-l) !important;
    font-family: var(--font-family-primary) !important;
}

@media (max-width: 700px) {
    .staff-meta {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .staff-meta-separator {
        display: none !important;
    }
}

.staff-position {
    font-weight: 600 !important;
    color: #333 !important;
}

.staff-meta-separator {
    color: #333 !important;
    font-weight: 600 !important;
}

.staff-email {
    color: var(--color-blue-medium) !important;
    font-weight: 600 !important;
}

.staff-email:hover {
    color: var(--color-science-blue) !important;
}

/* Bio section — float layout */
.staff-bio-section::after {
    content: '';
    display: table;
    clear: both;
}

.staff-float-image {
    float: left !important;
    width: 260px !important;
    margin: 0 var(--space-l) var(--space-m) 0 !important;
}

.staff-float-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 7px 7px 7px 70px !important;
}

.staff-bio-content p:first-child {
    margin-top: 0 !important;
}

/* Mobile — stack image above bio */
@media (max-width: 650px) {
    .staff-float-image {
        float: none !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 0 var(--space-m) 0 !important;
    }
}