/* ==========================================
   CTSFW Person Card – Teaser (matches mockups)
   PRIORITY over Event List CSS
   ========================================== */

.ctsfw-person-card.ctsfw-person-card--teaser {
    --navy: #001846;
    --maroon: #7b1824;
    --eggshell: #f6f4ee;
    --ink: #111827;
    --line-dark: rgba(255, 255, 255, .7);
    --line-light: #111827;

    font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--navy);
    color: var(--eggshell);
}

/* LIGHT/DARK shells (image-first overrides take precedence) */
.ctsfw-person-card.theme-light {
    background: #ffffff;
    color: var(--navy);
}

.ctsfw-person-card.theme-dark {
    background: var(--navy);
    color: var(--eggshell);
}

/* Two-column row similar to your mockups */
.ctsfw-person-card__row {
    display: grid;
    grid-template-columns: 175px 1fr;
    /* image | text */
    gap: 2.5rem;
    align-items: start;
    /* padding: 2.25rem 2.75rem; */
}

@media (max-width: 500px) {
    .ctsfw-person-card__row {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        /* padding: 1.5rem; */
    }
}

/* IMAGE column — always left, full-height crop */
.ctsfw-person-card__image {
    overflow: hidden;
    background: var(--navy);
}

.ctsfw-person-card.theme-light .ctsfw-person-card__image {
    background: #fff;
}

.ctsfw-person-card__img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 420px;
    /* keeps hero look without runaway height */
    object-fit: cover;
}

.ctsfw-person-card__img--placeholder {
    aspect-ratio: 4/5;
    background: repeating-linear-gradient(45deg,
            rgba(0, 0, 0, .08), rgba(0, 0, 0, .08) 12px,
            rgba(0, 0, 0, .02) 12px, rgba(0, 0, 0, .02) 24px);
}

/* BODY column */
.ctsfw-person-card__body {
    min-width: 0;
}

/* Name — large, weighty; light vs dark colors per mockups */
.ctsfw-person-card__name {
    margin: 0 0 0.75rem 0;
    font-size: clamp(1.8rem, 2.4vw, 1.5rem);
    line-height: 1.1;
    font-weight: 400;
    color: currentColor;
}

/* Position/title line */
.ctsfw-person-card__position {
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.35;
    margin: 0 0 1rem 0;
    opacity: .92;
}

/* Horizontal rule between title and contacts */
.ctsfw-person-card__rule {
    border: 0;
    height: 2px;
    margin: 0.75rem 0 1rem 0;
    background: var(--line-dark);
}

.theme-light .ctsfw-person-card__rule {
    background: var(--line-light);
}

/* Contacts row: phone | email */
.ctsfw-person-card__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    font-size: clamp(1rem, 1.05vw, 1.25rem);
    font-weight: 400;
}

/* Divider pipe matches mockups */
.ctsfw-person-card__pipe {
    opacity: .9;
}

/* Link colors per theme (mockups: maroon links in light) */
.ctsfw-person-card__contact-link {
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.theme-dark .ctsfw-person-card__contact-link {
    color: #dbe7ff;
}

.theme-light .ctsfw-person-card__contact-link {
    color: var(--maroon);
}

.ctsfw-person-card__contact-link:hover,
.ctsfw-person-card__contact-link:focus {
    border-bottom-color: currentColor;
}

/* Ensure we beat event list styles if both loaded */
.ctsfw-event .ctsfw-person-card.ctsfw-person-card--teaser,
.ctsfw-events .ctsfw-person-card.ctsfw-person-card--teaser {
    all: revert;
    font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--navy);
    color: var(--eggshell);
}

.ctsfw-person-card--notfound {
    padding: .75rem 1rem;
    border: 1px dashed rgba(0, 0, 0, .2);
    background: #fffaf2;
    color: #7b1824;
}

/* Titles block: list styles for multiple roles */
.ctsfw-person-card__position {
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.35;
    margin: 0 0 1rem 0;
    opacity: .92;
}

/* If a UL is present, format as clean stacked lines (no bullets) */
.ctsfw-person-card__position--list ul,
.ctsfw-person-card__position-list {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
}

.ctsfw-person-card__position--list li,
.ctsfw-person-card__position-list li {
    margin: 0 0 .35rem 0;
    padding: 0;
}

/* Optional: subtle divider feel like your mockups (light/dark already handled by rule) */
.theme-light .ctsfw-person-card__position--list li,
.theme-light .ctsfw-person-card__position {
    color: #001846;
}

.theme-dark .ctsfw-person-card__position--list li,
.theme-dark .ctsfw-person-card__position {
    color: #f6f4ee;
    opacity: .92;
}