/*
==========================================================
PROFILES BLOCK — profiles.css
==========================================================
WHAT IT IS:
A profile listing block displaying people with optional
headshots, names, bios, and resident-specific data.

WHAT IT DOES:
Displays people as a List (one box, a row per person —
the usual look) or a Grid of cards. Each person: optional
photo (real image, "Keep this part in view"), name, role,
short introduction; Detailed style adds extra details
(Label + Detail) and the full bio under the introduction
(in full or behind "Read full bio", profiles.js); optional email / phone / link. People
without photos get no photo space. BATCH_8_PLAN.md §38.

HOW TO USE:
1. In the WordPress block editor add the "Profiles"
   block to any page or post.
2. Choose the display type — standard bio or resident.
3. Add as many profiles as needed using the repeater.
4. Each profile has: Image, Name, Copy / Resident Data.
5. Save and preview the page.

All values use boilerplate CSS tokens from style.css.
==========================================================
*/

.custom_profiles {
    --pr-space-top: var(--space-8);
    --pr-space-bottom: var(--space-8);
    margin-top: var(--pr-space-top);
    margin-bottom: var(--pr-space-bottom);
}

/* Layout follows the block's own width (§38). */
.custom_profiles_wrapper {
    container: profiles / inline-size;
}

.custom_profiles_card {
    border: 1px solid var(--color-accent);
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Profile row */
.custom_profiles .profile {
    padding: var(--space-3) var(--space-3) var(--space-3) 150px;
    min-height: 140px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid var(--color-border);
}

.custom_profiles .profile.noimage {
    padding: var(--space-3);
    min-height: 0;
}

.custom_profiles .profile:last-child {
    border-bottom: none;
}

/* Profile image — a real <img> filling the same 120px square as before
   (cropped, never stretched; "Keep this part in view" sets object-position). */
.custom_profiles .profile_image {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    height: 120px;
    width: 120px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.custom_profiles .profile_img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Profile content */
.custom_profiles .profile_content {
    padding: var(--space-3);
}

.custom_profiles .profile_content h3 {
    margin: 0 0 var(--space-3) 0;
    padding: 0;
    color: var(--color-primary);
    font-size: var(--text-lg);
}

.custom_profiles .profile_content p {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin-bottom: 0;
}

.custom_profiles .profile_content > :last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Narrow (a phone or a narrow Column): photo above the text as a 160px
   square — faces aren't cut off by a wide strip (§38). Browsers without
   container queries use the same rule by window width. */
@container profiles (max-width: 559px) {
    .custom_profiles .profile {
        padding: var(--space-3);
        min-height: 0;
    }

    .custom_profiles .profile_image {
        position: relative;
        top: auto;
        left: auto;
        margin: var(--space-3) 0 0 var(--space-3);
        width: 160px;
        height: 160px;
    }
}

@supports not (container-type: inline-size) {
    @media (max-width: 768px) {
        .custom_profiles .profile {
            padding: var(--space-3);
            min-height: 0;
        }

        .custom_profiles .profile_image {
            position: relative;
            top: auto;
            left: auto;
            margin: var(--space-3) 0 0 var(--space-3);
            width: 160px;
            height: 160px;
        }
    }
}

/* ==========================================================
   Batch 8H — Profiles (BATCH_8_PLAN.md §38)
   Defaults reproduce the look before: List, no heading, no colour.
   ========================================================== */

/* ── Role, details, bio, contact ───────────────────────── */
.custom_profiles .profile_content .profile_role {
    margin: calc(-1 * var(--space-2)) 0 var(--space-3) 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-text);
}

.custom_profiles .profile_content .profile_details + .profile_bio,
.custom_profiles .profile_content .profile_bio + .profile_more,
.custom_profiles .profile_content .profile_bio + .profile_full_bio,
.custom_profiles .profile_content .profile_more + .profile_more_toggle {
    margin-top: var(--space-3);
}

.custom_profiles .profile_contact {
    list-style: none;
    margin: var(--space-3) 0 0 0;
    padding: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.custom_profiles .profile_contact a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    overflow-wrap: anywhere;
}

/* ── Expandable long bio ───────────────────────────────── */
.custom_profiles .profile_more_toggle {
    appearance: none;
    display: inline-block;
    margin: var(--space-2) 0 0 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-accent);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.custom_profiles .profile_more_toggle:hover {
    background: transparent;
    color: var(--color-accent-hover);
}

.custom_profiles .profile_more_toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.custom_profiles .profile_more[hidden],
.custom_profiles .profile_more_toggle[hidden] {
    display: none;
}

/* Screen-reader-only words. */
.profile_sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Grid layout ────────────────────────────────────────────
   Each person on their own card. At most 2 / 3 / 4 per row, fewer when
   the space is narrow (cards never narrower than 220px). Cards in a row
   grow together; an opened bio grows its row — nothing overlaps. */
.custom_profiles_cols_2 { --pr-cols: 2; }
.custom_profiles_cols_3 { --pr-cols: 3; }
.custom_profiles_cols_4 { --pr-cols: 4; }

.custom_profiles_layout_grid .custom_profiles_card {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fill, minmax(max(220px, calc((100% - (var(--pr-cols, 3) - 1) * var(--space-5)) / var(--pr-cols, 3))), 1fr));
    border: none;
    border-radius: 0;
    background: none;
    overflow: visible;
}

