/* ============================================================
   LIVE ONLINE YOGA CLASSES: service page
   Extends assets/site.css. Tokens, buttons, .shell, .section,
   .reveal, .faq and .cta all come from site.css; only the
   patterns this page adds live here.

   Prefix is lo- (live online). The schedule block deliberately
   borrows the spec-list idiom from .cmodal__specs so the class
   details read the same here as they do in the homepage modal,
   but it is real rendered markup rather than a <template>.
   ============================================================ */

/* ---------- hero ---------- */
.lo-hero{padding-block-start:clamp(24px,4vw,48px);padding-block-end:0}
.lo-hero__grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:center;
}
.lo-hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.lo-hero__copy h1{font-size:clamp(2.5rem,5.2vw,4.2rem);color:var(--green)}
.lo-hero__copy .lead{max-width:52ch}
.lo-hero__sub{font-size:.98rem;line-height:1.7;color:var(--ink-soft);max-width:52ch}
.lo-hero__actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px}
.lo-hero__meta{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:6px 0 0;padding:0}
.lo-hero__meta li{
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green);
  border:1px solid var(--green-soft);border-radius:99px;padding:8px 14px;line-height:1;
}
.lo-hero__media{position:relative;border-radius:var(--radius);overflow:hidden}
/* The hero source is a tall portrait of a home practice with the laptop
   at the bottom of the frame. A little extra height plus a low crop keeps
   both the figure and the screen in shot, which is the whole point of it. */
.lo-hero__media img{width:100%;height:clamp(360px,46vw,600px);object-fit:cover;object-position:50% 78%;display:block}
@media (max-width:899px){
  .lo-hero__grid{grid-template-columns:1fr}
  .lo-hero__media img{height:clamp(260px,54vw,380px)}
}
@media (max-width:520px){
  .lo-hero__actions{flex-direction:column;align-items:stretch;width:100%}
  .lo-hero__actions .btn{justify-content:center}
}

/* ---------- two-column prose bands ---------- */
.lo-prose__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(28px,5vw,80px)}
@media (max-width:899px){ .lo-prose__grid{grid-template-columns:1fr} }
.lo-prose__head h2{color:var(--green)}
.lo-prose__head .eyebrow{margin-bottom:12px}
.lo-prose__body{display:flex;flex-direction:column;gap:18px}
.lo-prose__body p{color:var(--ink-soft);line-height:1.75;max-width:62ch}
/* site.css sets a{color:inherit;text-decoration:none}, so body-copy links
   need an explicit affordance. Scoped to this page's prose. */
.lo-prose__body a{
  color:var(--green);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}
.lo-prose__body a:hover{color:var(--terracotta-deep)}
.lo-prose__body .lo-beat{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--green);line-height:1.35;max-width:34ch}

/* ---------- why practise live ---------- */
.lo-why{background:var(--sand);border-radius:var(--radius)}
.lo-why__head{margin-bottom:clamp(28px,4vw,52px);max-width:62ch}
.lo-why__head h2{color:var(--green)}
.lo-why__head .eyebrow{margin-bottom:12px}
.lo-why__head .lead{margin-top:16px}
/* Five items: three then two, so the row never leaves a lone orphan. */
.lo-why__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.lo-reason{grid-column:span 2}
.lo-reason:nth-child(4),.lo-reason:nth-child(5){grid-column:span 3}
@media (max-width:999px){
  .lo-why__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lo-reason,.lo-reason:nth-child(4),.lo-reason:nth-child(5){grid-column:span 1}
}
@media (max-width:559px){ .lo-why__grid{grid-template-columns:1fr} }
/* Same hairline border and lift-on-hover as .occ, .by-card and .pgh-card,
   so a card reads the same wherever it appears on the site. */
