/* FeetCalm Academy — shared deck stylesheet
 * Palette: cream / olive / peach (PROJECT.md)
 * Layouts: .layout-cover, .layout-content, .layout-split
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  --bg:        #fcf0e6;
  --bg-alt:    #f7eee0;
  --text:      #322820;
  --muted:     #7e6e5e;
  --accent:    #d4815c;
  --secondary: #7a8456;
  --danger:    #c4715a;
  --border:    rgba(50,40,32,.10);
}

html, body {
  margin: 0; padding: 0;
  background: #000;
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
}

deck-stage section {
  background: var(--bg);
  color: var(--text);
  position: relative;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

/* ───── Background image + cream/peach/olive overlay ───── */
.bg-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  z-index: 0;
}
.bg-img::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(252,240,230,.92) 0%, rgba(252,240,230,.55) 45%, rgba(122,132,86,.35) 100%),
    linear-gradient(0deg, rgba(212,129,92,.16), rgba(212,129,92,.16));
}
.bg-img.right-fade::after {
  background:
    linear-gradient(90deg, rgba(252,240,230,.96) 0%, rgba(252,240,230,.78) 38%, rgba(252,240,230,.30) 70%, rgba(252,240,230,.10) 100%),
    linear-gradient(180deg, rgba(252,240,230,.40) 0%, rgba(212,129,92,.20) 100%);
}
.bg-img.left-fade::after {
  background:
    linear-gradient(270deg, rgba(252,240,230,.96) 0%, rgba(252,240,230,.78) 38%, rgba(252,240,230,.30) 70%, rgba(252,240,230,.10) 100%),
    linear-gradient(180deg, rgba(252,240,230,.40) 0%, rgba(122,132,86,.20) 100%);
}

/* ───── Slide frame ───── */
.frame {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  box-sizing: border-box;
  padding: 110px 100px;
  display: flex; flex-direction: column;
}

/* ───── Top-left — slide number + section name ───── */
.tl {
  position: absolute; top: 38px; left: 80px; z-index: 5;
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 600;
  color: var(--muted);
}

/* ───── Top-right — block name + LOGO with cream backplate ───── */
.tr {
  position: absolute; top: 24px; right: 80px; z-index: 5;
  display: flex; align-items: center; gap: 18px;
}
.tr .brand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; line-height: 1.4;
  letter-spacing: .18em; text-transform: uppercase;
  text-align: right; color: var(--muted);
}
.tr .brand strong { color: var(--text); font-weight: 600; }
.tr .logo-wrap {
  background: rgba(252,240,230,.92);
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid rgba(50,40,32,.06);
  box-shadow: 0 8px 22px -10px rgba(50,40,32,.25);
}
.tr .logo {
  height: 56px; width: auto; display: block;
}

/* ───── Bottom-center — page indicator (deck-stage adds its own; this is fallback) ───── */
.bc {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  z-index: 5;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 14px;
}

/* ───── Typography ───── */
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; letter-spacing: .20em;
  text-transform: uppercase; font-weight: 600;
  color: var(--accent);
  margin-bottom: 24px;
}

h1.title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 96px; line-height: 1.02;
  letter-spacing: -.025em;
  margin: 0;
  color: var(--text);
  text-wrap: balance;
}
h1.title em { font-style: normal; color: #4a5232; }
h1.title .accent { color: var(--accent); }
h1.title.mid   { font-size: 80px; }
h1.title.small { font-size: 64px; }

.subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 30px; line-height: 1.4;
  color: var(--muted);
  max-width: 1300px;
  text-wrap: balance;
}
.subtitle.lg { font-size: 36px; color: var(--text); }

/* ───── Layout 1: Cover (titulka prezentace) ───── */
.layout-cover .frame { justify-content: flex-end; padding-bottom: 160px; }
.layout-cover h1.title { font-size: 128px; line-height: .98; max-width: 78%; }
.layout-cover .subtitle { font-size: 32px; margin-top: 24px; max-width: 60%; }

/* Cover overlay — same shape as default, olive corner moderately darkened for logo contrast */
.layout-cover .bg-img::after {
  background:
    linear-gradient(135deg, rgba(252,240,230,.94) 0%, rgba(252,240,230,.50) 42%, rgba(56,66,38,.82) 100%),
    linear-gradient(0deg, rgba(212,129,92,.14), rgba(212,129,92,.14));
}


/* Cover brand block: logo top-right + block/title below (transparent, cream text on dark olive) */
.layout-cover .tr { display: none; }
.cover-brand {
  position: absolute; top: 32px; right: 32px;
  z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.cover-brand .logo {
  display: block;
  width: 192px; height: 96px;
  background-color: #4a5232;
  -webkit-mask: url(../../img/pluspronohy-olive-final.png) center/contain no-repeat;
          mask: url(../../img/pluspronohy-olive-final.png) center/contain no-repeat;
}
.cover-brand .brand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; line-height: 1.4;
  letter-spacing: .20em; text-transform: uppercase;
  text-align: center; color: var(--muted);
}
.cover-brand .brand strong { color: var(--text); font-weight: 600; }
/* Cover sits over a dark olive corner — invert brand text to cream there */
.layout-cover .cover-brand .brand { color: rgba(252,240,230,.78); }
.layout-cover .cover-brand .brand strong { color: var(--bg); }

