/* Lanka Yoga Wireframes — Mobile-First, On-Brand Stylesheet
   Brand: Jungle #787C5C · Limestone #F6EDE4 · Skin #D8B29B · Concrete #DDDDDD · Pop #ED6E71
   Fonts: Kobe (logo/labels — brand font) · Montserrat (headings) · EB Garamond (body, Bembo substitute) */

/* Kobe — the brand logo/tagline font (V&J Foundry). Loaded from the client's Drive webfont. */
@font-face {
  font-family: "Kobe";
  src: url("assets/fonts/kobe.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── BRAND TOKENS ─── */
:root {
  /* Brand palette (exact hex from brand guide) */
  --brand-jungle: #787c5c; /* dominant green */
  --brand-limestone: #f6ede4; /* cream secondary / bg */
  --brand-skin: #d8b29b; /* terracotta — sub-info layering */
  --brand-concrete: #dddddd; /* grey texture */
  --brand-pop: #ed6e71; /* coral — accent, sparingly */

  /* Semantic aliases (keep legacy names so markup keeps working) */
  --brand-sage: #787c5c; /* = Jungle */
  --brand-sage-light: #e8eade; /* soft jungle tint */
  --brand-dark: #2c2c26; /* warm near-black, text + dark sections */
  --brand-mid: #5c5c50; /* warm grey body text */
  --brand-warm: #f6ede4; /* = Limestone */
  --brand-white: #fcfaf6; /* page bg (limestone tint) */
  --placeholder: #dddddd; /* = Concrete */
  --placeholder-text: #9a9a90;
  --border: #e6dfd4; /* warm border on limestone */

  --container: 1040px;

  /* Fonts */
  --font-display: "Montserrat", -apple-system, sans-serif; /* headings */
  --font-body: "EB Garamond", Georgia, serif; /* body (Bembo substitute) */
  --font-logo:
    "Kobe", "Jost", -apple-system, sans-serif; /* logo + labels (Kobe = brand font, Jost fallback) */

  /* header heights — content-nav sticks exactly below these */
  --header-h: 60px;

  --section-gap: 56px;
}

/* ─── BASE ─── */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: clip;
}
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--brand-dark);
  background: var(--brand-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ─── TYPOGRAPHY ─── */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--brand-dark);
}
h1 {
  font-size: 1.75rem;
}
h2 {
  font-size: 1.4rem;
}
h3 {
  font-size: 1.2rem;
}
h4 {
  font-size: 1.0625rem;
  font-weight: 600;
}
p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--brand-mid);
}
small {
  font-family: var(--font-logo);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-jungle);
  font-weight: 400;
}

/* ─── LAYOUT ─── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
section {
  padding: var(--section-gap) 0;
}

/* ─── PLACEHOLDER BOXES ─── */
.placeholder {
  background: var(--placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-logo);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--placeholder-text);
  position: relative;
  overflow: hidden;
}
.placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 20px,
    rgba(0, 0, 0, 0.03) 20px,
    rgba(0, 0, 0, 0.03) 21px
  );
}
.wf-label {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  text-transform: uppercase;
  z-index: 2;
  font-family: var(--font-logo);
}

/* ─── HEADER (fixed height → content-nav can stick flush) ─── */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--brand-white);
  border-bottom: 1px solid var(--border);
  height: var(--header-h);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo {
  font-family: var(--font-logo);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-jungle);
  text-decoration: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
