/* ================================
   CLASS TILES
   ================================
   The class card as a tile: a title band across the top, the photo, and
   the text (ages, then the day in the display face with the time under
   it, a dashed rule, the blurb, and the start date and spots at the
   foot).

   This file is loaded apart from style.css so that one set of rules can
   serve two cases (functions.php decides which):

   - On the home page it applies at every width. From 768px the photo
     stands down the left under the band in a 4:5 frame, the shape of the
     class photos, so one shows whole; the tile is as tall as the band
     and that frame, and the text has the column that is left, the blurb
     cut at a set number of lines so it never outgrows the photo. One
     across at 600px (a 272px photo), then two across from 1055px (440px
     tiles, a 232px photo) and 1215px (520px tiles, 272px). A card the
     plugin marks .card--wide (the
     odd one out of a pair) is left out of all this: it falls through to
     the Classes page's own card, which already spans the grid at the
     two-across steps, so it looks exactly as the class does there, full
     excerpt and all.

   - Everywhere else a class grid appears (the Classes page), the file is
     linked with media="(max-width: 767px)", so its rules reach a phone
     only and the page keeps its own cards from 768px up.

   On a phone, in both cases, the tile stacks: the band, the photo whole
   at the tile's full width, the text below.

   The plugin adds .grid-container--home on the front page only; the rules
   that are the home page's alone (the lift on hover, two across) ask for
   it. The tile's own selectors carry extra classes to outrank the Classes
   page's rules in style.css (which score up to four classes); H stands
   for the tile throughout. */

/* H = .grid-container > .card.card-link:not(.card--wide):has(.card-body) */
.grid-container > .card.card-link:not(.card--wide):has(.card-body) {
    grid-column: auto;
    display: grid !important;
    grid-template-columns: var(--home-photo-w, 272px) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; /* title | ages | day & time | blurb | start | spots */
    column-gap: 0;
    align-content: start;
    height: auto; /* the band, then the photo's 4:5 frame: see .card-poster */
    min-height: 0;
    padding: 0;
    overflow: hidden;
}
/* No photo: the text takes the whole width, in a tile about as tall as
   its neighbours with one. */
.grid-container > .card.card-link:not(.card--wide):has(.card-body):not(:has(.card-poster)) {
    grid-template-columns: minmax(0, 1fr);
    min-height: calc(var(--home-photo-w, 272px) * 1.25 + 3.5rem);
}
.grid-container > .card.card-link:not(.card--wide):has(.card-body) .card-body,
.grid-container > .card.card-link:not(.card--wide):has(.card-body) .card-text {
    display: contents;
}
.grid-container > .card.card-link:not(.card--wide):has(.card-body) .card-body::after {
    display: none; /* the rule is drawn under the day & time instead */
}

/* The title band. Its colour is the card's (teal, saffron on hover). */
.grid-container > .card.card-link:not(.card--wide):has(.card-body) h3 {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: start;
    z-index: 1;
    margin: 0;
    padding: 0.75rem 1rem 0.7rem;
    font-size: 1.35rem;
    line-height: 1.1;
    text-align: center;
    text-shadow: none;
    background: #1e1008;
    border-bottom: 1px solid rgba(203, 158, 89, 0.4);
}

/* The photo: the left column from under the band to the foot, in a 4:5
   frame (its height is the column's width and a quarter again), so a
   class photo, which is 4:5, shows whole. This frame is what makes the
   tile as tall as it is: the text rows beside it share its height, the
   blurb's row taking up the slack. An image of another shape is cropped
   to fill (at the focal point and zoom from the edit screen when the
   card is set to crop). Should the text ever outgrow the frame, the
   photo stretches down with the tile rather than leave a gap. A photo
   set to run across the top on the Classes page hangs here like any
   other, without its fade. */
.grid-container > .card.card-link:not(.card--wide):has(.card-body) .card-poster {
    grid-column: 1;
    grid-row: 2 / -1;
    align-self: stretch;
    position: relative;
    z-index: 0;
    width: auto;
    min-height: calc(var(--home-photo-w, 272px) * 1.25);
    margin: 0;
}
.grid-container > .card.card-link:not(.card--wide):has(.card-body) .card-poster:not(.card-poster--crop) img,
.grid-container > .card.card-link:not(.card--wide):has(.card-body) .card-poster .card-poster-frame {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    filter: none;
}
.grid-container > .card.card-link:not(.card--wide):has(.card-body) .card-poster--crop .card-poster-frame {
    display: block;
    width: auto;
    height: auto;
    overflow: hidden;
}
.grid-container > .card.card-link:not(.card--wide):has(.card-body) .card-poster--crop img {
    height: 100%;
}
.grid-container > .card.card-link:not(.card--wide):has(.card-body) .card-poster-frame::after {
    display: none;
}