/* ───── Layout 2: Content (text + 3 karty + olive note) ───── */
.layout-content .frame { justify-content: center; }
.layout-content h1.title { font-size: 72px; max-width: 90%; }
.layout-content .subtitle { margin-top: 18px; }

.cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-top: 48px; max-width: 92%;
}
.card {
  padding: 28px 32px; border-radius: 16px;
  border: 1px solid rgba(212,129,92,.25);
  background: rgba(254,247,239,.86);
  backdrop-filter: blur(6px);
}
.card .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 600;
  color: var(--accent); margin-bottom: 12px;
}
.card .ttl {
  font-size: 26px; font-weight: 600; line-height: 1.25;
  color: var(--text); margin-bottom: 8px;
}
.card .desc {
  font-size: 17px; line-height: 1.5; color: var(--muted);
}
.card .desc strong { color: var(--text); font-weight: 600; }

.note {
  margin-top: 32px; padding: 18px 26px;
  border-radius: 12px; max-width: 92%;
  background: rgba(122,132,86,.16);
  border-left: 4px solid var(--secondary);
  color: var(--text);
  font-size: 18px; line-height: 1.5;
}

/* ───── Layout 3: Split (text vlevo, obrázek vpravo) ───── */
.layout-split deck-stage section,
.layout-split.section,
section.layout-split {
  display: grid; grid-template-columns: 1fr 1fr;
}
section.layout-split .frame {
  padding: 110px 90px; justify-content: center;
}
section.layout-split .right-pane {
  position: relative; overflow: hidden; min-height: 100%;
}
section.layout-split .right-pane .bg-img::after {
  background: linear-gradient(135deg, rgba(212,129,92,.32) 0%, rgba(122,132,86,.22) 100%);
}
section.layout-split h1.title { font-size: 72px; max-width: 100%; }
section.layout-split .subtitle { font-size: 22px; max-width: 100%; }
section.layout-split .meta-line {
  margin-top: 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600;
  color: var(--secondary);
}

/* ───── Layout 4: Trends (13. slide — "Věděli jste, že...") ───── */
section.layout-trends {
  background: linear-gradient(135deg, var(--bg-alt) 0%, var(--bg) 60%, var(--bg-alt) 100%);
}
.layout-trends .frame {
  justify-content: center;
  padding: 110px 100px 160px;
}
.layout-trends .trends-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; letter-spacing: .24em;
  text-transform: uppercase; font-weight: 700;
  color: var(--accent);
  margin-bottom: 36px;
}
.layout-trends .trends-title {
  font-family: 'Inter', sans-serif;
  font-size: 80px; line-height: 1.06;
  font-weight: 600;
  letter-spacing: -.020em;
  margin: 0;
  max-width: 88%;
  text-wrap: balance;
}
.layout-trends .trends-prefix {
  color: var(--muted);
  font-weight: 500;
  display: block;
  margin-bottom: 12px;
}
.layout-trends .trends-title em {
  font-style: normal;
  font-weight: 700;
  color: #4a5232;
}
.layout-trends .trends-source {
  margin-top: 48px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ───── Language switcher (bottom-right) — flag + code, transparent ───── */
.lang-toggle {
  position: absolute; bottom: 32px; right: 36px; z-index: 6;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .14em; font-weight: 600;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  color: #ffffff;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  transition: transform 120ms, opacity 120ms;
}
.lang-toggle:hover {
  transform: translateY(-1px);
  opacity: .82;
}
.lang-flag {
  width: 28px; height: 21px; display: block;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(50,40,32,.18), 0 2px 6px -2px rgba(50,40,32,.25);
  object-fit: cover;
}
.lang-toggle-code {
  font-size: 14px; font-weight: 700; letter-spacing: .14em;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(50,40,32,.55);
}
.lang-dd {
  position: absolute; bottom: 80px; right: 60px; z-index: 7;
  display: none;
  background: rgba(252,240,230,.98);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 16px 36px -10px rgba(50,40,32,.3);
  min-width: 360px;
}
.lang-dd.open { display: block; }
.lang-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.lang-b {
  appearance: none; border: 0; background: transparent;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: background 120ms, color 120ms;
}
.lang-b-flag {
  width: 22px; height: 16px; display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(50,40,32,.10);
  object-fit: cover;
  flex-shrink: 0;
}
.lang-b-code { letter-spacing: .12em; }
.lang-b:hover { color: var(--text); background: rgba(50,40,32,.06); }
.lang-b.active { background: rgba(122,132,86,.18); color: var(--text); }