.custom_profiles_layout_grid .profile,
.custom_profiles_layout_grid .profile.noimage {
    padding: var(--space-5);
    min-height: 0;
    justify-content: flex-start;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
}

.custom_profiles_layout_grid .profile:last-child {
    border-bottom: 1px solid var(--color-accent);
}

.custom_profiles_layout_grid .profile_image,
.custom_profiles_layout_grid .profile .profile_image {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 0 var(--space-3) 0;
}

.custom_profiles_layout_grid .profile_content {
    padding: 0;
}

/* ── Heading area ───────────────────────────────────────── */
.custom_profiles_head {
    margin: 0 0 var(--space-6) 0;
}

.custom_profiles_align_center .custom_profiles_head { text-align: center; }
.custom_profiles_align_right  .custom_profiles_head { text-align: right; }

.custom_profiles_label {
    margin: 0 0 var(--space-2) 0;
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.custom_profiles_heading {
    margin: 0 0 var(--space-2) 0;
    color: var(--color-primary);
}

.custom_profiles_intro {
    margin: 0;
    max-width: 720px;
    color: var(--color-text);
    line-height: var(--leading-relaxed);
}

.custom_profiles_align_center .custom_profiles_intro { margin-left: auto; margin-right: auto; }
.custom_profiles_align_right  .custom_profiles_intro { margin-left: auto; }

/* Label look: Rounded tag (shared §28 pattern).
   BOILERPLATE NOTE: the same rule lives in style.css §10c. Kept here so
   this block works when copied to a new project on its own. */
.custom_profiles_label.custom_profiles_label_pill {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid currentColor;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    line-height: var(--leading-tight);
}

/* ── Section background (shared six-choice pattern) ────────
   The profile cards keep their own light surface and text colours. */
.custom_profiles.custom_profiles_sbg {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: max(var(--pr-space-top), var(--space-8));
    padding-bottom: max(var(--pr-space-bottom), var(--space-8));
}

.custom_profiles_sbg_background     { background-color: var(--color-bg); }
.custom_profiles_sbg_alt_background { background-color: var(--color-bg-alt); }
.custom_profiles_sbg_dark           { background-color: var(--color-bg-dark); }
.custom_profiles_sbg_accent         { background-color: var(--color-accent); }
.custom_profiles_sbg_custom         { background-color: var(--custom_profiles-section-bg, var(--color-bg)); }

/* On a Light alternate section the gray cards get the page colour. */
.custom_profiles_sbg_alt_background .custom_profiles_card,
.custom_profiles_sbg_alt_background.custom_profiles_layout_grid .profile {
    background: var(--color-bg);
}

.custom_profiles_sbg_alt_background.custom_profiles_layout_grid .custom_profiles_card {
    background: none;
}

.custom_profiles_sbg_text_light .custom_profiles_heading,
.custom_profiles_sbg_text_light .custom_profiles_label {
    color: var(--color-text-inverse);
}

.custom_profiles_sbg_text_light .custom_profiles_intro {
    color: var(--color-text-inverse-soft);
}

.custom_profiles_sbg_text_light .custom_profiles_intro a {
    color: inherit;
    text-decoration: underline;
}

/* ── Space above / below (shared standard) ───────────────── */
.custom_profiles.custom_profiles_space_top_none     { --pr-space-top: 0px; }
.custom_profiles.custom_profiles_space_top_small    { --pr-space-top: var(--space-4); }
.custom_profiles.custom_profiles_space_top_large    { --pr-space-top: var(--space-16); }
.custom_profiles.custom_profiles_space_bottom_none  { --pr-space-bottom: 0px; }
.custom_profiles.custom_profiles_space_bottom_small { --pr-space-bottom: var(--space-4); }
.custom_profiles.custom_profiles_space_bottom_large { --pr-space-bottom: var(--space-16); }

/* ── Editor-only messages ───────────────────────────────── */
.custom_profiles_preview_empty,
.custom_profiles_preview_note {
    box-sizing: border-box;
    margin: var(--space-4) auto 0;
    padding: var(--space-3) var(--space-6);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: var(--text-sm);
}

.custom_profiles_preview_empty {
    margin: var(--space-4) auto;
    text-align: center;
}

/* ==========================================================
   Content look + card background (BATCH_8_PLAN.md §40)
   Card (default) keeps the usual card; a chosen Card background fills it
   (and drops the gray border). Flat removes fill, border, shadow and radius;
   the content sits on the section background. custom_profiles_on_dark is added when the
   surface directly behind the content is dark (a Dark / Brand / light-text
   custom card, or Flat on such a section): text, links, labels, dividers and
   focus outlines switch to light. custom_profiles_on_accent: buttons stay visible on the
   brand colour. Card settings stay saved while Flat is chosen.
   ========================================================== */

/* List: the one box around everyone. Grid: each person's card. */
.custom_profiles.custom_profiles_look_flat.custom_profiles_layout_list .custom_profiles_card,
.custom_profiles.custom_profiles_look_flat.custom_profiles_layout_grid .profile {
    background: transparent;
    border-color: transparent;
    border-radius: 0;
}

.custom_profiles.custom_profiles_layout_list.custom_profiles_cbg_background .custom_profiles_card,
.custom_profiles.custom_profiles_layout_grid.custom_profiles_cbg_background .profile { background-color: var(--color-bg); border-color: transparent; }
.custom_profiles.custom_profiles_layout_list.custom_profiles_cbg_alt_background .custom_profiles_card,
.custom_profiles.custom_profiles_layout_grid.custom_profiles_cbg_alt_background .profile { background-color: var(--color-bg-alt); border-color: transparent; }
.custom_profiles.custom_profiles_layout_list.custom_profiles_cbg_dark .custom_profiles_card,
.custom_profiles.custom_profiles_layout_grid.custom_profiles_cbg_dark .profile { background-color: var(--color-bg-dark); border-color: transparent; }
.custom_profiles.custom_profiles_layout_list.custom_profiles_cbg_accent .custom_profiles_card,
.custom_profiles.custom_profiles_layout_grid.custom_profiles_cbg_accent .profile { background-color: var(--color-accent); border-color: transparent; }
.custom_profiles.custom_profiles_layout_list.custom_profiles_cbg_custom .custom_profiles_card,
.custom_profiles.custom_profiles_layout_grid.custom_profiles_cbg_custom .profile { background-color: var(--custom_profiles-card-bg, var(--color-bg-alt)); border-color: transparent; }

.custom_profiles.custom_profiles_on_dark .profile_content h3,
.custom_profiles.custom_profiles_on_dark .profile_content .profile_role,
.custom_profiles.custom_profiles_on_dark .profile_contact a,
.custom_profiles.custom_profiles_on_dark .profile_more_toggle,
.custom_profiles.custom_profiles_on_dark .profile_more_toggle:hover {
    color: var(--color-text-inverse);
}

.custom_profiles.custom_profiles_on_dark .profile_content p {
    color: var(--color-text-inverse-soft);
}

.custom_profiles.custom_profiles_on_dark .profile_content .profile_role {
    color: var(--color-text-inverse);
}

.custom_profiles.custom_profiles_on_dark .profile {
    border-bottom-color: color-mix(in srgb, var(--color-text-inverse) 25%, transparent);
}

.custom_profiles.custom_profiles_on_dark .profile_more_toggle:focus-visible,
.custom_profiles.custom_profiles_on_dark .profile_contact a:focus-visible {
    outline: 2px solid var(--color-text-inverse);
    outline-offset: 3px;
}