/* ==========================================================
   Temple Yoga — special page styles
   Extends /css/main.min.css. Reuses existing tokens/components
   (colors, typography, .cta-*, .container_*, table.primary,
   .gmap, .wrap-primary, swiper gallery, etc.) and adds only
   the pieces that page needs and the main site doesn't have.
   ========================================================== */

:root {
  --ty-darkGreen: #143f2b;
  --ty-lightGreen: #c7d98f;
  --ty-lightSand: #e9e6e1;
  --ty-lightWhite: #fffbf8;
  --ty-primaryBlack: #1a1311;
  --ty-lightGray: #f1f1f1;
}

/* Rental Studio widget — not used on this page.
   Markup stays in the HTML (untouched, shared /js/main.js binds
   #open-modal on load) but is hidden here so nothing shows or is
   clickable. */
.rental {
  display: none !important;
}

/* Hero
--------------------------------------- */
section.ty-hero {
  position: relative;
  width: 100%;
  height: calc(var(--real-vh, 1vh) * 92);
  min-height: 520px;
  overflow: hidden;
}
.ty-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.ty-hero-media .swiper,
.ty-hero-media .swiper-wrapper,
.ty-hero-media .swiper-slide {
  width: 100%;
  height: 100%;
}
.ty-hero-media .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.ty-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(26, 19, 17, 0.55) 0%, rgba(26, 19, 17, 0.25) 35%, rgba(26, 19, 17, 0.75) 100%);
}
/* Global nav sits over the hero photo here — the site-wide dark
   nav text is unreadable on the image, so on this page only we
   lighten it to near-white. */
.ty-hero .global-nav li a {
  color: var(--ty-lightWhite);
}
.ty-hero .global-nav li a:hover {
  color: var(--ty-lightGreen);
  opacity: 1;
}
.ty-hero-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Bottom-aligned rather than centered — a centered block landed
     on top of people's faces in the hero photos. */
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 100px 20px 40px;
}
/* Plain content box — no position/transform centering tricks here,
   .ty-hero-inner's flexbox already centers it both axes (eyebrow,
   title, and the copy block below all move as one unit). */
.ty-hero-content {
  width: 100%;
  max-width: 900px;
}
p.ty-eyebrow {
  color: var(--ty-lightGreen);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
  margin-bottom: 0.8em;
}
h1.ty-hero-title {
  color: #fff;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 500;
  margin-bottom: 0.4em;
}
/* Copy block (intro line / meta / CTA) — flows right below the
   title inside the same centered .ty-hero-content column, center
   -aligned to match the eyebrow+title above it. */
.ty-hero-bottom {
  margin-top: 30px;
  text-align: center;
}
p.ty-hero-copy {
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  margin: 0 auto 1em;
  max-width: 520px;
}
p.ty-hero-meta {
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 1.4em;
  opacity: 0.9;
}
@media only screen and (min-width: 769px) {
  section.ty-hero {
    min-height: 680px;
  }
  .ty-hero-inner {
    padding: 140px 60px 70px;
  }
  p.ty-eyebrow {
    font-size: 15px;
  }
  h1.ty-hero-title {
    font-size: clamp(34px, 4.4vw, 58px);
    max-width: none;
    white-space: nowrap;
  }
  .ty-hero-bottom {
    margin-top: 40px;
  }
  p.ty-hero-copy {
    font-size: 18px;
    max-width: 620px;
  }
  p.ty-hero-meta {
    font-size: 15px;
  }
}

/* Meta line (90 min | all levels | english) reused in CTA bands
--------------------------------------- */
p.ty-meta {
  text-align: center;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.04em;
  margin-bottom: 1.2em;
}
@media only screen and (min-width: 769px) {
  p.ty-meta {
    font-size: 20px;
  }
}

/* Section heading eyebrow (small label above h2)
--------------------------------------- */
p.ty-section-label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ty-darkGreen);
  margin-bottom: 0.6em;
}
@media only screen and (min-width: 769px) {
  p.ty-section-label {
    font-size: 13px;
  }
}

/* "Your Temple Yoga Experience" — same card layout as the top
   page's #whyus ("What Makes Us Different"): h3.primary pill title
   + .wrap-primary (rounded image + text), 2-col grid via
   .outer/.inner_two_col. The anchor-offset, mobile card spacing,
   and the image radius/margin (all scoped to #whyus in the shared
   stylesheet) need restating here for this section's own id. */
