/**
 * christmas-cards.css
 * Section 2 — stacked cards that tilt away as you scroll
 * All classes are prefixed "chs-" so site-wide CSS can't interfere.
 *
 * Card layout (desktop):          Card layout (phones):
 *   ┌───────────────────────┐       ┌─────────────┐
 *   │ Title       [Give Now]│       │ Title [Give]│
 *   │ Text…                 │       │ Text…       │
 *   │ Text…        ★  [img] │       │ ★ [img]     │
 *   └───────────────────────┘       └─────────────┘
 */

.chs {
    --chs-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --chs-mono: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);   /* from /inc/custom.css */
    --chs-pad: 25px;
    --chs-pad-top: 40px;          /* space above the big title — raise for more */
    --chs-pad-left: 40px;         /* left edge shared by the title and the text */
    --chs-top: 0px;               /* height of the fixed site menu — set automatically by the JS */
    --chs-h: calc(100vh - var(--chs-top));

    position: relative;
    overflow: hidden;
    background: #D8E1CC;          /* Angie's mint slice — shows behind the cards */
    padding: 0;
}
.chs,
.chs * {
    box-sizing: border-box;
}
.chs .chs-slide {
    position: relative;
    height: var(--chs-h);          /* fits the window below the menu */
    scroll-margin-top: var(--chs-top);   /* #casey etc. land below the menu */
    /* no shadow here: this outer frame scrolls away while the card is pinned,
       so a shadow on it would float across the screen on its own */
}
/* Each card sits above the one before it, so the next card always slides OVER */
.chs .chs-slide:nth-child(1) { z-index: 1; }
.chs .chs-slide:nth-child(2) { z-index: 2; }
.chs .chs-slide:nth-child(3) { z-index: 3; }
.chs .chs-slide:nth-child(4) { z-index: 4; }
.chs .chs-slide:nth-child(5) { z-index: 5; }
.chs .chs-slide:nth-child(6) { z-index: 6; }
.chs .chs-wrap {
    width: 100%;
    height: 100%;
    perspective: 250vw;
}

/* ---- Card: title row on top, text directly under it, photo bottom-right ---- */
.chs .chs-content {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform-origin: 50% 10%;
    padding: var(--chs-pad-top) 50px 50px var(--chs-pad-left);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);   /* travels with the card */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 40px;
    row-gap: 24px;
}
.chs .chs-top {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;       /* title + Give Now button sit on the top edge */
    gap: 20px;
}
/* Text and the star + photo share the same grid area: the star + photo are a
   layer BEHIND the text (bottom right), so the text keeps its full width. */
.chs .chs-text {
    position: relative;
    z-index: 2;                    /* text on top */
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: start;             /* text starts right under the title */
    justify-self: start;           /* …on the same left edge */
    max-width: 46vw;
    max-height: 100%;
    overflow-y: auto;              /* safety net: only scrolls if a screen is very short */
    padding: 0;
}
.chs .chs-media {
    position: relative;
    z-index: 1;                    /* star + photo underneath */
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: end;
    justify-self: end;             /* bottom-right corner */
    display: flex;
    align-items: flex-end;
    gap: var(--chs-pad);
    pointer-events: none;          /* clicks and text selection go to the text above */
}
.chs p {
    margin: 0;
}

/* Big title + number: Instrument Serif */
.chs .chs-title,
.chs .chs-num {
    font-family: var(--chs-serif);
    font-weight: 400;
    font-size: 10.5vw;
    line-height: 0.9;
    letter-spacing: -0.02em;
}
.chs .chs-title {
    margin: 0;
    padding: 0;
    margin-left: -0.04em;        /* optical: lines the big serif letter up with the text edge */
    line-height: 1;              /* keeps tall serif letters inside the box */
    color: inherit;              /* beat any site-wide h2 colour */
    text-transform: none;
    white-space: nowrap;         /* campus names stay on one line on desktop */
}
.chs .chs-title em {
    font-style: italic;
}

