/*
Theme Name: LVATE Academy
Theme URI: https://lvate-academy.de
Author: LVATE
Description: Boutique academy theme for LVATE Academy — anatomy-led courses in aesthetic medicine. Bilingual EN/DE, no plugin dependencies.
Version: 1.0.0
Requires PHP: 7.4
License: proprietary
Text Domain: lvate-academy
*/

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: #F8F4EE; color: #1C1410;
  font-family: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: #4E3629; }
a:hover { color: #6D3332; }
::selection { background: #CFB023; color: #1C1410; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button, input, select, textarea { font-family: inherit; }

/* ---------- Layout ---------- */
.wrap { max-width: 1280px; margin: 0 auto; }
.section { padding: clamp(80px, 10vw, 140px) clamp(24px, 5vw, 64px); }
.section--tight { padding: clamp(64px, 8vw, 110px) clamp(24px, 5vw, 64px); }
.section--beige { background: #EBE3D7; }
.section--dark { background: #110C09; }
.section--white { background: #FFFFFF; border-top: 1px solid #E0D6C7; border-bottom: 1px solid #E0D6C7; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 96px); align-items: center; }
.grid-2--start { align-items: start; }

/* ---------- Type ---------- */
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
  color: #6D3332; margin-bottom: 24px;
}
.eyebrow--gold { color: #CFB023; }
.display-xl { font-size: clamp(56px, 7vw, 96px); font-weight: 200; letter-spacing: -0.02em; line-height: 1.04; }
.display-l  { font-size: clamp(48px, 6vw, 88px); font-weight: 200; letter-spacing: -0.02em; line-height: 1.04; }
.display-m  { font-size: clamp(40px, 4vw, 56px); font-weight: 200; letter-spacing: -0.02em; line-height: 1.1; }
.display-s  { font-size: clamp(36px, 4vw, 52px); font-weight: 200; letter-spacing: -0.02em; line-height: 1.12; }
.lede { font-size: 19px; font-weight: 300; line-height: 1.65; color: #5E4B3B; }
.body-l { font-size: 17px; font-weight: 300; line-height: 1.75; color: #5E4B3B; }
.body-m { font-size: 15px; font-weight: 300; line-height: 1.7; color: #82715D; }
.on-dark { color: #F8F4EE; }
.on-dark-soft { color: rgba(248,244,238,0.7); }
.slash { font-weight: 600; color: #6D3332; }
.slash--gold { color: #CFB023; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer; text-align: center;
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 15px 32px; border: 1px solid transparent; transition: background 0.2s ease, border-color 0.2s ease;
}
.btn--dark { color: #F8F4EE; background: #1C1410; border-color: #1C1410; }
.btn--dark:hover { background: #4E3629; border-color: #4E3629; color: #F8F4EE; }
.btn--light { color: #1C1410; background: #F8F4EE; border-color: #F8F4EE; }
.btn--light:hover { background: #EBE3D7; border-color: #EBE3D7; color: #1C1410; }
.btn--outline-light { color: #F8F4EE; background: transparent; border-color: rgba(248,244,238,0.5); }
.btn--outline-light:hover { background: rgba(248,244,238,0.12); color: #F8F4EE; }
.btn--outline-dark { color: #4E3629; background: transparent; border-color: #CDBFAC; }
.btn--outline-dark:hover { border-color: #4E3629; color: #4E3629; }
.btn--oxblood { color: #F8F4EE; background: #6D3332; border-color: #6D3332; }
.btn--oxblood:hover { background: #5A2A29; border-color: #5A2A29; color: #F8F4EE; }
.btn[disabled], .btn--blocked { opacity: 0.4; pointer-events: none; }

.link-underline {
  text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #4E3629; border-bottom: 1px solid #4E3629; padding-bottom: 4px;
}
.link-underline:hover { color: #6D3332; border-color: #6D3332; }

/* ---------- Nav ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(24px, 5vw, 64px);
  background: rgba(248,244,238,0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid #E0D6C7;
}
.site-nav__logo img { height: 18px; }
.site-nav__links { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 36px); }
.site-nav__links a.navlink {
  text-decoration: none; font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
  padding: 4px 0; color: #82715D; border-bottom: 1px solid transparent;
}
.site-nav__links a.navlink:hover { color: #1C1410; }
.site-nav__links a.navlink.is-active { color: #1C1410; border-color: #4E3629; }
.site-nav .btn { padding: 11px 22px; }
.lang-switch { display: flex; align-items: center; gap: 10px; margin-left: 4px; }
.lang-switch a {
  text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; color: #A99A85;
}
.lang-switch a.is-active { color: #6D3332; }
.lang-switch span { color: #A99A85; font-size: 11px; }

.site-nav--dark {
  position: absolute; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent; backdrop-filter: none;
  padding: 24px clamp(24px, 5vw, 64px);
}
.site-nav--dark .site-nav__links a.navlink { color: rgba(248,244,238,0.78); }
.site-nav--dark .site-nav__links a.navlink:hover { color: #F8F4EE; }
.site-nav--dark .site-nav__links a.navlink.is-active { color: #F8F4EE; border-color: #F8F4EE; }
.site-nav--dark .lang-switch a { color: rgba(248,244,238,0.6); }
.site-nav--dark .lang-switch a.is-active { color: #CFB023; }
.site-nav--dark .lang-switch span { color: rgba(248,244,238,0.35); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; background: #110C09; display: flex; align-items: flex-end; overflow: hidden; }
.hero--short { min-height: 82vh; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.88; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,12,9,0.92) 0%, rgba(17,12,9,0.35) 45%, rgba(17,12,9,0.25) 100%); }
.hero__content {
  position: relative; width: 100%; max-width: 1280px; margin: 0 auto;
  padding: 140px clamp(24px, 5vw, 64px) clamp(56px, 8vh, 96px);
  animation: heroFade 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero__content .lede { color: rgba(248,244,238,0.78); max-width: 52ch; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
@keyframes heroFade { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ---------- Slash list ---------- */
.slash-list li { display: flex; align-items: baseline; gap: 20px; padding: 18px 0; border-top: 1px solid #CDBFAC; }
.slash-list .num { font-size: 13px; font-weight: 600; color: #6D3332; }
.slash-list .label { font-size: 20px; font-weight: 300; color: #1C1410; }

/* ---------- Course cards ---------- */
.group-head {
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: #82715D; padding-bottom: 16px; border-bottom: 1px solid #4E3629;
  display: flex; justify-content: space-between;
}
.group-head span:last-child { color: #CDBFAC; }
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 32px 0 64px; }
.card-grid--last { padding-bottom: 0; }
.course-card { text-decoration: none; color: inherit; display: grid; background: #FFFFFF; border: 1px solid #E0D6C7; }
.course-card:hover { border-color: #4E3629; color: inherit; }
.course-card__img { aspect-ratio: 4 / 3; background-color: #EBE3D7; background-size: cover; background-position: center; }
.course-card__body { padding: 22px 22px 24px; display: grid; gap: 10px; }
.course-card__body h3 { font-size: 20px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.25; }
.course-card__body p { font-size: 14px; font-weight: 300; line-height: 1.55; color: #82715D; }
.course-card__meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 14px; border-top: 1px solid #E0D6C7; }
.course-card__meta .price { font-size: 13px; font-weight: 500; color: #6D3332; }
.course-card__meta .dur { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #A99A85; }

/* ---------- Anatomy section ---------- */
.anatomy { position: relative; height: 400vh; background: #110C09; }
.anatomy__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.anatomy__grid {
  max-width: 1280px; margin: 0 auto; width: 100%; padding: 0 clamp(24px, 5vw, 64px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 96px); align-items: center;
}
.anatomy__layer { padding: 26px 0; border-top: 1px solid rgba(248,244,238,0.14); opacity: 0.32; transition: opacity 0.5s ease; }
.anatomy__layer.is-active { opacity: 1; }
.anatomy__layer .head { display: flex; align-items: baseline; gap: 20px; }
.anatomy__layer .name { font-size: clamp(32px, 3vw, 44px); font-weight: 200; letter-spacing: -0.02em; color: #F8F4EE; }
.anatomy__layer .desc {
  margin: 0 0 0 40px; font-size: 15px; font-weight: 300; line-height: 1.65;
  color: rgba(248,244,238,0.65); max-width: 44ch;
  max-height: 0; overflow: hidden; transition: max-height 0.5s ease;
}
.anatomy__layer.is-active .desc { margin-top: 12px; max-height: 200px; }
.anatomy__track { margin-top: 40px; height: 1px; background: rgba(248,244,238,0.14); position: relative; }
.anatomy__progress { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #CFB023; }
.anatomy__figure { position: relative; justify-self: center; width: min(100%, 460px); }
.anatomy__frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.anatomy__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 0.5s ease; }
.anatomy__wash { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; }
.anatomy__wash--fat { background: #EBE3D7; mix-blend-mode: color; }
.anatomy__wash--muscle { background: #6D3332; mix-blend-mode: color; }
.anatomy__wash--bone { background: #EBE3D7; mix-blend-mode: soft-light; }
.anatomy__frame .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,12,9,0.35), transparent 40%); }
.anatomy__caption { position: absolute; left: 24px; bottom: 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: #F8F4EE; }
.anatomy__corner { position: absolute; width: 100px; height: 100px; pointer-events: none; }
.anatomy__corner--tr { top: -14px; right: -14px; border-top: 1px solid #CFB023; border-right: 1px solid #CFB023; }
.anatomy__corner--bl { bottom: -14px; left: -14px; border-bottom: 1px solid #CFB023; border-left: 1px solid #CFB023; }

/* ---------- Rows & bands ---------- */
.name-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 16px 0; border-top: 1px solid #E0D6C7; }
.name-list .name { font-size: 18px; font-weight: 400; white-space: nowrap; }
.name-list .role { font-size: 13px; font-weight: 300; color: #82715D; text-align: right; }

.module-row {
  display: grid; grid-template-columns: 90px 1fr 1.2fr; gap: clamp(24px, 4vw, 64px);
  padding: 32px 0; border-top: 1px solid #E0D6C7; align-items: baseline;
}
.module-row .num { font-size: 14px; font-weight: 600; color: #CFB023; }
.module-row h3 { font-size: 22px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.3; }

.facts-card { background: #FFFFFF; border: 1px solid #E0D6C7; padding: 32px; display: grid; gap: 22px; }
.facts-card .row { display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid #E0D6C7; }
.facts-card .row:first-child { padding-top: 0; border-top: none; }
.facts-card .k { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #A99A85; }
.facts-card .v { font-size: 15px; font-weight: 400; color: #4E3629; }
.facts-card .price { font-size: 32px; font-weight: 200; letter-spacing: -0.01em; color: #1C1410; }

/* ---------- Faculty ---------- */
.faculty-row {
  display: grid; grid-template-columns: 380px 1fr; gap: clamp(40px, 5vw, 88px);
  align-items: start; border-top: 1px solid #E0D6C7; padding-top: clamp(40px, 4vw, 56px);
}
.faculty-row__photo { width: 100%; aspect-ratio: 3 / 4; background: #EBE3D7 center/cover no-repeat; display: grid; place-content: center; }
.faculty-row__photo span { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #A99A85; padding: 16px; text-align: center; }
.faculty-row h2 { font-size: clamp(28px, 2.8vw, 38px); font-weight: 300; letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 8px; }
.faculty-row .role { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #6D3332; margin-bottom: 24px; }
.faculty-row .bio { font-size: 16px; font-weight: 300; line-height: 1.8; color: #5E4B3B; max-width: 66ch; }

/* ---------- Contact / info rows ---------- */
.info-row { display: flex; gap: 24px; align-items: baseline; border-top: 1px solid #CDBFAC; padding-top: 16px; }
.info-row .k { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #A99A85; width: 110px; flex-shrink: 0; }
.info-row .v, .info-row a { font-size: 17px; font-weight: 300; color: #1C1410; text-decoration: none; white-space: pre-line; }
.info-row a:hover { color: #6D3332; }

.dark-card { background: #110C09; padding: clamp(36px, 4vw, 56px); display: grid; gap: 24px; align-content: start; }
.dark-card .info-row { border-top-color: rgba(248,244,238,0.15); }
.dark-card .info-row .k { color: #CFB023; }
.dark-card .info-row .v { font-size: 14px; color: rgba(248,244,238,0.75); line-height: 1.6; }

/* ---------- Booking ---------- */
.booking-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 320px 1fr; gap: clamp(48px, 6vw, 96px); align-items: start; }
.booking-side { position: sticky; top: 110px; display: grid; gap: 36px; }
.step-list .step { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid #E0D6C7; opacity: 0.45; }
.step-list .step.is-current { opacity: 1; }
.step-list .step.is-current .label { font-weight: 500; }
.step-list .num { font-size: 12px; font-weight: 600; color: #A99A85; }
.step-list .step.is-done .num { color: #6D3332; }
.step-list .label { font-size: 16px; font-weight: 300; }
.step-list .check { margin-left: auto; font-size: 12px; color: #6D3332; visibility: hidden; }
.step-list .step.is-done .check { visibility: visible; }
.summary-card { background: #EBE3D7; padding: 24px; display: grid; gap: 8px; }
.summary-card .k { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #82715D; }
.summary-card .course { font-size: 18px; font-weight: 400; }
.summary-card .date { font-size: 14px; font-weight: 300; color: #5E4B3B; }
.summary-card .price { font-size: 16px; font-weight: 500; color: #6D3332; margin-top: 4px; }

.panel { display: none; }
.panel.is-active { display: block; }
.panel h2 { font-size: 28px; font-weight: 300; letter-spacing: -0.01em; margin-bottom: 32px; }
.panel__nav { display: flex; justify-content: space-between; margin-top: 36px; }
.panel__nav--end { justify-content: flex-end; }

.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pick-card { text-align: left; cursor: pointer; background: #FFFFFF; border: 1px solid #E0D6C7; padding: 22px; display: grid; gap: 8px; }
.pick-card:hover { border-color: #4E3629; }
.pick-card.is-selected { background: #EBE3D7; border-color: #4E3629; }
.pick-card .level { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #A99A85; }
.pick-card .title { font-size: 18px; font-weight: 400; }
.pick-card .meta { display: flex; justify-content: space-between; font-size: 13px; }
.pick-card .meta .price { font-weight: 500; color: #6D3332; }
.pick-card .meta .dur { color: #A99A85; }

.date-card { width: 100%; text-align: left; cursor: pointer; background: #FFFFFF; border: 1px solid #E0D6C7; padding: 24px 28px; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.date-card:hover { border-color: #4E3629; }
.date-card.is-selected { background: #EBE3D7; border-color: #4E3629; }
.date-card .date { font-size: 19px; font-weight: 400; display: block; }
.date-card .note { font-size: 13px; font-weight: 300; color: #82715D; }
.date-card .seats { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #A99A85; }
.date-card .seats.low { color: #6D3332; }
.date-stack { display: grid; gap: 16px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field .k { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #82715D; }
.field input, .field select, .field textarea {
  border: 1px solid #CDBFAC; background: #FFFFFF; padding: 14px 16px;
  font-size: 15px; color: #1C1410; outline: none; border-radius: 0;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: #4E3629; }
.field textarea { resize: vertical; }
.terms { grid-column: 1 / -1; display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
.terms input { margin-top: 3px; accent-color: #4E3629; width: 16px; height: 16px; }
.terms span { font-size: 13px; font-weight: 300; line-height: 1.6; color: #5E4B3B; }

.review-card { background: #FFFFFF; border: 1px solid #E0D6C7; padding: clamp(28px, 3vw, 44px); }
.review-card .row { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid #F1EBE1; }
.review-card .k { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #A99A85; padding-top: 3px; }
.review-card .v { font-size: 16px; font-weight: 300; }
.review-card .total { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 20px 0 4px; border-bottom: none; }
.review-card .total .v { font-size: 28px; font-weight: 200; }
.review-note { margin-top: 20px; font-size: 13px; font-weight: 300; line-height: 1.6; color: #82715D; }

.confirm-box { text-align: center; padding: clamp(40px, 6vw, 80px) 0; }
.confirm-box .tick { width: 72px; height: 72px; border: 1px solid #6D3332; border-radius: 50%; display: grid; place-content: center; margin: 0 auto 32px; font-size: 26px; color: #6D3332; }
.confirm-box .ref { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #A99A85; margin: 28px 0 40px; }

/* ---------- Footer ---------- */
.site-footer { background: #110C09; color: #CDBFAC; padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 64px) 40px; }
.site-footer__grid { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 56px; justify-content: space-between; align-items: flex-start; }
.site-footer__brand { max-width: 320px; display: grid; gap: 20px; }
.site-footer__brand img { height: 22px; }
.site-footer__brand p { font-size: 22px; font-weight: 200; line-height: 1.4; letter-spacing: -0.01em; color: #F8F4EE; }
.site-footer__cols { display: flex; gap: clamp(40px, 6vw, 88px); flex-wrap: wrap; }
.site-footer__cols h4 { margin: 0 0 18px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #CFB023; }
.site-footer__cols ul { display: grid; gap: 10px; }
.site-footer__cols a, .site-footer__cols p { color: #CDBFAC; text-decoration: none; font-size: 14px; font-weight: 300; line-height: 1.7; white-space: pre-line; }
.site-footer__cols a:hover { color: #F8F4EE; }
.site-footer__legal {
  max-width: 1280px; margin: 64px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #82715D;
}

/* ---------- Misc bands ---------- */
.quote-band { text-align: center; }
.quote-band blockquote { margin: 0 0 28px; font-size: clamp(30px, 3.2vw, 44px); font-weight: 200; letter-spacing: -0.02em; line-height: 1.3; }
.quote-band cite { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #6D3332; }
.cta-band { text-align: center; }
.prevnext { display: grid; grid-template-columns: 1fr 1fr; max-width: 1280px; margin: 0 auto; }
.prevnext a { text-decoration: none; padding: 36px 24px; display: grid; gap: 8px; color: inherit; }
.prevnext a:hover { background: #F1EBE1; }
.prevnext a:first-child { border-right: 1px solid #E0D6C7; padding-left: 0; }
.prevnext a:last-child { text-align: right; padding-right: 0; }
.prevnext .k { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #A99A85; }
.prevnext .t { font-size: 20px; font-weight: 300; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .grid-2, .anatomy__grid, .booking-grid, .faculty-row { grid-template-columns: 1fr; }
  .card-grid, .pick-grid, .form-grid { grid-template-columns: 1fr 1fr; }
  .module-row { grid-template-columns: 48px 1fr; }
  .module-row p { grid-column: 2; }
  .booking-side { position: static; }
  .site-nav__links a.navlink { display: none; }
}
@media (max-width: 639px) {
  .card-grid, .pick-grid, .form-grid { grid-template-columns: 1fr; }
  .anatomy { height: 300vh; }
}