/*
 * Home 2026 (page-templates/page-home-2026.php)
 * Built from the client-approved mock-up V.10.
 * Every rule is scoped to .ms26 so nothing leaks into the rest of the site.
 * Headings: Playfair Display. Body: DM Sans. Both loaded in lib/scripts.php for this template only.
 */

.ms26 {
    --ms26-cream: #FBF8F3;
    --ms26-ink: #221B19;
    --ms26-body: #57504B;
    --ms26-border: #E6DCCB;
    --ms26-divider: #ECE3D6;
    --ms26-blush: #F4E4E2;
    --ms26-red: #BA2025;
    --ms26-accent: #9E1B21;
    --ms26-eyebrow: #641318;
    --ms26-gold: #E9CF92;
    --ms26-serif: 'Playfair Display', Georgia, serif;
    --ms26-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    display: block;
    font-family: var(--ms26-sans);
    color: #2A2320;
    background: var(--ms26-cream);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Reset the theme's global text styles inside this page */
.ms26 p,
.ms26 a,
.ms26 span {
    font-family: var(--ms26-sans);
}

.ms26 p {
    margin: 0;
    font-size: inherit;
    color: inherit;
}

.ms26 h1,
.ms26 h2,
.ms26 h3 {
    margin: 0;
    font-family: var(--ms26-serif) !important;
    font-weight: 700;
    color: var(--ms26-ink);
}

.ms26 img {
    max-width: none;
}

.ms26-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}

/* Shared text styles */
.ms26 .ms26-eyebrow {
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ms26-eyebrow);
}

.ms26 .ms26-eyebrow--gold {
    margin-bottom: 20px;
    color: var(--ms26-gold);
}

.ms26 .ms26-eyebrow--light {
    color: #FBE3E2;
}

.ms26 .ms26-heading {
    margin: 0 0 16px;
    font-size: 44px;
    font-weight: 400;
    line-height: 1.12;
    color: var(--ms26-ink);
}

.ms26 .ms26-heading--light {
    color: #FFFFFF;
}

.ms26 .ms26-lead {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ms26-body);
}

.ms26-arrow {
    flex-shrink: 0;
}

/* Buttons and links */
.ms26 .ms26-btn,
.ms26 .ms26-btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 17px 32px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.12s ease;
}

/* Interaction states: :hover only on devices with a mouse (so it can't get stuck on after a tap),
   :active is the tap/press state on touch screens, :focus-visible is for keyboard users. */
.ms26 a {
    -webkit-tap-highlight-color: transparent;
}

.ms26 .ms26-btn:active {
    transform: scale(0.96);
}

.ms26 .ms26-btn--red,
.ms26 .ms26-btn--red:visited {
    background: var(--ms26-accent);
    color: #FFFFFF;
}

.ms26 .ms26-btn--red:focus-visible,
.ms26 .ms26-btn--red:active {
    background: #7A1418;
    color: #FFFFFF;
}

.ms26 .ms26-btn--outline,
.ms26 .ms26-btn--outline:visited {
    padding: 15px 26px;
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
}

.ms26 .ms26-btn--outline:focus-visible,
.ms26 .ms26-btn--outline:active {
    background: #FFFFFF;
    color: var(--ms26-ink);
}

.ms26 .ms26-btn--white,
.ms26 .ms26-btn--white:visited {
    background: #FFFFFF;
    color: var(--ms26-ink);
}

.ms26 .ms26-btn--white:focus-visible,
.ms26 .ms26-btn--white:active {
    background: #F6DCDA;
    color: var(--ms26-ink);
}

@media (hover: hover) {
    .ms26 .ms26-btn--red:hover {
        background: #7A1418;
        color: #FFFFFF;
    }

    .ms26 .ms26-btn--outline:hover {
        background: #FFFFFF;
        color: var(--ms26-ink);
    }

    .ms26 .ms26-btn--white:hover {
        background: #F6DCDA;
        color: var(--ms26-ink);
    }

    .ms26 .ms26-text-link:hover {
        color: #6E1015;
        border-color: #6E1015;
    }
}

.ms26 .ms26-text-link,
.ms26 .ms26-text-link:visited {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 2px solid var(--ms26-accent);
    font-size: 16px;
    font-weight: 700;
    color: var(--ms26-accent);
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
}

.ms26 .ms26-text-link:active {
    color: #6E1015;
    border-color: #6E1015;
}

.ms26 a:focus-visible {
    outline: 3px solid var(--ms26-gold);
    outline-offset: 3px;
}

/* Hero */
.ms26-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 760px;
    padding: 96px 24px 170px;
    overflow: hidden;
    background: #2A1A17;
}

.ms26 .ms26-hero__image {
    position: absolute;
    top: 0;
    left: -15%;
    width: 115%;
    height: 100%;
    object-fit: cover;
    object-position: center 72%;
    display: block;
}

.ms26-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(24, 12, 10, 0.66) 0%, rgba(24, 12, 10, 0.42) 45%, rgba(24, 12, 10, 0.06) 100%);
}