/* Official Lanka Yoga logo asset (green wordmark on transparent) */
.logo img {
  display: block;
  height: 22px;
  width: auto;
}
/* ═══ PRIMARY NAVIGATION — mobile-first (burger + slide-in drawer) ═══ */
/* Burger toggle (mobile only) */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--brand-dark);
  border-radius: 2px;
  transition:
    transform 0.25s,
    opacity 0.2s;
}
body.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
body.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer */
.main-nav {
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  width: min(84vw, 340px);
  background: var(--brand-white);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  transition: transform 0.28s ease;
  overflow-y: auto;
  padding: 8px 22px 40px;
  z-index: 110;
  display: flex;
  flex-direction: column;
}
.main-nav.open {
  transform: translateX(0);
}
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 24, 0.4);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.28s,
    visibility 0.28s;
  z-index: 95;
}
body.nav-open .nav-backdrop {
  opacity: 1;
  visibility: visible;
}
body.nav-open {
  overflow: hidden;
}
/* header CTA hidden on mobile (burger handles nav); restored on desktop */
header > .btn {
  display: none;
}

.nav-item > a {
  font-family: var(--font-logo);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--brand-dark);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
}
/* mobile: chevron toggles an accordion */
.nav-item > a [data-lucide] {
  width: 18px;
  height: 18px;
  margin-left: auto;
  opacity: 0.5;
  transition: transform 0.2s;
}
.has-dropdown.open > a [data-lucide] {
  transform: rotate(180deg);
}
.dropdown {
  display: none;
  flex-direction: column;
  padding: 2px 0 10px 14px;
  margin-bottom: 2px;
  border-left: 1px solid var(--border);
  margin-left: 2px;
}
.has-dropdown.open .dropdown {
  display: flex;
}
.dropdown a {
  font-family: var(--font-logo);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--brand-mid);
  text-decoration: none;
  padding: 8px 0;
}
.dropdown a:hover {
  color: var(--brand-jungle);
}

/* ─── BUTTONS ─── */
.btn {
  display: inline-block;
  padding: 11px 22px;
  background: var(--brand-jungle);
  color: #fff;
  font-family: var(--font-logo);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
  border: 1px solid var(--brand-jungle);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}
.btn-outline {
  background: transparent;
  color: var(--brand-jungle);
}
.btn-outline:hover {
  background: var(--brand-jungle);
  color: #fff;
}
.btn-sage {
  background: var(--brand-jungle);
  border-color: var(--brand-jungle);
  color: #fff;
}
.btn-sage:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* ─── PAGE HERO — mobile: stacked, image on top ─── */
.page-hero {
  display: flex;
  flex-direction: column;
}
.page-hero-img {
  position: relative;
  min-height: 240px;
  order: -1;
  width: 100%;
}
.page-hero-content {
  padding: 36px 20px;
  background: var(--brand-limestone);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-hero-content h1 {
  font-size: 1.7rem;
  margin: 12px 0 16px;
}
.page-hero-content p {
  font-size: 1.0625rem;
  margin-bottom: 20px;
}
/* Hero CTA hugs its label instead of stretching full width in the column flex */
.page-hero-content .btn {
  align-self: flex-start;
}
/* Hero Google-reviews trust badge */
.hero-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
}
.hero-rating-stars {
  color: #e8b84b;
  letter-spacing: 2px;
  font-size: 1.05rem;
  line-height: 1;
}
.hero-rating-text {
  font-size: 0.9rem;
  color: var(--brand-mid);
}
.hero-rating-text strong {
  color: var(--brand-dark);
  font-weight: 600;
}

