/* ---------------------------------------------------------------
   Truhlář z Jihu — vizuální svět „Lesní pás“

   Krémový papír jako základ, hluboká lesní zelená jako plná plocha
   (hero, konfigurátor, patička), mosaz jako jediný teplý akcent.
   Velké fotky střídají velké klidné plochy — odtud ten rytmus.
   Záměrně jednotné světlé téma, vše malováno explicitně.

   Tady zůstal jen návrhový systém — tokeny, základ, rámec, nadočnice,
   tlačítka, odkrývání. Vzhled jednotlivých pruhů si nese každá komponenta
   ve svém .razor.css, takže se styl mění tam, kde se mění i značkování.
   --------------------------------------------------------------- */

:root{
  color-scheme: light;

  /* podklady */
  --paper:    #F4F1E8;   /* krém — hlavní podklad */
  --paper-2:  #FBF9F3;   /* karty, vyvýšené plochy */
  --paper-3:  #E9E4D6;   /* písek — zapuštěné pruhy */
  --paper-4:  #DDD6C3;

  /* lesní plochy */
  --forest:   #2F4136;   /* nejhlubší — patička, hero scrim */
  --forest-2: #3E5245;   /* plné pásy sekcí */
  --forest-3: #4E6455;   /* karty uvnitř zeleného pásu */

  /* text */
  --ink:      #22261F;
  --ink-2:    #58604F;
  --ink-3:    #8A9182;
  --cream:    #F2EFE4;   /* text na zelené */
  --cream-2:  #C8D2C1;   /* vedlejší text na zelené */

  /* akcenty */
  --sage:     #8FA98C;
  --moss:     #B7C9AF;
  --brass:    #C9A96A;   /* mosaz — akcent na zelené */
  --brass-2:  #A8853F;   /* mosaz jako text na krému */
  --draw:     #46584B;   /* barva nákresů na krému */

  /* linky */
  --line:        rgba(34,38,31,.14);
  --line-strong: rgba(34,38,31,.28);
  --line-cream:  rgba(242,239,228,.22);
  --line-cream-2:rgba(242,239,228,.4);

  /* tvar — hrany zůstávají ostré */
  --r: 0px;

  /* typografie */
  --display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body:    "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t--2: .72rem;
  --t--1: .81rem;
  --t-0:  .95rem;
  --t-1:  1.04rem;
  --t-2:  clamp(1.5rem, 1.2rem + 1.3vw, 2.2rem);
  --t-3:  clamp(2.2rem, 1.5rem + 3.1vw, 4rem);
  --t-4:  clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem);
  --t-5:  clamp(2.5rem, 1.3rem + 4.6vw, 5.2rem);

  /* rytmus */
  --gutter: clamp(18px, 5vw, 64px);
  --band:   clamp(76px, 10vw, 160px);
  --wrap:   1340px;
}

*,*::before,*::after{ box-sizing: border-box; }
[hidden]{ display: none !important; }
section[id]{ scroll-margin-top: 78px; }
::selection{ background: rgba(143,169,140,.45); color: var(--ink); }
img{ max-width: 100%; }

@keyframes vzlet{ from{ opacity: 0; transform: translateY(18px); } to{ opacity: 1; transform: none; } }
@keyframes pop{ from{ opacity: .25; transform: scale(.99); } to{ opacity: 1; transform: none; } }

.up{ animation: vzlet .8s cubic-bezier(.2,.75,.3,1) both; animation-delay: var(--d, 0s); }
@media (prefers-reduced-motion: reduce){ .up{ animation: none; } }
@media (prefers-reduced-motion: no-preference){ :root{ scroll-behavior: smooth; } }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-1);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.012em;
  margin: 0;
  text-wrap: balance;
}
p{ margin: 0; }
a{ color: inherit; }

.hl{ font-style: italic; font-weight: 300; color: var(--brass-2); }
.hero__title .hl{ display: block; font-size: .48em; line-height: 1.12; margin-top: .16em; }
.on-forest .hl{ color: var(--brass); }

/* ═══════════════ RÁMEC ═══════════════ */
.wrap{
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.band{ padding-block: var(--band); }
.band--sand{ background: var(--paper-3); }
.band--forest{ background: var(--forest-2); color: var(--cream); }
.band--forest h2,.band--forest h3{ color: var(--cream); }
.rule{ border: 0; border-top: 1px solid var(--line); margin: 0; }

.eyebrow{
  font-size: var(--t--2);
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--brass-2);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::after{
  content: "";
  flex: 1;
  max-width: 64px;
  height: 1px;
  background: currentColor;
  opacity: .45;
}
.eyebrow.is-tight::after{ display: none; }
.band--forest .eyebrow,.on-forest .eyebrow{ color: var(--brass); }

.lead{
  font-size: var(--t-1);
  color: var(--ink-2);
  max-width: 46ch;
  line-height: 1.7;
}
.band--forest .lead{ color: var(--cream-2); }

/* ═══════════════ TLAČÍTKA ═══════════════ */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 15px 28px;
  border: 1px solid transparent;
  font-family: var(--body);
  font-size: var(--t--1);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--r);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn--primary{ background: var(--ink); color: var(--paper); }
.btn--primary:hover{ background: var(--forest-2); }
.btn--ghost{ border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover{ border-color: var(--ink); background: var(--ink); color: var(--paper); }
.btn__arrow{ line-height: 1; transition: transform .22s cubic-bezier(.2,.75,.3,1); }
.btn:hover .btn__arrow{ transform: translateX(6px); }

.on-forest .btn--primary{ background: var(--cream); color: var(--forest); }
.on-forest .btn--primary:hover{ background: var(--brass); color: var(--forest); }
.on-forest .btn--ghost{ border-color: var(--line-cream-2); color: var(--cream); }
.on-forest .btn--ghost:hover{ background: var(--cream); color: var(--forest); border-color: var(--cream); }

/* ═══════════════ ODKRÝVÁNÍ PŘI SCROLLU ═══════════════ */
/* Schovává se jen pod .js, kterou nasazuje skript v hlavičce těla. Bez
   JavaScriptu (webview v aplikaci, starý prohlížeč) je obsah rovnou vidět. */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .85s cubic-bezier(.2,.75,.3,1), transform .85s cubic-bezier(.2,.75,.3,1);
  }
  .js .reveal.is-in{ opacity: 1; transform: none; }
}

/* ═══════════════ BLAZOR ═══════════════ */
/* Hlášky validace z EditForm — vzhled sladěný s formulářem. */
.validation-message{
  font-size: var(--t--1);
  line-height: 1.45;
  color: #A33A2B;
}
.input.invalid,.select.invalid,.textarea.invalid{ border-color: #A33A2B; }
.valid.modified:not([type=checkbox]){ border-color: var(--forest-2); }

.blazor-error-boundary{
  background: #A33A2B;
  color: var(--paper);
  padding: 18px var(--gutter);
  font-size: var(--t-0);
}
.blazor-error-boundary::after{ content: "Něco se pokazilo."; }