.ms26-hero__inner {
    position: relative;
}

.ms26-hero__content {
    max-width: 620px;
}

.ms26 .ms26-hero__heading {
    margin: 0 0 24px;
    font-size: 62px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: #FFFFFF;
}

.ms26 .ms26-hero__text {
    max-width: 560px;
    margin: 0 0 38px;
    font-size: 19px;
    line-height: 1.6;
    color: #F3ECE6;
}

.ms26-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
}

/* Stats strip */
.ms26-stats {
    position: relative;
    z-index: 2;
    padding: 0 24px;
}

.ms26-stats__inner {
    display: flex;
    flex-wrap: wrap;
    max-width: 1240px;
    margin: -76px auto 0;
    background: #FFFFFF;
    border: 1px solid var(--ms26-border);
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(60, 40, 20, 0.12);
}

.ms26-stats__item {
    flex: 1 1 220px;
    padding: 34px 20px;
    text-align: center;
    border-right: 1px solid var(--ms26-divider);
}

.ms26-stats__item:last-child {
    border-right: 0;
}

.ms26 .ms26-stats__number {
    margin: 0 0 8px;
    font-family: var(--ms26-serif);
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    color: var(--ms26-accent);
}

.ms26 .ms26-stats__label {
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ms26-body);
}

/* Why an all-girls school */
.ms26-why {
    padding: 112px 24px 104px;
}

.ms26-why__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 48px;
    margin-bottom: 52px;
}

.ms26-why__intro {
    flex: 1 1 560px;
    min-width: 0;
}

.ms26-why__intro .ms26-heading {
    max-width: 720px;
}

/* Fixed grid so every card in a row is the same width (no stretched last card) */
.ms26-why__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.ms26-reason {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 36px 34px 38px;
    background: #FFFFFF;
    border: 1px solid var(--ms26-border);
    border-radius: 22px;
}

.ms26-reason__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 999px;
    background: var(--ms26-blush);
    font-family: var(--ms26-serif);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: lining-nums;
    color: var(--ms26-accent);
}

.ms26 .ms26-reason__title {
    margin-top: 6px;
    font-size: 26px;
    line-height: 1.2;
}

.ms26 .ms26-reason__text {
    flex-grow: 1;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ms26-body);
}

.ms26 .ms26-reason__source {
    font-size: 14px;
    font-weight: 700;
    color: var(--ms26-accent);
}

/* Her journey: four phases */
.ms26-journey {
    position: relative;
    overflow: hidden;
    padding: 104px 24px 112px;
    background: var(--ms26-red);
}

.ms26-journey__ribbon {
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    height: 40px;
    background-image: url(../images/home-2026/ribbon-gingham.png);
    background-repeat: repeat-x;
    background-size: auto 40px;
    background-position: left center;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
    pointer-events: none;
}

.ms26-journey .ms26-container {
    position: relative;
}

.ms26-journey__header {
    max-width: 760px;
    margin: 0 auto 56px;
    text-align: center;
}

.ms26 .ms26-journey__header .ms26-heading {
    margin: 0;
    font-size: clamp(30px, 3.6vw, 46px);
}

.ms26-journey__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.ms26-phase {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid var(--ms26-border);
    border-radius: 22px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* The whole card is clickable: the "Visit school" link stretches over it.
   Mouse: lifts on hover. Keyboard: lifts when the link has focus. Touch: presses in while tapped. */
@media (hover: hover) {
    .ms26-phase:hover {
        transform: translateY(-6px);
        box-shadow: 0 22px 38px rgba(0, 0, 0, 0.30);
    }

    .ms26-phase:hover .ms26-phase__link {
        color: #6E1015;
    }

    .ms26-phase:hover .ms26-phase__link .ms26-arrow {
        transform: translateX(4px);
    }
}

.ms26-phase:has(.ms26-phase__link:focus-visible) {
    transform: translateY(-6px);
    box-shadow: 0 22px 38px rgba(0, 0, 0, 0.30);
}

.ms26-phase:active,
.ms26-phase:has(.ms26-phase__link:active) {
    transform: scale(0.97);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
    transition-duration: 0.1s;
}

.ms26-phase:active .ms26-phase__link,
.ms26-phase:has(.ms26-phase__link:active) .ms26-phase__link {
    color: #6E1015;
}

.ms26-phase:active .ms26-phase__link .ms26-arrow,
.ms26-phase:has(.ms26-phase__link:active) .ms26-phase__link .ms26-arrow {
    transform: translateX(4px);
}

.ms26 .ms26-phase__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 22px;
}

.ms26 .ms26-phase__link:focus-visible {
    outline: none;
}

.ms26 .ms26-phase__link:focus-visible::after {
    outline: 3px solid var(--ms26-gold);
    outline-offset: 3px;
}

.ms26-phase__link .ms26-arrow {
    transition: transform 0.2s ease;
}

/* Keep the photo's top corners rounded while the card lifts. During the hover animation some
   browsers stop clipping a moving card's photo to its parent's rounded corners, so the photo
   briefly shows square corners. Rounding the photo itself and isolating the media box (plus the
   mask, which forces the clip in Chrome and Safari) keeps the corners rounded throughout. */