/* Body copy: IBM Plex Mono (the site's --font-mono) */
.chs .chs-text,
.chs .chs-text p {
    font-family: var(--chs-mono);
    font-weight: 400;
    font-size: clamp(13px, 0.95vw, 16px);
    line-height: 1.6;
    letter-spacing: 0;
}
.chs .chs-text p + p {
    margin-top: 0.8em;
}
.chs .chs-text .chs-lead {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.chs .chs-media img {
    display: block;
    width: 44vw;                 /* photo size on desktop */
    max-width: none;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
}
.chs .chs-icon {
    display: block;
    width: 15vw;                 /* sits beside the photo, where the (01) number was */
    height: auto;
}

/* ---- "Give Now" button (top right of each card) ----
   Same style as the "Get Directions" button on /knox/ (.wi-hero__btn),
   in the card's text colour; on hover it fills with that colour. */
.chs .chs-give {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.2vw;             /* lines up with the top of the big title */
    padding: 0.85rem 1.75rem;
    border: 2px solid var(--chs-fg);
    border-radius: 60px;
    background: transparent;
    color: var(--chs-fg);
    font-family: "Roboto Condensed", "Helvetica Neue", sans-serif;
    font-size: 23px;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: normal;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.chs .chs-give:hover,
.chs .chs-give:focus-visible {
    background: var(--chs-fg);
    color: var(--chs-bg);
    text-decoration: none;
}
.chs .chs-give:focus-visible {
    outline: 2px solid var(--chs-fg);
    outline-offset: 3px;
}

/* Card colours — from the CityLife colour palette
   Pine #598472 · Spruce #497261 · Evergreen #3B5F51
   Light Birch #C1C0AF · Birch #A09F8F · Angie's mint slice #D8E1CC
   Cards alternate light / dark so each one stands out as it slides over the last.
   Order follows index.php (A–Z): 1 Beveridge, 2 Casey, 3 Knox + Online,
   4 Manningham, 5 Melbourne City, 6 Whittlesea. */
.chs .chs-content {
    background: var(--chs-bg);
    color: var(--chs-fg);
}
.chs .chs-icon { color: var(--chs-star); }

/* 1 Beveridge — mint slice / evergreen */
.chs .chs-slide:nth-child(1) .chs-content {
    --chs-bg: #D8E1CC;  --chs-fg: #3B5F51;  --chs-star: #598472;
}
/* 2 Casey — evergreen / mint slice */
.chs .chs-slide:nth-child(2) .chs-content {
    --chs-bg: #3B5F51;  --chs-fg: #D8E1CC;  --chs-star: #C1C0AF;
}
/* 3 Knox + Online — light birch / evergreen */
.chs .chs-slide:nth-child(3) .chs-content {
    --chs-bg: #C1C0AF;  --chs-fg: #3B5F51;  --chs-star: #497261;
}
/* 4 Manningham — spruce / mint slice */
.chs .chs-slide:nth-child(4) .chs-content {
    --chs-bg: #497261;  --chs-fg: #D8E1CC;  --chs-star: #C1C0AF;
}
/* 5 Melbourne City — mint slice / spruce */
.chs .chs-slide:nth-child(5) .chs-content {
    --chs-bg: #D8E1CC;  --chs-fg: #497261;  --chs-star: #A09F8F;
}
/* 6 Whittlesea — evergreen / light birch */
.chs .chs-slide:nth-child(6) .chs-content {
    --chs-bg: #3B5F51;  --chs-fg: #D8E1CC;  --chs-star: #A09F8F;
}

/* star.svg (same folder): used as a stencil so it takes each card's --chs-star colour */
.chs .chs-icon--file {
    flex: none;
    aspect-ratio: 1 / 1;
    background-color: var(--chs-star);
    -webkit-mask: url('star.svg') center / contain no-repeat;
            mask: url('star.svg') center / contain no-repeat;
}

/* Portrait screens (phones, tablets upright): title, text, photo stacked */
@media (max-aspect-ratio: 1/1) {
    .chs .chs-content {
        padding: 30px 15px 15px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        row-gap: 15px;
    }
    .chs .chs-title {
        font-size: 14vw;            /* fits longer names like "Melbourne City" */
        white-space: normal;
    }
    .chs .chs-icon { width: 20vw; flex: none; }
    .chs .chs-give {
        margin-top: 1.5vw;
        padding: 0.6rem 1.2rem;
        font-size: 17px;
        line-height: 20px;
    }
    .chs .chs-text {
        grid-row: 2;
        max-width: none;
    }
    .chs .chs-text,
    .chs .chs-text p {
        font-size: 14px;
        line-height: 1.55;
    }
    .chs .chs-media {
        grid-column: 1;
        grid-row: 3;
        gap: 15px;
    }
    .chs .chs-media img {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        aspect-ratio: 16 / 9;
        max-height: 44vh;           /* photo size on phones */
    }
}

/* Visually hidden text — read by search engines and screen readers, not shown */
.chs .chs-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}