/* pages.css — page-specific overrides and section patterns */

/* ══════════════════════════════════════════════
   SERVICE PAGE
══════════════════════════════════════════════ */

.service-tiers {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .service-tiers { flex-direction: row; gap: var(--space-5); }
}

.service-tier {
  flex: 1;
  background: var(--color-surface-2);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
}
.service-tier--popular { border-color: var(--color-accent); }
.service-tier__label {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-heading-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}
.service-tier__price {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--text-price-lg);
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
}
.service-tier__popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: var(--color-btn-primary-text);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.products-spotlight {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 768px) { .products-spotlight { grid-template-columns: 1fr 1fr; } }
.products-spotlight__img { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/3; }
.products-spotlight__img img { width: 100%; height: 100%; object-fit: cover; }

.related-services {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) { .related-services { grid-template-columns: repeat(3, 1fr); } }

.related-service-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-surface-1);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  transition: background 150ms ease-out, border-color 150ms ease-out;
}
.related-service-card:hover { background: var(--color-surface-2); border-color: var(--color-accent); }
.related-service-card__label { font-size: var(--text-body-md); font-weight: 600; color: var(--color-text-primary); }
.related-service-card__arrow { color: var(--color-text-secondary); transition: transform 150ms ease-out, color 150ms ease-out; }
.related-service-card:hover .related-service-card__arrow { color: var(--color-accent); transform: translateX(4px); }

/* ══════════════════════════════════════════════
   COURSE PAGE
══════════════════════════════════════════════ */

