/* ==========================================================================
   Home page (index.php) - the public landing page

   css/public_site.css MUST be loaded BEFORE this sheet: it declares the --fh-*
   KEEP variables read here and the primitives this page is built from
   (.fh-container, .fh-eyebrow, .fh-btn*, .fh-teaser*, .fh-section*, .fh-empty,
   .fh-footer). css/aca-calendar.css owns the #Events block. Nothing here
   touches an .aca-cal* rule or restyles a shared .aca-* component; the page
   only lays those components out inside its own blocks.

   DOM the sheet is written against:

     body.fh-body.home-body
       #mainBodyDiv.homepage                the fixed scroll pane (aca-shell.css)
         main.fh-page.home-page
           section.home-hero                photo + scrim + .home-hero__inner
           section.home-strip               signed-in visitors only
           section.fh-section#Subjects      ul.home-subjects > li.home-subject
           section.fh-section--alt#About    .home-about  (text | dl.aca-kv)
           section.fh-section#Families      the shared .fh-teaser block
           section.fh-section--alt#Pricing  .aca-card.home-tuition, or .fh-empty
           section.fh-section#Events        the compact calendar (.aca-cal)
           section.fh-section--alt#Contact  .home-contact > the address card
                                            (.aca-card.home-contact__card) and
                                            the map card (.aca-card.home-map:
                                            figure.home-map__frame > img + the
                                            a.home-map__pin), then the quiet
                                            p.home-contact__credit line
           footer.fh-footer

     1. Page           - .home-body / .home-page, the two scoping hooks
     2. Hero           - .home-hero*
     3. Welcome strip  - .home-strip*
     4. Subjects       - .home-subjects / .home-subject*
     5. About          - .home-about*
     6. Tuition        - .home-tuition*
     7. Contact        - .home-contact*
     8. Responsive     - 991px layout switch, 576px phone type scale
     9. Print

   Colours and sizes come from css/aca-tokens.css: no literal colour, no
   rgba(), no !important anywhere below. Section spacing is the shared
   .fh-section rhythm (3rem 0, scroll-margin-top 4.25rem) that the Families hub
   uses unchanged, so this sheet adds nothing for it.
   ========================================================================== */

/* ==========================================================================
   1. Page

   .home-body and .home-page carry no look of their own - .fh-body / .fh-page
   already paint and type the page and #mainBodyDiv is the scroll pane - so
   they appear only as the print block's scope in section 9.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   2. Hero
   -------------------------------------------------------------------------- */

/* isolation: isolate keeps the photo and the scrim, both on a negative
   z-index, inside the hero's own stacking context instead of sliding behind
   the page. */
.home-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: min(70vh, 40rem);
    margin: 0;
    padding: 4rem 0 3.5rem;
    overflow: hidden;
}

.home-hero__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
}

.home-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    margin: 0;
    padding: 0;
    background: var(--aca-chrome);
    opacity: .72;
}

.home-hero__inner {
    position: relative;
    text-align: center;
}

.home-hero__logo {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto 1.25rem;
    padding: 0;
}

.home-hero__eyebrow {
    color: var(--fh-on-dark-accent);
}

.home-hero__title {
    margin: 0 0 1rem;
    padding: 0;
    color: var(--aca-on-brand);
    font-family: inherit;
    font-size: clamp(var(--aca-text-2xl), 5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
}

.home-hero__title-line {
    display: block;
}

.home-hero__lead {
    max-width: 44rem;
    margin: 0 auto 1.75rem;
    padding: 0;
    color: var(--aca-on-brand);
    font-size: 1.1875rem;
    line-height: 1.55;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--aca-space-3);
    margin: 0 0 1.75rem;
    padding: 0;
}

.home-hero__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--aca-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Solid surface, not a translucent pill: a bordered chip on the scrim has no
   contrast of its own and the text under it rides whatever the photo does. */
.home-hero__chip {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: .375rem .875rem;
    border-radius: var(--aca-radius-pill);
    background: var(--aca-surface);
    color: var(--aca-ink);
    font-size: var(--aca-text-sm);
    font-weight: 600;
    line-height: 1.4;
}

.home-hero__chip i {
    margin: 0 var(--aca-space-2) 0 0;
    color: var(--aca-orange);
    font-size: .875em;
}

/* ==========================================================================
   3. Welcome strip
   -------------------------------------------------------------------------- */

