/* Leadership Drawer
   Styles for [leadership_grid] shortcode markup + the right-side bio drawer.
   Decisions: D-02, D-08, D-09, D-10, D-11, D-12, D-13, D-15.
   Selectors verified against:
     - wp-content/themes/blocksy-child/inc/leadership-grid.php (DOM contract)
     - wp-content/themes/blocksy-child/js/leadership-drawer.js (state classes)
----------------------------------------------- */

/* ---------- Hidden bio source defensive rule ----------
   The bio source <div>s carry the HTML `hidden` attribute. We add a
   redundant CSS rule so a theme override of [hidden] still keeps them
   invisible. Both selectors needed: one for [hidden] being present,
   one in case an aggressive theme reset strips the attribute default. */
.rcc-leader-bio-source[hidden],
.rcc-leader-bio-source {
    display: none !important;
}


/* =======================================================
   SECTION
   ======================================================= */

.rcc-leader-section {
    margin: 0 0 3rem 0;
}

.rcc-leader-section:last-of-type {
    margin-bottom: 0;
}

.rcc-leader-section__title {
    margin: 0 0 1.5rem 0;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
}


/* =======================================================
   GRID (D-11: 3 → 2 → 1 at Blocksy breakpoints)
   ======================================================= */

.rcc-leader-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    /* stretch so all cards in a row share the tallest card's height,
       letting .rcc-leader-card__body (flex-grow: 1) absorb extra space
       when names/positions wrap to multiple lines. */
    align-items: stretch;
}

/* Blocksy tablet breakpoint */
@media (max-width: 999.98px) {
    .rcc-leader-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Blocksy mobile breakpoint */
@media (max-width: 689.98px) {
    .rcc-leader-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}


/* =======================================================
   CARD (D-02: same style across all 3 sections)
   ======================================================= */

.rcc-leader-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 200ms ease-out;
}

/* Cards with bio content are the drawer trigger (article[role=button]). */
.rcc-leader-card--has-bio {
    cursor: pointer;
}

/* Hover/keyboard-focus on a clickable card — accentuate shadow only,
   no transform (so cards do not move on hover per design). */
.rcc-leader-card--has-bio:hover,
.rcc-leader-card--has-bio:focus-visible {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.rcc-leader-card--has-bio:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 0 0 3px rgba(0, 102, 204, 0.4);
}

/* ---------- Photo (D-08: square 1:1, object-fit cover) ---------- */
.rcc-leader-card__photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f3f3f3;
    flex-shrink: 0;
}

/* Target both the class on the <img> element and the generic img child,
   so the rule survives if wp_get_attachment_image adds extra markup. */
.rcc-leader-card__photo img,
.rcc-leader-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Favour the face over the chest when the source is portrait. */
    object-position: center top;
    display: block;
}

/* ---------- Hover plus-circle (only rendered on cards with bio) ----------
   60x60 circle pinned to the top-right of the photo. Hidden until card
   hover/focus. Uses the Blocksy theme palette color 1 for the fill and
   white for the plus icon. */
.rcc-leader-card__plus {
    --rcc-plus-bg: var(--theme-palette-color-1, #1a73e8);
    position: absolute;
    top: 12px;
    right: 12px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--rcc-plus-bg);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 180ms ease-out, transform 180ms ease-out;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.rcc-leader-card--has-bio:hover .rcc-leader-card__plus,
.rcc-leader-card--has-bio:focus-visible .rcc-leader-card__plus {
    opacity: 1;
    transform: scale(1);
}

.rcc-leader-icon--plus {
    width: 24px;
    height: 24px;
}

/* ---------- Body (D-09: name bold, position smaller + muted)
   Two-column row: text on the left, email icon right-aligned. */
.rcc-leader-card__body {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1rem;
    flex-grow: 1;
}

.rcc-leader-card__text {
    flex: 1 1 auto;
    min-width: 0;
}

.rcc-leader-card__name {
    margin: 0 0 0.25rem 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
}

.rcc-leader-card__position {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.65);
}

/* Shared icon-button treatment — email icon on card + drawer email link
   share the bg-on-hover pattern. */
.rcc-leader-card__email {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 150ms ease-out, color 150ms ease-out;
}

.rcc-leader-card__email:hover,
.rcc-leader-card__email:focus-visible {
    background-color: rgba(0, 0, 0, 0.06);
    color: inherit;
}

.rcc-leader-card__email:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.4);
}

/* rcc-leader-icon SVG — used on card email link and drawer email link */
.rcc-leader-icon {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}


/* =======================================================
   DRAWER (D-12, D-13, D-14, D-15)
   =======================================================

   State contract (leadership-drawer.js):
     - On open:  drawer.hidden = false  →  classList.add('is-open')
     - On close: classList.remove('is-open')  →  drawer.hidden = true

   The `#rcc-leader-drawer` node occupies the full viewport at all times
   (position: fixed; inset: 0) but is pointer-event-transparent when not
   open, so the rest of the page remains fully interactive. */