/* ─── SPLIT (mobile stacked → desktop side by side) ─── */
.split {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.split > * {
  width: 100%;
}

/* ─── GRIDS — mobile: 1 column ─── */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* ─── CONTENT + SIDEBAR — mobile: stacked ─── */
.content-with-sidebar {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.sticky-sidebar {
  position: static;
}

/* ─── FOOTER — mobile: stacked ─── */
footer {
  background: var(--brand-dark);
  color: rgba(255, 255, 255, 0.6);
  padding: 48px 20px 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-logo {
  font-family: var(--font-logo);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 12px;
  display: block;
}
/* Logo on the dark footer — recolour the green wordmark to white */
.footer-logo img {
  display: block;
  height: 22px;
  width: auto;
  margin-bottom: 4px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.footer-desc {
  font-size: 0.95rem;
  line-height: 1.7;
}
.footer-col h5 {
  font-family: var(--font-logo);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.footer-col ul {
  list-style: none;
}
.footer-col ul li {
  margin-bottom: 10px;
}
.footer-col ul li a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 0.95rem;
}
.footer-col ul li a:hover {
  color: #fff;
}
.footer-bottom {
  max-width: var(--container);
  margin: 24px auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.85rem;
  font-family: var(--font-logo);
}
.footer-bottom a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
}

/* ─── MISC ─── */
.divider {
  width: 40px;
  height: 1px;
  background: var(--brand-jungle);
  margin: 16px 0;
}
.tag {
  display: inline-block;
  font-family: var(--font-logo);
  padding: 4px 12px;
  border: 1px solid var(--border);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-mid);
}
.tag-sage {
  background: var(--brand-sage-light);
  border-color: var(--brand-sage-light);
  color: var(--brand-jungle);
}
blockquote {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--brand-dark);
  line-height: 1.5;
  position: relative;
  padding-left: 28px;
}
blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -2px;
  font-size: 2.6rem;
  color: var(--brand-skin);
  line-height: 1;
  font-family: var(--font-body);
}
cite {
  display: block;
  font-family: var(--font-logo);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--brand-mid);
  margin-top: 10px;
}

.bg-warm {
  background: var(--brand-limestone);
}
.bg-dark {
  background: var(--brand-dark);
  color: #fff;
}
.text-center {
  text-align: center;
}
.mt-8 {
  margin-top: 8px;
}
.mt-16 {
  margin-top: 16px;
}
.mt-24 {
  margin-top: 24px;
}
.mt-32 {
  margin-top: 32px;
}
.mb-16 {
  margin-bottom: 16px;
}
.mb-32 {
  margin-bottom: 32px;
}
.mb-48 {
  margin-bottom: 48px;
}

/* ─── ICONS ─── */
[data-lucide] {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.icon-wrap {
  width: 38px;
  height: 38px;
  background: var(--brand-sage-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand-jungle);
  border-radius: 50%;
}
.icon-wrap [data-lucide] {
  width: 18px;
  height: 18px;
}

/* ─── BREADCRUMB ─── */
.breadcrumb {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-logo);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--brand-mid);
}
.breadcrumb a {
  color: var(--brand-mid);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--brand-jungle);
}
.breadcrumb span {
  margin: 0 6px;
}

/* ══════════ TABLET ≥640px ══════════ */
@media (min-width: 640px) {
  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }
  .grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ══════════ TABLET ≥768px ══════════ */
