/* ── JOIN PAGE — STANDALONE STYLES ── */
/* This file is used exclusively by html/join.html.
   It does not depend on css/styles.css.
   All variables, resets, and components are self-contained. */

/* ── VARIABLES ── */
:root {
  --j-bg:              #f6f3ec;   /* warm off-white page background */
  --j-nav-bg:          #cbc3a8;   /* warm tan navbar */
  --j-deep-green:      #4e5b2c;   /* olive green — primary accent */
  --j-text:            #3a3028;   /* warm dark brown — body text */
  --j-muted:           #7a6a58;   /* muted warm brown — secondary text */
  --j-hero-overlay:    rgba(0, 0, 0, 0.52);   /* dark tint over class image */
  --j-card-bg:         #fff;       /* plan card background */
  --j-card-border:     #e0d8cc;   /* subtle warm border */
  --j-card-active-bg:  #4e5b2c;   /* selected plan — dark green fill */
  --j-card-active-text:#fff;       /* selected plan — white text */
  --j-detail-bg:       #f0ece3;   /* plan detail table background */
  --j-wa-green:        #f6f3ec;   /* WhatsApp button green */
  --j-navbar-h:        56px;       /* matches navbar height on index.html and blog.html */
}

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

html { overflow-x: hidden; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--j-bg);
  color: var(--j-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;   /* enables align-self: center on the button child */
}

/* ── NAVBAR ── */
.j-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  height: var(--j-navbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  background: var(--j-nav-bg);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.j-navbar a:has(.j-logo-img) { line-height: 0; }

.j-logo-img {
  height: 56px;   /* matches --j-navbar-h exactly */
  width: auto;
  display: block;
  mix-blend-mode: multiply;   /* white JPEG background blends into sage navbar */
}

.j-back-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: #3b3b2f;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color 0.2s;
}

.j-back-link:hover { color: var(--j-deep-green); }

/* ── CLASS HERO ── */
.j-class-hero {
  position: relative;           /* stacking context for overlay + content */
  width: 100%;
  background-color: #3d2b1f;   /* fallback while image loads */
}

/* Constrained hero image — full image visible, capped at 420px tall */
.j-class-hero-img {
  width: 100%;
  max-height: 420px;            /* cap height — reduces size without cropping */
  object-fit: contain;          /* shrinks to fit within the cap, never crops */
  display: block;
  background-color: #dcd0c8;   /* fills letterbox gaps if image is narrower than viewport */
}

/* Dark overlay on top of the image */
.j-class-hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--j-hero-overlay);
}

/* Text content anchored to bottom of hero */
.j-class-hero-content {
  position: absolute;           /* overlays on top of image + overlay */
  bottom: 0;
  left: 0;                      /* anchored to left edge of section */
  right: auto;
  z-index: 1;
  max-width: 50%;               /* stays in left letterbox zone, ends before image pixels start */
  padding: 0 10px 36px 120px;
}

.j-class-name {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  margin-bottom: 0.5px;
}

.j-class-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.j-class-timings {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.04em;
}

.j-class-fees {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  background: var(--j-deep-green);
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

/* ── PLAN SELECTION ── */
.j-plans-section {
  padding: 56px 2% 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  transition: gap 0.4s ease, justify-content 0s;
}

/* When a plan is selected — left card narrows, right panel slides in */
.j-plans-section.plan-selected {
  justify-content: center;
  gap: 48px;
}

.j-plans-card {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  transition: max-width 0.4s ease;
  flex-shrink: 0;
}

.plan-selected .j-plans-card {
  max-width: 640px;
  align-items: flex-start;   /* left-align contents when in split view */
}

.j-plans-heading {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--j-deep-green);
  text-align: center;
}

/* Plan cards grid — always single row, cards share width equally */
.j-plans-grid {
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;      /* never break to next line */
  width: 100%;
}

.plan-card {
  flex: 1 1 0;      /* equal share of available width — never uses a min-width basis */
  min-width: 0;     /* allows shrinking below content width without wrapping */
  width: 100%;
  max-width: 900px;
  background: var(--j-card-bg);
  border: 2px solid var(--j-card-border);
  border-radius: 25px;
  padding: 52px 48px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan-card:hover {
  border-color: var(--j-deep-green);
  transform: translateY(-3px);
}

.plan-card.active {
  background: var(--j-card-active-bg);
  border-color: var(--j-card-active-bg);
  color: var(--j-card-active-text);
  transform: translateY(-3px);
  flex-grow: 2;               /* active card takes twice the width of inactive cards */
  transition: flex-grow 0.3s ease, border-color 0.2s, background 0.2s, transform 0.15s;
}

.plan-card h3 {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.plan-price {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--j-deep-green);
}

.plan-card.active .plan-price { color: rgba(255, 255, 255, 0.9); }

.plan-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--j-muted);
}

.plan-card.active .plan-desc { color: rgba(255, 255, 255, 0.72); }

/* Plan detail table */
.j-plan-details {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--j-detail-bg);
  border: 1.5px solid var(--j-card-border);
}

.j-plan-details.hidden { display: none; }

.plan-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
}

.plan-table tr:not(:last-child) td {
  border-bottom: 1px solid var(--j-card-border);
}

.plan-table td {
  padding: 12px 20px;
  color: var(--j-text);
  line-height: 1.5;
}

.plan-table td:first-child {
  font-weight: 500;
  color: var(--j-deep-green);
  width: 110px;
  white-space: nowrap;
}

