/* ==========================================================================
Classes - page-specific additions only.
Cards reuse .class-grid/.class-card (the homepage's own components) with a
taller, image-on-top composition so "what to expect" bullets fit without
being crammed into the compact teaser's photo-overlay treatment. The list's
own header uses main.css's .section__head - no page-specific rules needed
for it (it's title-only now, see .classes-list-cta below). Colours, type
and the facet cut are all untouched from main.css. (The page-intro hero
was removed 2026-09-22 - .section--page-intro/.page-intro__link are no
longer used on this page, so their rules were removed too; other pages
keep their own. The header's intro paragraph and "See schedule & prices"
link were removed the same day and the link rebuilt below the grid, see
.classes-list-cta.)
2026-09-22, later the same day: uniform card sizing + a staggered/checkerboard
layout, at the user's request. Two things changed here:
1) Uniform cards. Previously `.class-card--full .class-card__media` declared
`aspect-ratio:16/10` but never actually got it - as a column-flex child
containing a replaced element (the ![]()
, which carries its own width/height
HTML attributes from wp_get_attachment_image), the media box's auto height
was resolving to the IMAGE's own intrinsic ratio instead of the declared one,
so every card's photo strip (and therefore the whole card) came out a
different height depending on that class's source photo's proportions -
exactly the bug the user described. Fixed by taking the ![]()
out of flow
(position:absolute inset:0 inside an overflow:hidden, aspect-ratio-controlled
box) so it can no longer influence the container's own sizing - the same
technique the homepage's compact .class-card already uses successfully.
Since all 6 cards share one grid column width, that alone makes every
card's media strip identical. The body then gets an explicit fixed height
(instead of auto/content-driven) with overflow:hidden and its "Try this
class" link pinned to the bottom via margin-top:auto - so a shorter
excerpt just leaves a little more breathing room above the link instead of
shrinking the card. The fixed height was sized with headroom above the
longest real card content (3-line excerpt + all-3-bullets, checked in both
languages) so nothing is ever clipped; overflow:hidden is a safety net,
not an active crop. Desktop and the new mobile 2-column grid each get their
own tuned body height/padding/type-scale, since a fixed body height doesn't
scale down proportionally with a narrowing card (padding and line-heights
are mostly fixed px, not width-relative), but photos, names, descriptions,
bullets, CTA text, colors and card order are all untouched either way.
2) Staggered rhythm. Odd cards (1st, 3rd, 5th - left column in both the
desktop and mobile 2-col grids) sit a little higher; even cards (2nd, 4th,
6th - right column) sit a little lower, via a plain translateY per
nth-child. Because a whole column always shares the same direction, this
never closes the gap between a card and its same-column neighbour above
or below (both shift the same way, by the same amount, so the gap between
them is unchanged) - the only thing it changes is the offset relative to
the other column, which is the intended editorial effect. margin-bottom on
the grid absorbs the lowered column's downward reach so the "See schedule
& prices" link below still gets its normal breathing room.
========================================================================== */
.section--classes{padding-top:clamp(120px,14vw,168px)}
/* dark-bg empty state, same pattern as Schedule & Prices' .prices-empty (that page's own dark
section) - main.css's .schedule-empty is styled for a light section, so it doesn't fit here. */
.classes-empty{padding:44px;text-align:center;border:1px dashed rgba(245,240,247,.25);font:400 1.3rem/1.4 var(--ff-display);color:var(--ivory)}
/* ---------- Full class list: 2 columns, uniform-size image-on-top cards ---------- */
.class-grid--full{
grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,32px);align-items:start;
margin-bottom:28px /* room for the lowered (even) column's downward offset, see .class-card--full:nth-child(even) */
}
.class-card--full{aspect-ratio:auto;display:flex;flex-direction:column;overflow:hidden}
.class-card--full .class-card__media{position:relative;inset:auto;aspect-ratio:16/10;flex:none;overflow:hidden}
.class-card--full .class-card__media img{position:absolute;inset:0;width:100%;height:100%}
.class-card--full .class-card__body{
position:static;display:flex;flex-direction:column;
height:360px; /* fixed - every card is exactly this tall below the photo, regardless of excerpt/bullet length */
padding:22px 26px 26px;
background:linear-gradient(160deg,rgba(44,16,73,.55),rgba(27,18,38,.9))}
.class-card--full .class-card__text{-webkit-line-clamp:3;margin-bottom:16px}
.class-card--full .class-card__more{margin-top:auto;padding-top:14px} /* pinned to the card's bottom edge */
.class-card__bullets{margin:2px 0 18px;display:flex;flex-direction:column;gap:9px}
.class-card__bullets li{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;line-height:1.4;color:var(--ivory)}
.class-card__bullets-glyph{width:17px;height:14px;flex:none;margin-top:4px;color:var(--champ)}
/* Checkerboard rhythm: left column (odd cards) up, right column (even cards) down. */
.class-card--full:nth-child(odd){transform:translateY(-28px)}
.class-card--full:nth-child(even){transform:translateY(28px)}
@media (max-width:900px){
/* Mobile keeps the same 2-column, uniform-card, staggered idea, just re-tuned for much
narrower cards: tighter gap/padding and a smaller type scale (font-size only - family,
weight, letter-spacing, transform and colour all stay exactly what main.css already sets),
a slightly taller (more square) photo so the image doesn't shrink to a sliver, and a
smaller offset so the stagger still reads as subtle rather than chaotic at this size. */
.class-grid--full{display:grid !important;grid-template-columns:repeat(2,1fr);gap:14px;overflow:visible;margin-inline:0;padding:0;margin-bottom:16px}
.class-grid--full > *{flex:none}
.class-card--full .class-card__media{aspect-ratio:4/3}
.class-card--full .class-card__body{height:250px;padding:14px 14px 16px}
.class-card--full .class-card__label{font-size:.58rem;margin-bottom:5px}
.class-card--full .class-card__title{font-size:1.05rem;line-height:1.15;margin-bottom:6px}
.class-card--full .class-card__text{font-size:.74rem;line-height:1.4;-webkit-line-clamp:2;margin-bottom:8px}
.class-card--full .class-card__bullets{margin:0 0 8px;gap:5px}
.class-card--full .class-card__bullets li{font-size:.68rem;line-height:1.3;gap:6px}
.class-card--full .class-card__bullets-glyph{width:12px;height:10px;margin-top:2px}
.class-card--full .class-card__more{font-size:.6rem;padding-top:8px}
.class-card--full .chip{padding:5px 9px;font-size:.6rem;top:10px;left:10px}
.class-card--full:nth-child(odd){transform:translateY(-14px)}
.class-card--full:nth-child(even){transform:translateY(14px)}
}
/* ---------- "See schedule & prices" CTA, after the last card ---------- */
.classes-list-cta{margin-top:clamp(40px,5vw,64px);text-align:center}
/* ---------- Closing "not sure?" band ---------- */
.section--classes-cta{padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(56px,7vw,88px)}
.classes-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.classes-cta__title{font:400 clamp(1.5rem,2.6vw,2.1rem)/1.25 var(--ff-display);color:var(--ink);margin-bottom:8px;max-width:32rem}
.classes-cta__text p{color:var(--ink-soft)}
@media (max-width:640px){.classes-cta{flex-direction:column;align-items:flex-start}.classes-cta .btn{width:100%}}