/* RHYTHM SPEAKER / canonical class photo system
   Identity posters are square and must remain fully visible on every device.
   Lesson, studio and wayfinding photos have separate contextual roles. */

/* The class finder uses the same six square editorial posters as TOP. */
.classes-page .class-card-image {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  background: #f4f0ea;
}

/* 2026-10-09 UX correction:
   Canonical class posters are part of a compact editorial introduction,
   NOT miniature posters inside a giant black dashboard.
   Applies to STEP / TAP / ISOLATION / BAR METHOD / HIIT. */
.class-page .class-hero {
  display: block;
  min-height: 0;
  padding: clamp(2.25rem, 4.5vw, 4.75rem) clamp(1.25rem, 5vw, 5rem);
  color: #201d1b;
  padding-top: clamp(6rem, 8vw, 7rem); /* fixed site nav occupies first 68px */
  background: linear-gradient(125deg, #faf7f2 0%, #f0e9e0 100%);
}
.class-page .class-hero::after {
  height: 1px;
  background: #e5dcd1;
}
.class-page .class-hero-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(260px, .88fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.class-page .class-hero h1 {
  font-size: clamp(2.15rem, 4vw, 3.75rem); /* avoid orphaned last kana */
  line-height: 1.16;
  letter-spacing: -.045em;
  margin: .65rem 0 1.1rem;
  overflow-wrap: anywhere;
}
.class-page .class-lead {
  max-width: 640px;
  font-size: clamp(.95rem, 1.35vw, 1.08rem);
  line-height: 1.75;
  color: #57524d;
}
.class-page .class-actions {
  margin-top: 1.45rem;
  gap: .7rem;
}
.class-page .class-hero .class-actions .btn-secondary {
  color: #25211e;
  border-color: #b4aaa0;
  background: rgba(255,255,255,.45);
}
.step-page .class-trial-note {
  margin: .85rem 0 0;
  color: #6c5f55;
  font-size: .8rem;
  line-height: 1.5;
  font-weight: 600;
}
.step-page .class-trial-note strong {
  color: #2c2420;
  font-size: .92rem;
}
.class-page .class-hero .class-actions .btn-secondary:hover {
  background: #fff;
}
.class-page .class-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .95rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.class-page .class-identity-art {
  width: min(100%, 360px);
  margin: 0 auto;
  padding: 0;
}
.class-page .class-identity-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 16px;
  background: #f4f0ea;
  box-shadow: 0 16px 36px rgba(48,36,27,.13);
}
.class-page .class-identity-art figcaption {
  display: none; /* the approved poster already contains the class name */
}
.class-page .class-facts {
  display: grid;
  grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
  align-items: baseline;
  gap: .24rem .65rem;
  padding: .9rem 0 0;
  border-top: 1px solid #d9d0c6;
  min-width: 0;
}
.class-page .class-facts small {
  color: #84796f;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.class-page .class-facts strong {
  color: #272320;
  font-size: clamp(.78rem,1.25vw,.93rem);
  line-height: 1.4;
  margin: 0;
  overflow-wrap: anywhere;
}
.class-page .class-section {
  padding-top: clamp(3.25rem,5vw,4.5rem);
  padding-bottom: clamp(3.25rem,5vw,4.5rem);
}
.class-page .class-section h2 {
  font-size: clamp(1.9rem,3.8vw,3.2rem);
}
.step-page .class-path article,
.tap-page .class-section.dark {
  background: linear-gradient(135deg, #151515, #292929);
}

/* A lesson level or teaching concept is a textual choice, not a new class
   identity. Remove repeated generic dancer images and keep the cards concise. */
.step-page #levels .class-card,
.tap-page #concept .class-card {
  min-height: 0;
  padding: 1.65rem;
}
.step-page #levels .class-card::before,
.tap-page #concept .class-card::before,
.tap-page #difference .class-feature::before {
  content: none;
  display: none;
}
.tap-page #difference .class-feature {
  min-height: 0;
  padding: 1.6rem;
}

