/* ══════════════════════════════════════════
   PRODUCT PAGE SHARED STYLES — Mobile First
   Used by: vinyasa.html, hatha.html, yin.html, simon-borg-olivier.html
══════════════════════════════════════════ */

/* ─── CONTENT NAV (horizontal scroll on mobile) ─── */
/* Sticks exactly below the header — top matches --header-h so they never overlap */
.content-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  background: var(--brand-white);
  border-bottom: 1px solid var(--border);
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 12px;
}
.content-nav::-webkit-scrollbar {
  display: none;
}
.content-nav a {
  font-family: var(--font-logo);
  padding: 14px 14px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brand-mid);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition:
    color 0.2s,
    border-color 0.2s;
}
.content-nav a:hover,
.content-nav a.active {
  color: var(--brand-jungle);
  border-bottom-color: var(--brand-jungle);
}

/* ─── SECTION ANCHORS (offset for sticky header + content-nav) ─── */
.section-anchor {
  scroll-margin-top: calc(var(--header-h) + 56px);
}

/* ─── MAIN + SIDEBAR ─── */
/* Mobile: stacked (sidebar appears below content) */
.content-with-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.main-content {
  width: 100%;
}
.sticky-sidebar {
  width: 100%;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

/* ─── CURRICULUM BLOCKS ─── */
.curriculum-block {
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}
.curriculum-block:last-child {
  border-bottom: none;
}
.curriculum-block h4 {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.curriculum-block p {
  font-size: 0.9375rem;
}

/* ─── SCHEDULE TABLE ─── */
.schedule-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 380px;
}
.schedule-table tr {
  border-bottom: 1px solid var(--border);
}
.schedule-table td {
  padding: 12px 14px;
  font-size: 0.9rem;
}
.schedule-table td:first-child {
  font-weight: 500;
  color: var(--brand-sage);
  width: 140px;
  white-space: nowrap;
  font-size: 0.875rem;
}

/* ─── BIO (mobile: stacked) ─── */
.bio-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.bio-photo {
  min-height: 280px;
  position: relative;
  width: 100%;
}
.bio-text .tag {
  margin-bottom: 4px;
}

/* ─── ACCOMMODATION (mobile: stacked) ─── */
.accom-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
}
.accom-col {
  padding: 24px 20px;
  border-bottom: 1px solid var(--border);
  /* flex column so price + button align across cards regardless of copy length */
  display: flex;
  flex-direction: column;
}
.accom-col:last-child {
  border-bottom: none;
}
.accom-col:nth-child(2) {
  background: var(--brand-warm);
}
.accom-img {
  height: 160px;
  position: relative;
  margin-bottom: 16px;
}
.accom-col h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.accom-col p {
  font-size: 0.875rem;
  margin-bottom: 12px;
}
/* price gets pushed to the bottom → prices and the buttons beneath them line up */
.accom-price {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--brand-dark);
  margin: 10px 0 16px;
  margin-top: auto;
}
/* all accommodation buttons identical size (full card width, centered) */
.accom-col .btn {
  display: block;
  width: 100%;
  text-align: center;
}

/* ─── INCLUDED (mobile: 1 column) ─── */
.included-grid {
  display: flex;
  flex-direction: column;
}
.included-item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.included-item p {
  font-size: 0.9rem;
  color: var(--brand-mid);
  margin: 0;
}

/* ─── SIDEBAR CARD ─── */
.sidebar-card {
  border: 1px solid var(--border);
  background: var(--brand-white);
  overflow: hidden;
}
.sidebar-header {
  background: var(--brand-dark);
  color: white;
  padding: 24px 20px;
}
.sidebar-header .from {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.sidebar-header .price {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1;
  margin: 4px 0;
}
.sidebar-header .incl {
  font-size: 0.8rem;
  opacity: 0.7;
}
.sidebar-body {
  padding: 20px;
}
.sidebar-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--brand-mid);
  margin: 16px 0 10px;
}
.date-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  margin-bottom: 8px;
  font-size: 0.875rem;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.date-row:hover {
  border-color: var(--brand-mid);
}
.date-row:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: 2px;
}
.date-row.selected {
  border-color: var(--brand-dark);
  background: var(--brand-warm);
}
.room-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.room-row:last-child {
  border-bottom: none;
}
.room-row strong {
  color: var(--brand-dark);
  font-weight: 600;
}
.sidebar-incl-list {
  list-style: none;
  margin-top: 12px;
}
.sidebar-incl-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--brand-mid);
}
.sidebar-incl-list li:last-child {
  border-bottom: none;
}
.sidebar-incl-list li i {
  width: 13px;
  height: 13px;
  color: var(--brand-sage);
  flex-shrink: 0;
}
.sidebar-note {
  padding: 14px;
  border: 1px solid #e8d5a0;
  background: #fffbec;
  margin-top: 12px;
}
.sidebar-note p {
  font-size: 0.8375rem;
  color: #7a5c00;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.sidebar-note i {
  flex-shrink: 0;
  margin-top: 2px;
}