/* The text column. Ages, then the day over its time, one tight group
   with the rule under it; the blurb below. */
.grid-container > .card.card-link:not(.card--wide):has(.card-body) .age-tag {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    z-index: auto;
    margin: 0.85rem 1.1rem 0;
    padding: 0;
    line-height: 1;
    text-shadow: none;
}
.grid-container > .card.card-link:not(.card--wide):has(.card-body) .perforation {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    display: flex;
    flex-direction: column;
    z-index: auto;
    margin: 0.4rem 1.1rem 0;
    padding: 0 0 0.5rem;
    border-bottom: 1px dashed #3a2a1a;
    font-style: normal;
    opacity: 1;
    text-shadow: none;
}
.grid-container > .card.card-link:not(.card--wide):has(.card-body) .schedule-day {
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--saffron);
}
.grid-container > .card.card-link:not(.card--wide):has(.card-body) .schedule-sep {
    display: none;
}
.grid-container > .card.card-link:not(.card--wide):has(.card-body) .schedule-time {
    margin-top: 0.1rem;
    font-size: 0.8rem;
    line-height: 1.3;
    font-style: italic;
    color: var(--parchment);
    opacity: 0.85;
}
.grid-container > .card.card-link:not(.card--wide):has(.card-body) .card-body p {
    grid-column: 2;
    grid-row: 4;
    align-self: start;
    margin: 0.6rem 1.1rem 0;
    padding: 0;
    max-width: none;
    min-height: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--home-blurb-lines, 7);
    overflow: hidden;
}
.grid-container > .card.card-link:not(.card--wide):has(.card-body) .card-start-date {
    grid-column: 2;
    grid-row: 5;
    align-self: end;
    margin: 0 1.1rem 0.2rem;
}
.grid-container > .card.card-link:not(.card--wide):has(.card-body) .spots-remaining {
    grid-column: 2;
    grid-row: 6;
    margin: 0 1.1rem 1.1rem;
}
.grid-container > .card.card-link:not(.card--wide):has(.card-body) .spots-remaining.spots-full {
    margin-top: 0.4rem;
}
.grid-container > .card.card-link:not(.card--wide):has(.card-body):not(:has(.card-poster)) :is(.age-tag, .perforation, .card-body p, .card-start-date, .spots-remaining) {
    grid-column: 1;
}

/* The sash in the card's corner, over the band. */
.grid-container > .card.card-link:not(.card--wide):has(.card-body) .on-now-ribbon,
.grid-container > .card.card-link:not(.card--wide):has(.card-body) .sold-out-ribbon {
    z-index: 2;
}

/* The home page's cards lift a little on hover along with the glow — the
   two-across tiles and a full-width card alike, so the row moves as one;
   the Classes page's tiles stay put. (The repeated classes outrank the
   page content's link rule, which scores five classes and an element and
   sets its own transition on every link.) */