.home-strip {
    margin: 0;
    padding: var(--aca-space-3) 0;
    background: var(--aca-surface);
    border-bottom: 1px solid var(--aca-line);
    box-shadow: var(--aca-shadow-sm);
}

.home-strip__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aca-space-3);
}

.home-strip__greeting {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    color: var(--aca-ink);
    font-size: var(--aca-text-sm);
    font-weight: 600;
    line-height: 1.4;
}

.home-strip__greeting i {
    margin: 0 var(--aca-space-2) 0 0;
    color: var(--aca-orange);
    font-size: 1.125em;
}

.home-strip__viewing {
    margin: 0 0 0 var(--aca-space-2);
}

.home-strip__facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aca-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-strip__fact {
    margin: 0;
    padding: 0;
}

.home-strip__fact-link {
    display: inline-flex;
    border-radius: var(--aca-radius-pill);
    text-decoration: none;
}

.home-strip__fact-link:hover,
.home-strip__fact-link:focus {
    text-decoration: none;
}

.home-strip__fact-link:focus-visible {
    outline: none;
    box-shadow: var(--aca-focus);
}

.home-strip__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aca-space-2);
    margin: 0 0 0 auto;
    padding: 0;
}

/* ==========================================================================
   4. Subjects
   -------------------------------------------------------------------------- */

.home-subjects {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--aca-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-subject {
    margin: 0;
    padding: var(--aca-space-5);
    background: var(--aca-surface);
    border: 1px solid var(--aca-line);
    border-radius: var(--aca-radius);
    box-shadow: var(--aca-shadow-sm);
}

.home-subject__icon {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 0 var(--aca-space-4);
    padding: 0;
    object-fit: contain;
}

.home-subject__title {
    margin: 0 0 var(--aca-space-2);
    padding: 0;
    color: var(--aca-ink);
    font-family: inherit;
    font-size: var(--aca-text-lg);
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

.home-subject__text {
    margin: 0;
    padding: 0;
    color: var(--aca-muted);
    font-size: var(--aca-text-sm);
    line-height: 1.55;
}

/* ==========================================================================
   5. About
   -------------------------------------------------------------------------- */

.home-about {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--aca-space-6);
}

.home-about__text {
    max-width: 65ch;
    margin: 0;
    padding: 0;
}

.home-about__text p {
    margin: 0 0 var(--aca-space-4);
    padding: 0;
    color: var(--aca-fg-muted-strong);
    font-size: var(--aca-text-lg);
    line-height: 1.65;
}

.home-about__text p:last-child {
    margin-bottom: 0;
}

/* --aca-surface-2, not --aca-surface: the About band is .fh-section--alt, so a
   white card on it would have no edge but its border. */
.home-about__facts {
    margin: 0;
    padding: var(--aca-space-5);
    background: var(--aca-surface-2);
    border: 1px solid var(--aca-line);
    border-radius: var(--aca-radius);
}

/* ==========================================================================
   6. Tuition
   -------------------------------------------------------------------------- */

.home-tuition {
    max-width: 44rem;
    margin-inline: auto;
}

/* The family size and up to three plans (Fall, Spring, Full year): a plan
   heading or a family-size label wraps between words, never inside one, so
   each column keeps a whole word's width; on a phone the header row wraps too
   (section 8). Only on the narrowest phones (up to about 340px), where the
   prices leave the labels less than "students" needs, does a label hyphenate
   ("stu-dents"), and only then - a wider column never breaks a word. */
.home-tuition__table thead .aca-table__num,
.home-tuition__table tbody th {
    overflow-wrap: normal;
}

.home-tuition__table tbody th {
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* The viewer's discounts under the table: a titled list per group (In these
   prices, You also qualify for, Coming up), each discount its amount pill and
   name, then its sentence and its dates, then the rule's one line. */
.home-tuition__discounts {
    margin: var(--aca-space-5) 0 0;
}

.home-tuition__offer-group + .home-tuition__offer-group {
    margin-top: var(--aca-space-4);
}

.home-tuition__offer-title {
    margin: 0 0 var(--aca-space-2);
    color: var(--aca-fg-strong);
    font-size: var(--aca-text);
    font-weight: 700;
    line-height: 1.4;
}

.home-tuition__offers {
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-tuition__offer {
    margin: 0;
    padding: var(--aca-space-3) 0;
    border-top: 1px solid var(--aca-fg-line);
}

.home-tuition__offer:first-child {
    padding-top: 0;
    border-top: 0;
}

.home-tuition__offer-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aca-space-1) var(--aca-space-2);
    margin: 0 0 var(--aca-space-1);
}