/* Root overlay container */
#rcc-leader-drawer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    /* Off by default — page stays clickable. JS sets hidden attribute too. */
    pointer-events: none;
}

#rcc-leader-drawer.is-open {
    pointer-events: auto;
}

/* Explicit display:none when the HTML `hidden` attribute is present.
   position:fixed can interact oddly with theme resets that strip the
   [hidden] UA stylesheet rule. This guarantees correct behaviour. */
#rcc-leader-drawer[hidden] {
    display: none;
}

/* ---------- Scrim (D-14: click-to-dismiss, rgba(0,0,0,0.5)) ---------- */
.rcc-drawer-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 250ms cubic-bezier(0.4, 0.0, 0.2, 1);
    pointer-events: none;
}

#rcc-leader-drawer.is-open .rcc-drawer-scrim {
    opacity: 1;
    pointer-events: auto;  /* Allows scrim click to close. JS listens on scrim. */
}

/* ---------- Panel (D-12: 480px desktop; D-13: 90vw mobile; slides from right) ---------- */
.rcc-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 480px;           /* D-12: fixed 480px on desktop */
    max-width: 100vw;
    height: 100%;
    background: #fff;
    /* Pin Blocksy typography explicitly so drawer text matches card text
       regardless of drawer's DOM position (JS appends drawer to <body> to
       escape Blocksy's overflow-clipped containers). */
    font-family: var(--theme-font-family, inherit);
    color: var(--theme-text-color, inherit);
    /* Off-screen to the right; compositor-only property — no layout/paint cost. */
    transform: translateX(100%);
    transition: transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: transform;
    overflow-y: auto;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
    outline: none;  /* tabindex="-1" — suppress default focus ring on panel */
}

#rcc-leader-drawer.is-open .rcc-drawer-panel {
    transform: translateX(0);
}

/* D-13: 90vw on mobile — still a side drawer, NOT full-screen */
@media (max-width: 689.98px) {
    .rcc-drawer-panel {
        width: 90vw;
    }
}

/* ---------- Close button (label + X, same hover treatment as email icon) ----------
   Padding matches the implicit 8px inset of the 36x36 icon button on the card
   so the visual rhythm carries through (icon ≈ 20px, padding ≈ 8px each side). */
.rcc-drawer-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 4px;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    transition: background-color 150ms ease-out;
    z-index: 2;
}

.rcc-drawer-close__label {
    line-height: 1;
}

.rcc-drawer-close:hover,
.rcc-drawer-close:focus-visible {
    background-color: rgba(0, 0, 0, 0.06);
}

.rcc-drawer-close:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.4);
}

/* ---------- Content area (D-15: photo, name, position, email, bio) ---------- */
.rcc-drawer-content {
    /* top padding clears the absolutely-positioned close button */
    padding: 4rem 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Photo */
.rcc-drawer-photo {
    width: 100%;
    max-width: 240px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    border-radius: 6px;
    background: #f3f3f3;
    display: block;
}

/* Header row (mirrors .rcc-leader-card__body: text left, email right) */
.rcc-drawer-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.rcc-drawer-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Name — matches .rcc-leader-card__name */
.rcc-drawer-name {
    margin: 0 0 0.25rem 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
}

/* Position / title — matches .rcc-leader-card__position */
.rcc-drawer-position {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    line-height: 1.4;
}

/* Email link (icon-only, same treatment as card email) */
.rcc-drawer-email {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
    align-self: flex-start;
    flex-shrink: 0;
    transition: background-color 150ms ease-out;
}

.rcc-drawer-email:hover,
.rcc-drawer-email:focus-visible {
    background-color: rgba(0, 0, 0, 0.06);
}

.rcc-drawer-email:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.4);
}

/* Bio / post content */
.rcc-drawer-bio {
    margin-top: 0.5rem;
    font-size: 1rem;
    line-height: 1.6;
}

/* Normalise paragraph spacing inside the bio (wp_kses_post output may add
   top margin to the first paragraph and trailing margin to the last). */
.rcc-drawer-bio p:first-child {
    margin-top: 0;
}

.rcc-drawer-bio p:last-child {
    margin-bottom: 0;
}


/* =======================================================
   REDUCED MOTION (D-15 / a11y — prefers-reduced-motion)
   Disables all transitions and the card hover-lift for users
   who have requested reduced motion in their OS settings.
   ======================================================= */

@media (prefers-reduced-motion: reduce) {
    .rcc-drawer-panel,
    .rcc-drawer-scrim,
    .rcc-leader-card,
    .rcc-leader-card__email,
    .rcc-leader-card__plus,
    .rcc-drawer-close,
    .rcc-drawer-email {
        transition: none !important;
    }

    .rcc-leader-card__plus {
        transform: none;
    }
}