.course-highlights {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) { .course-highlights { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .course-highlights { grid-template-columns: repeat(3, 1fr); } }

.course-highlight-card {
  background: var(--color-surface-1);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.course-highlight-card .icon { color: var(--color-accent); flex-shrink: 0; margin-top: 2px; }
.course-highlight-card__title {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-heading-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.course-highlight-card__text { font-size: var(--text-body-sm); color: var(--color-text-secondary); }

.dates-list { display: flex; flex-direction: column; gap: var(--space-3); }
.date-entry {
  background: var(--color-surface-1);
  border: var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.date-entry__date { font-size: var(--text-body-md); font-weight: 600; color: var(--color-text-primary); }
.date-entry__seats { font-size: var(--text-body-sm); color: var(--color-text-secondary); }

/* ══════════════════════════════════════════════
   ACADEMY HUB
══════════════════════════════════════════════ */

.course-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) { .course-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .course-card-grid { grid-template-columns: repeat(3, 1fr); } }

.course-level-badge { padding: 2px 10px; border-radius: var(--radius-full); font-size: var(--text-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.course-level-badge--beginner { background: #1E4040; color: #68C5A0; }
.course-level-badge--intermediate { background: #3D2F0E; color: var(--color-accent); }
.course-level-badge--advanced { background: #2A1A1A; color: #E08888; }
.course-level-badge--all { background: var(--color-surface-2); color: var(--color-text-secondary); }

/* ══════════════════════════════════════════════
   ABOUT
══════════════════════════════════════════════ */

.about-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 1024px) { .about-split { grid-template-columns: 360px 1fr; } }

.about-photo-col { display: flex; justify-content: center; }
.about-photo { width: 100%; max-width: 320px; border-radius: var(--radius-xl); object-fit: cover; aspect-ratio: 3/4; }
@media (min-width: 1024px) { .about-photo { width: 360px; max-width: unset; } }

.credentials-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.credential-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}
.credential-item .icon { color: var(--color-accent); flex-shrink: 0; margin-top: 2px; }

/* ══════════════════════════════════════════════
   PROCESS
══════════════════════════════════════════════ */

.process-stages { display: flex; flex-direction: column; gap: var(--space-7); }
.process-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 768px) { .process-stage { grid-template-columns: 80px 1fr; gap: var(--space-6); } }

.process-stage__number {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--text-display-md);
  font-weight: 800;
  color: var(--color-accent);
  opacity: 0.5;
  line-height: 1;
  text-align: center;
}
.process-stage__content h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-heading-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}
.process-stage__body { color: var(--color-text-secondary); line-height: 1.65; }

/* ══════════════════════════════════════════════
   CONTACT
══════════════════════════════════════════════ */

.contact-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 1024px) { .contact-split { grid-template-columns: 55fr 45fr; } }

.form-panel {
  background: var(--color-surface-1);
  border: var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
}

/* ══════════════════════════════════════════════
   GALLERY
══════════════════════════════════════════════ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(0,0,0,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.lightbox.is-visible { display: flex; }
.lightbox__img { max-width: 90vw; max-height: 85dvh; object-fit: contain; border-radius: var(--radius-lg); }
.lightbox__close {
  position: absolute;
  top: var(--space-5); right: var(--space-5);
  background: var(--color-surface-1);
  border: none;
  cursor: pointer;
  color: var(--color-text-primary);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background 150ms ease-out;
}
.lightbox__close:hover { background: var(--color-surface-2); }

/* ══════════════════════════════════════════════
   GIFT CARDS
══════════════════════════════════════════════ */

.gift-hero {
  background: var(--color-surface-light);
  padding-block: var(--space-9);
  text-align: center;
}

/* ══════════════════════════════════════════════
   COURSE PAGE — additional aliases and new components
══════════════════════════════════════════════ */

/* Course overview panel alias (template uses -panel/-item suffix) */
.course-overview-panel {
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (min-width: 640px) { .course-overview-panel { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .course-overview-panel { grid-template-columns: repeat(6, 1fr); } }

.course-overview-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.course-overview-item i[data-lucide] { width: 18px; height: 18px; color: var(--color-accent); }
.course-overview-label {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.course-overview-value {
  font-size: var(--text-body-md);
  color: var(--color-text-primary);
  font-weight: 500;
}
.course-overview-item--price { grid-column: 1 / -1; }
@media (min-width: 1024px) { .course-overview-item--price { grid-column: auto; } }

/* Curriculum modules — template class aliases */
.curriculum-modules { display: flex; flex-direction: column; gap: var(--space-6); }
.curriculum-module { display: flex; gap: var(--space-5); align-items: flex-start; }
.curriculum-module__number {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--text-display-sm);
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  min-width: 48px;
  flex-shrink: 0;
}
.curriculum-module__content { flex: 1; }
.curriculum-module__title {
  font-size: var(--text-heading-sm);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.curriculum-module__topics {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.curriculum-module__topics li {
  padding-left: var(--space-4);
  position: relative;
  font-size: var(--text-body-sm);
  line-height: 1.6;
}
.curriculum-module__topics li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

/* Audience panel (used in course + academy hub) */
.course-audience-panel { padding: var(--space-6) 0; }
.course-audience-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.course-audience-bullets li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  line-height: 1.55;
}

/* Includes list */
.includes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.includes-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-body-md);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* Pricing block (single tier) */
.pricing-block {
  background: var(--color-surface-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
}
.pricing-block__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.pricing-block__from {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pricing-block__amount {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--text-display-md);
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
}
.pricing-block__note {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}
.pricing-block__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pricing-block__features li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}

/* Date cards (in-person sessions carousel) */
.date-card {
  background: var(--color-surface-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  height: 100%;
}
.date-card--soldout { opacity: 0.5; }
.date-card__month {
  font-size: var(--text-body-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}
.date-card__day {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--text-display-lg);
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-1);
}
.date-card__year {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
.date-card__state {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 9999px;
  margin-bottom: var(--space-3);
}
.date-card__state--available { background: rgba(34,197,94,0.15); color: #22C55E; }
.date-card__state--filling   { background: rgba(245,158,11,0.15); color: #F59E0B; }
.date-card__state--soldout   { background: rgba(239,68,68,0.12);  color: #EF4444; }
.date-card__seats { font-size: var(--text-body-sm); color: var(--color-text-secondary); margin-bottom: var(--space-3); }

/* Related courses/services grid */
.related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (min-width: 640px)  { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }

.related-card {
  background: var(--color-surface-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms ease, transform 200ms ease;
}
.related-card:hover { border-color: rgba(248,179,23,0.4); transform: translateY(-2px); }
.related-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.related-card__img-placeholder {
  aspect-ratio: 16/9;
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}
.related-card__body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.related-card__title {
  font-size: var(--text-heading-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

/* Hub-and-spoke list (used on academy hub for all courses) */
.hub-spoke-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.hub-spoke-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface-1);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  color: inherit;
  transition: background 150ms ease, border-color 150ms ease;
}
.hub-spoke-item:hover { background: var(--color-surface-2); border-color: rgba(248,179,23,0.3); }
@media (max-width: 639px) { .hub-spoke-item { grid-template-columns: 1fr auto; } }
.hub-spoke-item__img {
  display: none;
}
@media (min-width: 640px) {
  .hub-spoke-item__img { display: block; width: 80px; height: 60px; border-radius: var(--radius-md); overflow: hidden; }
  .hub-spoke-item__img img { width: 100%; height: 100%; object-fit: cover; }
}
.hub-spoke-item__title {
  font-size: var(--text-body-md);
  font-weight: 600;
  color: var(--color-text-primary);
}
.hub-spoke-item__desc {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}
.hub-spoke-item__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  flex-shrink: 0;
}
.hub-spoke-item__price {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--text-heading-sm);
  font-weight: 700;
}

/* Two-col layout helper for audience panels */
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) { .two-col { grid-template-columns: 1fr 1fr; } }

/* Legal review notice (imprint / legal pages in dev) */
.legal-review-notice {
  background: #1c1a09;
  border: 1px solid rgba(248,179,23,0.4);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}
.legal-review-notice strong { color: var(--color-accent); }

/* Legal content typography */
.legal-content h2 {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-heading-lg);
  font-weight: 600;
  color: var(--color-text-on-light);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}
.legal-content h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-heading-sm);
  font-weight: 600;
  color: var(--color-text-on-light);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}
.legal-content p { color: var(--color-text-secondary-on-light); line-height: 1.7; margin-bottom: var(--space-4); }
.legal-content ul { color: var(--color-text-secondary-on-light); padding-left: var(--space-5); margin-bottom: var(--space-4); }
.legal-content ul li { margin-bottom: var(--space-2); line-height: 1.6; }
.legal-content a { color: var(--color-accent); }
.legal-content strong { color: var(--color-text-on-light); }

/* Academy hub tabs — scoped contrast fix for light section */
.section--light .tab { color: var(--color-text-on-light); }
.section--light .tab.is-active {
  color: var(--color-text-on-light);
  border-color: var(--color-accent);
}
.section--light .tabs { border-bottom-color: rgba(0,0,0,0.1); }