/* =========================================================
   WordPress adaptations of the design system in design.css.
   design.css is the designer's stylesheet, kept as delivered.
   This file (1) fixes colour contrast, (2) maps the design's
   components onto core block markup, (3) styles plugin output.
   ========================================================= */

/* ---------- 1. Contrast fixes (WCAG AA) ---------- */
:root {
  --teal-deep: #00756C; /* was #06978D: too faint for small text on white */
}
/* White on bright teal fails AA. Keep the brand teal, switch the label to ink. */
.btn--primary,
.wp-block-button.is-primary > .wp-block-button__link { background: var(--teal); color: var(--purple-ink); }
.btn--primary:hover,
.wp-block-button.is-primary > .wp-block-button__link:hover { background: var(--teal-deep); color: #fff; }
.card__tag--teal { color: var(--purple-ink); }
.checklist li::before { color: var(--purple-ink); }
.socials a:hover { color: var(--purple-ink); }
.announce a { text-decoration: underline; }

/* ---------- 2. Core block mapping ---------- */
figure { margin: 0; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* Images: core wraps <img> in <figure class="wp-block-image"> */
.wp-block-image { margin: 0; }
.card__media .wp-block-image,
.hero__media .wp-block-image,
.page-hero__media .wp-block-image { height: 100%; }
.card__media .wp-block-image img,
.hero__media .wp-block-image img,
.page-hero__media .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.hero__media .wp-block-image img { object-position: center 40%; }
.page-hero__media .wp-block-image img { object-position: var(--focus-x, 50%) var(--focus-y, 35%); }
.page-hero__content.page-hero__content--narrow { max-width: 480px; }
/* Hero photo focus, set by the update-page-hero ability: which part of the cropped photo stays in view. */
.focus-x-0{--focus-x:0%}.focus-x-5{--focus-x:5%}.focus-x-10{--focus-x:10%}.focus-x-15{--focus-x:15%}.focus-x-20{--focus-x:20%}.focus-x-25{--focus-x:25%}.focus-x-30{--focus-x:30%}.focus-x-35{--focus-x:35%}.focus-x-40{--focus-x:40%}.focus-x-45{--focus-x:45%}.focus-x-50{--focus-x:50%}.focus-x-55{--focus-x:55%}.focus-x-60{--focus-x:60%}.focus-x-65{--focus-x:65%}.focus-x-70{--focus-x:70%}.focus-x-75{--focus-x:75%}.focus-x-80{--focus-x:80%}.focus-x-85{--focus-x:85%}.focus-x-90{--focus-x:90%}.focus-x-95{--focus-x:95%}.focus-x-100{--focus-x:100%}
.focus-y-0{--focus-y:0%}.focus-y-5{--focus-y:5%}.focus-y-10{--focus-y:10%}.focus-y-15{--focus-y:15%}.focus-y-20{--focus-y:20%}.focus-y-25{--focus-y:25%}.focus-y-30{--focus-y:30%}.focus-y-35{--focus-y:35%}.focus-y-40{--focus-y:40%}.focus-y-45{--focus-y:45%}.focus-y-50{--focus-y:50%}.focus-y-55{--focus-y:55%}.focus-y-60{--focus-y:60%}.focus-y-65{--focus-y:65%}.focus-y-70{--focus-y:70%}.focus-y-75{--focus-y:75%}.focus-y-80{--focus-y:80%}.focus-y-85{--focus-y:85%}.focus-y-90{--focus-y:90%}.focus-y-95{--focus-y:95%}.focus-y-100{--focus-y:100%}
.split__media .wp-block-image img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.track .wp-block-image img { width: 200px; height: 150px; object-fit: cover; border-radius: 12px; }
.wp-block-image.rounded img { border-radius: var(--radius); width: 100%; }
.wp-block-image.rounded-lg img { border-radius: var(--radius-lg); width: 100%; }
.wp-block-image.ratio-4-5 img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.wp-block-image.ratio-4-3 img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.wp-block-image.ratio-16-7 img { aspect-ratio: 16 / 7; object-fit: cover; width: 100%; }
@media (max-width: 760px) { .track .wp-block-image img { width: 100%; height: 180px; } }

/* Buttons: <div class="wp-block-buttons"><div class="wp-block-button is-*"><a class="wp-block-button__link"> */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.wp-block-buttons.btn-row--center { justify-content: center; }
/* A button never shrinks (the row wraps instead), but one wider than its column
   wraps its label rather than running off a phone screen (Contact's free-trial button). */
.wp-block-button { flex-shrink: 0; max-width: 100%; }
.wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; line-height: 1;
  padding: 1rem 1.6rem; border-radius: 999px; border: 2px solid transparent; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
  white-space: nowrap; text-decoration: none;
  background: var(--purple); color: #fff;
}
.wp-block-button > .wp-block-button__link { max-width: 100%; white-space: normal; text-align: center; }
.wp-block-button__link:hover { transform: translateY(-2px); background: var(--purple-deep); color: #fff; }
.wp-block-button.is-primary > .wp-block-button__link { box-shadow: 0 8px 20px rgba(2, 184, 171, .32); }
.wp-block-button.is-purple > .wp-block-button__link { box-shadow: 0 8px 20px rgba(87, 80, 160, .3); }
.wp-block-button.is-ghost > .wp-block-button__link { background: transparent; border-color: var(--purple); color: var(--purple); }
.wp-block-button.is-ghost > .wp-block-button__link:hover { background: var(--purple); color: #fff; }
.wp-block-button.is-ghost-light > .wp-block-button__link { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .7); color: #fff; backdrop-filter: blur(4px); }
.wp-block-button.is-ghost-light > .wp-block-button__link:hover { background: #fff; color: var(--purple-ink); }
.wp-block-button.is-white > .wp-block-button__link { background: #fff; color: var(--purple-ink); box-shadow: var(--shadow-sm); }
.wp-block-button.is-white > .wp-block-button__link:hover { color: var(--purple); }
.wp-block-button.is-sm > .wp-block-button__link { padding: .7rem 1.1rem; font-size: .92rem; }
.wp-block-button.is-lg > .wp-block-button__link { padding: 1.15rem 2rem; font-size: 1.08rem; }
.wp-block-button.is-link-arrow > .wp-block-button__link { background: none; border: 0; padding: 0; color: var(--purple); box-shadow: none; border-radius: 0; }
.wp-block-button.is-link-arrow > .wp-block-button__link::after { content: "→"; transition: transform .18s; }
.wp-block-button.is-link-arrow > .wp-block-button__link:hover { transform: none; color: var(--purple-deep); }
/* The decorative glow circle (.cta-band::after) paints over the right end of the
   button row; keep it out of hit-testing and lift the buttons above it. */
.cta-band::after { pointer-events: none; }
.cta-band .wp-block-buttons, .cta-band .btn-row { justify-content: flex-end; position: relative; z-index: 1; }
.hero .wp-block-buttons { margin-top: 1.6rem; }
@media (max-width: 760px) { .cta-band .wp-block-buttons { justify-content: flex-start; } }

/* Design <span>/<div> labels are paragraphs in block markup: undo paragraph defaults */
p.card__tag, p.card__motto, p.step__num, p.link-arrow, p.age, p.styles, p.role-tags, p.badge { margin-bottom: 0; }
p.badge { width: fit-content; }
.trust__item p, .float p { margin: 0; }
.card__body p.card__motto { color: var(--teal-deep); font-size: .85rem; }
.card__body p.link-arrow, .card p.link-arrow { color: var(--purple); font-size: 1rem; }
.card__tag.tag-glass { background: rgba(255, 255, 255, .16); color: #fff; }
.track p.age { color: var(--teal-deep); font-size: .9rem; margin: 0; }
.track p.styles { margin-top: .6rem; }
/* A centred, wrapping row of tags, one <span> per item (the 10+ page's dance styles). */
p.style-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; max-width: 820px; margin: 0 auto; }
p.style-tags span { font-family: var(--font-head); font-weight: 700; font-size: .95rem; background: var(--purple-tint); color: var(--purple-deep); padding: .45rem 1rem; border-radius: 999px; }
.feature p.badge, .step p.step__num { color: inherit; }
.step p.step__num { color: #fff; margin-bottom: 1.25rem; }
p.subnav { margin: 0; }
p.ig-grid { margin: 0; }

/* Instagram Feed (Smash Balloon) on the homepage, drawn like the .ig-grid strip.
   Its own inline gap and padding need !important to beat. */
.ig-feed #sb_instagram { padding: 0 !important; }
.ig-feed #sb_instagram #sbi_images { grid-template-columns: repeat(6, 1fr); gap: .6rem !important; padding: 0; }
.ig-feed #sb_instagram .sbi_photo_wrap { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 12px; }
.ig-feed #sb_instagram .sbi_photo { height: 100% !important; padding: 0 !important; background-size: cover; background-position: center; transition: transform .4s; }
.ig-feed #sb_instagram .sbi_photo img { width: 100%; height: 100%; object-fit: cover; }
.ig-feed #sb_instagram .sbi_photo:hover { transform: scale(1.06); }
.ig-feed #sb_instagram .sbi_photo_wrap::after { content: ""; position: absolute; inset: 0; background: rgba(87, 80, 160, 0); transition: background .2s; pointer-events: none; }
.ig-feed #sb_instagram .sbi_photo_wrap:hover::after { background: rgba(87, 80, 160, .25); }
@media (max-width: 1024px) { .ig-feed #sb_instagram #sbi_images { grid-template-columns: repeat(3, 1fr); } }
.pad-sm { padding: 1.2rem; }
.gap-sm { gap: .8rem; }
.mt-lg { margin-top: 3.5rem; }

/* Whole-card links: the visible link stretches over its card */
.is-linked { position: relative; }
.is-linked .link-arrow a::after,
.is-linked :is(h2, h3, h4) > a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.is-linked :is(h2, h3, h4) > a, .link-arrow a { color: inherit; }
.pillar.is-linked, .track.is-linked { transition: transform .2s, box-shadow .2s; }
.pillar.is-linked:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* Our Studios: one card per studio, marked with the studio's own colour */
.studios { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; }
.studio {
  flex: 0 1 calc((100% - 2.8rem) / 3); display: flex; flex-direction: column; align-items: flex-start; gap: .6rem;
  background: #fff; border-radius: var(--radius); padding: 1.6rem; border: 1px solid var(--line);
  border-top: 6px solid var(--studio); box-shadow: var(--shadow-sm);
}
.studio::before { content: ""; width: 52px; height: 52px; border-radius: 50%; background: var(--studio); border: 5px solid #fff; outline: 2px solid var(--studio); margin-bottom: .4rem; }
.studio h3, .studio p { margin: 0; }
.studio > p:not(.badge) { color: var(--ink-soft); font-size: .97rem; }
.studio--purple { --studio: #8C52FF; }
.studio--silver { --studio: #B4B8C5; }
.studio--green { --studio: #3DAA6D; }
.studio--gold { --studio: #E2B93B; }
.studio--sapphire { --studio: #0F52BA; }
@media (max-width: 1024px) { .studio { flex-basis: calc((100% - 1.4rem) / 2); } }
@media (max-width: 760px) { .studio { flex-basis: 100%; } }

/* Tables: <figure class="wp-block-table class-table"><table> */
.wp-block-table.class-table { display: block; margin: 0; padding: 0; }
.wp-block-table.class-table table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: auto; }
.wp-block-table.class-table th, .wp-block-table.class-table td { border: 0; border-bottom: 1px solid var(--line); }
.wp-block-table.class-table thead { border: 0; }
.class-table .desc { display: block; margin-top: .3rem; color: var(--ink-soft); font-size: .93rem; font-family: var(--font-body); font-weight: 400; white-space: normal; }
/* Core gives .has-fixed-layout cells word-break: break-word, which lets the
   auto layout squeeze the class-name column to one letter per line. */
.wp-block-table.class-table th, .wp-block-table.class-table td { word-break: normal; overflow-wrap: normal; }
/* Phones: each row becomes a small card (name + ages, then length + description) */
@media (max-width: 600px) {
	.wp-block-table.class-table thead { display: none; }
	.wp-block-table.class-table table, .wp-block-table.class-table tbody { display: block; }
	.wp-block-table.class-table tr { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: baseline; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
	.wp-block-table.class-table tr:last-child { border-bottom: 0; }
	.wp-block-table.class-table td { display: block; padding: 0; border: 0; white-space: normal; }
	.wp-block-table.class-table td:nth-child(2) { color: var(--ink-soft); font-size: .9rem; }
	.wp-block-table.class-table td:nth-child(3) { grid-column: 1 / -1; margin-top: .3rem; }
}

/* Accordion: core Details blocks inside a group.accordion */
.accordion details > :not(summary) { margin: 0; padding: 0 1.3rem .9rem; color: var(--ink-soft); }
.accordion details > :not(summary):last-child { padding-bottom: 1.2rem; }

/* Plain content pages migrated from the old site */
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 2.2rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.prose h3 { margin-top: 1.6rem; }
.prose .wp-block-image img { border-radius: var(--radius); height: auto; }
.prose .wp-block-table table { width: 100%; border-collapse: collapse; }
.prose .wp-block-table td, .prose .wp-block-table th { border: 1px solid var(--line); padding: .7rem .9rem; vertical-align: top; }
.prose iframe { max-width: 100%; }

/* ---------- 3. Plugin output ---------- */
/* Contact Form 7 inside the design's form card */
.wpcf7 form { display: grid; gap: 1rem; background: #fff; padding: 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow); border: 1px solid var(--line); }
.wpcf7 form p { margin: 0; }
.wpcf7 form label { display: grid; gap: .35rem; font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--purple-ink); }
.wpcf7 form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.wpcf7 form textarea, .wpcf7 form select {
  font: inherit; padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper-2); color: var(--ink); width: 100%;
}
.wpcf7 form input:focus, .wpcf7 form textarea:focus, .wpcf7 form select:focus { outline: 2px solid var(--teal); border-color: var(--teal); background: #fff; }
.wpcf7 form input[type=submit] {
  font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; padding: 1.15rem 2rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--teal); color: var(--purple-ink); justify-self: start;
}
.wpcf7 form input[type=submit]:hover { background: var(--teal-deep); color: #fff; }
@media (max-width: 760px) { .wpcf7 form { padding: 1.4rem; } }

/* GoDaddy's hosting adds an inline style ("wp-site-designer-contrast-fallback") that restyles
   every form field and submit button with very specific selectors and colour presets this
   theme doesn't define, which leaves fields without a box and buttons without a background.
   These declarations win over it; they repeat the design above, nothing more. */
.wpcf7 form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.wpcf7 form textarea, .wpcf7 form select { background-color: var(--paper-2) !important; color: var(--ink) !important; border: 1.5px solid var(--line) !important; }
.wpcf7 form input:focus, .wpcf7 form textarea:focus, .wpcf7 form select:focus { background-color: #fff !important; border-color: var(--teal) !important; }
.wpcf7 form input[type=submit] {
  background-color: var(--teal) !important; color: var(--purple-ink) !important; border: 0 !important; padding: 1.15rem 2rem !important;
  font-family: var(--font-head) !important; font-size: 1.08rem !important; line-height: normal !important;
}
.wpcf7 form input[type=submit]:hover { background-color: var(--teal-deep) !important; color: #fff !important; }
/* The class picked on Find a Class (assets/trial-class.js in the site plugin) */
.trial-pick { margin: 0; padding: .9rem 1.1rem; border-radius: 14px; background: var(--teal-tint); color: var(--purple-ink); border-left: 5px solid var(--teal); }
.trial-pick[hidden] { display: none; }
.trial-pick strong { font-family: var(--font-head); }
.trial-pick__clear { font: inherit; font-size: .88rem; font-weight: 700; color: var(--purple); background: none; border: 0; padding: 0; margin-left: .3rem; cursor: pointer; text-decoration: underline; }

/* Embeds */
.ee-embed iframe { width: 100%; min-height: 900px; border: 0; display: block; }
.ee-editor-note { border: 2px dashed var(--purple-tint-2); border-radius: var(--radius); padding: 1.2rem; color: var(--ink-soft); background: var(--paper-2); }

/* ---------- Store (eedance/shopify-collection and eedance/store-nav) ---------- */
.store-nav { padding-top: 0; margin-bottom: 1rem; }
.store-section { scroll-margin-top: 110px; }
.store-section + .store-section { margin-top: clamp(48px, 6vw, 80px); }
.store-chips { justify-content: flex-start; padding: 0 0 .4rem; }
.store-group { scroll-margin-top: 110px; margin-top: 2rem; }
.store-card { font: inherit; color: inherit; text-align: left; padding: 0; cursor: pointer; }
.store-card:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.store-card[aria-busy=true] { opacity: .6; cursor: progress; }
.store-card .card__media { display: block; aspect-ratio: 1; background: #fff; }
.store-card .card__media img { object-fit: contain; }
.store-card .card__body { align-items: flex-start; }
.store-card__title { font-family: var(--font-head); font-weight: 700; color: var(--purple-ink); line-height: 1.25; }
.store-card__price { color: var(--ink-soft); font-weight: 600; }
.store-picker {
  display: grid; gap: .8rem; justify-items: start; max-width: 560px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.6rem;
}
.store-picker label { font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--purple-ink); }
.store-picker select { font: inherit; width: 100%; padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper-2); color: var(--ink); }
.store-picker select:focus { outline: 2px solid var(--teal); border-color: var(--teal); background: #fff; }
.store-picker__result p { margin: 0; }
.store-picker__title:not(.muted) { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--purple-ink); }
.store-picker__price { font-weight: 600; color: var(--ink-soft); }
.store-picker .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.store-picker .btn[aria-busy=true] { opacity: .6; cursor: progress; }
.store-mount { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 700px) {
  .store-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .store-card .card__body { padding: .8rem .9rem 1rem; }
  .store-card__title { font-size: .95rem; }
}

/* ---------- Find a Class (eedance/class-list) ---------- */
/* Until the script runs, only the plain list shows; tabs and filters need JavaScript. */
.cf:not(.is-ready) .cf-sessions, .cf:not(.is-ready) .cf-session-blurb, .cf:not(.is-ready) .cf-filters, .cf:not(.is-ready) .cf-summary { display: none; }
.cf-sessions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .6rem; }
.cf-session {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; min-width: 200px; padding: .75rem 1.15rem; cursor: pointer;
  font: inherit; text-align: left; background: #fff; border: 2px solid var(--line); border-radius: 16px; transition: border-color .15s, background .15s;
}
.cf-session strong { font-family: var(--font-head); font-size: 1.05rem; color: var(--purple-ink); }
.cf-session span { font-size: .85rem; color: var(--ink-mute); }
.cf-session:hover { border-color: var(--purple); }
.cf-session[aria-selected=true] { background: var(--purple); border-color: var(--purple); }
.cf-session[aria-selected=true] strong, .cf-session[aria-selected=true] span { color: #fff; }
.cf-session-blurb { color: var(--ink-soft); margin: 0 0 1.1rem; }
.cf-filters {
  display: grid; grid-template-columns: minmax(180px, 220px) 1fr; gap: 1rem 1.6rem; padding: 1.2rem 1.4rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.cf-filter { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.cf-filter[hidden] { display: none; }
.cf-filter--age { grid-row: span 2; }
.cf-filter > label:first-child, .cf-label { font-family: var(--font-head); font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--purple-deep); }
.cf-filter select {
  font: inherit; font-weight: 700; color: var(--ink); padding: .7rem 2.2rem .7rem .9rem; border: 2px solid var(--purple); border-radius: 14px; cursor: pointer; appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235750A0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .7rem center / 16px;
}
/* Wins over GoDaddy's injected form-field style; see the Contact Form 7 section above. */
.cf-filter select { background-color: #fff !important; color: var(--ink) !important; border: 2px solid var(--purple) !important; }
.cf-check { display: flex; align-items: center; gap: .45rem; margin-top: .3rem; font-size: .88rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.cf-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--purple); }
.cf-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.cf-chip {
  font-family: var(--font-head); font-weight: 600; font-size: .88rem; padding: .42rem .85rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink-soft); transition: background .15s, color .15s, border-color .15s;
}
.cf-chip:hover { border-color: var(--purple); color: var(--purple); }
.cf-chip[aria-pressed=true] { background: var(--purple); border-color: var(--purple); color: #fff; }
.cf-session:focus-visible, .cf-chip:focus-visible, .cf-clear:focus-visible, .cf-filter select:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.cf-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.6rem 0 .4rem; }
.cf-summary p { margin: 0; color: var(--ink-soft); }
.cf-summary strong { color: var(--ink); }
.cf-clear { font: inherit; font-weight: 700; color: var(--purple); background: none; border: 0; padding: .2rem; cursor: pointer; text-decoration: underline; }
.cf-day { font-size: 1.35rem; margin: 1.8rem 0 .8rem; padding-bottom: .4rem; border-bottom: 2px solid var(--purple-tint); }
.cf-list { display: grid; gap: .75rem; }
.cf-class {
  display: grid; grid-template-columns: 132px 1fr auto; gap: 1.2rem; align-items: center; padding: 1rem 1.2rem;
  background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--teal); border-radius: 16px; box-shadow: var(--shadow-sm);
}
.cf-class.is-full { border-left-color: var(--line); background: var(--paper-2); }
.cf-time strong { display: block; font-family: var(--font-head); font-size: 1.02rem; line-height: 1.25; color: var(--purple-ink); }
.cf-time span { display: block; margin-top: .15rem; font-size: .85rem; color: var(--ink-mute); }
.cf-body { min-width: 0; }
.cf-body h4 { font-size: 1.12rem; margin: 0 0 .35rem; }
.cf-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .35rem; }
.cf-full { background: #FDE8EB; color: #B4233A; }
.cf-meta { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.cf-about { display: inline-block; margin-top: .3rem; font-size: .88rem; font-weight: 700; color: var(--teal-deep); }
.cf-actions { display: flex; flex-direction: column; gap: .45rem; }
.cf-actions .btn { justify-content: center; white-space: nowrap; }
.cf-class--dated { grid-template-columns: 72px 1fr auto; border-left-color: var(--purple); }
.cf-cal { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .45rem 0; line-height: 1.05; background: var(--purple-tint); border-radius: 14px; }
.cf-cal span { font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--purple); }
.cf-cal strong { font-family: var(--font-head); font-size: 1.6rem; color: var(--purple-ink); }
.cf-cal small { font-size: .75rem; color: var(--ink-mute); }
.cf-cal--tbd strong { color: var(--ink-mute); }
.cf-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.cf-slot {
  display: flex; flex-direction: column; align-items: center; padding: .35rem .7rem; white-space: nowrap;
  font-family: var(--font-head); font-weight: 700; font-size: .85rem; color: var(--purple-deep); border: 1.5px solid var(--purple); border-radius: 12px;
}
.cf-slot small { font-family: var(--font-body); font-weight: 600; font-size: .72rem; color: var(--ink-mute); }
.cf-slot:hover, .cf-slot:hover small { background: var(--purple); color: #fff; }
.cf-slot.is-full { border-color: var(--line); color: var(--ink-mute); }
.cf-empty { margin-top: 1.4rem; padding: 2rem; text-align: center; background: #fff; border: 2px dashed var(--line); border-radius: var(--radius); }
.cf-empty p { margin: 0; color: var(--ink-soft); }
.cf-source { margin-top: 1.4rem; text-align: center; font-size: .9rem; color: var(--ink-mute); }
.cf-results > ul { padding-left: 1.2rem; }
@media (max-width: 760px) {
  .cf-session { min-width: 0; flex: 1 1 45%; }
  .cf-filters { grid-template-columns: 1fr; }
  .cf-filter--age { grid-row: auto; }
  .cf-class, .cf-class.cf-class--dated { grid-template-columns: 1fr; gap: .6rem; border-left-width: 1px; border-top: 5px solid var(--teal); }
  .cf-class.cf-class--dated { grid-template-columns: 64px 1fr; border-top-color: var(--purple); }
  .cf-class.cf-class--dated .cf-actions { grid-column: 1 / -1; }
  .cf-time { display: flex; align-items: baseline; gap: .6rem; }
  .cf-actions { flex-direction: row; }
  .cf-actions .btn { flex: 1; }
}

/* ---------- Quick Links page (/links/, for the Instagram bio) ---------- */
body:has(.lt) { background: var(--purple-ink); padding-bottom: 0 !important; }
.lt { min-height: 100vh; display: grid; place-items: start center; padding: 1.5rem 1rem 3rem; position: relative; overflow: hidden; }
.lt::before { content: ""; position: absolute; inset: 0; background: url(../img/hero-links.jpg) center / cover; opacity: .35; filter: blur(2px); }
.lt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 38, 80, .3), rgba(42, 38, 80, .95) 70%); }
.lt__card { position: relative; z-index: 1; width: min(460px, 100%); text-align: center; color: #fff; }
.lt__logo { background: #fff; border-radius: 50%; width: 120px; height: 120px; display: grid; place-items: center; margin: 1rem auto .8rem; box-shadow: var(--shadow); }
.lt__logo img { width: 92px; }
.lt h1 { color: #fff; font-size: 1.6rem; margin-bottom: .2rem; }
.lt .sub { color: #CFCBE8; font-size: .95rem; margin-bottom: 1.4rem; }
.lt__links { display: grid; gap: .75rem; }
.lt__links a { display: flex; align-items: center; gap: .9rem; background: #fff; color: var(--purple-ink); border-radius: 16px; padding: 1rem 1.1rem; font-family: var(--font-head); font-weight: 700; text-align: left; box-shadow: var(--shadow-sm); transition: transform .15s; }
.lt__links a:hover { transform: translateY(-2px) scale(1.01); }
.lt__links a.hot { background: var(--teal); color: var(--purple-ink); }
.lt__links a small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .82rem; color: var(--ink-soft); }
.lt__links a.hot small { color: var(--purple-ink); }
.lt__links .icon-badge { width: 40px; height: 40px; border-radius: 12px; }
.lt__links a.hot .icon-badge { background: rgba(255, 255, 255, .35); color: var(--purple-ink); }
.lt__foot { margin-top: 1.6rem; font-size: .85rem; color: #B9B5D8; }
.lt__foot a { color: #fff; }
.lt__soc { display: flex; justify-content: center; gap: .7rem; margin-top: 1rem; }
.lt__soc a { width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; color: #fff; }
.lt__soc a:hover { background: var(--teal); color: var(--purple-ink); }
.lt__soc svg { width: 22px; height: 22px; }

/* Stretched link when a card's label is a button */
.is-linked .wp-block-button__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.is-linked .wp-block-button { position: static; }

/* Staff headshots come from the media library with width/height attributes */
.person img { height: auto; }
.wp-block-table.class-table td:nth-child(2) { white-space: nowrap; }

/* The smallest phones (320–380px): logo, "Book a Free Trial" and the menu button fit on one line. */
@media (max-width: 380px) {
  .nav { gap: .5rem; }
  .brand img { height: 38px; }
  .nav-cta { gap: .25rem; }
  .nav-cta .btn { padding: .6rem .8rem; font-size: .84rem; }
}