/* Refined Physiques - coaching funnel
   Palette and type lifted from the existing Refined Physiques sites so this
   matches shift-worker-guides and karel-21-day-demo exactly. */

:root {
  --bg: #0d0d0d;
  --bg-deep: #080808;
  --surface: #1a1a1a;
  --surface-2: #242424;
  --border: #2e2e2e;
  --border-soft: #232323;
  --text: #f5f1ea;
  --text-muted: #a39a8e;
  --text-dim: #7d766c;
  --accent: #b14a4a;
  --accent-hover: #c95757;
  --accent-soft: rgba(177, 74, 74, 0.12);
  --accent-line: rgba(177, 74, 74, 0.32);
  --max: 1120px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  --shadow-lift: 0 18px 50px rgba(0, 0, 0, 0.55);
}

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

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.14;
  color: var(--text);
}

h1 { font-size: clamp(2.3rem, 5.4vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.18rem; letter-spacing: -0.005em; }

a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* HEADER + LANGUAGE SWITCH
   The language switch is the one thing that must be visible on every page.
   The live shift-worker-guides site shipped without it - do not repeat that. */
.site-header {
  border-bottom: 1px solid var(--border);
  background: rgba(13, 13, 13, 0.9);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.site-logo { display: flex; align-items: center; gap: 10px; }
.site-logo img { height: 30px; width: auto; display: block; }
.site-logo .brand {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

.lang-toggle {
  display: flex;
  gap: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.lang-toggle a,
.lang-toggle span {
  padding: 5px 13px;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-align: center;
  transition: color 0.15s, border-color 0.15s;
}
.lang-toggle a:hover { color: var(--text); border-color: var(--accent); }
.lang-toggle .active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* DRAFT BANNER (Czech pages only, until Karel signs the Czech off) */
.draft-note {
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.8rem;
  text-align: center;
  padding: 8px 24px;
}

/* HERO - copy left, Karel right */
.hero {
  padding: 80px 0 72px;
  background:
    radial-gradient(60% 90% at 78% 20%, rgba(177, 74, 74, 0.13), transparent 68%),
    linear-gradient(180deg, var(--bg-deep), var(--bg));
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: start;
}
.hero-copy { padding-top: 8px; }

/* The three things worth knowing before the form. Not a sales section. */
.trust-list { list-style: none; display: grid; gap: 12px; }
.trust-list li {
  position: relative;
  padding-left: 26px;
  color: var(--text-muted);
  font-size: 0.98rem;
}
.trust-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 1px;
  background: var(--accent);
}
.kicker {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.hero h1 { max-width: 16ch; margin-bottom: 22px; }
.hero .lead {
  font-size: 1.14rem;
  color: var(--text-muted);
  max-width: 46ch;
  margin-bottom: 30px;
}

.hero-short { padding: 70px 0 56px; text-align: center; }
.hero-short h1 { margin-left: auto; margin-right: auto; }
.hero-short .lead { margin-left: auto; margin-right: auto; }

.btn-accent {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 16px 38px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 1rem;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.btn-accent:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(177, 74, 74, 0.28);
}

/* STAT STRIP */
.stat-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-deep);
  padding: 30px 0;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-value {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  line-height: 1.1;
  color: var(--accent);
}
.stat-label {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 10px;
}

/* SECTIONS */
section { padding: 68px 0; border-top: 1px solid var(--border-soft); }
section h2 { margin-bottom: 16px; }
section .section-lead {
  color: var(--text-muted);
  margin-bottom: 34px;
  max-width: 60ch;
  font-size: 1.02rem;
}
.section-results { border-top: none; background: var(--bg-deep); }

/* RESULTS WALL - the engine of the page */
/* Count-agnostic on purpose. Karel keeps adding clients, so the grid fills
   itself rather than needing a column count changed every time. */
.result-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* Client results. Square because every photo is a before/after pair side by
   side, and any portrait crop would slice into both people. */
.result-img {
  display: block;
  width: 100%;
  /* height:auto is load-bearing. The img carries width/height attributes so the
     browser can reserve space, and without this the 1200 height attribute wins
     and aspect-ratio is ignored - every photo renders as a tall thin strip. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
}
.result figcaption {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 10px;
}

/* Problem list - one idea per line, deliberately plain */
.problem-list { list-style: none; display: grid; gap: 18px; }
.problem-list li {
  font-size: 1.1rem;
  padding-left: 22px;
  border-left: 2px solid var(--accent);
  color: var(--text);
}

/* Steps */
.steps { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 16px;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--text-muted); }

/* Proof */
.proof-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.proof {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.proof blockquote {
  color: var(--text);
  font-size: 0.99rem;
  margin-bottom: 22px;
  flex: 1;
}
.proof-who { display: flex; align-items: center; gap: 14px; }
/* Client headshot. Same height:auto trap as .result-img above - the img carries
   width/height attributes, and without this the 256 height attribute wins over
   aspect-ratio and every avatar renders as a tall thin strip. */
.proof-avatar {
  width: 54px;
  height: auto;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}
.proof-who > div { min-width: 0; flex: 1; }
.proof .proof-name { font-weight: 600; }
.proof .proof-job { color: var(--text-muted); font-size: 0.86rem; }
.proof .proof-duration { color: var(--accent); font-size: 0.86rem; margin-top: 2px; }

/* Application form. It lives in the hero, so it has to hold its own. */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-lift);
}
.form-card h2 { font-size: 1.6rem; margin-bottom: 6px; }
.form-lead { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 24px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 0.9rem; margin-bottom: 8px; }
.field input,
.field textarea,
.field select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
}
.field textarea { min-height: 92px; resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus { outline: none; border-color: var(--accent); }
.form-card .btn-accent { width: 100%; }
/* Name/email/phone pair up two to a row, everything else runs full width. */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.field-grid .field { grid-column: 1 / -1; }
.field-grid .field-half { grid-column: auto; }
@media (max-width: 480px) {
  .field-grid .field-half { grid-column: 1 / -1; }
}

/* STICKY MOBILE CTA - the page is long now, the ask has to travel with it */
.sticky-cta { display: none; }

/* Embeds */
.embed-slot {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
}
.calendar-embed { min-height: 680px; }
.video-embed { aspect-ratio: 16 / 9; }

/* A FILLED embed. It drops `embed-slot`, so the dashed border and the flex
   centring are already gone - all that is left is making the widget fill the
   box it was given. The booking widget sizes its own height, the video does
   not, so only the video needs the 100%. */
.video-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius);
}

