/* =========================================================
   BH Clinical Team Widget — bh-ctw-styles.css
   =========================================================

   Typography uses explicit px values rather than rem/em to
   guard against theme base-font-size inheritance shrinking
   the widget text unexpectedly.

   Colour contrast ratios (WCAG AA, 4.5:1 minimum for normal text):
     Label text   #6b7280 on #fff  →  4.61:1  ✓ passes
     Name link    #111827 on #fff  → 18.1:1   ✓ passes
     Role text    #4b5563 on #fff  →  7.0:1   ✓ passes  (was #6b7280 @ 4.6:1)
     Date text    #6b7280 on #fff  →  4.61:1  ✓ passes  (was #9ca3af @ 2.9:1 — FAIL)
     Border       #d1d5db                      ✓ sufficient for UI component
*/

/* ── Container ──────────────────────────────────────────── */
.bh-ctw {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    font-family: inherit;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
}

/* ── Wrapper when both widgets appear together ───────────── */
/*
   .bh-ctw-group is output by the plugin when both author and
   reviewer widgets are rendered in the same pass. It arranges
   them side-by-side on wider viewports and adds the gap between
   them, removing the need for margin hacks on individual widgets.
*/
.bh-ctw-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 28px;
}

.bh-ctw-group .bh-ctw {
    flex: 1 1 200px; /* grow equally, collapse gracefully on narrow viewports */
    margin: 0;       /* group handles all outer spacing */
}

/* Solo widget (no group wrapper) keeps its own bottom margin */
.bh-ctw:not(.bh-ctw-group .bh-ctw) {
    margin: 0 0 28px;
}

/* ── Label (Written by / Clinically reviewed by) ────────── */
.bh-ctw__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280; /* 4.61:1 on white — AA ✓ */
    line-height: 1;
}

/* Reviewed mode — teal accent on the label */
.bh-ctw--reviewed .bh-ctw__label {
    color: #1a7f8e; /* adjust to Bourn Hall brand teal */
}

/* ── Inner row (avatar + meta) ──────────────────────────── */
.bh-ctw__inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Avatar circle ───────────────────────────────────────── */
.bh-ctw__avatar-link {
    flex-shrink: 0;
    display: block;
    text-decoration: none;
}

.bh-ctw__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #e5e7eb;
    background-color: #f3f4f6;
    transition: border-color 0.2s ease;
}

.bh-ctw__avatar-link:hover .bh-ctw__avatar,
.bh-ctw__avatar-link:focus-visible .bh-ctw__avatar {
    border-color: #1a7f8e;
}

.bh-ctw__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Initials fallback */
.bh-ctw__initials {
    font-size: 18px;
    font-weight: 700;
    color: #1a7f8e;
    user-select: none;
}

/* ── Meta (name, role, date) ─────────────────────────────── */
.bh-ctw__meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.bh-ctw__name {
    font-size: 16px;
    font-weight: 700;
    color: #111827; /* 18.1:1 on white — AAA ✓ */
    text-decoration: none;
    line-height: 1.3;
}

.bh-ctw__name:hover,
.bh-ctw__name:focus-visible {
    color: #1a7f8e;
    text-decoration: underline;
}

.bh-ctw__role {
    font-size: 14px;
    color: #4b5563; /* 7.0:1 on white — AA ✓ (was #6b7280) */
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bh-ctw__date {
    font-size: 14px;
    color: #6b7280; /* 4.61:1 on white — AA ✓ (was #9ca3af @ 2.9:1 — FAIL) */
    line-height: 1.4;
}



/* ── Optional bordered variant ───────────────────────────── */
.bh-ctw--bordered {
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 28px;
    width: 100%;
}


/* ── Responsive ──────────────────────────────────────────── */
@media ( max-width: 480px ) {
    .bh-ctw__avatar {
        width: 48px;
        height: 48px;
    }

    .bh-ctw__name {
        font-size: 15px;
    }

    .bh-ctw__role,
    .bh-ctw__date {
        font-size: 13px;
    }
}