/**
directory/**
 * Single Directory Entry — Pro Styles
 *
 * Layout (≥640px): photo left, two stacked detail cards right.
 * Layout (<640px):  all stacked.
 *
 * Card backgrounds use rgba so they stay subtle on both light and dark themes.
 * Typography and color inherit from the active theme throughout.
 *
 * @package AllyBlocksPro
 */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */

.atb-dir-entry-wrap {
    max-width: 80%;
    margin-inline: auto;
    padding: 0rem 1rem 3rem;
}

/* ── Header: name, subtitle, unit badge ───────────────────────────────────── */

.atb-dir-entry__header {
    margin-bottom: 2.5rem;
    text-align: center;
}

.atb-dir-entry__name {
    margin-bottom: 0.25rem;
}

/* Theme override — some themes force positioning or color on h1 */
h1.atb-dir-entry__name {
    bottom: unset;
    color: inherit;
    background-color: unset;
}

.atb-dir-entry__designation,
.atb-dir-entry__subtitle {
    margin: 0;
    font-size: 1.1em;
    text-align: center;
    opacity: 0.75;
}

.atb-dir-entry__unit-badge {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.3em 1em;
    border: 1px solid currentColor;
    border-radius: 2em;   /* pill shape */
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.8;
}

/* Thin rule under the header to visually separate it from the body */
.atb-dir-entry__header::after {
    content: '';
    display: block;
    width: 4rem;
    height: 2px;
    background: currentColor;
    opacity: 0.2;
    margin: 1.5rem auto 0;
}

/* ── Body: photo + info column ────────────────────────────────────────────── */

.atb-dir-entry__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

@media ( min-width: 640px ) {
    .atb-dir-entry__body {
        grid-template-columns: minmax( 250px, 430px ) 1fr;
        align-items: start;
        gap: 2rem;
    }
}

/* ── Photo ────────────────────────────────────────────────────────────────── */

.atb-dir-entry__photo {
    margin: 0;
}

.atb-dir-entry__photo-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    /* Subtle shadow to lift the photo off the page */
    box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.12 );
}

/* ── Info column: stacked detail cards ────────────────────────────────────── */

.atb-dir-entry__info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Detail group card ────────────────────────────────────────────────────── */

.atb-dir-entry__detail-group {
    padding: 1.25rem 1.5rem 1.5rem;
    border-radius: 6px;
    background-color: rgba( 0, 0, 0, 0.03 );
    border: 1px solid rgba( 0, 0, 0, 0.08 );
    /* Subtle lift */
    box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.06 );
}

/* Group heading — small caps label, not competing with h1 */
.atb-dir-entry__group-heading {
    margin: 0 0 1rem 0;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba( 0, 0, 0, 0.12 );
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ── Details list (inside each card) ─────────────────────────────────────── */

.atb-dir-entry__details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1.25rem;
    margin: 0;
    align-content: start;
}

.atb-dir-entry__dt {
    font-weight: 600;
    font-size: 0.9em;
    white-space: nowrap;
    /* Align label text to the top of multi-line values */
    padding-top: 0.05em;
}

.atb-dir-entry__dd {
    margin: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

.atb-dir-entry__dd a {
    text-decoration: underline; /* WCAG 1.4.1 non-color indicator */
}

.atb-dir-entry__dd a:hover {
    text-decoration: none;
}

.atb-dir-entry__dd a:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Description (post content) ───────────────────────────────────────────── */

.atb-dir-entry__description {
    margin-bottom: 0;
    padding-top: 2.4rem;
    /* Faint top rule separating description from the body grid */
    border-top: 1px solid rgba( 0, 0, 0, 0.08 );
}

.atb-dir-entry__description img {
    max-width: 100%;
    height: auto;
}

/* ── Back link ────────────────────────────────────────────────────────────── */

.atb-dir-entry__back-nav {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba( 0, 0, 0, 0.12 );
}

.atb-dir-entry__back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.95em;
    font-weight: 600;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.atb-dir-entry__back-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.atb-dir-entry__back-link:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
    border-radius: 2px;
    opacity: 1;
}