/* THE SLOTS. Every gap only Karel can close.
   Obviously empty and always labelled, but quiet enough that the design can
   still be judged with eighteen of them on the page. Picture-shaped slots sit
   back in neutral grey; small text slots keep the accent so they read as a
   line waiting for a word. */
.slot {
  display: block;
  border: 1px dashed var(--accent-line);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 12px;
  background: var(--accent-soft);
}
.slot-img {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 1 / 1;
  padding: 20px;
  border: 1px dashed var(--border);
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 11px,
      rgba(255, 255, 255, 0.016) 11px 22px
    ),
    var(--surface);
  color: var(--text-dim);
  font-size: 0.68rem;
  line-height: 1.5;
}
.slot-avatar {
  aspect-ratio: 1 / 1;
  width: 54px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 0.54rem;
  letter-spacing: 0.02em;
  padding: 6px;
}
.slot-stat {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  text-transform: none;
  letter-spacing: 0.02em;
  padding: 14px 12px;
}
.proof-who .slot { margin: 0; }
.proof-who > div .slot { margin-top: 6px; font-size: 0.64rem; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 44px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.86rem;
}
.site-footer .tagline {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  color: var(--text);
  margin-bottom: 6px;
}

/* ---- RESPONSIVE ---- */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-media { max-width: 380px; }
  .result-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .hero { padding: 52px 0 48px; }
  .hero .lead { font-size: 1.05rem; }
  .hero-media { max-width: none; }
  section { padding: 48px 0; }
  .site-header .wrap { padding-top: 12px; padding-bottom: 12px; }
  .site-logo .brand { display: none; }
  .stat-grid { grid-template-columns: 1fr; gap: 18px; }
  .result-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .form-card { padding: 22px; }

  /* Push content clear of the sticky bar */
  body { padding-bottom: 76px; }
  .sticky-cta {
    display: block;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 30;
    background: var(--accent);
    color: #fff;
    text-align: center;
    font-weight: 600;
    padding: 15px 20px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lift);
  }
}

@media (max-width: 380px) {
  .result-grid { grid-template-columns: 1fr; }
}