section#how-it-works {
  /* padding-top stays 50px taller than the negative margin so the
     section keeps the same anchor-scroll offset as #whyus while
     also gaining ~50px of real breathing room above it — matching
     the gap #intro's own padding-bottom gives #whyus on the top
     page (the "Book Your Experience" CTA right above this section
     was sitting too close otherwise). */
  padding-top: 140px;
  margin-top: -90px;
}
section#how-it-works .wrap-primary img {
  border-radius: 20px;
  margin-bottom: 15px;
}
/* Card titles run long here ("Japanese Tea & Conversation with the
   Head Priest"), so drop h3.primary one size down from the shared
   18px/22px default. */
section#how-it-works h3.primary {
  font-size: 15px;
}
@media only screen and (min-width: 769px) {
  section#how-it-works h3.primary {
    font-size: 18px;
  }
}
@media only screen and (max-width: 768px) {
  section#how-it-works .inner_two_col {
    margin-bottom: 50px;
  }
}

/* CTA repeat band ("Temple Yoga in Asakusa / 90 min | ¥10,000 | English")
--------------------------------------- */
section.ty-cta-band {
  background-color: var(--ty-lightSand);
  padding: 50px 0;
  /* This is the last section in <main>, and <main> itself carries a
     shared padding-bottom: 50px (main.scss) — cancel it out so the
     band sits flush against the footer with no gap. */
  margin-bottom: -50px;
}
section.ty-cta-band h2.primary {
  margin-bottom: 0.3em;
}

/* Host section — mirrors instructor.html's #instructor card layout
   (h2.name + Credentials/Trained in + photo + bio, 3-col via
   .inner_three_col). Those rules are scoped to #instructor in the
   shared stylesheet, so they're restated here under #host's own id.
   On instructor.html this content sits directly on the page's
   $lightGray body background (outside <main>, which is white) —
   that's also what makes h2.name's white border-bottom visible.
   Here #host lives inside <main>'s white background, so a
   .ty-host-bg wrapper supplies that same gray as an explicit
   background instead. The anchor-scroll offset (footer links to
   #host) stays on the outer section, kept background-free so the
   negative margin doesn't pull the gray up into the section above;
   the extra breathing-room padding lives on .ty-host-bg instead.
--------------------------------------- */
section#host {
  padding-top: 90px;
  margin-top: -90px;
}
.ty-host-bg {
  background-color: var(--ty-lightGray);
  padding: 50px 0 60px;
}
/* Sized down from instructor.html's own 42px/64px h2.name (scoped
   to #host only, via this section#host selector — instructor.html's
   shared #instructor rule is untouched) so it reads as secondary to
   the "Your Host" heading above it rather than competing with it. */
section#host h2.name {
  font-size: 26px;
  text-align: center;
  border-bottom: 5px solid #FFF;
  padding-bottom: 0.1em;
  margin-bottom: 0.5em;
  line-height: 1.2;
}
section#host h2.name span {
  font-size: 18px;
  display: block;
}
section#host h3.title {
  font-size: 18px;
  margin-bottom: 0.5em;
}
section#host img {
  border-radius: 20px;
}
@media only screen and (max-width: 768px) {
  section#host .inner_three_col {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 769px) {
  section#host h2.name {
    font-size: 36px;
  }
  section#host h2.name span {
    font-size: 20px;
  }
  section#host .outer {
    justify-content: center;
    align-items: center;
  }
}

/* Before You Book — now a quiet fine-print note nested inside the
   final .ty-cta-band (below the "Book Your Experience" button)
   rather than its own section: small uppercase label
   (.ty-section-label) + a compact, muted checklist. */
.ty-cta-band .ty-section-label {
  margin-top: 20px;
}
ul.ty-checklist {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 520px;
}
ul.ty-checklist li {
  position: relative;
  padding-left: 1.2em;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: #767066;
  margin-bottom: 0.6em;
}
ul.ty-checklist li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--ty-darkGreen);
}
@media only screen and (min-width: 769px) {
  ul.ty-checklist li {
    font-size: 16px;
  }
}

/* Details table intro spacing. Note: the ID selector here beats the
   .mt50 utility class on the element (higher specificity), so that
   50px margin-top was silently doing nothing — padding-top is bumped
   by the same 50px instead, on top of the anchor-scroll offset. */
section#details {
  padding-top: 140px;
  margin-top: -90px;
}