/* baking-classes.css
   Reconciled onto the site's design system on 2 September 2026, when 29 pages
   designed outside were merged in. Three kinds of rule were removed; the full
   list is in the commit, not here.

     1. Rules that re-styled SHARED shell components. This stylesheet loads
        AFTER palesas.css, so each one silently overrode the site-wide header,
        footer or nav ON THIS PAGE ONLY, while shell.mjs check called the page
        clean because the MARKUP was identical. A markup checker cannot see a
        stylesheet. That went for CLASS selectors and, in a second pass, for
        bare ELEMENT selectors too: one page stylesheet said nav{display:none}
        below 700px and was hiding the site's primary navigation.
     2. Rules for markup that no longer exists: the chrome this page arrived
        with, and its own hero.
     3. Document-level rules that fought palesas.css, which owns them.

   Colours are tokens now. palesas.css owns every shared component.

   Two things have already broken this banner, both worth knowing. It once
   PASTED THE REMOVED SELECTOR LIST INTO ITSELF, and that list held a star next
   to a slash, which closed the comment early and swallowed the next real rule.
   Then a sweep that counted braces without skipping comments read this prose
   as a selector and deleted words out of it. A tool that parses CSS must strip
   comments FIRST, and no generated text belongs inside one. */
.wrap{width:min(1200px,calc(100% - 48px));margin:auto}.top .wrap{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}/* max-width:none was here, cancelling the .pk-wrap this section carries, so
   the masterclass card rendered edge to edge at 1440 directly under a
   1200px header while its own siblings sat correctly in the column. */
.featured{display:grid;grid-template-columns:1fr 1fr;margin-top:44px;overflow:hidden;border:1px solid var(--pk-border);border-radius:var(--pk-r);background:var(--pk-surface)}.featured img{width:100%;height:100%;min-height:340px;object-fit:cover}.featured>div{padding:30px}.tag, .cards small{margin:0;color:var(--pk-primary);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}.tag{display:inline-block;border-radius:var(--pk-r-lg);padding:7px 11px;background:var(--pk-cream)}.featured h2{margin:20px 0 13px;color:var(--pk-primary);font:700 clamp(26px,3.4vw,33.6px)/1.05 var(--pk-display);letter-spacing:-.02em}.featured p{line-height:1.5}.featured ul{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:23px 0;padding:14px 0;list-style:none;font-size:13px}.btn, .cards a{display:inline-block;border:0;border-radius:var(--pk-r);padding:13px 18px;background:var(--pk-primary);color:var(--pk-primary-fg);font-size:12px;font-weight:600;text-decoration:none}.classes{padding:var(--pk-band) 0}.filters{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:14px;border:1px solid var(--pk-border);border-radius:var(--pk-r);padding:15px;background:var(--pk-surface)}.filters label{display:flex;align-items:center;gap:9px;border:1px solid var(--pk-border);padding:0 10px}.filters input, .filters select{width:100%;height:38px;border:1px solid var(--pk-border);border-radius:var(--pk-r);padding:0 10px;background:var(--pk-surface);color:var(--pk-muted)}.filters label input{border:0;padding:0}.filters button{border:0;background:none;color:var(--pk-primary);font-weight:600}.results{margin:20px 0;color:var(--pk-muted);font-size:13px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.cards article{overflow:hidden;border:1px solid var(--pk-border);border-radius:var(--pk-r);background:var(--pk-surface)}.cards article[hidden]{display:none}.cards img{display:block;width:100%;aspect-ratio:4/2.45;object-fit:cover;transition:transform .5s var(--pk-ease)}
@media (hover:hover) and (pointer:fine){.cards article:hover img{transform:scale(1.04)}}.cards article>div{padding:16px}.cards h2{min-height:44px;margin:9px 0;color:var(--pk-primary);font:600 19px/1.15 Outfit,sans-serif;letter-spacing:-.03em}.cards p{min-height:45px;margin:8px 0 13px;color:var(--pk-muted);font-size:13px;line-height:1.45}.cards dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px;font-size:11px}.cards dt, .cards dd{margin:0}.cards b{display:inline-block;margin-bottom:13px;border-radius:var(--pk-r);padding:5px 8px;background:var(--pk-cream);color:var(--pk-primary);font-size:9px;text-transform:uppercase}.cards a{display:block;text-align:center}.take{border:1px solid var(--pk-border);border-radius:var(--pk-r);padding:var(--pk-band) 0;background:var(--pk-cream)}.take h2{text-align:center;margin:0 0 20px;color:var(--pk-primary);font:600 18px Outfit,sans-serif;text-transform:uppercase}.take>div{display:grid;grid-template-columns:repeat(4,1fr)}.take p{display:flex;justify-content:center;align-items:center;gap:12px;margin:0;border-right:1px solid var(--pk-border);color:var(--pk-gold);font-size:26px}.take p:last-child{border:0}.take span{color:var(--pk-muted);font-size:12px;line-height:1.4}.join{margin-top:35px;background:var(--pk-primary);color:var(--pk-primary-fg)}.join .wrap{display:grid;grid-template-columns:1.8fr auto;align-items:center;gap:22px;padding:28px 0}.join div{display:flex;gap:15px;align-items:center}.join i{font-size:35px;font-style:normal}.join strong{display:block;margin-bottom:6px;font:600 19px Outfit,sans-serif}.join span{font-size:12px;line-height:1.4}.enrol{padding:var(--pk-band) 0;text-align:center}.enrol h2{margin:0;color:var(--pk-primary);font:700 clamp(26px,3.4vw,33.6px)/1.15 var(--pk-display);letter-spacing:-.02em}.enrol em{color:var(--pk-gold);font:400 44px "Great Vibes",cursive}.enrol p{color:var(--pk-muted)}@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.featured{grid-template-columns:1fr}.featured img{min-height:250px}.featured>div{padding:30px}.filters{grid-template-columns:1fr 1fr}.take>div{grid-template-columns:1fr 1fr;gap:15px}.take p:nth-child(2){border:0}.join .wrap{grid-template-columns:1fr;padding:28px 0}}@media(max-width:460px){.wrap{width:min(100% - 32px,1200px)}.cards{grid-template-columns:1fr}.filters{grid-template-columns:1fr}.featured ul{grid-template-columns:1fr}.take>div{grid-template-columns:1fr}.take p{justify-content:flex-start;border:0;border-bottom:1px solid var(--pk-border);padding-bottom:10px}}/* The join row is two CTAs beside a paragraph. It could not wrap, so at 320px
   the second button ran 1px past the viewport edge and took the page
   sideways with it. Measured, not guessed: 321 against a 320 viewport. */