.lo-reason{
  background:var(--cream);border-radius:var(--radius);
  padding:clamp(20px,2.2vw,28px);
  border:1px solid rgba(165,184,180,.45);
  display:flex;flex-direction:column;gap:10px;height:100%;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.lo-reason:hover{transform:translateY(-4px);box-shadow:0 18px 40px -28px rgba(52,56,55,.45)}
.lo-reason h3{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--green);line-height:1.25}
.lo-reason p{font-size:.9rem;line-height:1.65;color:var(--ink-soft)}

/* ---------- what a class feels like ---------- */
.lo-feel__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:899px){ .lo-feel__grid{grid-template-columns:1fr} }
.lo-feel__media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.lo-feel__media figure{margin:0;border-radius:var(--radius);overflow:hidden}
.lo-feel__media img{width:100%;height:clamp(240px,30vw,400px);object-fit:cover;display:block}
/* Offset the second frame so the pair reads as a composition rather than
   two equal tiles. */
.lo-feel__media figure:nth-child(2){margin-top:clamp(24px,4vw,56px)}
@media (max-width:559px){
  .lo-feel__media img{height:clamp(200px,44vw,280px)}
  .lo-feel__media figure:nth-child(2){margin-top:0}
}
.lo-feel__copy{display:flex;flex-direction:column;gap:18px}
.lo-feel__copy h2{color:var(--green)}
.lo-feel__copy .eyebrow{margin-bottom:2px}
.lo-feel__copy p{color:var(--ink-soft);line-height:1.75;max-width:56ch}

/* ---------- beginners panel ---------- */
.lo-levels{background:var(--sand);border-radius:var(--radius)}
.lo-levels__panel{
  max-width:820px;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:20px;
}
.lo-levels__panel h2{color:var(--green)}
.lo-levels__panel p{color:var(--ink-soft);line-height:1.75;max-width:62ch}
.lo-levels__panel .lo-beat{
  font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.8rem);
  color:var(--green);line-height:1.35;max-width:30ch;
}
@media (max-width:639px){ .lo-levels__panel{text-align:left;align-items:flex-start} }

/* ---------- what you need ---------- */
.lo-kit__head{margin-bottom:clamp(28px,4vw,52px);max-width:60ch}
.lo-kit__head h2{color:var(--green)}
.lo-kit__head .eyebrow{margin-bottom:12px}
.lo-kit__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 clamp(24px,3vw,48px);border-top:1px solid var(--sand-deep);
}
@media (max-width:899px){ .lo-kit__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:519px){ .lo-kit__grid{grid-template-columns:1fr} }
.lo-kit{display:flex;gap:14px;align-items:flex-start;padding:clamp(20px,2.2vw,28px) 0;border-bottom:1px solid var(--sand-deep)}
.lo-kit svg{flex:none;width:18px;height:18px;margin-top:4px;color:var(--green-soft)}
.lo-kit h3{font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--green);line-height:1.25;margin-bottom:6px}
.lo-kit p{font-size:.87rem;line-height:1.6;color:var(--ink-soft)}

/* ---------- how it works ---------- */
.lo-steps__head{margin-bottom:clamp(28px,4vw,52px)}
.lo-steps__head h2{color:var(--green)}
.lo-steps__head .eyebrow{margin-bottom:12px}
.lo-steps__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
@media (max-width:899px){ .lo-steps__list{grid-template-columns:1fr} }
.lo-step{display:flex;flex-direction:column;gap:14px;padding-top:24px;border-top:1px solid var(--sand-deep)}
.lo-step__num{
  font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;
  color:var(--green-soft);font-weight:300;
}
.lo-step__title{font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,1.8rem);font-weight:500;color:var(--green);line-height:1.2}
.lo-step p{font-size:.95rem;line-height:1.7;color:var(--ink-soft);max-width:46ch}