@media (min-width: 768px) {
  :root {
    --section-gap: 72px;
    --header-h: 68px;
  }
  .container {
    padding: 0 32px;
  }
  h1 {
    font-size: 2.3rem;
  }
  h2 {
    font-size: 1.9rem;
  }
  h3 {
    font-size: 1.35rem;
  }
  header {
    padding: 0 32px;
  }
  /* Desktop: horizontal nav with hover dropdowns; hide burger + drawer chrome */
  .nav-toggle {
    display: none;
  }
  header > .btn {
    display: inline-block;
  }
  .nav-backdrop {
    display: none;
  }
  .main-nav {
    position: static;
    transform: none;
    width: auto;
    background: none;
    border: none;
    box-shadow: none;
    overflow: visible;
    padding: 0;
    flex-direction: row;
    align-items: center;
    gap: 22px;
  }
  .nav-item {
    position: relative;
  }
  .nav-item > a {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--brand-mid);
    padding: 8px 0;
    border-bottom: none;
    white-space: nowrap;
  }
  .nav-item > a:hover {
    color: var(--brand-jungle);
  }
  .nav-item > a [data-lucide] {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-left: 2px;
    opacity: 0.55;
    transition: transform 0.2s;
  }
  .nav-item.has-dropdown:hover > a [data-lucide] {
    transform: rotate(180deg);
  }
  .dropdown {
    position: absolute;
    top: 100%;
    left: -12px;
    min-width: 230px;
    background: var(--brand-white);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 18px 44px rgba(26, 26, 24, 0.14);
    padding: 6px;
    margin: 0;
    display: block;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition:
      opacity 0.18s ease,
      transform 0.18s ease,
      visibility 0.18s;
    pointer-events: none;
  }
  .nav-item.has-dropdown:hover .dropdown,
  .nav-item.has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  .dropdown a {
    display: block;
    padding: 9px 14px;
    font-size: 0.8125rem;
    line-height: 1.2;
    color: var(--brand-mid);
    border-radius: 4px;
    white-space: nowrap;
  }
  .dropdown a:hover {
    background: var(--brand-warm);
    color: var(--brand-jungle);
  }
  .logo {
    font-size: 1.3rem;
  }
  .page-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
  }
  .page-hero-img {
    order: 0;
    min-height: 400px;
  }
  .page-hero-content {
    padding: 48px 40px;
  }
  .page-hero-content h1 {
    font-size: 2.1rem;
  }
  .split {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }
  .split > * {
    flex: 1;
  }
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ══════════ DESKTOP ≥1024px ══════════ */
@media (min-width: 1024px) {
  :root {
    --section-gap: 96px;
    --header-h: 72px;
  }
  .container {
    padding: 0 40px;
  }
  h1 {
    font-size: clamp(2.3rem, 3.2vw, 3.2rem);
  }
  h2 {
    font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  }
  h3 {
    font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  }
  header {
    padding: 0 40px;
  }
  .main-nav {
    gap: 28px;
  }
  .logo {
    font-size: 1.4rem;
  }
  .page-hero {
    min-height: 480px;
  }
  .page-hero-img {
    min-height: 480px;
  }
  .page-hero-content {
    padding: 80px 64px;
  }
  .page-hero-content h1 {
    font-size: clamp(2rem, 2.8vw, 2.9rem);
  }
  .split {
    gap: 72px;
  }
  .grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
  }
  .grid-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 24px;
  }
  .content-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 64px;
    align-items: start;
  }
  .sticky-sidebar {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
  footer {
    padding: 72px 40px 40px;
  }
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
  }
  .footer-logo {
    font-size: 1.3rem;
    margin-bottom: 16px;
  }
}

/* ═══════════ GOOGLE REVIEWS SLIDER ═══════════ */
.reviews {
  position: relative;
  margin-top: 28px;
}
.reviews-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.reviews-gmark {
  font-family: var(--font-logo);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-dark);
}
.reviews-gmark .g {
  font-weight: 700;
}
.reviews-gmark .b {
  color: #4285f4;
}
.reviews-gmark .r {
  color: #ea4335;
}
.reviews-gmark .y {
  color: #fbbc05;
}
.reviews-gmark .g2 {
  color: #34a853;
}
.reviews-stars {
  color: #f5a623;
  letter-spacing: 2px;
  font-size: 0.95rem;
}
.reviews-count {
  font-family: var(--font-logo);
  font-size: 0.8rem;
  color: var(--brand-mid);
}
.reviews-track {
  overflow: hidden;
}
.reviews-slides {
  display: flex;
  transition: transform 0.5s ease;
}
.review-slide {
  min-width: 100%;
  padding: 4px;
}
.review-card {
  background: var(--brand-white);
  border: 1px solid var(--border);
  padding: 28px 26px;
}
.review-card .stars {
  color: #f5a623;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.review-card blockquote {
  font-size: 1.1rem;
  padding-left: 0;
}
.review-card blockquote::before {
  display: none;
}
.review-card .who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.review-card .who .av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-sage-light);
  color: var(--brand-jungle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-logo);
  font-weight: 600;
  flex-shrink: 0;
}
.review-card .who cite {
  margin: 0;
}
.reviews-nav {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.reviews-nav button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  background: var(--brand-white);
  border-radius: 50%;
  cursor: pointer;
  color: var(--brand-jungle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    color 0.2s;
}
.reviews-nav button:hover {
  background: var(--brand-jungle);
  color: #fff;
  border-color: var(--brand-jungle);
}
.reviews-dots {
  display: flex;
  gap: 8px;
}
.reviews-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: var(--border);
  cursor: pointer;
}
.reviews-dots button.active {
  background: var(--brand-jungle);
}
@media (min-width: 768px) {
  .review-slide {
    min-width: 50%;
  }
}
/* Static, crawlable reviews fallback (no-JS). The JS slider in site.js
   replaces this with the interactive carousel when JavaScript runs, so
   these styles only ever show to search engines and no-JS visitors. */