/* Instructor editorial posters are a separate canonical photo family. */
.tap-page #instructors .tap-style-photo {
  aspect-ratio: 1 / 1;
  background-size: contain;
  background-position: center;
  transform: none;
}
.tap-page #instructors .class-card:hover .tap-style-photo {
  transform: none;
}

/* Stretch has an intentionally contextual hero; show its TOP class poster
   immediately after the hero, without covering the studio imagery or CTA. */
/* Real studio scene, not a multi-panel sprite, for the STRETCH hero. */
.stretch-page .sprite-studio--hero {
  background-image: url('../../assets/images/trial/trial-real-studio-floor-v1.webp');
  background-position: center;
  background-size: cover;
}

.stretch-page .stretch-identity-strip {
  display: flex;
  align-items: center;
  gap: clamp(1rem,3vw,2rem);
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  color: #171717;
}
.stretch-page .stretch-identity-photo {
  display: block;
  flex: 0 0 auto;
  width: clamp(112px,15vw,172px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 12px;
  background: #f4f0ea;
}
.stretch-page .stretch-identity-copy small {
  display: block;
  color: #a53249;
  font: 900 .7rem/1.5 'Outfit',sans-serif;
  letter-spacing: .1em;
}
.stretch-page .stretch-identity-copy strong {
  display: block;
  margin-top: .35rem;
  font-size: clamp(1rem,2.4vw,1.45rem);
  line-height: 1.4;
}
.stretch-page .stretch-identity-copy p {
  margin: .35rem 0 0;
  color: #635e59;
  font-size: .86rem;
  line-height: 1.65;
}
.stretch-page .stretch-team-photo {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 18px;
  background: #f4f0ea;
}

/* A 750px split-screen is still a two-column layout.
   Keep the CTA pair inline; don't inherit the old <=768px stacked buttons. */
@media (min-width: 701px) and (max-width: 900px) {
  .class-page .class-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .class-page .class-actions .btn {
    width: auto;
  }
}

@media (max-width: 700px) {
  .class-page .class-hero {
    padding: calc(68px + 1.35rem) 1.25rem 2.25rem;
  }
  .class-page .class-hero-grid {
    grid-template-columns: minmax(0,1fr);
    gap: 1.35rem;
  }
  .class-page .class-hero h1 {
    font-size: clamp(2.15rem, 8.7vw, 3rem);
    line-height: 1.17;
    margin: .55rem 0 .85rem;
  }
  .class-page .class-lead {
    font-size: .94rem;
    line-height: 1.7;
  }
  .class-page .class-actions {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .6rem;
    margin-top: 1.2rem;
  }
  .class-page .class-actions .btn {
    min-width: 0;
    min-height: 48px;
    padding: .75rem .5rem;
    font-size: .82rem;
    line-height: 1.4;
    white-space: normal;
  }
  .class-page .class-panel {
    display: grid;
    grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
    align-items: center;
    gap: .95rem;
    padding: .85rem;
    border: 1px solid #e2d8cd;
    border-radius: 18px;
    background: rgba(255,255,255,.65);
  }
  .class-page .class-identity-art {
    width: 100%;
    margin: 0;
  }
  .class-page .class-identity-photo {
    border-radius: 10px;
    box-shadow: none;
  }
  .class-page .class-facts {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    align-content: center;
    gap: .12rem;
    padding: 0;
    border: 0;
  }
  .class-page .class-facts small {
    font-size: .58rem;
    letter-spacing: .04em;
  }
  .class-page .class-facts strong {
    font-size: clamp(.78rem,3.3vw,.93rem);
    line-height: 1.35;
    margin: 0 0 .45rem;
  }
  .class-page .class-facts > :nth-child(n+5) {
    display: none; /* only the two decision-making facts above the fold */
  }
  .class-page .class-section {
    padding: 3.25rem 1.25rem;
  }
  .step-page #levels .class-card,
  .tap-page #concept .class-card,
  .tap-page #difference .class-feature { padding: 1.35rem; }
  .stretch-page .stretch-identity-strip { padding: 1rem; }
}
@media (max-width: 360px) {
  .stretch-page .stretch-identity-photo { width: 104px; }
  .stretch-page .stretch-identity-copy p { font-size: .78rem; }
}