/* ---------- meet julia ---------- */
.lo-julia{background:var(--green-deep);color:var(--cream);border-radius:var(--radius)}
.lo-julia__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:899px){ .lo-julia__grid{grid-template-columns:1fr} }
.lo-julia__media{border-radius:var(--radius);overflow:hidden}
.lo-julia__media img{width:100%;height:clamp(300px,34vw,460px);object-fit:cover;display:block}
.lo-julia__copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.lo-julia__copy .eyebrow{color:var(--green-mist)}
.lo-julia__copy h2{color:var(--cream)}
.lo-julia__copy > p{color:var(--cream);opacity:.86;font-size:1rem;line-height:1.75;max-width:52ch}
.lo-julia__copy > p a{color:var(--cream);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.lo-julia__copy > p a:hover{color:var(--green-mist)}
.lo-julia__list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;width:100%}
.lo-julia__list li{
  display:flex;gap:14px;align-items:flex-start;
  padding-bottom:16px;border-bottom:1px solid rgba(165,184,180,.28);
}
.lo-julia__list li:last-child{border-bottom:0;padding-bottom:0}
.lo-julia__list svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--green-soft)}
.lo-julia__list strong{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:600;margin-bottom:4px}
.lo-julia__list span.lo-julia__d{font-size:.88rem;line-height:1.6;opacity:.82}

/* ============================================================
   SCHEDULE: the conversion block
   ============================================================ */
.lo-sched{background:var(--cream)}
.lo-sched__head{margin-bottom:clamp(28px,4vw,52px);max-width:64ch}
.lo-sched__head h2{color:var(--green)}
.lo-sched__head .eyebrow{margin-bottom:12px}
.lo-sched__head .lead{margin-top:16px}
.lo-sched__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
@media (max-width:899px){ .lo-sched__grid{grid-template-columns:1fr} }

.lo-class{
  display:grid;grid-template-columns:clamp(150px,17vw,220px) minmax(0,1fr);
  background:var(--cream);border:1px solid var(--green-soft);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.lo-class:hover{transform:translateY(-4px);box-shadow:0 18px 40px -28px rgba(52,56,55,.45)}
.lo-class__img{width:100%;height:100%;min-height:100%;object-fit:cover;display:block}
.lo-class__body{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2.4vw,30px)}
.lo-class__title{font-family:var(--serif);font-size:clamp(1.35rem,2vw,1.6rem);font-weight:600;color:var(--green);line-height:1.2}
.lo-class__when{
  display:inline-flex;align-self:flex-start;align-items:center;gap:8px;
  background:var(--sand);border-radius:99px;padding:8px 14px;
  font-size:.78rem;letter-spacing:.04em;color:var(--green);line-height:1;
}
.lo-class__desc{font-size:.9rem;line-height:1.65;color:var(--ink-soft)}
/* Same shape as the class specs in the homepage modal, so a returning
   visitor reads the details in a familiar layout. */
.lo-class__specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;margin:0}
.lo-class__specs dt{
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);line-height:1;margin-bottom:6px;
}
.lo-class__specs dd{margin:0;font-size:.85rem;line-height:1.45;color:var(--ink)}
.lo-class__book{margin-top:auto;padding-top:6px;align-self:flex-start}
@media (max-width:639px){
  .lo-class{grid-template-columns:1fr}
  .lo-class__img{height:clamp(180px,42vw,240px);min-height:0}
  .lo-class__book{width:100%;justify-content:center}
}

/* Booking note under the schedule */
.lo-sched__note{
  margin-top:clamp(24px,3vw,40px);
  background:var(--sand);border-radius:var(--radius);
  padding:clamp(24px,3vw,40px);
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
}
.lo-sched__note h3{font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,1.8rem);font-weight:600;color:var(--green);line-height:1.2}
.lo-sched__note p{font-size:.95rem;line-height:1.7;color:var(--ink-soft);max-width:64ch}
.lo-sched__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

/* A block whose content Julia still has to supply. Deliberately styled as
   an obvious editorial note so it can never be mistaken for real copy;
   delete the whole element once the rates are in. */

/* ---------- closing CTA ---------- */
/* .cta and .cta__inner come from site.css; this only adds the copy width
   and the second button row. */
.lo-cta__copy{color:var(--ink-soft);line-height:1.75;max-width:62ch;text-align:center}
.lo-cta__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}