.reviews-static {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.reviews-static .review-card {
  margin: 0;
}
.reviews-static .review-card blockquote {
  margin: 0;
}
@media (min-width: 768px) {
  .reviews-static {
    grid-template-columns: 1fr 1fr;
  }
}

/* ═══════════ INSTAGRAM FEED WIDGET ═══════════ */
.ig-feed {
  margin-top: 28px;
}
.ig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ig-grid a {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--placeholder);
}
.ig-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.ig-grid a:hover img {
  transform: scale(1.05);
}
.ig-grid a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(120, 124, 92, 0);
  transition: background 0.25s;
}
.ig-grid a:hover::after {
  background: rgba(120, 124, 92, 0.18);
}
@media (min-width: 640px) {
  .ig-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .ig-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
  }
}

/* ═══════════ RESPONSIVE VIDEO EMBED ═══════════ */
.video-embed {
  max-width: 860px;
  margin: 28px auto 0;
}
.video-embed .ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #1a1a18;
  overflow: hidden;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ═══════════ UPLOADED IMAGERY — fill the frame ═══════════ */
.offering-card-img img,
.care-img img,
.featured-img img,
.article-hero-img img,
.page-hero-img img,
.prog-card-img img,
.room-card-img img,
.feature-card-img img,
.accom-img img,
.bio-photo img,
.blog-card-img img,
.author-bio-photo img,
.byline-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* homepage hero background video */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ═══════════ ROBUST IMAGE FILL (absolute cover within framed wrappers) ═══════════ */
.page-hero-img,
.bio-photo,
.prog-card-img,
.room-card-img,
.feature-card-img,
.accom-img,
.offering-card-img,
.care-img,
.blog-card-img {
  position: relative;
  overflow: hidden;
}
/* ═══════════ BLOG CARD ═══════════
   Grid card for the homepage journal module and the two hub guides sections.
   Follows the same card language as .prog-card / .room-card: flat, 1px warm
   border, brand-white surface, sharp corners, footer pinned with margin-top
   auto so footers line up across a row regardless of excerpt length. */
.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--brand-white);
  border: 1px solid var(--border);
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    transform 0.28s ease;
}
.blog-card:hover {
  border-color: var(--brand-jungle);
  transform: translateY(-2px);
}
.blog-card-img {
  height: 200px;
  position: relative;
  overflow: hidden;
}
.blog-card-img img {
  transition: transform 0.5s ease;
}
.blog-card:hover .blog-card-img img {
  transform: scale(1.04);
}
.blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 22px;
}
.blog-card small {
  display: block;
  margin-bottom: 10px;
}
.blog-card h4 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 10px;
}
.blog-card p {
  font-size: 0.9rem;
  color: var(--brand-mid);
  margin: 0;
}
.blog-card-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.blog-card-read {
  font-family: var(--font-logo);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-mid);
}
.blog-card-arrow {
  color: var(--brand-jungle);
  transition: transform 0.2s ease;
}
.blog-card:hover .blog-card-arrow {
  transform: translateX(4px);
}
/* The excerpt is not a link, so stretch the title's hit area over the whole
   card. Keeps one link per card and one short accessible name. */
