/* ============================================================
   Academy (The Academy section — CPT `academy`)
   Shared styles for single-academy.php template parts.
   Palette follows the design: navy #211650, pink #CC2D98 accents.
============================================================ */

.academy-detail {
    --academy-navy: #211650;
    --academy-pink: #CC2D98;
    --academy-line: #e5e5e5;
    --academy-grey-bg: #f5f4f6;
}

.academy-section-heading {
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 40px;
    margin-top: 0;
    color: var(--clr-blue-100);
}

/* Body copy inside Academy components is Gotham — headings and table
   heads keep the theme's default (NEXT) family. */
.academy-modal-content p,
.academy-intro-content p,
.academy-accordion-content-inner p,
.academy-accordion-content-inner td,
.academy-modal-schedule td {
    font-family: var(--ff-gotham, 'Gotham', sans-serif) !important;
}

/* ── Buttons ─────────────────────────────────────────────── */
/* [academy_button] wrapper — one button per line, with breathing room
   between consecutive buttons. */
.academy-btn-wrap {
    display: block;
    margin: 8px 0;
}

.academy-btn {
    display: inline-block;
    padding: 10px 31px;
    border-radius: 999px;
    font-size: 18px;
    line-height: 25.2px;
    text-align: center;
}

.academy-btn-dark {
    /*background: var(--academy-navy, #211650);*/
    color: #fff !important;
}

.academy-btn-outline {
    background: transparent;
    border: 1px solid var(--academy-navy, #211650);
    color: var(--academy-navy, #211650);
}

/* ── Featured event banner ───────────────────────────────── */
.academy-featured-banner {
    position: relative;
    display: block;
    border-radius: 2px;
    overflow: hidden;
}

.academy-featured-banner>img {
    display: block;
    width: 100%;
    height: auto;
}

.academy-featured-overlay {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 60px 28px 28px;
    color: #fff;
}

.academy-featured-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 100%);
}

.academy-featured-title,
.academy-featured-more {
    position: relative;
    z-index: 1;
}

.academy-featured-title {
    font-size: 26px;
    line-height: 1.3;
}

.academy-featured-more {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    line-height: 18.2px;
    white-space: nowrap;
}

.academy-featured-past {
    margin-top: 40px;
    text-align: center;
    display: flex;
    justify-content: center;
}

/* ── Hero visual inside Elementor pages ──────────────────────
   Elementor's `.elementor img { height: auto }` (custom-frontend.css) has
   the same specificity as main.css's `.event-visual__image img` but loads
   later, so the --img-height control loses on Elementor-built pages (the
   Academy Hero Visual widget). Win by specificity via the wrap class,
   mirroring main.css's breakpoints exactly. */
.hero-visual-wrap .event-visual__image img {
    height: var(--img-height, 100%);
}

/* ── Hero ────────────────────────────────────────────────── */
.academy-hero-programme {
    position: relative;
}

.academy-hero-programme .academy-hero-media img {
    display: block;
    width: 100%;
    height: clamp(320px, 45vw, 560px);
    object-fit: cover;
}

.academy-hero-programme .academy-hero-overlay {
    position: absolute;
    inset: auto 0 48px 0;
    color: #fff;
}

.academy-hero-programme .academy-hero-title {
    color: #fff;
    margin: 0;
}

.academy-hero-programme .academy-hero-subtitle {
    color: #fff;
    margin: 8px 0 0;
}

/* ── In-page navigation ──────────────────────────────────── */
.academy-nav-list {
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
}

.academy-nav-item a {
    display: inline-block;
    padding: 28px 0;
    color: inherit;
    white-space: nowrap;
    color: #7A7396;
    font-weight: 300;
    font-size: 18px;
    line-height: 25.2px;
}

