/* director.css — section padding and heading style come from all.css.
   Everything below is scoped to #director-profile. */

#GlobalNavWrapper {
    --hero-image: url("../../assets/sgmh-flowers-01.jpg");
}

#director-profile {

    .director-layout {
        display: grid;
        grid-template-columns: minmax(min(100%, 320px), 380px) minmax(0, 1fr);
        gap: var(--space-xl);
        align-items: start;

        @media screen and (max-width: 900px) {
            grid-template-columns: 1fr;
        }
    }

    .director-identity {
        display: flex;
        flex-direction: column;
        gap: 6px;

        /* A name, not a section heading — smaller and tighter than default. */
        h2 {
            margin: var(--space-sm) 0 0;
            font-size: 1.85rem;
            line-height: 1.1;
            letter-spacing: normal;
        }

        .director-role {
            margin: 0;
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .director-contact {
            margin: 0;
            font-size: 0.9rem;
        }
    }

    .director-portrait {
        position: relative;
        overflow: hidden;
        aspect-ratio: 4 / 5;
        border-radius: var(--standard-border-radius);
        box-shadow: var(--medium-box-shadow);

        img {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .director-body {
        display: flex;
        flex-direction: column;
        gap: var(--space-xl);
    }

    /* Pull-quote statement on navy */
    .director-statement {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        margin: 0;
        padding: var(--space-lg);
        border-left: 6px solid var(--titan-orange);
        color: white;
        background-color: var(--titan-blue);

        .eyebrow {
            color: var(--titan-orange-ati);
        }

        p {
            margin: 0;
            font-size: 1rem;
            line-height: 1.7;
        }

        .statement-lead {
            font-size: 1.4rem;
            font-weight: 700;
            line-height: 1.35;
        }

        cite {
            font-style: normal;
            font-weight: 700;
        }

        a {
            color: white;
        }
    }

    .director-bio {
        display: flex;
        flex-direction: column;
        gap: 14px;

        h3 {
            margin: 0;
            color: var(--titan-blue);
            font-size: 1.4rem;
            font-weight: 900;
        }

        p {
            margin: 0;
            font-size: 1rem;
            line-height: 1.7;
        }
    }
}