.join > .pk-wrap{flex-wrap:wrap}
@media(max-width:400px){.join > .pk-wrap{display:grid}}

/* --------------------------------------------------------------------------
   Added for the redesign: real SVG icons (D17) instead of Georgia glyphs.
   The glyphs sized themselves with font-size; an <svg><use> needs an
   explicit box and a baseline nudge to sit level with the text beside it.
   -------------------------------------------------------------------------- */
.featured ul svg,.cards dt svg,.cards dd svg,.take p svg,.join i svg,
.filters label svg,.filters button svg{
  width:15px;height:15px;flex:none;vertical-align:-3px;color:var(--pk-primary);
}
.take p svg{width:26px;height:26px;vertical-align:middle;color:var(--pk-gold)}
.filters button{display:inline-flex;align-items:center;gap:6px}
/* The generic ".cards a" rule above styles every link inside a card as a
   solid button - meant for the image link and the real "Book now" CTA, it
   also caught the title link, so the class name rendered as a second
   maroon pill stacked directly above the actual button (Reviewer + an
   independent Impeccable design pass both flagged this as a real
   hierarchy failure, not a taste call: a title styled identically to a
   button gives a scanning visitor no way to tell which one is clickable
   for real). The title is plain text again; .cards--muted h2 a below still
   overrides its colour for the Past/dateless sections. */
.cards h2 a{display:inline;padding:0;background:none;color:var(--pk-primary);font-weight:inherit;text-decoration:none}

/* --------------------------------------------------------------------------
   Upcoming / dates-coming-soon / Past, added for the redesign. The Past and
   dateless sections reuse .cards but are visually quieter (no "book" CTA to
   compete with the real, bookable Upcoming cards above them) and the Past
   section's image and copy are dimmed slightly so the eye lands on Upcoming
   first, per the brief's "make it obvious what to do" priority.
   -------------------------------------------------------------------------- */
.cards--muted article{background:var(--pk-cream)}
.cards--muted img{filter:saturate(.82) brightness(.97)}
.cards--muted h2 a{color:var(--pk-muted)}

/* Under 3 items, the shared 3-up .cards grid left empty columns beside a
   lone or paired card - a broken-looking gap, not a deliberate layout.
   auto-fit collapses the grid to only as many tracks as there are cards,
   left-aligned, so a 1-card section reads as one spotlighted card instead
   of a stretched or orphaned one. */
.cards--sparse{grid-template-columns:repeat(auto-fit,minmax(260px,340px));justify-content:start}

/* .cards a (background:var(--pk-primary)) has higher specificity than the
   single-class .pk-btn--ghost in style.css, so the "look, not book" ghost
   button on Past/dateless cards was silently rendering solid maroon,
   identical to the real Book now CTA - both Impeccable dual-assessment
   findings and the Emil Kowalski pass caught the resulting flat hierarchy.
   Re-asserted here at matching specificity to win back the intended
   outline treatment. */
.cards a.pk-btn--ghost{background:none;color:var(--pk-primary);border:1.5px solid var(--pk-primary)}
@media (hover:hover) and (pointer:fine){
  .cards a.pk-btn--ghost:hover{background:var(--pk-primary);color:var(--pk-primary-fg)}
}

/* The "next class coming soon" empty state, replacing the whole Upcoming
   section when there is nothing bookable. */
.next-class{margin-top:44px;padding:var(--pk-band) 0;text-align:center;border-radius:var(--pk-r-xl);overflow:hidden}
.next-class > div{max-width:520px;margin:0 auto}
.next-class h2{margin:8px 0 12px;color:var(--pk-primary);font:700 clamp(24px,3.2vw,30px)/1.15 var(--pk-display);letter-spacing:-.02em}
.next-class p{color:var(--pk-muted);margin:0 0 22px}

.pk-pagination{margin:32px 0 0;display:flex;justify-content:center}
.pk-pagination ul{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.pk-pagination a,.pk-pagination span{
  display:flex;align-items:center;justify-content:center;min-width:38px;height:38px;
  border:1px solid var(--pk-border);border-radius:var(--pk-r);
  font-size:13px;color:var(--pk-fg);text-decoration:none;
}
.pk-pagination .current{background:var(--pk-primary);color:var(--pk-primary-fg);border-color:var(--pk-primary)}
@media (hover:hover) and (pointer:fine){
  .pk-pagination a:hover{background:var(--pk-cream)}
}