/*
 * Front-end styles for the plugin's public output — the classes roster
 * ([arcade_classes_roster]: session blocks, early-bird banners, card texture,
 * featured/status chips) plus [arcade_classes_intro]'s subhead.
 *
 * The base card/instructor styling (.arcade-class-card, .acc-*, level colors)
 * lives in the site's design-system CSS on both sides and is NOT repeated
 * here; this file carries only the classes the production stylesheet predates.
 * Values mirror arcade-child style.css §48/§48b. Every design token has its
 * literal fallback because production's stylesheet defines no custom
 * properties; where production styles the same element with !important
 * (e.g. the card background), rules here win by extra specificity via
 * .arcade-classes-roster, never by load order.
 */

/* ── Session blocks: one header (+ optional early-bird banner) per session ── */
.acm-session-block { margin: 0 0 48px; }
.acm-session-block:last-child { margin-bottom: 0; }
.acm-session-heading {
  font-family: var(--display, 'Oswald', sans-serif);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink, #1d1626);
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--pink, #ca2779);
}

.acm-classes-banner {
  background: linear-gradient(120deg, var(--pink, #ca2779), var(--purple-deep, #3f2c7e));
  color: #fff;
  border-radius: var(--r-md, 10px);
  padding: 14px 20px;
  margin: 0 0 20px;
  box-shadow: var(--shadow-sm, 0 4px 16px rgba(29, 22, 38, 0.08));
}
.acm-classes-banner__msg {
  font-family: var(--display, 'Oswald', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.acm-classes-banner__note { font-size: 0.85em; opacity: 0.85; margin: 6px 0 0; }

.acm-classes-subhead {
  font-family: var(--script, 'Kaushan Script', cursive);
  font-size: 1.3em;
  color: var(--pink, #ca2779);
}

/* ── Card-body texture: faint ink dot grid + level-tinted corner wash ──
   The design system sets .arcade-class-card{background:#ffffff!important},
   so these need !important plus the roster-scoped selector to outrank it. */
.arcade-classes-roster .arcade-class-card {
  background-color: var(--surface, #ffffff) !important;
  background-image:
    radial-gradient(circle at 100% 100%, var(--acc-wash, var(--paper, #f4ecdd)) 0, transparent 55%),
    radial-gradient(rgba(29, 22, 38, 0.06) 1px, transparent 1.5px) !important;
  background-size: auto, 16px 16px !important;
}
.arcade-classes-roster .class-level-1 { --acc-wash: var(--l1-bg, #fbeaf0); }
.arcade-classes-roster .class-level-2 { --acc-wash: var(--l2-bg, #e6f1fb); }
.arcade-classes-roster .class-level-3 { --acc-wash: var(--l3-bg, #faece7); }
.arcade-classes-roster .class-level-4 { --acc-wash: var(--l4-bg, #eeedfe); }

/* ── Featured ribbon + highlight ring ── */
.arcade-class-card.is-featured {
  box-shadow: 0 0 0 3px var(--volt, #ffe600), var(--shadow-md, 0 8px 32px rgba(29, 22, 38, 0.10));
}
.arcade-class-card .acc-ribbon {
  position: absolute;
  top: 12px;
  right: -38px;
  z-index: 3;
  background: var(--volt, #ffe600);
  color: var(--ink, #1d1626);
  font-family: var(--display, 'Oswald', sans-serif);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 44px;
  transform: rotate(45deg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* ── Sold out / Waitlist chips and buttons ── */
.arcade-class-card .acc-status {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--display, 'Oswald', sans-serif);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 11px;
  border-radius: 20px;
}
.arcade-class-card .acc-status--soldout  { background: #b32d2e; color: #fff; }
.arcade-class-card .acc-status--waitlist { background: #ffd23f; color: #3a2c00; }
.arcade-class-card .acc-button--soldout  { background: #8a8a8a !important; color: #fff !important; cursor: default; }
.arcade-class-card .acc-button--soldout:hover { opacity: 1; transform: none; }
.arcade-class-card .acc-button--waitlist { background: #e6a700 !important; color: #3a2c00 !important; }

/* ── Early-bird price presentation inside .acc-price ── */
.acc-price-tag {
  display: inline-block;
  background: var(--volt, #ffe600);
  color: var(--ink, #1d1626);
  font-family: var(--display, 'Oswald', sans-serif);
  font-weight: 700;
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 8px;
  border-radius: 999px;
  vertical-align: middle;
}
.acc-price-now { font-weight: 700; }
.acc-price-was { color: var(--muted, #6b6275); text-decoration: line-through; font-size: 0.9em; }

@media (max-width: 767px) {
  .acc-price-tag { font-size: 11px !important; }
  .arcade-class-card .acc-status { font-size: 11px !important; padding: 3px 9px !important; }
}

/* ── Teacher column: one card per teacher, stacked (co-taught classes) ──
   Replaces the old inline width:160px on the single instructor card; the
   column keeps its slot width whether it holds one teacher or two. */
.arcade-classes-roster .acc-teachers {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 160px;
  flex-shrink: 0;
}
.arcade-classes-roster .acc-teachers .arcade-instructor-card { width: 100%; }


/* ── Public submission forms ([arcade_submit_team] / [_performer]) ──────────
   Team & performer submissions. Token fallbacks throughout so the form looks
   right on production too, whose stylesheet defines no custom properties. */
.acm-submit { max-width: 720px; margin: 0 auto; font-family: var(--body, 'Figtree', sans-serif); color: var(--ink, #1d1626); }
.acm-submit__head { margin: 0 0 20px; }
.acm-submit__title {
  font-family: var(--display, 'Oswald', sans-serif);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 6px; color: var(--ink, #1d1626);
}
.acm-submit__intro { margin: 0; color: var(--muted, #6d6379); font-size: 1rem; }

.acm-submit__note {
  border: 2px solid var(--ink, #1d1626); border-radius: var(--r-md, 10px);
  padding: 14px 16px; margin: 0 0 20px; font-size: 0.98rem;
}
.acm-submit__note--ok  { background: var(--bulb, #ffd23f); }
.acm-submit__note--err { background: #ffe3ec; border-color: var(--pink, #ca2779); color: var(--pink-deep, #a01c5e); }

.acm-submit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.acm-submit__f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.acm-submit__f--wide { grid-column: 1 / -1; }
.acm-submit__f label {
  font-family: var(--display, 'Oswald', sans-serif); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.78rem; color: var(--ink, #1d1626);
}
.acm-submit__req { color: var(--pink, #ca2779); }
.acm-submit__f input,
.acm-submit__f textarea {
  font: inherit; width: 100%; box-sizing: border-box;
  padding: 10px 12px; background: #fff;
  border: 2px solid var(--ink, #1d1626); border-radius: var(--r-md, 10px);
  color: var(--ink, #1d1626);
}
.acm-submit__f input:focus,
.acm-submit__f textarea:focus { outline: 3px solid var(--volt, #d6f84a); outline-offset: 1px; }
.acm-submit__hint { color: var(--muted, #6d6379); font-size: 0.8rem; }

.acm-submit__you { border: 0; border-top: 2px dashed var(--ink-12, rgba(29,22,38,0.12)); margin: 22px 0 0; padding: 18px 0 0; }
.acm-submit__you legend {
  font-family: var(--display, 'Oswald', sans-serif); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9rem; padding: 0; margin: 0 0 12px;
}

.acm-submit__btn {
  margin-top: 22px; cursor: pointer;
  font-family: var(--display, 'Oswald', sans-serif); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 1rem;
  padding: 0.85em 1.6em; color: #fff; background: var(--pink, #ca2779);
  border: 3px solid var(--ink, #1d1626); border-radius: var(--r-md, 10px);
  box-shadow: 5px 5px 0 var(--ink, #1d1626);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.acm-submit__btn:hover  { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink, #1d1626); }
.acm-submit__btn:active { transform: translate(2px, 2px);   box-shadow: 2px 2px 0 var(--ink, #1d1626); }

/* Honeypot: off-screen, never shown, never announced. */
.acm-submit__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 560px) { .acm-submit__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .acm-submit__btn { transition: none; }
  .acm-submit__btn:hover { transform: none; }
}


/* ── Classes redesign ([arcade_classes_roster] when arcade_classes_v2_enabled) ─
   The arcade-platform Academy look — level ladder + klass cards — in the theme's
   own tokens, with literal fallbacks so it also renders on production. */
.arcade-classes-v2 {
  font-family: var(--body, 'Figtree', sans-serif); color: var(--ink, #1d1626);
  /* Sit in a centered content column no matter how wide the Divi row it's
     dropped into is — the /classes code module lives in a full-width row.
     The top margin gives the ladder room to breathe under the page banner. */
  max-width: 1180px; margin: clamp(20px, 2.8vw, 38px) auto 0;
  padding-left: 16px; padding-right: 16px; box-sizing: border-box;
}
.arcade-classes-v2 * { box-sizing: border-box; }
.arcade-classes-v2--home { padding-left: 0; padding-right: 0; margin-top: 0; }

/* Level ladder */
.arc-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 0 0 26px; }
.arc-rung {
  border: 3px solid var(--ink, #1d1626); border-radius: var(--r-md, 12px);
  padding: 18px; box-shadow: 6px 6px 0 var(--ink, #1d1626); color: #fff;
}
.arc-rung__tag { font-family: var(--script, cursive); font-size: 1.15rem; display: inline-block; margin-bottom: 2px; }
.arc-rung__name { font-family: var(--display, 'Oswald', sans-serif); font-weight: 700; text-transform: uppercase; font-size: 1.35rem; margin: 0; line-height: 1; }
.arc-rung__desc { font-size: 0.86rem; margin: 8px 0 0; color: rgba(255,255,255,0.9); }
.arc-rung__bar { display: flex; gap: 4px; margin-top: 12px; }
.arc-rung__bar i { flex: 1; height: 10px; border: 2px solid var(--ink, #1d1626); background: rgba(255,255,255,0.35); border-radius: 3px; }
.arc-rung__bar i.on { background: var(--volt, #d6f84a); }
.arc-rung--1 { background: var(--pink, #ca2779); }
.arc-rung--2 { background: var(--blue, #2b7fff); }
.arc-rung--3 { background: var(--orange, #ff7a1a); }
.arc-rung--4 { background: var(--purple, #7c5cff); }

/* Session blocks (kept from the current roster) */
.arc-classblock { margin: 0 0 30px; }
.arc-classblock__head {
  font-family: var(--display, 'Oswald', sans-serif); font-weight: 700; font-size: 1.5rem;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink, #1d1626);
  margin: 0 0 18px; padding-bottom: 10px; border-bottom: 3px solid var(--pink, #ca2779);
}

/* Card grid + card */
.arc-klass-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.arc-klass {
  display: flex; flex-direction: column; gap: 10px;
  border: 3px solid var(--ink, #1d1626); border-radius: var(--r-lg, 18px);
  background: var(--surface, #fffdf7); padding: 20px 22px;
  box-shadow: 6px 6px 0 var(--ink, #1d1626);
  text-decoration: none; color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.arc-klass:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink, #1d1626); }
.arc-klass.is-soldout { opacity: 0.72; }
.arc-klass__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.arc-klass__title { font-family: var(--display, 'Oswald', sans-serif); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; line-height: 1.05; }
.arc-klass__meta { display: grid; gap: 2px; font-size: 0.86rem; color: var(--muted, #6d6379); }
.arc-klass__meta b { color: var(--ink, #1d1626); font-weight: 600; }
.arc-klass__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }
.arc-price { font-family: var(--display, 'Oswald', sans-serif); font-weight: 700; font-size: 1.5rem; color: var(--ink, #1d1626); }
.arc-price s { font-size: 0.85rem; font-weight: 400; color: var(--muted, #6d6379); }

/* Chips */
.arcade-classes-v2 .arc-chip {
  display: inline-flex; align-items: center; font-family: var(--display, 'Oswald', sans-serif);
  font-weight: 600; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.07em;
  padding: 0.34em 0.7em; border-radius: 999px; border: 2px solid var(--ink, #1d1626);
  background: var(--paper, #f4ecdd); color: var(--ink, #1d1626); line-height: 1; white-space: nowrap;
}
.arcade-classes-v2 .arc-chip--ink  { background: var(--ink, #1d1626); color: var(--paper, #f4ecdd); }
.arcade-classes-v2 .arc-chip--out  { background: var(--ink, #1d1626); color: var(--volt, #d6f84a); }
.arcade-classes-v2 .arc-chip--warn { background: var(--bulb, #ffd23f); color: var(--ink, #1d1626); }
/* Level chips take their level's colour, matching the ladder rungs:
   1 pink · 2 blue · 3 orange · 4 purple. */
.arcade-classes-v2 .arc-chip--lvl1 { background: var(--pink, #ca2779);   color: #fff; }
.arcade-classes-v2 .arc-chip--lvl2 { background: var(--blue, #2b7fff);   color: #fff; }
.arcade-classes-v2 .arc-chip--lvl3 { background: var(--orange, #ff7a1a); color: #fff; }
.arcade-classes-v2 .arc-chip--lvl4 { background: var(--purple, #7c5cff); color: #fff; }

/* Early-bird session banner — a gold "deal" sticker in the klass-card idiom
   (hard border + offset shadow + halftone dots), scoped to the redesign so the
   current production roster keeps its own banner. */
.arcade-classes-v2 .acm-classes-banner {
  background: var(--bulb, #ffd23f);
  background-image: radial-gradient(rgba(29, 22, 38, 0.14) 1px, transparent 1.2px);
  background-size: 14px 14px;
  color: var(--ink, #1d1626);
  border: 3px solid var(--ink, #1d1626);
  border-radius: var(--r-md, 12px);
  box-shadow: 5px 5px 0 var(--ink, #1d1626);
  padding: 16px 20px;
  margin: 0 0 22px;
}
.arcade-classes-v2 .acm-classes-banner__msg  { color: var(--ink, #1d1626); font-size: 1.02rem; }
.arcade-classes-v2 .acm-classes-banner__note { color: var(--ink, #1d1626); opacity: 0.82; }

/* Teacher on the card */
.arc-teacher { display: flex; align-items: center; gap: 9px; min-width: 0; }
.arc-teacher__avatar {
  position: relative; width: 42px; height: 42px; flex: none; border-radius: 50%;
  border: 3px solid var(--ink, #1d1626); background: var(--bulb, #ffd23f); overflow: hidden;
  display: grid; place-items: center;
}
.arc-teacher__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arc-teacher__initials { font-family: var(--display, 'Oswald', sans-serif); font-weight: 700; font-size: 0.9rem; color: var(--ink, #1d1626); }
.arc-teacher__id { font-family: var(--display, 'Oswald', sans-serif); font-weight: 600; font-size: 0.82rem; line-height: 1.1; min-width: 0; }
.arc-teacher__id small { display: block; font-family: var(--body, sans-serif); font-weight: 400; font-size: 0.72rem; color: var(--muted, #6d6379); }

@media (prefers-reduced-motion: reduce) {
  .arc-klass { transition: none; }
  .arc-klass:hover { transform: none; }
}

/* ── /classes bottom "need to know" — designed info cards, not raw text ──────
   The Divi section at the foot of the page (policies + accessibility +
   addresses) as two bordered cards with accented headings. Scoped to the
   redesign's body class so production's /classes is untouched. */
.arcade-classes-v2-page .et_pb_section_5 {
  background: var(--paper, #f4ecdd) !important;
  background-image: none !important;
  border-top: 3px solid var(--ink, #1d1626);
  padding: clamp(26px, 3vw, 40px) 0 !important;
}
.arcade-classes-v2-page .et_pb_section_5 .et_pb_column {
  background: var(--surface, #fffdf7);
  border: 3px solid var(--ink, #1d1626);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--ink, #1d1626);
  padding: 26px 30px !important;
  margin: 0 0 24px !important;
  /* Stack them cleanly at the row's width rather than two cramped halves —
     the left card carries a lot of copy. */
  width: 100% !important;
  float: none !important;
  box-sizing: border-box !important;
}
.arcade-classes-v2-page .et_pb_section_5 .et_pb_column:last-child { margin-bottom: 0 !important; }
.arcade-classes-v2-page .et_pb_section_5 h2,
.arcade-classes-v2-page .et_pb_section_5 h3 {
  position: relative;
  padding-left: 16px;
  font-family: var(--display, 'Oswald', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.arcade-classes-v2-page .et_pb_section_5 h2::before,
.arcade-classes-v2-page .et_pb_section_5 h3::before {
  content: ''; position: absolute; left: 0; top: 0.14em; bottom: 0.14em; width: 6px;
  border-radius: 3px; background: var(--pink, #ca2779);
}
/* Right column's address headings pick up a couple of accent colours so the
   two cards don't read identically. */
.arcade-classes-v2-page .et_pb_section_5 .et_pb_column_6 h3:nth-of-type(2)::before { background: var(--volt, #d6f84a); }
.arcade-classes-v2-page .et_pb_section_5 .et_pb_column_6 h3:nth-of-type(3)::before { background: var(--blue, #2b7fff); }
.arcade-classes-v2-page .et_pb_section_5 h3 { margin-top: 1.4em; }
.arcade-classes-v2-page .et_pb_section_5 .et_pb_text > :first-child { margin-top: 0; }
.arcade-classes-v2-page .et_pb_section_5 a { color: var(--pink, #ca2779); font-weight: 600; }
/* ~75% of the content width, centred — full-width cards read oddly here. */
.arcade-classes-v2-page .et_pb_section_5 .et_pb_row {
  max-width: 820px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── /classes hero — replaces the legacy Academy banners ────────────────────
   The dark ink header the redesigned event/team/performer/class pages all use.
   The two legacy Divi banners (section_1's teal Arcade Academy block and the
   2013 "LEARN IMPROV" image, et_pb_image_1) are retired in its favour, along
   with the empty spacer section_2. Scoped to the redesign's body class, so
   production's /classes keeps its banners until cutover. */
.arcade-classes-v2-page .et_pb_section_1,
.arcade-classes-v2-page .et_pb_section_2,
.arcade-classes-v2-page .et_pb_image_1 { display: none !important; }

.arcade-classes-v2-page .arc-classes-hero {
  background: var(--ink, #1d1626);
  color: var(--paper, #f4ecdd);
  padding: clamp(32px, 4.5vw, 64px) 20px;
  border-bottom: 4px solid var(--gold, #ffb81c);
}
.arcade-classes-v2-page .arc-classes-hero .arc-wrap { max-width: 1180px; margin: 0 auto; }
.arcade-classes-v2-page .arc-classes-hero__eyebrow {
  display: inline-block;
  font-family: var(--script, 'Kaushan Script', cursive);
  font-size: 1.3rem; color: var(--volt, #d6f84a);
  transform: rotate(-1.5deg); margin-bottom: 0.4rem;
}
.arcade-classes-v2-page .arc-classes-hero__title {
  font-family: var(--display, 'Oswald', sans-serif);
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em;
  line-height: 0.95; font-size: clamp(2.3rem, 6.5vw, 4.8rem);
  margin: 0; color: var(--paper, #f4ecdd);
}
.arcade-classes-v2-page .arc-classes-hero__title span { color: var(--bulb, #ffd23f); }
.arcade-classes-v2-page .arc-classes-hero__lead {
  max-width: 48ch; margin: 18px 0 0;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(244, 236, 221, 0.82);
}
/* The Academy mark sits beside the copy, stacking on narrow screens. */
.arcade-classes-v2-page .arc-classes-hero__in {
  display: flex; align-items: center; gap: clamp(20px, 4vw, 52px);
}
.arcade-classes-v2-page .arc-classes-hero__logo {
  width: clamp(112px, 15vw, 190px); height: auto; flex: none;
}
.arcade-classes-v2-page .arc-classes-hero__copy { min-width: 0; }
@media (max-width: 820px) {
  .arcade-classes-v2-page .arc-classes-hero__in { flex-direction: column; align-items: flex-start; gap: 22px; }
}

/* ── Academy intro panel — its own section, not loose text on the page ────── */
.arcade-classes-v2-page .arc-classes-intro {
  max-width: 860px;
  margin: clamp(18px, 2.4vw, 30px) auto 0;
  background: var(--surface, #fffdf7);
  border: 3px solid var(--ink, #1d1626);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--ink, #1d1626);
  padding: clamp(24px, 4vw, 38px) clamp(22px, 4vw, 40px);
  box-sizing: border-box;
}
.arcade-classes-v2-page .arc-classes-intro h2 {
  position: relative; padding-left: 16px; margin-top: 0;
  font-family: var(--display, 'Oswald', sans-serif);
  text-transform: uppercase; letter-spacing: 0.02em;
}
.arcade-classes-v2-page .arc-classes-intro h2::before {
  content: ''; position: absolute; left: 0; top: 0.14em; bottom: 0.14em; width: 6px;
  border-radius: 3px; background: var(--pink, #ca2779);
}
/* Pin the body typography — this copy sits inside a Divi text module whose
   inherited styles otherwise blow it up. */
.arcade-classes-v2-page .arc-classes-intro p {
  font-family: var(--body, 'Figtree', sans-serif);
  font-size: 1rem;
  line-height: 1.7;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--ink, #1d1626);
  margin: 0 0 1.05em;
}
.arcade-classes-v2-page .arc-classes-intro p:last-child { margin-bottom: 0; }
.arcade-classes-v2-page .arc-classes-intro h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.arcade-classes-v2-page .arc-classes-intro .acm-classes-subhead {
  font-family: var(--script, 'Kaushan Script', cursive);
  font-size: 1.3rem; text-transform: none; color: var(--pink, #ca2779);
}

/* The student quote beside the intro — a matching pull-quote instead of a
   full-width strip of italic text. */
.arcade-classes-v2-page .et_pb_testimonial {
  max-width: 860px;
  margin: 20px auto 0 !important;
  background: var(--surface, #fffdf7) !important;
  border: 3px solid var(--ink, #1d1626) !important;
  border-left: 10px solid var(--pink, #ca2779) !important;
  border-radius: 16px !important;
  box-shadow: 6px 6px 0 var(--ink, #1d1626);
  padding: 22px 28px !important;
}
.arcade-classes-v2-page .et_pb_testimonial::before { display: none !important; }
.arcade-classes-v2-page .et_pb_testimonial_content,
.arcade-classes-v2-page .et_pb_testimonial_content i {
  font-family: var(--body, 'Figtree', sans-serif);
  font-size: 1.02rem; line-height: 1.65; color: var(--ink, #1d1626);
}
.arcade-classes-v2-page .et_pb_testimonial_author {
  display: block; margin-top: 12px;
  font-family: var(--display, 'Oswald', sans-serif); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem;
  color: var(--pink, #ca2779); font-style: normal;
}


/* ── Tighter vertical rhythm on /classes ────────────────────────────────────
   The global custom CSS pads every .et_pb_section 30px top and bottom, and Divi
   rows add their own; stacked with this page's block margins it read as a lot
   of empty space. Collapse the Divi padding here and let the blocks own the
   spacing. */
.arcade-classes-v2-page .et_pb_section { padding-top: 10px !important; padding-bottom: 10px !important; }
.arcade-classes-v2-page .et_pb_row { padding-top: 0 !important; padding-bottom: 0 !important; }
.arcade-classes-v2-page .et_pb_row.et_pb_row_3 { margin-top: 0 !important; }
/* The bottom info-card section keeps a little more room than the rest — the
   general rule above would otherwise flatten it to 10px. */
.arcade-classes-v2-page .et_pb_section.et_pb_section_5 {
  padding-top: clamp(28px, 3vw, 44px) !important;
  padding-bottom: clamp(28px, 3vw, 44px) !important;
}

/* Live classes listed inside a ladder rung (homepage Academy section).
   A stacked list rather than pills: the real titles are long — "Improv 101:
   Foundations for BIPOC Performers" — and a term can hold two different classes
   sharing a code, so they can't be shortened to "Improv 101" without hiding
   one. Body font at a small size reads far better here than condensed caps.
   The list-style resets carry !important because the theme styles bare <li>. */
.arc-ladder--listed .arc-rung { display: flex; flex-direction: column; }
.arc-rung__classes {
  list-style: none !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  display: block;
}
.arc-rung__classes li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
}
.arc-rung__classes li::marker  { content: none; }
.arc-rung__classes li::before  { content: none !important; display: none !important; }
.arc-rung__classes a {
  display: block;
  font-family: var(--body, 'Figtree', sans-serif);
  font-size: 0.82rem;
  line-height: 1.3;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.arc-rung__classes li:last-child a { border-bottom: 0; }
.arc-rung__classes a:hover { text-decoration: underline; }
.arc-ladder--listed .arc-rung__bar { margin-top: auto; padding-top: 14px; }
.arc-rung__classes li.is-more a {
  border-bottom: 0;
  font-weight: 700;
  opacity: 0.9;
}

/* ── Homepage Academy layout ────────────────────────────────────────────────
   The section is the theme's own .fc-grid (copy left, tiers right) inside one
   full-width Divi column — NOT Divi columns, which is why row-level overrides
   do nothing here. Stacking .fc-grid puts the copy full width with the four
   tiers in a single row beneath it, instead of a 2x2 block pinned beside a
   short copy column with a tall empty band next to it.

   Each tier shows the first few classes and links out with "+n more" — the
   cap is the second argument to arcade_cm_class_ladder_html() in the
   [arcade_academy_levels] shortcode, and which classes land inside it is set
   per class by the Featured checkbox. */
.fc-grid:has(.arcade-classes-v2--home) { display: block !important; }
.fc-grid:has(.arcade-classes-v2--home) > .fc-left,
.fc-grid:has(.arcade-classes-v2--home) > .fc-right {
  width: 100% !important;
  max-width: none !important;
}
/* Stacked, the two halves' own vertical padding (46px bottom + 32px top)
   doubles up into a ~100px band. Collapse it. */
.fc-grid:has(.arcade-classes-v2--home) > .fc-left  { padding-bottom: 6px !important; }
.fc-grid:has(.arcade-classes-v2--home) > .fc-right { padding-top: 0 !important; margin-top: 0; }

/* Full width, the copy column's own 320px measure would strand a wide empty
   band to its right — the same dead space, just moved. So the intro becomes a
   two-column header band: eyebrow/heading/CTA left, description right. Children
   are placed by element because .fc-left's contents are a shortcode plus loose
   page content (including a wpautop <br>), with no wrappers to target. */
.fc-grid:has(.arcade-classes-v2--home) > .fc-left {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  column-gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.fc-grid:has(.arcade-classes-v2--home) > .fc-left > br { display: none; }
/* The eyebrow runs the full width of the band — in the heading's column alone
   it wraps and orphans the star. */
.fc-grid:has(.arcade-classes-v2--home) > .fc-left > .eyebrow { grid-column: 1 / -1; grid-row: 1; }
.fc-grid:has(.arcade-classes-v2--home) > .fc-left > h3       { grid-column: 1; grid-row: 2; }
.fc-grid:has(.arcade-classes-v2--home) > .fc-left > .btn     { grid-column: 1; grid-row: 3; justify-self: start; }
.fc-grid:has(.arcade-classes-v2--home) > .fc-left > p {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: center;
  max-width: 54ch !important;
  margin: 0 !important;
  font-size: 1.05rem;
}

/* Four across, equal height — the tiers carry different numbers of classes and
   a ragged bottom edge reads as broken rather than deliberate. */
.arcade-classes-v2--home .arc-ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .arcade-classes-v2--home .arc-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .arcade-classes-v2--home .arc-ladder { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .fc-grid:has(.arcade-classes-v2--home) > .fc-left { display: block; }
  .fc-grid:has(.arcade-classes-v2--home) > .fc-left > p { max-width: 60ch !important; margin: 0 0 20px !important; }
}