@import url("../components/academic-hierarchy-explorer.css");

/* =========================================================
   Academic Division Template
   Intended location: /_assets/css/main-theme/current/templates/academic-division.css
   Pass 1.0
   ========================================================= */

.academic-division,
.academic-division *,
.academic-division *::before,
.academic-division *::after {
    box-sizing: border-box;
}

.academic-division {
    --division-card-bg: color-mix(in srgb, var(--color-surface) 82%, white);
    color: var(--color-text);
}

.academic-division__hero {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
    padding: clamp(var(--space-xl), 6vw, var(--space-3xl));
    border-block-end: 1px solid var(--color-border);
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--color-gold) 28%, transparent), transparent 34rem), linear-gradient(135deg, var(--color-surface), white);
}

@media (min-width: 900px) {
    .academic-division__hero--image_right,
    .academic-division__hero--default:has(.academic-division__hero-media) {
        grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
    }

    .academic-division__hero--image_left {
        grid-template-columns: minmax(18rem, 0.9fr) minmax(0, 1.1fr);
    }

        .academic-division__hero--image_left .academic-division__hero-media {
            grid-column: 1;
            grid-row: 1;
        }

        .academic-division__hero--image_left .academic-division__hero-content {
            grid-column: 2;
        }
}

.academic-division__eyebrow {
    margin: 0 0 var(--space-sm);
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.academic-division__title {
    max-width: 16ch;
    margin: 0;
    color: var(--color-text);
    font-size: clamp(2.1rem, 7vw, 4.25rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.academic-division__tagline {
    max-width: 50rem;
    margin: var(--space-md) 0 0;
    color: var(--color-primary);
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: var(--fw-bold);
    line-height: 1.35;
}

.academic-division__hero-intro {
    /*! max-width: 62rem; */
    margin-top: var(--space-md);
    color: var(--color-muted);
    font-size: 1.08rem;
    line-height: 1.7;
}

.academic-division__hero-media {
    margin: 0;
}

.academic-division__hero-image {
    display: block;
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-xl);
    object-fit: cover;
    box-shadow: var(--shadow-md);
}

.academic-division__stats {
    display: grid;
    gap: var(--space-sm);
    width: min(100% - 2rem, var(--container-lg));
    margin: calc(var(--space-xl) * -0.5) auto var(--space-xl);
}

@media (min-width: 700px) {
    .academic-division__stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.academic-division__stat {
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: white;
    box-shadow: var(--shadow-sm);
}

    .academic-division__stat strong {
        display: block;
        color: var(--color-primary);
        font-size: clamp(1.5rem, 4vw, 2.2rem);
        line-height: 1;
    }

    .academic-division__stat span {
        display: block;
        margin-top: var(--space-xs);
        color: var(--color-muted);
        font-weight: var(--fw-bold);
    }

.academic-division__layout {
    display: grid;
    gap: var(--space-xl);
    width: min(100% - 2rem, var(--container-lg));
    margin-inline: auto;
    padding-block: var(--space-xl) var(--space-3xl);
}

@media (min-width: 1024px) {
    .academic-division__layout {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
        align-items: start;
    }
}

.academic-division__main,
.academic-division__aside {
    min-width: 0;
}

.academic-division__main {
    display: grid;
    gap: var(--space-2xl);
}

.academic-division__aside {
    display: grid;
    gap: var(--space-lg);
}

@media (min-width: 1024px) {
    .academic-division__aside {
        position: sticky;
        top: var(--space-lg);
    }
}

.academic-division__section-header {
    max-width: 55rem;
    margin-bottom: var(--space-lg);
}

.academic-division__section-title {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    line-height: 1.08;
}

.academic-division__section-intro {
    margin-top: var(--space-sm);
    color: var(--color-muted);
    line-height: 1.65;
}

.academic-division__overview-grid {
    display: grid;
    gap: var(--space-lg);
}

@media (min-width: 850px) {
    .academic-division__overview-grid {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    }
}

.academic-division__mission-card,
.academic-division__leadership-card,
.academic-division__location-card,
.academic-division__aside-section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    /*! background: var(--division-card-bg); */
    box-shadow: var(--shadow-sm);
}

.academic-division__mission-card {
    /*! padding: var(--space-lg); */
    border-block-start: 0.35rem solid var(--color-gold);
}

    .academic-division__mission-card h3 {
        margin: 0 0 var(--space-xs);
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .academic-division__mission-card p {
        margin: 0 0 var(--space-md);
        color: var(--color-text);
        line-height: 1.6;
    }

        .academic-division__mission-card p:last-child {
            margin-bottom: 0;
        }

.academic-division__leadership-card {
    display: grid;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: linear-gradient(135deg, white, var(--color-surface));
}

@media (min-width: 700px) {
    .academic-division__leadership-card:has(.academic-division__leadership-image) {
        grid-template-columns: 10rem minmax(0, 1fr);
    }
}

.academic-division__leadership-image {
    display: block;
    inline-size: 10rem;
    max-inline-size: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.academic-division__leader {
    margin: var(--space-md) 0 0;
    color: var(--color-text);
}

    .academic-division__leader span {
        display: block;
        color: var(--color-muted);
        font-weight: var(--fw-bold);
    }

.academic-division__department-grid,
.academic-division__quick-link-grid,
.academic-division__location-grid {
    display: grid;
    gap: var(--space-lg);
}

@media (min-width: 760px) {
    .academic-division__department-grid,
    .academic-division__quick-link-grid,
    .academic-division__location-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.academic-division__department-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: white;
    box-shadow: var(--shadow-sm);
}

.academic-division__department-card-body {
    display: grid;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-lg);
}

.academic-division__department-card h3,
.academic-division__location-card h3 {
    margin: 0;
    color: var(--color-text);
    font-size: 1.25rem;
    line-height: 1.2;
}

.academic-division__department-card a,
.academic-division__location-card a,
.academic-division__program-preview a {
    color: var(--color-primary);
    font-weight: var(--fw-bold);
    overflow-wrap: anywhere;
}

.academic-division__department-card p,
.academic-division__location-card p {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.55;
}

.academic-division__program-preview {
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

    .academic-division__program-preview strong {
        color: var(--color-text);
    }

.academic-division__quick-link {
    display: grid;
    gap: var(--space-xs);
    min-width: 0;
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: white;
    color: var(--color-text);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

    .academic-division__quick-link:hover,
    .academic-division__quick-link:focus {
        border-color: var(--color-primary);
        transform: translateY(-1px);
    }

    .academic-division__quick-link strong {
        color: var(--color-primary);
        font-size: 1.05rem;
    }

    .academic-division__quick-link span {
        color: var(--color-muted);
        line-height: 1.5;
    }

.academic-division__location-card {
    padding: var(--space-lg);
}

.academic-division__aside-section {
    padding: var(--space-lg);
}

    .academic-division__aside-section h2 {
        margin: 0 0 var(--space-md);
        color: var(--color-text);
        font-size: 1.15rem;
    }

.academic-division__content-row {
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.academic-division__quote {
    margin: 0;
    padding: var(--space-lg);
    border-inline-start: 0.35rem solid var(--color-gold);
    background: white;
}

    .academic-division__quote p {
        margin: 0;
        font-size: 1.2rem;
        line-height: 1.55;
    }

    .academic-division__quote cite {
        display: block;
        margin-top: var(--space-sm);
        color: var(--color-muted);
        font-style: normal;
        font-weight: var(--fw-bold);
    }

.academic-division a:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}
/* =========================================================
   Academic Division Contact Aside Guard
   Intended location:
   /_assets/css/main-theme/current/templates/academic-division.css

   Pass 3.4 notes:
   - Prevents an empty division aside from reserving layout space when the
     contact placard is turned off or does not render.
   - Keeps the main content full-width unless the aside contains a contact
     placard.
   - Uses :has() for reliable detection even when the empty aside contains
     whitespace from Velocity formatting.
   ========================================================= */

.academic-division__layout,
.academic-division__main,
.academic-division__content,
.academic-division__aside {
    min-inline-size: 0;
}

    /*
   Fallback for genuinely empty markup. This is intentionally secondary because
   :empty will not match when Velocity leaves whitespace text nodes in the aside.
*/
    .academic-division__aside:empty {
        display: none;
    }

@supports selector(.academic-division__layout:has(.contact-placard)) {
    /*
     Default to one column when the aside does not contain the rendered placard.
     The !important flags are scoped narrowly to this page layout guard so this
     patch can override older template CSS that may hard-code a two-column grid.
  */
    .academic-division__layout:not(:has(.academic-division__aside .contact-placard)) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

        .academic-division__layout:not(:has(.academic-division__aside .contact-placard)) > .academic-division__aside {
            display: none !important;
        }
    /*
     Restore the aside only when the placard exists. This preserves the intended
     two-column division layout on pages that have an active contact card.
  */
    @media (min-width: 992px) {
        .academic-division__layout:has(.academic-division__aside .contact-placard) {
            align-items: start;
            grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
        }

            .academic-division__layout:has(.academic-division__aside .contact-placard) > .academic-division__aside {
                display: block;
                position: sticky;
                top: 7rem;
            }
    }
}

/*
   Optional class hook for the preferred Velocity-side fix. If the division
   page default adds academic-division__layout--no-aside, this class works in
   every browser without relying on :has().
*/
.academic-division__layout--no-aside {
    grid-template-columns: minmax(0, 1fr) !important;
}

    .academic-division__layout--no-aside > .academic-division__aside {
        display: none !important;
    }

.academic-division__extended {
    inline-size: min(calc(100% - 2rem), 80rem);
    margin-inline: auto;
    padding-block: clamp(1rem, 3vw, 2rem);
}

    .academic-division__extended > :first-child {
        margin-block-start: 0;
    }

    .academic-division__extended > :last-child {
        margin-block-end: 0;
    }
/* =========================================================
   Academic managed asides — Pass 1.2
   Load after academic Department/Division template CSS.
   ========================================================= */

.academic-aside {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    min-inline-size: 0;
}

.academic-aside__navigation,
.academic-aside__contact {
    min-inline-size: 0;
}

    .academic-aside__navigation .sidebar-nav,
    .academic-aside__contact .contact-placard {
        inline-size: 100%;
    }

.academic-department__body--no-aside,
.academic-division__layout--no-aside {
    grid-template-columns: minmax(0, 1fr) !important;
}

    .academic-department__body--no-aside > .academic-department__aside,
    .academic-division__layout--no-aside > .academic-division__aside {
        display: none !important;
    }

@supports selector(.academic-department__body:has(.academic-aside)) {
    .academic-department__body:not(:has(.academic-aside)),
    .academic-division__layout:not(:has(.academic-aside)) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Division contract reconciliation — 2026-10-11 */
@media (min-width: 850px) {
    .academic-division__overview-grid--no-image {
        grid-template-columns: minmax(0, 1fr);
    }
}

.academic-division__mission-card--full {
    width: 100%;
    max-width: none;
}

.academic-division__overview-media {
    margin: 0;
    overflow: hidden;
    /*! border-radius: var(--radius-xs); */
}

.academic-division__overview-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 16rem;
    object-fit: cover;
}

.academic-division__overview-grid--has-image .academic-division__mission-card {
    grid-column: 1 / -1;
}


/* ========================================================================== 
   Academic Division reconciliation — Pass 2 (2026-10-11)
   ========================================================================== */

/* Division local navigation now occupies a horizontal band directly below hero. */
.academic-division__local-nav {
    /*! position: relative; */
    /*! z-index: 2; */
    /*! box-shadow: var(--shadow-sm); */
}

.academic-division__local-nav-inner {
    /*! margin-inline: auto; */
    max-width: var(--adv-editorial-width);
}

.academic-division__local-nav .program-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .academic-division__local-nav .program-nav__item,
    .academic-division__local-nav .program-nav__list > li {
        margin: 0;
        list-style: none;
    }

.academic-division__local-nav a,
.academic-division__local-nav summary {
    display: flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0.4rem 1rem;
    color: var(--color-primary-dark);
    font-weight: var(--fw-bold);
    text-decoration: none;
}

    .academic-division__local-nav a:hover,
    .academic-division__local-nav a:focus-visible,
    .academic-division__local-nav summary:hover,
    .academic-division__local-nav summary:focus-visible {
        background: var(--color-surface);
        color: var(--color-primary);
    }

/* Overview media is a full-width visual band, not a half-column thumbnail. */
.academic-division__overview-grid--has-image {
    grid-template-columns: minmax(0, 1fr);
}

    .academic-division__overview-grid--has-image .academic-division__overview-media {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        aspect-ratio: 16 / 5;
        max-height: 30rem;
        height: 600px;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }

    .academic-division__overview-grid--has-image .academic-division__overview-image {
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: 30rem;
        object-fit: cover;
        object-position: center;
    }

@media (min-width: 850px) {
    .academic-division__overview-grid--has-image {
        grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.65fr);
    }

        .academic-division__overview-grid--has-image .academic-division__overview-media {
            grid-column: 1 / -1;
        }
}

/* Featured Department/Program cards can use authored or selected-page images. */
.academic-division__featured-card {
    display: grid;
    grid-template-rows: auto 1fr;
}

.academic-division__featured-card-media {
    overflow: hidden;
    aspect-ratio: 16 / 7;
    background: var(--color-surface);
}

.academic-division__featured-card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}