.ms26-phase__media {
    position: relative;
    overflow: hidden;
    border-radius: 21px 21px 0 0;
    isolation: isolate;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
}

.ms26 .ms26-phase__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 21px 21px 0 0;
}

.ms26 .ms26-phase__grades {
    position: absolute;
    left: 16px;
    bottom: 16px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 700;
    color: var(--ms26-ink);
}

.ms26-phase__body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 26px 30px;
}

.ms26 .ms26-phase__title {
    font-size: 25px;
    line-height: 1.2;
}

.ms26 .ms26-phase__text {
    flex-grow: 1;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ms26-body);
}

.ms26 .ms26-phase__link,
.ms26 .ms26-phase__link:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ms26-accent);
    text-decoration: none;
    transition: color 0.2s;
}

/* People who have turned off animations on their device get colour changes only, no movement */
@media (prefers-reduced-motion: reduce) {
    .ms26-phase,
    .ms26-phase__link .ms26-arrow,
    .ms26 .ms26-btn {
        transition: none;
        transform: none !important;
    }
}

/* Visit us */
.ms26-visit {
    padding: 104px 24px;
}

.ms26-visit__panel {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    max-width: 1240px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 32px;
    background: var(--ms26-accent);
}

.ms26-visit__content {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: 1 1 460px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    padding: 72px 64px;
}

.ms26 .ms26-visit__content .ms26-eyebrow {
    margin: 0;
    color: #F6DCDA;
}

.ms26 .ms26-visit__emblem {
    position: absolute;
    top: -8%;
    right: -70px;
    z-index: -1;
    width: auto;
    height: 116%;
    display: block;
    pointer-events: none;
}

.ms26 .ms26-visit__heading {
    max-width: 511px;
    margin: 0;
    font-size: clamp(32px, 3.8vw, 50px);
    line-height: 1.1;
}

.ms26-visit__media {
    flex: 1 1 420px;
    min-width: 0;
    min-height: 380px;
}

.ms26 .ms26-visit__image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
    object-position: 75% center;
}

/* Tablet */
@media (max-width: 1024px) {
    .ms26 .ms26-hero__heading {
        font-size: 50px;
    }

    .ms26 .ms26-heading {
        font-size: 38px;
    }

    .ms26-stats__item {
        flex-basis: 50%;
    }

    .ms26-stats__item:nth-child(2) {
        border-right: 0;
    }

    .ms26-stats__item:nth-child(-n+2) {
        border-bottom: 1px solid var(--ms26-divider);
    }

    .ms26-visit__content {
        padding: 56px 44px;
    }

    /* Tablet: even two-by-two grids */
    .ms26-why__cards,
    .ms26-journey__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* An odd last card (e.g. the third "Why" card) sits centred on its own row, same width as the others */
    .ms26-why__cards > :last-child:nth-child(odd),
    .ms26-journey__cards > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - 28px) / 2);
    }

    .ms26-journey__cards > :last-child:nth-child(odd) {
        width: calc((100% - 24px) / 2);
    }
}

/* Mobile */
@media (max-width: 640px) {
    .ms26-hero {
        min-height: 0;
        padding: 72px 16px 140px;
    }

    .ms26 .ms26-hero__image {
        left: 0;
        width: 100%;
        object-position: 70% 72%;
    }

    .ms26-hero__overlay {
        background: linear-gradient(180deg, rgba(24, 12, 10, 0.55) 0%, rgba(24, 12, 10, 0.70) 100%);
    }

    .ms26 .ms26-hero__heading {
        font-size: 38px;
    }

    .ms26 .ms26-hero__text {
        font-size: 17px;
    }

    .ms26 .ms26-btn,
    .ms26 .ms26-btn:visited {
        padding: 15px 24px;
    }

    .ms26-stats {
        padding: 0 16px;
    }

    .ms26-stats__item {
        padding: 24px 12px;
    }

    .ms26 .ms26-stats__number {
        font-size: 34px;
    }

    .ms26 .ms26-stats__label {
        font-size: 11px;
    }

    .ms26-why {
        padding: 72px 16px;
    }

    .ms26 .ms26-heading {
        font-size: 32px;
    }

    .ms26-why__intro {
        flex-basis: 100%;
    }

    .ms26-reason {
        padding: 28px 24px 30px;
    }

    .ms26-journey {
        padding: 72px 16px 96px;
    }

    .ms26-why__cards,
    .ms26-journey__cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .ms26-why__cards > :last-child:nth-child(odd),
    .ms26-journey__cards > :last-child:nth-child(odd) {
        width: auto;
        justify-self: stretch;
    }

    .ms26-visit {
        padding: 72px 16px;
    }

    .ms26-visit__panel {
        border-radius: 24px;
    }

    .ms26-visit__content {
        flex-basis: 100%;
        padding: 44px 28px;
    }

    .ms26-visit__media,
    .ms26 .ms26-visit__image {
        min-height: 260px;
    }
}