/* WhatsApp booking button — sits outside section in HTML, centred via align-self on flex-column body */
.j-pay-btn {
  display: flex;
  flex-direction: column;   /* icon stacks above text */
  align-items: center;
  align-self: center;       /* centres horizontally inside body flex column */
  margin: 24px 0 48px;
  width: fit-content;
  gap: 1px;
  padding: 5px 5px;
  background: var(--j-wa-green);
  color: #4e5b2c;
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: filter 0.2s;
}

.j-pay-btn:hover { filter: brightness(1.08); }

.j-pay-btn.hidden { display: none; }

.j-pay-btn-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── PLAN DETAIL PANEL (right column) ── */
.j-plan-detail-panel {
  flex: 0 0 0;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.4s ease, opacity 0.35s ease 0.15s;
}

.plan-selected .j-plan-detail-panel {
  flex: 1;
  max-width: 720px;
  overflow: visible;
  opacity: 1;
}

.j-detail-inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 8px 0;
}

.j-detail-plan-name {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--j-deep-green);
}

.j-detail-ideal-for {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--j-muted);
  border-left: 3px solid var(--j-deep-green);
  padding-left: 14px;
}

.j-detail-section-title {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--j-deep-green);
  margin-bottom: 14px;
}

.j-detail-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.j-detail-list li {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--j-text);
  padding-left: 22px;
  position: relative;
}

.j-detail-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--j-deep-green);
  font-weight: 500;
}

.j-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.j-detail-tag {
  background: #eef2e8;
  color: var(--j-deep-green);
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid #c8d4bc;
  white-space: nowrap;
}

/* ── CLASS PICKER ── */
.j-class-picker {
  padding: 64px 48px 72px;
  display: flex;
  justify-content: center;
}

.j-class-picker-inner {
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.j-picker-heading {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--j-deep-green);
  text-align: center;
}

.j-picker-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--j-muted);
  text-align: center;
  margin-bottom: 20px;
}

.j-class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
  width: 100%;
}

.j-picker-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3 / 4;
  background: #dcd0c8;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
  transition: transform 0.2s, box-shadow 0.2s;
}

.j-picker-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.j-picker-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.j-picker-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.10) 55%, transparent 100%);
}

.j-picker-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 18px 18px;
}

.j-picker-card-name {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
  margin-bottom: 4px;
}

.j-picker-card-timings {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.02em;
}

/* ── CAROUSEL (mobile + tablet) ── */
.j-carousel-wrap {
  position: relative;
  width: 100%;
}

/* Dot indicators */
.j-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.j-carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--j-card-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.j-carousel-dot.active {
  background: var(--j-deep-green);
  transform: scale(1.3);
}

/* ── RESPONSIVE ── */

/* iPad Pro (11" = 1024px, 12.9" = 1366px in landscape but 1024px portrait) */
@media (max-width: 1024px) {
  .j-class-picker       { padding: 48px 0 64px; }
  .j-class-picker-inner { gap: 10px; }
  .j-picker-heading     { padding: 0 32px; }
  .j-picker-sub         { padding: 0 32px; }

  .j-class-grid {
    display: flex;
    flex-direction: row;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 32px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 12px 32px 12px;
    width: 100%;
  }
  .j-class-grid::-webkit-scrollbar { display: none; }

  .j-picker-card {
    flex: 0 0 36vw;   /* ~2.5 cards visible on iPad Pro */
    max-width: 340px;
    scroll-snap-align: start;
    aspect-ratio: 3 / 4;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
  }
}

/* iPad Air (820px) and smaller tablets */
@media (max-width: 820px) {
  .j-navbar              { padding: 0 24px; }
  /* Hero: fixed height + overflow:hidden so overlay and plans section stay flush */
  .j-class-hero          { height: 300px; overflow: hidden; }
  .j-class-hero-img      { height: 100%; max-height: none; object-fit: cover; background-color: transparent; }
  .j-class-hero-content  { padding: 0 24px 28px; max-width: 100%; }
  .j-plans-section       { padding: 40px 16px 30px; flex-direction: column; align-items: center; }
  .plan-selected .j-plans-card { max-width: 100%; align-items: center; }
  .plan-selected .j-plan-detail-panel { max-width: 100%; flex: none; width: 100%; }
  .j-class-picker        { padding: 40px 0 56px; }
  .j-class-picker-inner  { gap: 8px; }
  .j-picker-heading      { padding: 0 24px; }
  .j-picker-sub          { padding: 0 24px; }

  .j-class-grid {
    gap: 16px;
    scroll-padding-left: 24px;
    padding: 12px 24px 12px;
  }
  .j-picker-card { flex: 0 0 44vw; max-width: 300px; }  /* ~2 cards visible on iPad Air */
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
  .j-picker-card { flex: 0 0 62vw; max-width: 280px; }  /* ~1.6 cards visible */
}

@media (max-width: 480px) {
  .j-navbar          { padding: 0 16px; }
  .j-logo-main       { font-size: 1.1rem; }
  .j-class-hero      { height: 240px; }
  .j-class-hero-content { padding: 0 16px 20px; }
  .j-class-name      { font-size: 1.5rem; }
  .j-plans-section   { padding: 32px 12px 20px; }
  .plan-card         { flex: 1 1 100%; max-width: 100%; }
  .j-class-picker    { padding: 28px 0 40px; }
  .j-picker-heading  { padding: 0 16px; font-size: 1.3rem; letter-spacing: 0.06em; }
  .j-picker-sub      { padding: 0 16px; font-size: 0.82rem; }

  .j-class-grid {
    gap: 12px;
    padding: 12px 16px 12px;
    scroll-padding-left: 16px;
  }
  .j-picker-card { flex: 0 0 72vw; max-width: none; }
}