.home-tuition__offer-name {
    color: var(--aca-fg-strong);
    font-weight: 600;
}

.home-tuition__offer-text,
.home-tuition__offer-when {
    margin: 0;
    font-size: var(--aca-text-sm);
    line-height: 1.55;
}

.home-tuition__offer-when {
    color: var(--aca-fg-muted);
}

.home-tuition__rule {
    margin: var(--aca-space-4) 0 0;
    color: var(--aca-fg-muted);
    font-size: var(--aca-text-sm);
    line-height: 1.55;
}

/* The part-time and late-start lines: one paragraph each, its question bold. */
.home-tuition__note {
    margin: var(--aca-space-4) 0 0;
    font-size: var(--aca-text-sm);
    line-height: 1.55;
}

/* A part-time subject's regular price, struck through after a lower one - the
   muted tone of the table's struck prices (.aca-cell__sub). */
.home-tuition__note del {
    color: var(--aca-fg-muted);
}

/* The signed-out footer's second line beside (or, on a phone, under) Register. */
.home-tuition__signin {
    margin: 0;
    color: var(--aca-fg-muted);
    font-size: var(--aca-text-sm);
}

.home-tuition__notes {
    margin: var(--aca-space-4) 0 0;
    padding: 0 0 0 var(--aca-space-5);
    color: var(--aca-muted);
    font-size: var(--aca-text-sm);
    line-height: 1.55;
}

.home-tuition__notes li {
    margin: 0 0 var(--aca-space-1);
    padding: 0;
}

.home-tuition__notes li:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   7. Contact
   The address card and the campus map side by side; §8 stacks them below
   992px. The map is a still - media/campus-map.webp, OpenStreetMap tiles at
   zoom 17 centred on the school - so the pin belongs at the frame's exact
   centre and object-fit: cover keeps it there whatever the frame's shape (3:2
   here, the full 4:3 on a phone). The pin is a real link home.js points at
   the visitor's maps app: a 0 x 0 anchor on the point, the dot and its pulse
   ring centred on it, the marker's tip resting on it and the label hanging to
   its right. The OpenStreetMap credit its licence requires is the quiet
   .home-contact__credit line under the cards - never on the map (owner).
   -------------------------------------------------------------------------- */

.home-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--aca-space-5);
    align-items: stretch;
}

.home-contact__card,
.home-map {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.home-contact__card .aca-card__body {
    flex: 1 1 auto;
}

.home-map__frame {
    position: relative;
    flex: 1 1 auto;
    margin: 0;
    min-height: 16rem;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 0 0 calc(var(--aca-radius) - 1px) calc(var(--aca-radius) - 1px);
    background: var(--aca-surface-2);
}

.home-map__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.home-map__pin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    color: var(--aca-orange);
    text-decoration: none;
}

.home-map__pin:hover,
.home-map__pin:focus {
    color: var(--aca-orange-strong);
    text-decoration: none;
}

.home-map__pulse,
.home-map__pulse::before {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: var(--aca-radius-pill);
}

.home-map__pulse {
    width: .875rem;
    height: .875rem;
    transform: translate(-50%, -50%);
    border: 2px solid var(--aca-surface);
    background: var(--aca-orange);
    box-shadow: var(--aca-shadow-sm);
}

.home-map__pulse::before {
    content: "";
    width: 3rem;
    height: 3rem;
    border: 2px solid var(--aca-orange);
    transform: translate(-50%, -50%) scale(.3);
    opacity: .9;
    animation: home-map-pulse 2.4s ease-out infinite;
}