/* ─── TESTIMONIAL CARDS ─── */
.testimonial-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.testimonial-card {
  padding: 24px 20px;
  border: 1px solid var(--border);
  background: white;
}

/* ─── FAQ ─── */
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}
.faq-q {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--brand-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.faq-q::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 600;
  flex-shrink: 0;
}
.faq-a {
  padding-top: 12px;
  font-size: 0.9375rem;
  color: var(--brand-mid);
}

/* ─── AUTHORITY STATS ─── */
.authority-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}
.authority-stat {
  padding: 16px;
  background: var(--brand-warm);
  border: 1px solid var(--border);
  text-align: center;
}
.authority-stat .num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--brand-dark);
  line-height: 1;
}
.authority-stat p {
  font-size: 0.8rem;
  margin-top: 4px;
}

/* ─── VIDEO PH ─── */
.video-ph {
  height: 240px;
  background: #1a1a18;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}
.video-ph p {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ─── SLIDER PH ─── */
.slider-ph {
  border: 2px dashed var(--border);
  padding: 32px 20px;
  text-align: center;
  background: var(--brand-warm);
  color: var(--brand-mid);
  font-size: 0.875rem;
}

/* ══════════════════════════════════════════
   TABLET — min-width: 768px
══════════════════════════════════════════ */
@media (min-width: 768px) {
  .content-nav {
    padding: 0 24px;
  }
  .content-nav a {
    padding: 16px 18px;
    font-size: 0.75rem;
  }
  .accom-grid {
    flex-direction: row;
  }
  .accom-col {
    flex: 1;
    border-bottom: none;
    border-right: 1px solid var(--border);
  }
  .accom-col:last-child {
    border-right: none;
  }
  .included-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .bio-block {
    flex-direction: row;
    gap: 36px;
    align-items: flex-start;
  }
  .bio-photo {
    width: 240px;
    min-height: 300px;
    flex-shrink: 0;
  }
  .video-ph {
    height: 360px;
  }
  .testimonial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

/* ══════════════════════════════════════════
   DESKTOP — min-width: 1024px
══════════════════════════════════════════ */
@media (min-width: 1024px) {
  .content-nav {
    padding: 0 40px;
  }
  /* Side-by-side layout */
  .content-with-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
    align-items: start;
  }
  /* split (text + image) sections sit inside the narrower main column when the
     sticky sidebar is present — stack them so headings/text get the full width */
  .content-with-sidebar .split {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
  .content-with-sidebar .split > * {
    flex: 0 0 auto;
  }
  .content-with-sidebar .split-media {
    max-height: 380px;
  }
  .main-content {
    width: auto;
  }
  .sticky-sidebar {
    position: sticky;
    top: calc(var(--header-h) + 64px);
    width: auto;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    /* never taller than the viewport — scroll internally if content is long,
       so the bottom (Apply Now etc.) is always reachable (clears the sub-nav) */
    max-height: calc(100vh - var(--header-h) - 88px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .bio-photo {
    width: 260px;
    min-height: 340px;
  }
  .video-ph {
    height: 440px;
  }
  .curriculum-block {
    padding: 28px 0;
  }
  .schedule-table td {
    padding: 14px 16px;
    font-size: 0.9375rem;
  }
  .schedule-table td:first-child {
    width: 180px;
    font-size: 0.9375rem;
  }
}

/* Large desktop: the content + sidebar area felt cramped on wide screens.
   Widen the page container a little so the copy/images get more room. The
   sidebar stays 300px, so the central content column is what grows. Footer
   and other sections use the same var, so everything stays aligned.
   Below 1280px nothing changes, so the layout stays fully responsive. */
@media (min-width: 1280px) {
  :root {
    --container: 1180px;
  }
}