.academy-nav-item.is-active a {
    font-weight: 400;
    color: var(--academy-navy, #211650);
}

.academy-nav-item a:hover {
    color: var(--academy-navy, #211650);
}

/* ── Intro ───────────────────────────────────────────────── */
.academy-intro-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 48px;
}

.academy-intro-content p:first-child {
    margin-top: 0;
}

.academy-intro-info {
    margin: 24px 0 0;
}

.academy-intro-info-row {
    margin-bottom: 16px;
}

.academy-intro-info dt {
    font-weight: 500;
    color: var(--academy-navy, #211650);
}

.academy-intro-info dd {
    margin: 4px 0 0;
    font-weight: 300;
}

.academy-intro-cta {
    margin-top: 32px;
}

.academy-intro-cta-note {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 300;
}

/* ── Accordion ───────────────────────────────────────────── */
.academy-accordion-list,
.academy-class-pass-item {
    border-top: 1px solid var(--academy-line, #e5e5e5);
}

.academy-accordion-item {
    border-bottom: 1px solid var(--academy-line, #e5e5e5);
}

.academy-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 40px 0;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
}

.academy-accordion-title {
    font-size: 26px;
    line-height: 35px;
    color: var(--academy-navy, #211650);
}

.academy-accordion-icon {
    display: flex;
    flex: 0 0 auto;
    transition: transform 0.3s ease;
}

.academy-accordion-item.is-open .academy-accordion-icon {
    transform: rotate(45deg);
}

.academy-accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0s ease;
}

.academy-accordion-item.is-open .academy-accordion-content {
    grid-template-rows: 1fr;
}

.academy-accordion-content-inner {
    overflow: hidden;
    font-weight: 300;
}

.academy-accordion-item.is-open .academy-accordion-content-inner {
    padding-bottom: 40px;
}

/* Tables inside accordion content (Assessment Dates / Venue / Group) */
.academy-accordion-content-inner table {
    width: 100%;
    border-collapse: collapse;
}

.academy-accordion-content-inner th,
.academy-accordion-content-inner td {
    padding: 12px 16px 12px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--academy-line, #e5e5e5);
}

/* ── Skin for Elementor's nested Accordion ────────────────
   The Class A–E blocks (Summer Intensive) use Elementor's own Accordion
   widget — panels are containers, so editors lay out columns/images
   freely. Add the class `academy-accordion-skin` on the Accordion widget
   (Advanced → CSS Classes) to match the design: hairline rows, navy 20px
   titles, generous padding. Pick "+" as the closed icon and "×" as the
   opened icon in the widget's own controls. */
/* !important: Elementor styles the nested accordion with child selectors
   (.e-n-accordion-item > .e-n-accordion-item-title) that out-rank any
   sane skin selector, so the overridden properties are forced here. */
.academy-accordion-skin .e-n-accordion-item {
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--academy-line, #e5e5e5) !important;
}

.academy-accordion-skin .e-n-accordion-item:first-of-type {
    border-top: 1px solid var(--academy-line, #e5e5e5) !important;
}

.academy-accordion-skin .e-n-accordion-item>.e-n-accordion-item-title {
    padding: 32px 0 !important;
    background: transparent !important;
    cursor: pointer;
}

.academy-accordion-skin .e-n-accordion-item-title-text {
    font-size: 20px !important;
    font-weight: 400 !important;
    color: var(--academy-navy, #211650) !important;
}

.academy-accordion-skin .e-n-accordion-item>.e-con {
    padding-top: 8px;
    padding-bottom: 40px;
}

.academy-accordion-skin .e-n-accordion-item-title-icon {
    color: var(--academy-navy, #211650) !important;
    width: 20px !important;
    height: 20px !important;
    transition: transform 0.2s !important;
}

.academy-accordion-skin .e-n-accordion-item-title-icon svg,
.academy-accordion-skin .e-n-accordion-item-title-icon span {
    width: 100% !important;
    height: 100% !important;
}

.academy-accordion-skin .e-n-accordion-item-title[aria-expanded="true"] .e-n-accordion-item-title-icon {
    transform: rotate(45deg);
}

.academy-accordion-skin .elementor-widget-text-editor p:not(:last-child) {
    margin-bottom: 20px !important;
}

.academy-accordion-skin .elementor-widget-text-editor ul {
    list-style: disc !important;
    padding-left: 15px !important;
}

.academy-btn-wrap {
    display: inline-flex;
}

.academy-accordion-skin .elementor-widget-text-editor h3,
.academy-accordion-skin .elementor-widget-text-editor h4 {
    margin: 0 0 8px;
    font-size: inherit !important;
    font-weight: 500 !important;
}

.academy-accordion-skin .elementor-widget-text-editor strong {
    font-weight: 500 !important;
}

/* ── Class cards ─────────────────────────────────────────── */
.academy-class-cards-header {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 48px;
    margin-bottom: 40px;
}

.academy-class-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 32px;
}

/* Hover treatment mirrors the tourable-work cards (hkb-tourable):
   image zoom 1.1 in an overflow-hidden frame, title + arrow fade
   navy → muted purple, all over 0.5s. */
.academy-class-card-media {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: 2px;
    overflow: hidden;
}

.academy-class-card-media img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: 0.5s;
}

.academy-class-card:hover .academy-class-card-media img {
    transform: scale(1.1);
}

.academy-class-card-title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--clr-blue-100, #211650);
    transition: color 0.5s;
}

.academy-class-card:hover .academy-class-card-title {
    color: var(--clr-blue-60, #7a7396);
}

.academy-card-arrow {
    display: inline-flex;
    color: inherit;
    transition: transform 0.2s ease;
}

/* ── Modal ───────────────────────────────────────────────── */
.academy-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px;
}

.academy-modal[hidden] {
    display: none;
}

.academy-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.academy-modal-panel {
    position: relative;
    width: 100%;
    max-width: 1200px;
    max-height: min(85vh, 720px);
    overflow-y: auto;
    background: #fff;
    padding: 40px 60px;
}

.academy-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.academy-modal-close img {
    display: block;
    width: 16px;
    height: 16px;
}

.academy-modal-title {
    text-align: center;
    color: #211650;
    font-size: 26px;
    line-height: 35px;
    margin: 0 0 12px;
}

.academy-modal-content {
    font-weight: 300;
    text-align: center;
}

.academy-modal-content p {
    margin: 0 0 40px;
}

/* Robust "no margin after the last block" — WYSIWYG output does not always
   end with a <p> (trailing lists, empty nodes), which is why p:last-child
   alone was unreliable. */
.academy-modal-content> :last-child {
    margin-bottom: 0 !important;
}

/* Table: 40px above and below on all breakpoints (the CTA sits flush and
   the table's own bottom margin provides the gap). */
.academy-modal-schedule-scroll {
    margin: 40px 0;
    overflow-x: auto;
}

/* Heading of a "new block" inside the schedule (text + table per class). */
.academy-modal-block-heading {
    text-align: center;
    color: #211650;
    font-size: 20px;
    line-height: 26px;
    margin: 40px 0 12px;
}

/* Design: only horizontal separators between rows — no outer border.
   The class is also applied by academy.js to tables typed into the modal
   WYSIWYG, so everything here must beat the theme's default table styling
   (full borders, grey header background). */
.academy-modal-schedule {
    width: 100%;
    min-width: 800px;
    height: auto !important;
    border-collapse: collapse;
    border: 0;
    background: transparent;
}

.academy-modal-schedule:has(tr:first-child > *:only-child) {
    min-width: 0;
}

.academy-modal-schedule thead,
.academy-modal-schedule tbody,
.academy-modal-schedule tr {
    border: 0;
    background: transparent;
}

.academy-modal-schedule th,
.academy-modal-schedule td {
    padding: 14px 16px;
    text-align: center;
    vertical-align: middle;
    border: 0 !important;
    border-bottom: 1px solid #f5f5f5 !important;
    background: transparent !important;
}

.academy-modal-schedule th {
    font-size: 18px;
    line-height: 25.2px;
    font-weight: 500;
    color: #211650;
    white-space: nowrap;
}

.academy-modal-schedule td {
    font-size: 16px;
    line-height: 26px;
}

/* Highlighted note inside a schedule cell — "*Daytime*" typed in the
   Time field, or a <span class="academy-hl"> written by hand. Colour is
   overridable per widget from the Elementor Style tab. */
.academy-hl {
    color: var(--academy-hl, #FE8C1D);
}

.academy-modal-cta {
    margin-top: 40px;
    text-align: center;
}

/* After the table the 40px gap already comes from the table's margin. */
.academy-modal-schedule-scroll+.academy-modal-cta {
    margin-top: 0;
}

body.academy-modal-open {
    overflow: hidden;
}

/* ── Class pass ──────────────────────────────────────────── */
.academy-class-pass-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.academy-class-pass-card {
    border: 1px solid var(--academy-line, #e5e5e5);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.academy-class-pass-label {
    display: inline-block;
    align-self: center;
    padding: 6px 24px;
    background: #edebf3;
    color: var(--academy-navy, #211650);
    font-size: 14px;
}

.academy-class-pass-price {
    margin: 0;
    font-size: 32px;
    color: var(--academy-navy, #211650);
}

.academy-class-pass-validity,
.academy-class-pass-note {
    margin: 0;
    font-size: 13px;
    font-weight: 300;
}

.academy-class-pass-card .academy-btn {
    margin-top: auto;
}

.academy-class-pass-footnote {
    margin-top: 32px;
    text-align: center;
    font-size: 14px;
    font-weight: 300;
}

/* ── Faculty ─────────────────────────────────────────────────
   One widget = one accordion row (standard .academy-accordion-item markup,
   so icon/toggle/borders match every other academy accordion). Stacked
   Faculty widgets join into a single continuous list. */
.academy-faculty.academy-section {
    padding: 0;
}

.academy-faculty-item {
    border-top: 1px solid var(--academy-line, #e5e5e5);
}

.elementor-widget-academy_faculty+.elementor-widget-academy_faculty .academy-faculty-item {
    border-top: 0;
}

.academy-faculty-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 48px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.academy-faculty-member {
    display: flex;
    align-items: center;
    gap: 20px;
}

.academy-faculty-member.is-extra {
    display: none;
}

.academy-faculty-grid.is-expanded .academy-faculty-member.is-extra {
    display: flex;
}

.academy-faculty-avatar {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--academy-grey-bg, #f5f4f6);
}

.academy-faculty-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.academy-faculty-name {
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--academy-navy, #211650);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 300;
    font-size: 18px;
    line-height: 25.2px;
}

.academy-faculty-name:hover {
    color: var(--clr-blue-60);
    text-decoration: underline;
    text-decoration-color: var(--clr-blue-60);
}

/* Plain name (no popup, no link) — not styled as clickable. */
.academy-faculty-name--static {
    text-decoration: none;
    cursor: default;
}

/* Bio popup for `team` / manually-entered people (guest teachers) — same
   dialog as the event About section (.team-modal): centered avatar / name /
   pink role stay put, only the bio text scrolls. */
.academy-modal--bio .academy-modal-panel {
    width: min(560px, 100%);
    max-height: calc(100vh - 48px);
    padding: 40px 36px 34px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.academy-modal--bio .academy-modal-content.academy-modal-bio-scroll {
    font-size: 16px;
    font-weight: 300;
    max-height: min(42vh, 360px);
    overflow-y: auto;
    padding-right: 8px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.academy-modal-bio-avatar {
    display: block;
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--academy-grey-bg, #f5f4f6);
}

.academy-modal-bio-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.academy-modal--bio .academy-modal-title {
    margin-bottom: 4px;
}

.academy-modal-bio-role {
    display: block;
    margin-bottom: 24px;
    color: var(--academy-pink, #CC2D98);
    font-size: 16px;
    font-weight: 300;
    line-height: 26px;
}

.academy-modal--bio .academy-modal-content p {
    margin-bottom: 20px;
}

.academy-faculty-role {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 18.2px;
    font-weight: 300;
    color: var(--academy-pink, #CC2D98);
}

.academy-faculty-more {
    margin-top: 32px;
    border: 0;
    padding: 0;
    font-size: 18px;
    line-height: 25.2px;
    font-weight: 300;
    background: none;
    cursor: pointer;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    color: var(--academy-navy, #211650) !important;
}

.academy-faculty-more:hover {
    text-decoration: underline;
    color: var(--clr-blue-60) !important;
}

/* Grouped layout (International Guest Teachers): week/class label lines
   above a single-column member list. */
.academy-faculty-group {
    margin-bottom: 40px;
}

.academy-faculty-group:last-child {
    margin-bottom: 0;
}

.academy-faculty-group-label {
    margin: 0;
    font-size: 20px;
    line-height: 26px;
    font-weight: 400;
    color: var(--academy-navy, #211650);
}

.academy-faculty-group-sub {
    margin: 4px 0 0;
    font-size: 18px;
    font-weight: 300;
    line-height: 25.2px;
    color: var(--academy-navy, #211650);
}

.academy-faculty-grid--list {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}

/* ── Related ─────────────────────────────────────────────── */
.academy-related-heading {
    font-size: 32px;
    line-height: 40px;
    font-weight: 400;
    margin-bottom: 40px;
    margin-top: 0;
    color: var(--clr-blue-100);
}

/* Never wraps: always one row, 4 cards visible by default; extra cards
   scroll horizontally with snap (hidden scrollbar), on every breakpoint. */
.academy-related-grid {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.academy-related-grid::-webkit-scrollbar {
    display: none;
}

.academy-related-card {
    flex: 0 0 calc((100% - 3 * 24px) / 4);
    scroll-snap-align: start;
}

.academy-related-link {
    display: block;
}

.academy-related-media {
    display: block;
    overflow: hidden;
    border-radius: 2px;
}

.academy-related-media img {
    display: block;
    width: 100%;
    height: 100% !important;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: transform 0.3s;
}

.academy-related-link:hover .academy-related-media img {
    transform: scale(1.1);
}

.academy-related-title {
    display: inline-flex;
    align-items: center;
    font-size: 18px;
    line-height: 25.2px;
    gap: 12px;
    margin-top: 16px;
    color: var(--academy-navy, #211650);
    transition: color 0.3s;
}

.academy-related-link:hover .academy-related-title {
    color: var(--clr-blue-60);
}

/* ── In-page navigation: sticky ──────────────────────────────
   Sticky sits on the Elementor widget wrapper. Doubled class beats
   Elementor's own `.elementor-widget { position: relative }`, which loads
   after this sheet and was overriding the sticky (same specificity).
   `top` is set live by academy.js (admin bar + mobile header). */
.elementor-widget.elementor-widget-academy_nav {
    position: sticky;
    top: 0;
    z-index: 44;
}

.academy-nav {
    background: #fff;
}

.elementor-widget-hkb_upcoming_events .academy-class-cards-grid {
    grid-gap: 80px 20px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 992px) {

    /* 2 cards visible per view. */
    .academy-related-card {
        flex-basis: calc((100% - 24px) / 2);
    }
}

@media (max-width: 767px) {

    .elementor-widget-hkb_upcoming_events .academy-class-cards-grid {
        grid-gap: 24px;
    }

    .hero-visual-wrap .event-visual__image img {
        height: var(--img-height, 100%);
    }

    .academy-related-title {
        font-size: 14px;
        line-height: 18.2px;
    }

    .academy-accordion-item.is-open .academy-accordion-content-inner {
        padding-bottom: 20px;
    }

    .academy-faculty-more {
        font-size: 14px;
        line-height: 18.2px;
        margin-top: 12px;
    }

    .academy-related-heading {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 20px;
    }

    .academy-modal-bio-role {
        font-size: 12px;
        line-height: 16.8px;
    }

    .academy-class-card-title {
        font-size: 14px;
        line-height: 18.2px;
    }

    .academy-card-arrow svg {
        height: 16px;
        width: 16px;
    }

    .academy-btn {
        width: 100%;
    }

    .academy-featured-past {
        padding: 0 20px;
    }

    .academy-nav-item a {
        font-size: 14px;
        line-height: 21px;
    }

    .academy-nav-list {
        gap: 20px;
    }

    .academy-nav-item a {
        padding: 15.5px 0;
    }

    .academy-accordion-skin .e-n-accordion-item-title-icon {
        width: 16px !important;
        height: 16px !important;
    }

    .academy-section-heading {
        font-size: 20px;
        line-height: 26px;
    }

    .academy-intro-grid,
    .academy-class-cards-header,
    .academy-class-cards-grid,
    .academy-faculty-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .academy-class-pass-grid {
        grid-template-columns: 1fr;
    }

    .academy-accordion-header {
        padding: 20px 0;
    }

    .academy-accordion-title {
        font-size: 16px;
        line-height: 23px;
    }

    .academy-faculty-group {
        margin-bottom: 20px;
    }

    .academy-faculty-group-label {
        font-size: 14px;
        line-height: 18.2px;
    }

    .academy-faculty-group-sub {
        font-size: 12px;
        line-height: 16.8px;
        margin-top: 2px;
    }

    .academy-faculty-name {
        font-size: 14px;
        line-height: 18.2px;
    }

    .academy-faculty-role {
        font-size: 12px;
        line-height: 16.8px;
    }

    .academy-faculty-grid--list {
        margin-top: 16px;
    }

    .academy-faculty-avatar {
        flex: 0 0 80px;
        width: 80px;
        height: 80px;
    }

    .academy-accordion-skin .e-n-accordion-item>.e-n-accordion-item-title {
        padding: 20px 0 !important;
    }

    .academy-accordion-skin .e-n-accordion-item-title-text {
        font-size: 18px !important;
    }

    .academy-modal {
        padding: 0;
        align-items: flex-end;
    }

    .academy-modal-panel {
        width: 100%;
        height: max-content;
        max-height: 100vh;
        padding: 40px 20px;
    }

    .academy-modal-title {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 20px;
    }

    .academy-modal-content p {
        margin-bottom: 20px;
    }

    .academy-modal-schedule th {
        font-size: 14px;
        line-height: 18.2px;
    }

    /* Bio popup goes full-screen on mobile (mirrors .team-modal): the
       header stays put, the bio keeps its own scroll area. */
    .academy-modal--bio {
        padding: 0;
        align-items: flex-start;
    }

    .academy-modal--bio .academy-modal-panel {
        width: 100%;
        max-height: 100vh;
        min-height: 100vh;
        padding: 44px 28px 36px;
    }

    /* One card per view with the next one peeking. */
    .academy-related-grid {
        gap: 10px;
    }

    .academy-related-card {
        flex-basis: 40%;
    }

    .academy-related-card:last-child {
        margin-right: 20px;
    }

    .academy-featured-overlay {
        padding: 60px 20px 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .academy-featured-title {
        font-size: 18px;
    }

    .academy-featured-more {
        font-size: 14px;
    }

    .academy-featured-past {
        margin-top: 20px;
    }

    .academy-modal--bio .academy-modal-content p {
        font-size: 14px;
        line-height: 18.2px;
    }

    .academy-modal-bio-avatar {
        width: 80px;
        height: 80px;
    }

    .academy-accordion-icon {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 412px) {
    .hero-visual-wrap .event-visual__image img {
        height: var(--img-height-m, var(--img-height, 100%));
    }

    .academy-related-card {
        flex-basis: 80%;
    }
}