@keyframes home-map-pulse {
    from {
        transform: translate(-50%, -50%) scale(.3);
        opacity: .9;
    }

    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

.home-map__marker {
    position: absolute;
    left: 0;
    bottom: .5rem;
    transform: translateX(-50%);
    font-size: 2.75rem;
    line-height: 1;
    filter: drop-shadow(0 2px 2px var(--aca-chrome-2));
    transition: transform var(--aca-transition);
}

.home-map__pin:hover .home-map__marker,
.home-map__pin:focus-visible .home-map__marker {
    transform: translateX(-50%) translateY(-.25rem);
}

.home-map__pin-label {
    position: absolute;
    left: 1.625rem;
    bottom: 1.125rem;
    padding: .125rem .75rem;
    border: 1px solid var(--aca-line);
    border-radius: var(--aca-radius-pill);
    background: var(--aca-surface);
    color: var(--aca-fg-strong);
    font-size: var(--aca-text-sm);
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    box-shadow: var(--aca-shadow-sm);
    transition: background-color var(--aca-transition), color var(--aca-transition),
        border-color var(--aca-transition);
}

.home-map__pin:hover .home-map__pin-label,
.home-map__pin:focus-visible .home-map__pin-label {
    border-color: var(--aca-orange);
    background: var(--aca-orange);
    color: var(--aca-on-brand);
}

.home-map__pin:focus-visible .home-map__pin-label {
    box-shadow: var(--aca-focus);
}

.home-contact__credit {
    margin: var(--aca-space-2) 0 0;
    color: var(--aca-fg-muted);
    font-size: var(--aca-text-xs);
    text-align: right;
}

.home-contact__credit a {
    color: inherit;
    text-decoration: underline;
}

/* ==========================================================================
   8. Responsive - 991px layout switch, 576px phone type scale
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .home-hero {
        min-height: min(60vh, 28rem);
        padding: 2.5rem 0 2.25rem;
    }

    .home-hero__logo {
        width: 72px;
        height: 72px;
        margin-bottom: 1rem;
    }

    .home-hero__lead {
        margin-bottom: 1.25rem;
    }

    .home-hero__actions {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 1.25rem;
    }

    .home-strip__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .home-strip__actions {
        width: 100%;
        margin: 0;
    }

    .home-strip__actions > a {
        flex: 1 1 8rem;
    }

    .home-subjects {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--aca-space-4);
    }

    .home-about {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--aca-space-5);
    }

    .home-about__facts {
        padding: var(--aca-space-4);
    }

    /* Four columns on a phone: the header row wraps ("Full / year") instead
       of widening the table - the office tables want it on one line, which
       the component's .aca-table .aca-table__num keeps on a laptop - and half
       the compact cells' side padding keeps the family-size labels and three
       plans inside a 360px phone's card. */
    .home-tuition__table thead th,
    .home-tuition__table thead .aca-table__num {
        white-space: normal;
    }

    .home-tuition__table th,
    .home-tuition__table td {
        padding-right: var(--aca-space-1);
        padding-left: var(--aca-space-1);
    }

    .home-contact {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-map__frame {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 576px) {
    .home-hero__title {
        font-size: 1.875rem;
        line-height: 1.15;
    }

    .home-hero__lead {
        font-size: 1rem;
    }

    .home-hero__chip {
        font-size: var(--aca-text-xs);
    }

    .home-strip__greeting {
        font-size: var(--aca-text-xs);
    }

    .home-subject__title {
        font-size: var(--aca-text);
    }

    .home-about__text p {
        font-size: var(--aca-text);
    }

    .home-tuition__notes {
        font-size: var(--aca-text-xs);
    }
}

/* ==========================================================================
   9. Print
   Last in the sheet, so an equally specific screen rule above it loses on
   order. css/aca-shell.css section 7 already unpins #mainBodyDiv and
   css/aca-base.css section 13 hides the chrome.
   -------------------------------------------------------------------------- */

@media print {
    .home-body .home-hero__img,
    .home-body .home-hero__scrim,
    .home-body .home-hero__actions,
    .home-body .home-strip {
        display: none;
    }

    .home-page .home-hero {
        min-height: 0;
        padding: 0 0 .75rem;
    }

    .home-page .home-hero__title,
    .home-page .home-hero__lead {
        color: var(--aca-ink);
    }

    .home-page .home-hero__eyebrow {
        color: var(--aca-orange-strong);
    }

    .home-page .home-hero__chip {
        background: none;
        color: var(--aca-ink);
    }

    .home-page .home-subject,
    .home-page .home-about__facts {
        box-shadow: none;
    }

    /* Paper is phone-wide, so the subjects come back three across as on a
       laptop, and a subject never splits; the map takes the laptop's 3:2, so
       it shares its sheet with the address card. */
    .home-page .home-subjects {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-page .home-subject {
        break-inside: avoid;
    }

    .home-page .home-map__frame {
        aspect-ratio: 3 / 2;
    }
}