.blog-card h4 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.blog-card:focus-within {
  border-color: var(--brand-jungle);
}

/* Card titles are links so the article's own headline carries the anchor text
   (a generic "Read more" tells search engines nothing about the target). The
   link must still read as a heading, not as a default blue hyperlink. */
.blog-card h4 a,
.featured-body h2 a {
  color: inherit;
  text-decoration: none;
}
.blog-card h4 a:hover,
.featured-body h2 a:hover,
.blog-card h4 a:focus-visible,
.featured-body h2 a:focus-visible {
  text-decoration: underline;
}

.page-hero-img > img,
.bio-photo > img,
.prog-card-img > img,
.room-card-img > img,
.feature-card-img > img,
.accom-img > img,
.offering-card-img > img,
.care-img > img,
.blog-card-img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Card image that is drawn artwork rather than a photo (an infographic, a map).
   Cropping to fill would slice type off the edges, so fit the whole thing into
   the slot instead. The limestone ground matches what these graphics are drawn
   on, so the letterboxing reads as a panel rather than a gap. */
.blog-card-img.is-graphic,
.featured-img.is-graphic {
  background: var(--brand-warm);
}
.blog-card-img.is-graphic > img,
.featured-img.is-graphic > img,
.blog-card-img.is-graphic img,
.featured-img.is-graphic img {
  object-fit: contain;
}

/* ═══════════ SPLIT TEXT+VISUAL MODULE — one fixed, contained image size everywhere ═══════════ */
.split-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 460px;
  overflow: hidden;
  border-radius: 2px;
}
.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* breathing room around the Instagram feed grid */
.ig-grid {
  margin: 22px 0;
}

/* hero overlay buttons — keep label light on hover (base .btn:hover darkens the bg) */
.btn-white:hover,
.btn-ghost:hover {
  color: #fff;
}

/* ═══════════ DATE CALENDAR (training & retreat listing pages) ═══════════ */
.cal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}
.cal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  background: var(--brand-white);
}
.cal-date {
  font-family: var(--font-logo);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--brand-jungle);
  flex: 0 0 auto;
  min-width: 132px;
}
.cal-main {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cal-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-dark);
  font-size: 1rem;
  line-height: 1.3;
}
.cal-teacher {
  font-size: 0.85rem;
  color: var(--brand-mid);
}
.cal-status {
  flex: 0 0 auto;
}
.cal-badge {
  display: inline-block;
  font-family: var(--font-logo);
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 2px;
  white-space: nowrap;
}
.cal-badge.warn {
  background: #fbe9d0;
  color: #b85c00;
}
.cal-badge.ok {
  background: var(--brand-sage-light);
  color: var(--brand-jungle);
}
.cal-badge.guest {
  background: var(--brand-warm);
  color: var(--brand-mid);
  border: 1px solid var(--border);
}
.cal-badge.full {
  background: #eceae4;
  color: var(--brand-mid);
}
.cal-row.is-full {
  opacity: 0.72;
}
.cal-row.christmas {
  position: relative;
  border-color: #c0392b;
}
.cal-ribbon {
  position: absolute;
  top: -11px;
  left: 20px;
  background: #c0392b;
  color: #fff;
  font-family: var(--font-logo);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.cal-row .btn {
  white-space: nowrap;
  flex: 0 0 auto;
}
@media (max-width: 639px) {
  .cal-row .btn {
    width: 100%;
    text-align: center;
  }
  .cal-date {
    min-width: 0;
  }
}

/* ═══════════ INFO-PACK MODAL (Flodesk signup) ═══════════ */
.fd-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  background: rgba(26, 26, 24, 0.55);
  overflow-y: auto;
}
.fd-modal.open {
  display: flex;
}
.fd-modal-card {
  position: relative;
  background: var(--brand-white);
  width: 100%;
  max-width: 560px;
  border-radius: 6px;
  padding: 36px 28px 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.fd-modal-close {
  position: absolute;
  top: 8px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--brand-mid);
  cursor: pointer;
  padding: 4px 8px;
}
.fd-modal-close:hover {
  color: var(--brand-dark);
}
.fd-modal-body {
  min-height: 140px;
}
.fd-embed {
  min-height: 120px;
}
.fd-loading {
  text-align: center;
  color: var(--brand-mid);
  font-size: 0.9rem;
  padding: 36px 0;
}
.fd-modal-placeholder {
  text-align: center;
  padding: 24px 8px;
}
.fd-modal-placeholder small {
  display: block;
  margin-bottom: 10px;
}
.fd-modal-placeholder p {
  font-size: 0.9rem;
  color: var(--brand-mid);
}
.fd-modal-placeholder a {
  color: var(--brand-jungle);
}