.grid-container.grid-container--home > .card.card.card-link:has(.card-body) {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.grid-container--home > .card.card-link:has(.card-body):hover {
    transform: translateY(-4px);
}

/* On a phone the tile stacks: the band, then the photo as a strip the
   width of the tile, then the text; as tall as it needs. The tile is
   capped at 440px (the two-across tile's width) and centred, so it only
   stretches across the range of real phones; from there to 768px the
   margins grow instead of the tile. */
@media (max-width: 767px) {
    .grid-container > .card.card-link:not(.card--wide):has(.card-body) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto auto auto auto auto; /* title | photo | ages | day & time | blurb | start | spots */
        height: auto;
        width: 100%;
        max-width: 440px;
        justify-self: center;
    }
    /* The band's padding clears the sash in the corner on both sides, so
       the centred title stays centred. */
    .grid-container > .card.card-link:not(.card--wide):has(.card-body) h3 {
        padding: 0.7rem 3.4rem 0.65rem;
        font-size: 1.2rem;
    }
    /* The photo sits whole between the title band and the text, at the
       card's full width. Class photos and posters are taller than wide,
       and a strip cut from the middle lost heads and a poster's title.
       The cap only bites on an image taller than 4:5 in the widest card;
       it then shrinks to fit, centred on the card's own dark, rather
       than lose its top and bottom. The plugin gives the image's shape
       as --ar (a lazy image with sizes="auto" is laid out without a
       look at the file, so "height: auto" alone has nothing to go on);
       4:5, the shape of the class photos, stands in until it does. */
    .grid-container > .card.card-link:not(.card--wide):has(.card-body) .card-poster {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        height: auto;
        min-height: 0;
    }
    .grid-container > .card.card-link:not(.card--wide):has(.card-body):not(:has(.card-poster)) {
        min-height: 0;
    }
    .grid-container > .card.card-link:not(.card--wide):has(.card-body) .card-poster:not(.card-poster--crop) .card-poster-frame {
        position: static;
        display: block;
        height: auto;
    }
    .grid-container > .card.card-link:not(.card--wide):has(.card-body) .card-poster:not(.card-poster--crop) img {
        position: static;
        display: block;
        height: auto;
        aspect-ratio: var(--ar, 4 / 5);
        max-height: 560px;
        object-fit: contain;
    }
    /* A photo set to zoom in on part of itself (or to run across the top
       on the Classes page) has the same frame, the photo's own shape,
       and its zoom and focal point work inside it. At no zoom that is
       the whole photo, like its neighbours: the focal point only decides
       what a narrower frame keeps (the desktop column), or what stays
       when the cap bites. */
    .grid-container > .card.card-link:not(.card--wide):has(.card-body) .card-poster--crop {
        aspect-ratio: var(--ar, 4 / 5);
        max-height: 560px;
    }
    .grid-container > .card.card-link:not(.card--wide):has(.card-body) :is(.age-tag, .perforation, .card-body p, .card-start-date, .spots-remaining) {
        grid-column: 1;
    }
    .grid-container > .card.card-link:not(.card--wide):has(.card-body) .age-tag        { grid-row: 3; }
    .grid-container > .card.card-link:not(.card--wide):has(.card-body) .perforation    { grid-row: 4; }
    .grid-container > .card.card-link:not(.card--wide):has(.card-body) .card-body p    { grid-row: 5; }
    .grid-container > .card.card-link:not(.card--wide):has(.card-body) .card-start-date { grid-row: 6; margin-top: 0.9rem; }
    .grid-container > .card.card-link:not(.card--wide):has(.card-body) .spots-remaining { grid-row: 7; }
    .grid-container > .card.card-link:not(.card--wide):has(.card-body):not(:has(.card-poster)) .age-tag { grid-row: 2; }
    .grid-container > .card.card-link:not(.card--wide):has(.card-body):not(:has(.card-poster)) .perforation { grid-row: 3; }
    .grid-container > .card.card-link:not(.card--wide):has(.card-body):not(:has(.card-poster)) .card-body p { grid-row: 4; }
    .grid-container > .card.card-link:not(.card--wide):has(.card-body):not(:has(.card-poster)) .card-start-date { grid-row: 5; }
    .grid-container > .card.card-link:not(.card--wide):has(.card-body):not(:has(.card-poster)) .spots-remaining { grid-row: 6; }
    /* Off the home page the card carries the class's whole excerpt, not
       the short home-page blurb, so it is not cut at seven lines. */
    .grid-container:not(.grid-container--home) > .card.card-link:not(.card--wide):has(.card-body) .card-body p {
        display: block;
        -webkit-line-clamp: none;
        overflow: visible;
    }
}

/* Two across, in the grid's two upper steps. (A wide card spans both
   columns by the Classes page's tile rule above.) */
@media (min-width: 1055px) {
    .grid-container--home:has(.card-body) {
        grid-template-columns: repeat(2, 440px);
        --home-photo-w: 232px;
        --home-blurb-lines: 6;
    }
}

@media (min-width: 1215px) {
    .grid-container--home:has(.card-body) {
        grid-template-columns: repeat(2, 520px);
        --home-photo-w: 272px;
        --home-blurb-lines: 7;
    }
}