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

/* ============================================================================= DACC New Theme — Academic Program Pass 23 Kelsey visual language rebuilt against the canonical Pass 6.1 renderer. Foundation remains the complete functional/responsive baseline. This file intentionally does NOT recreate Kelsey's obsolete renderer, Hero CTA, Featured Content, fixed-width layouts, or disabled DevTools rules. ============================================================================= */
 .program-page {
     --program-shadow: 7px 7px 15px var(--color-shadow);
     --program-radius: var(--radius-xl);
}
/* -------------------------------------------------------------------------- On-page navigation / hotbar -------------------------------------------------------------------------- */
 .program-nav--section-jump {
     border-bottom: 0;
     background: var(--color-border);
}
 .program-nav__inner--section-jump {
     max-width: var(--container-max-width, 1200px);
     gap: var(--space-md) var(--space-xl);
}
 .program-nav__group--section-jump {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr);
     align-items: stretch;
     gap: var(--space-md);
}
 .program-nav__label--section-jump {
     display: flex;
     align-items: center;
     width: fit-content;
     min-width: 9.5rem;
     margin: 0;
     padding: var(--space-sm) var(--space-lg);
     border-radius: 0 var(--radius-pill) var(--radius-sm) 0;
     background: var(--color-primary-dark);
     color: var(--color-white);
}
 .program-nav__list--section-jump {
     gap: 0;
}
 .program-nav__list--section-jump li {
     display: flex;
     align-items: stretch;
}
 .program-nav__list--section-jump a {
     display: flex;
     align-items: center;
     min-height: 3rem;
     border: 0;
     border-radius: 0;
     background: transparent;
     color: var(--color-primary-dark);
     padding-inline: clamp(0.6rem, 1.2vw, 1.1rem);
}
 .program-nav__list--section-jump a:hover, .program-nav__list--section-jump a:focus {
     background: color-mix(in srgb, var(--color-primary) 12%, transparent);
     color: var(--color-accent);
     text-decoration: none;
}
 @media (max-width: 767.98px) {
     .program-nav__group--section-jump {
         grid-template-columns: 1fr;
         gap: 0;
    }
     .program-nav__label--section-jump {
         width: 100%;
         min-width: 0;
         border-radius: 0;
    }
     .program-nav__list--section-jump {
         padding-block: var(--space-xs);
    }
     .program-nav__list--section-jump li {
         flex: 1 1 50%;
    }
     .program-nav__list--section-jump a {
         width: 100%;
    }
}
/* -------------------------------------------------------------------------- Primary layout -------------------------------------------------------------------------- */
 .program-layout {
     gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
}
 .program-layout__aside--program {
     align-self: start;
}
/* -------------------------------------------------------------------------- About composition -------------------------------------------------------------------------- */
 .program-section--about {
     border-bottom: 0;
}
 .program-section__header--about {
     position: relative;
     z-index: 1;
     width: fit-content;
     max-width: calc(100% - var(--space-lg));
     margin: 0 0 -2.3rem 0;
     padding: var(--space-sm) clamp(var(--space-xl), 4vw, var(--space-3xl));
     border-radius: var(--radius-md) var(--radius-md) var(--radius-pill) var(--radius-sm);
     background: var(--color-primary);
     color: var(--color-white);
     box-shadow: 4px 4px 0 color-mix(in srgb, var(--color-primary-dark) 35%, transparent);
}
 .program-section__header--about .program-page__eyebrow {
     color: var(--color-gold);
}
 .program-section__header--about h2 {
     color: var(--color-white);
     font-size: clamp(1.5rem, 2.5vw, 1.9rem);
}
 .program-media-row--about {
     overflow: hidden;
     gap: 0;
     padding-top: 2.25rem;
     border-radius: var(--radius-xl);
     background: hsl(210, 42%, 95%);
     box-shadow: var(--panel-shadow);
}
 .program-page__prose--about {
     padding: clamp(var(--space-xl), 4vw, var(--space-2xl));
}
 .program-image-card--about {
     border-radius: 0;
     border-bottom: 3px solid var(--color-white);
}
 @media (min-width: 768px) {
     .program-media-row--about {
         grid-template-columns: minmax(15rem, 0.9fr) minmax(0, 1.4fr);
         align-items: stretch;
    }
     .program-image-card--about {
         border-right: 3px solid var(--color-white);
         border-bottom: 0;
    }
     .program-image-card--about img {
         height: 100%;
         object-fit: cover;
    }
}
/* -------------------------------------------------------------------------- Credential cards -------------------------------------------------------------------------- */
 .program-card-grid--credentials {
     gap: var(--space-xl) var(--space-lg);
}
 @media (min-width: 800px) {
     .program-card-grid--credentials {
         grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
 .program-card--credential {
     display: flex;
     flex-direction: column;
     align-self: stretch;
     min-width: 0;
     min-height: 0;
     height: auto;
     overflow: hidden;
     padding: 0;
     border: 0;
     border-radius: var(--radius-xl);
     background: var(--color-white);
     box-shadow: 5px 5px 0 var(--color-border);
}
 .program-card--credential .program-card__meta--credential {
     margin: 0;
     padding: var(--space-2xs) var(--space-md);
     color: var(--color-white);
     font-size: 0.8rem;
     font-weight: 900;
     letter-spacing: 0.06em;
     text-transform: uppercase;
}
 .program-card--credential .program-card__title {
     margin: 0;
     padding: var(--space-md) var(--space-md) var(--space-xs);
     color: var(--color-primary-dark);
     font-size: 1.2rem;
}
 .program-card--credential .program-card__summary {
     flex: 1 1 auto;
     margin: 0;
     padding: var(--space-xs) var(--space-md) var(--space-lg);
     background: linear-gradient( 180deg, hsl(213, 31%, 94%) 0%, var(--color-white) 100% );
}
 .program-card--credential .program-card__actions--credential {
     justify-content: flex-end;
     margin: 0;
     padding: 0 var(--space-md) var(--space-md);
     background: var(--color-white);
}
 .program-card--credential .program-button--small {
     border-radius: var(--radius-pill);
     font-weight: 900;
}
/* Degree family: AA, AS, AAS, AE */
 .program-card--credential-degree .program-card__meta--credential {
     background: var(--color-primary);
}
 .program-card--credential-degree .program-button--small {
     background: var(--color-primary);
     border-color: var(--color-primary);
}
/* Certificate family: CERT, CCL */
 .program-card--credential-certificate .program-card__meta--credential {
     background: var(--color-accent-dark);
}
 .program-card--credential-certificate .program-button--small {
     background: var(--color-accent-dark);
     border-color: var(--color-accent-dark);
}
 .program-card--credential-certificate .program-button--small:hover, .program-card--credential-certificate .program-button--small:focus {
     background: var(--color-accent);
     border-color: var(--color-accent);
}
/* Additional explicit types remain visually distinct without pretending they are degrees/certificates. */
 .program-card--credential-workforce .program-card__meta--credential {
     background: var(--color-primary-dark);
}
 .program-card--credential-transfer .program-card__meta--credential {
     background: var(--color-muted);
}
 .program-card--credential-other .program-card__meta--credential {
     background: var(--color-muted);
}
/* -------------------------------------------------------------------------- General Program cards -------------------------------------------------------------------------- */
 .program-section:not(.program-section--credentials) .program-card {
     border-color: transparent;
     border-radius: var(--radius-xl);
     box-shadow: 5px 5px 0 var(--color-border);
}
/* -------------------------------------------------------------------------- Accessibility / zoom safety -------------------------------------------------------------------------- */
 @media (max-width: 479.98px) {
     .program-section__header--about {
         max-width: 100%;
         margin-inline: 0;
         border-radius: var(--radius-md) var(--radius-md) 0 0;
    }
     .program-media-row--about {
         padding-top: 0;
         border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    }
     .program-page__prose--about {
         padding: var(--space-lg);
    }
}
/* ========================================================================== Pass 23A — Program Context / layout reconciliation ========================================================================== */
/* * Top Program navigation now contains section jumps only. Give the link rail * the same compact, single-purpose geometry as Kelsey's visual prototype. */
 .program-nav--on-page .program-nav__inner--section-jump {
     grid-template-columns: 1fr;
}
 .program-nav--on-page .program-nav__group--section-jump {
     width: 100%;
}
 .program-nav__list--on-page {
     align-content: stretch;
}
/* * Visually place the About image first on wider screens while retaining the * canonical prose-first source order for reading/accessibility. */
 @media (min-width: 768px) {
     .program-media-row--about .program-image-card--about {
         grid-column: 1;
         grid-row: 1;
    }
     .program-media-row--about .program-page__prose--about {
         grid-column: 2;
         grid-row: 1;
    }
}
/* -------------------------------------------------------------------------- Program Context Aside -------------------------------------------------------------------------- */
 .program-layout__aside--program {
     display: grid;
     align-self: start;
     gap: var(--space-xl);
}
 @media (min-width: 992px) {
     .program-layout__aside--program {
         position: sticky;
         top: calc(5rem + var(--space-lg));
    }
}
 .program-context__section {
     margin: 0;
}
 .sidebar__eyebrow {
     margin: 0 0 var(--space-xs);
     color: var(--color-text);
     font-size: 0.8125rem;
     font-weight: var(--fw-bold, 700);
     letter-spacing: 0.08em;
     line-height: 1.25;
     text-transform: uppercase;
}
/* Academic Directory ------------------------------------------------------ */
 .academic-directory-placard {
     padding: 0;
     border: 0;
     background: transparent;
}
 .academic-directory-placard__list {
     gap: 0.25rem;
     margin: 0;
     padding: 0;
}
 .academic-directory-placard__item {
     border-inline-start: 5px solid var(--color-primary);
     background: color-mix(in srgb, var(--color-primary) 7%, var(--color-white));
}
 .academic-directory-placard__item--division {
     border-inline-start-color: var(--color-primary-dark);
}
 .academic-directory-placard__item--department {
     border-inline-start-color: var(--color-primary);
     background: color-mix(in srgb, var(--color-muted) 12%, var(--color-white));
}
 .academic-directory-placard__item--program {
     border-inline-start-color: var(--color-primary-light);
     background: hsl(210, 30%, 96%);
}
 .academic-directory-placard__link, .academic-directory-placard__item--program > span {
     min-height: 2.75rem;
     padding: var(--space-xs) var(--space-sm);
     border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
     font-size: 0.94rem;
     line-height: 1.45;
}
 .academic-directory-placard__link {
     background: linear-gradient( 90deg, color-mix(in srgb, var(--color-primary-light) 15%, transparent), transparent );
     color: var(--color-text);
     font-weight: 700;
     text-decoration: none;
}
 .academic-directory-placard__link:hover, .academic-directory-placard__link:focus {
     background: var(--color-white);
     color: var(--color-accent);
     text-decoration: none;
}
 .academic-directory-placard__item:has(.academic-directory-placard__link:hover), .academic-directory-placard__item:has(.academic-directory-placard__link:focus) {
     border-inline-start-color: var(--color-accent);
}
 .academic-directory-placard__item--program > span {
     color: var(--color-text);
     font-weight: 700;
}
 @media (max-width: 767.98px) {
     .academic-directory-placard__link, .academic-directory-placard__item--program > span {
         min-height: 3rem;
         padding: 0.65rem var(--space-md);
         font-size: 1rem;
    }
}
/* Helpful Links ----------------------------------------------------------- */
 .program-helpful-links {
     padding: 0;
     border: 0;
     background: transparent;
}
 .program-helpful-links .program-nav__label {
     margin-bottom: var(--space-xs);
}
 .program-helpful-links .program-nav__list {
     display: grid;
     gap: 0.35rem;
}
 .program-helpful-links .program-nav__list > li {
     display: block;
}
 .program-helpful-links .program-nav__list > li > a, .program-helpful-links .program-nav__dropdown-toggle {
     min-height: 2.75rem;
     justify-content: flex-start;
     padding: 0.6rem var(--space-sm);
     border: 1px solid transparent;
     border-radius: var(--radius-xs);
     background: var(--color-surface);
     color: var(--color-primary-dark);
     font-weight: 700;
}
 .program-helpful-links .program-nav__list > li > a:hover, .program-helpful-links .program-nav__list > li > a:focus, .program-helpful-links .program-nav__dropdown-toggle:hover, .program-helpful-links .program-nav__dropdown-toggle:focus, .program-helpful-links .program-nav__dropdown[open] > .program-nav__dropdown-toggle {
     border-color: var(--color-border);
     background: var(--color-white);
     color: var(--color-accent);
     text-decoration: none;
}
/* * Contact remains between Academic Directory and Helpful Links, matching * Kelsey's visual hierarchy while retaining the canonical Contact renderer. */
 .program-context__section--contact .contact-placard {
     margin: 0;
}
/* Narrow layout ----------------------------------------------------------- */
 @media (max-width: 991.98px) {
     .program-context {
         grid-template-columns: minmax(0, 1fr);
    }
     .program-layout__aside--program {
         position: static;
    }
}
/* ========================================================================== Pass 23B — Exact Kelsey DOM/visual alignment ========================================================================== */
/* -------------------------------------------------------------------------- Program navbar -------------------------------------------------------------------------- */
/* * The canonical DOM now matches the prototype relationship: * * .program-nav * .program-nav--hotbar * .program-nav__inner * * Avoid the prototype's fixed 1fr/1200px/1fr grid. Preserve its visual * hotbar/rail composition using responsive tracks. */
 .program-nav.program-nav--on-page {
     display: grid;
     grid-template-columns: clamp(10.5rem, 15vw, 21rem) minmax(0, 1fr);
     align-items: stretch;
     width: 100%;
     background: var(--color-border);
}
 .program-nav.program-nav--on-page > .program-nav--hotbar {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     min-width: 0;
     margin: 0;
     padding: 0 var(--space-lg);
     border-radius: 0 var(--radius-pill) var(--radius-sm) 0;
     background: var(--color-primary-dark);
     color: var(--color-white);
}
 .program-nav.program-nav--on-page > .program-nav__inner {
     display: flex;
     align-items: stretch;
     width: 100%;
     min-width: 0;
     max-width: var(--container-max-width, 1200px);
     margin: 0;
     padding: 0;
}
 .program-nav.program-nav--on-page .program-nav__group--anchors {
     display: flex;
     width: 100%;
     min-width: 0;
}
 .program-nav.program-nav--on-page .program-nav__list--on-page {
     display: flex;
     flex: 1 1 auto;
     flex-wrap: wrap;
     align-items: stretch;
     width: 100%;
     min-width: 0;
}
 .program-nav.program-nav--on-page .program-nav__list--on-page > li {
     display: flex;
     flex: 1 1 auto;
     min-width: 0;
     padding: 0;
}
 .program-nav.program-nav--on-page .program-nav__list--on-page > li > a {
     display: flex;
     flex: 1 1 auto;
     align-items: center;
     justify-content: center;
     min-height: 3.5rem;
     padding: 0.65rem clamp(0.6rem, 1vw, 1rem);
     border: 0;
     border-radius: 0;
     background: transparent;
     color: var(--color-primary-dark);
     text-align: center;
     text-decoration: none;
}
 .program-nav.program-nav--on-page .program-nav__list--on-page > li > a:hover, .program-nav.program-nav--on-page .program-nav__list--on-page > li > a:focus {
     background: color-mix(in srgb, var(--color-primary-dark) 18%, transparent);
     color: var(--color-primary-dark);
     text-decoration: none;
}
 @media (max-width: 1050px) {
     .program-nav.program-nav--on-page {
         grid-template-columns: 1fr;
    }
     .program-nav.program-nav--on-page > .program-nav--hotbar {
         min-height: 3.125rem;
         border-radius: 0;
         justify-content: flex-start;
    }
     .program-nav.program-nav--on-page > .program-nav__inner {
         max-width: none;
    }
}
 @media (max-width: 700px) {
     .program-nav.program-nav--on-page .program-nav__list--on-page > li {
         flex: 1 1 50%;
    }
}
/* -------------------------------------------------------------------------- About the Program -------------------------------------------------------------------------- */
 .program-page__eyebrow--about {
     margin-bottom: var(--space-sm);
}
 .program-section__content--about {
     position: relative;
     overflow: visible;
     border-radius: var(--radius-xl);
     background: hsl(210, 42%, 95%);
}
 .program-section__content--about .program-media-row--about {
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     gap: 0;
     overflow: hidden;
     border-radius: inherit;
     background: transparent;
     box-shadow: var(--panel-shadow);
}
 .program-section__content--about .program-section__header--about {
     position: relative;
     z-index: 2;
     width: fit-content;
     max-width: calc(100% - var(--space-lg));
     margin: 0;
     padding: var(--space-sm) clamp(var(--space-xl), 4vw, var(--space-3xl));
     border-radius: var(--radius-md) var(--radius-md) var(--radius-pill) var(--radius-sm);
     background: var(--color-primary);
     color: var(--color-white);
}
 .program-section__content--about .program-section__about-header {
     margin: 0;
     color: var(--color-white);
     font-size: clamp(1.5rem, 2.5vw, 1.9rem);
     line-height: 1.15;
}
 .program-section__content--about .program-image-card--about {
     margin: 0;
     overflow: hidden;
     border-radius: 0;
     border-bottom: 3px solid var(--color-white);
}
 .program-section__content--about .program-image-card--about img {
     display: block;
     width: 100%;
     height: auto;
     min-height: 0;
     object-fit: cover;
}
 .program-section__content--about .program-page__prose--about {
     min-width: 0;
     padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
}
 @media (min-width: 768px) {
     .program-section__content--about .program-media-row--about {
         grid-template-columns: minmax(14rem, 0.9fr) minmax(0, 1.4fr);
         grid-template-rows: auto 1fr;
         align-items: stretch;
    }
    /* * Accessible source order remains: * heading -> image -> prose * * Visual order becomes: * image | heading * image | prose */
     .program-section__content--about .program-image-card--about {
         grid-column: 1;
         grid-row: 1 / span 2;
         border-right: 3px solid var(--color-white);
         border-bottom: 0;
    }
     .program-section__content--about .program-section__header--about {
         grid-column: 2;
         grid-row: 1;
         align-self: start;
         margin-top: var(--space-lg);
         margin-left: calc(-1 * var(--space-lg));
    }
     .program-section__content--about .program-page__prose--about {
         grid-column: 2;
         grid-row: 2;
    }
     .program-section__content--about .program-image-card--about img {
         height: 100%;
         min-height: 0;
    }
}
/* -------------------------------------------------------------------------- Degree & Certificate cards -------------------------------------------------------------------------- */
 .program-card-grid--credentials {
     align-items: stretch;
}
 .program-card--credential.degree-card, .program-card--credential.cert-card {
     width: min(100%, 37.5rem);
     min-height: 0;
     height: auto;
     margin-inline: auto;
     padding: 0;
     overflow: hidden;
     border: 0;
     border-radius: var(--radius-xl);
     background: var(--color-white);
     box-shadow: 5px 5px 0 var(--color-border);
}
 .program-card--credential .degree-card__meta, .program-card--credential .cert-card__meta {
     margin: 0;
     padding: var(--space-2xs) var(--space-md);
     border-radius: var(--radius-sm) var(--radius-sm) 0 0;
     color: var(--color-white);
     font-size: 0.8rem;
     font-weight: 900;
     letter-spacing: 0.06em;
     text-transform: uppercase;
}
 .program-card--credential .degree-card__meta {
     background: var(--color-primary);
}
 .program-card--credential .cert-card__meta {
     background: var(--color-accent-dark);
}
 .program-card__credential-body.degree-card__desc, .program-card__credential-body.cert-card__desc {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
     min-width: 0;
     border-radius: 0 0 var(--radius-xl) var(--radius-xl);
     background: linear-gradient( 180deg, hsl(213, 31%, 94%) 0%, var(--color-white) 100% );
}
 .program-card--credential .degree-card__title, .program-card--credential .cert-card__title {
     margin: 0;
     padding: var(--space-sm) var(--space-md);
     color: var(--color-primary-dark);
     font-size: 1.2rem;
     line-height: 1.3;
}
 .program-card--credential .program-card__summary {
     flex: 1 1 auto;
     margin: 0;
     padding: 0 var(--space-md) var(--space-lg);
     background: transparent;
}
 .program-card--credential .degree-card__actions, .program-card--credential .cert-card__actions {
     display: flex;
     align-self: stretch;
     justify-content: flex-start;
     margin-top: auto;
     padding: 0 var(--space-md) var(--space-md);
     background: transparent;
}
 .program-card--credential .degree-card__button, .program-card--credential .cert-card__button {
     min-height: 2.75rem;
     padding: var(--space-sm) var(--space-lg);
     border-radius: var(--radius-pill);
     color: var(--color-white);
     font-size: 0.9rem;
     font-weight: 900;
     text-decoration: none;
}
 .program-card--credential .degree-card__button {
     border-color: var(--color-primary);
     background: var(--color-primary);
}
 .program-card--credential .degree-card__button:hover, .program-card--credential .degree-card__button:focus {
     border-color: var(--color-primary-light);
     background: var(--color-primary-light);
     color: var(--color-white);
}
 .program-card--credential .cert-card__button {
     border-color: var(--color-accent-dark);
     background: var(--color-accent-dark);
}
 .program-card--credential .cert-card__button:hover, .program-card--credential .cert-card__button:focus {
     border-color: var(--color-accent);
     background: var(--color-accent);
     color: var(--color-white);
}
/* ========================================================================== Pass 23C — Credential Grid / Page-Flow Stability ========================================================================== */
/* * Credential cards are CSS Grid items. Do not give them percentage heights: * Grid already stretches siblings within each row, while height:100% can * create a circular size dependency across a multi-row credentials grid. */
 .program-section--credentials, .program-card-grid--credentials {
     min-height: 0;
}
 .program-card-grid--credentials {
     align-items: stretch;
     align-content: start;
     grid-auto-rows: auto;
}
 .program-card-grid--credentials > .program-card--credential {
     align-self: stretch;
     height: auto;
     min-height: 0;
     max-height: none;
}
 .program-card--credential .program-card__credential-body {
     min-height: 0;
}
 .program-card--credential .program-card__actions--credential {
     flex: 0 0 auto;
}
/* * Keep downstream Program sections in normal document flow even if authored * content becomes intrinsically large. */
 .program-layout__main, .program-page__extended {
     min-width: 0;
     min-height: 0;
}
/* * About image may visually fill its grid area, but must never impose a * percentage minimum height on the containing section. */
 @media (min-width: 768px) {
     .program-section__content--about .program-image-card--about {
         min-height: 0;
    }
     .program-section__content--about .program-image-card--about img {
         min-height: 0;
         max-height: none;
    }
}
/* ============================================================================= CTA ownership — Pass 44D All CTA Block variants now use the canonical New component: /_assets/css/main-theme/new/overrides/components/program-cta.css Academic Program no longer reskins Hero/Footer CTA markup at template level. ============================================================================= */
/* ============================================================================= Pass 27 — New Theme Division Tree Visual Layer Structural responsiveness lives in Foundation. This layer keeps Kelsey's visual language while making the hierarchy read as one connected tree. ============================================================================= */
 .program-division-explorer__branches {
     --division-tree-line: color-mix(in srgb, var(--program-color-primary, #5b0017) 34%, #d8dee6);
     border-top-color: var(--division-tree-line);
}
 .program-division-explorer__root::after, .program-division-explorer__branch::before, .program-division-explorer__program-column::before {
     background: var(--division-tree-line, var(--program-color-border, #d8dee6));
}
 .program-division-explorer__branch {
     padding: 0.9rem;
     border: 1px solid var(--program-color-border, #d8dee6);
     border-radius: 1rem;
     background: var(--program-color-surface, #ffffff);
     box-shadow: 0 0.45rem 1.2rem rgba(15, 23, 42, 0.08);
}
 .program-division-explorer__branch--current {
     border-color: var(--program-color-primary, #5b0017);
     box-shadow: 0 0 0 2px color-mix(in srgb, var(--program-color-primary, #5b0017) 14%, transparent), 0 0.55rem 1.35rem rgba(15, 23, 42, 0.12);
}
 .program-division-explorer__node--department {
     min-height: 3.25rem;
     padding: 0.75rem 0.9rem;
}
 .program-division-explorer__node--program {
     min-height: 2.6rem;
     padding: 0.6rem 0.75rem;
     border-radius: 0.7rem;
     background: var(--program-color-surface-alt, #f6f7f9);
}
 @media (max-width: 719.98px) {
     .program-division-explorer__branches {
         border-left-color: var(--division-tree-line);
    }
     .program-division-explorer__branch {
         padding: 0.75rem;
    }
     .program-division-explorer__program-column {
         border-left-color: var(--division-tree-line);
    }
}