/* ═══════════ ACCESSIBILITY & READABILITY (site-wide) ═══════════ */

/* Skip link — first focusable element, visible only on focus */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 1000;
  background: var(--brand-dark);
  color: #fff;
  padding: 10px 16px;
  font-family: var(--font-logo);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  border-radius: 0 0 4px 4px;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 0; }

/* Visible keyboard focus for every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand-jungle);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* In-content article links: underlined so they don't rely on colour alone */
.article-body p a,
.article-body li a {
  color: var(--brand-jungle);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.article-body p a:hover,
.article-body li a:hover { text-decoration-thickness: 2px; }

/* ═══════════ ARTICLE LAYOUT + STICKY TABLE OF CONTENTS ═══════════ */

/* Shell wraps the article column and the TOC aside */
.article-shell { position: relative; }

/* TOC: sits after the article in source order → appears at the bottom on
   mobile; becomes a sticky sidebar on desktop via the grid below. */
.article-toc {
  margin: 8px auto 0;
  max-width: 760px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.article-toc-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: none;
  border: none;
  padding: 14px 0;
  cursor: pointer;
  font-family: var(--font-logo);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-jungle);
}
.article-toc-toggle svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
.article-toc.open .article-toc-toggle svg { transform: rotate(180deg); }
.article-toc-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.article-toc:not(.open) .article-toc-list { display: none; }
.article-toc-list li { margin: 0; }
.article-toc-list a {
  display: block;
  padding: 8px 12px;
  border-left: 2px solid var(--border);
  color: var(--brand-mid);
  font-size: 0.92rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.article-toc-list a:hover { color: var(--brand-jungle); }
.article-toc-list a.active {
  color: var(--brand-jungle);
  border-left-color: var(--brand-jungle);
  font-weight: 500;
}

@media (min-width: 1024px) {
  .article-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 232px;
    gap: 48px;
    align-items: start;
  }
  .article-toc {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    align-self: start;
    max-height: calc(100vh - var(--header-h) - 48px);
    overflow-y: auto;
    margin: 0;
    border-top: none;
    padding-top: 0;
  }
  .article-toc-toggle { display: none; }
  .article-toc-list { display: block !important; }
  .article-toc h2.article-toc-heading {
    font-family: var(--font-logo);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-jungle);
    margin: 0 0 10px 12px;
  }
}
/* heading only shown as sidebar label on desktop */
.article-toc-heading { display: none; }
@media (min-width: 1024px) { .article-toc-heading { display: block; } }

/* Anchored article headings clear the sticky header when jumped to */
.article-body h2[id],
.article-body h3[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* Site-wide promo announcement ribbon (injected by site.js) */
.promo-ribbon { background: var(--brand-jungle); color: #fff; text-align: center; font-family: var(--font-logo); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.35; }
.promo-ribbon a { display: block; color: #fff; text-decoration: none; padding: 9px 16px; }
.promo-ribbon strong { font-weight: 600; }
.promo-ribbon a:hover { opacity: 0.9; }
@media (max-width: 600px) { .promo-ribbon { font-size: 0.72rem; } .promo-ribbon a { padding: 8px 12px; } }