/* Styly stranky: homepage. Generovano z build/page.tpl.html — needituj rucne. */

@font-face{font-family:'Gloria Hallelujah';font-style:normal;font-weight:400;font-display:swap;
    src:url(../fonts/gloria-ext.woff2) format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
  @font-face{font-family:'Gloria Hallelujah';font-style:normal;font-weight:400;font-display:swap;
    src:url(../fonts/gloria-lat.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ==========================================================================
   TOKENY — hodnoty vytazene primo z Figmy (Desktop 1440x900 + Frame 1)
   ========================================================================== */
:root{
  --yellow:#F5B301;
  --water:#57B0E6;
  --ink:#060606;          /* text na zlute + pilulka v hlavicce (z Figmy) */
  --dark:#171208;         /* "Cerna" z palety - pozadi sekci Podpora / Archiv */
  --black:#000;           /* pozadi hero (z Figmy) */
  --white:#fff;
  --gold:#E0921E;         /* zlata / seno */
  --green:#4E8A4E;        /* stromky, priroda */
  --brown:#7B5230;        /* farma, drevo */
  --paper:#EBE1CB;        /* mapovy papir */
  --f-head:'Cabin',system-ui,'Segoe UI',sans-serif;
  --f-body:'Merriweather',Georgia,'Times New Roman',serif;
  --f-hand:'Gloria Hallelujah',ui-rounded,cursive;
  --wrap:1273.5px;        /* 1440 - 2x 83.25 (okraj z Figmy) */
  --gut:83.25px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* JEDNO pozadi pro celou stranku. Sekce uz vlastni podklad nemaji -
   jen na nej pokladaji mlhoviny (.glow). Zadne prechody se nelepi. */
body{margin:0;background:var(--black);color:var(--white);overflow-x:hidden;
  font-family:var(--f-body);-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--f-head);font-weight:700;margin:0;}
[hidden]{display:none !important;}

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

/* ---------- tlacitka ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:100px;
  font-family:var(--f-head);font-weight:700;letter-spacing:.055em;text-transform:uppercase;
  cursor:pointer;border:0;transition:transform .16s cubic-bezier(.2,.7,.2,1),box-shadow .2s,filter .2s;}
.btn:hover{transform:translateY(-2px) scale(1.03);}
.btn--y{background:var(--yellow);color:var(--ink);}
.btn--y:hover{box-shadow:0 10px 30px rgba(245,179,1,.34);}
.btn--ink{background:var(--ink);color:var(--yellow);}
.btn--ink:hover{box-shadow:0 10px 26px rgba(0,0,0,.45);}

/* ==========================================================================
   LOADER — naskoci jen kdyz se stranka opravdu nestiha (>250 ms).
   Zadne umele cekani: mizi presne ve chvili, kdy jsou fonty a fotky hotove.
   Vynutit pro ukazku: ?loader=1
   ========================================================================== */
#load{position:fixed;inset:0;z-index:200;display:none;place-items:center;background:var(--black);
  transition:opacity .65s cubic-bezier(.4,0,.2,1);}
#load.jede{display:grid;}
#load.pryc{opacity:0;pointer-events:none;}
#load .in{display:flex;flex-direction:column;align-items:center;gap:18px;width:min(280px,74vw);}
#load .vcela{position:relative;width:82px;height:auto;animation:letim 1.5s ease-in-out infinite;}
#load .vcela svg{width:100%;height:100%;}
#load .vcela img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5));}
@keyframes letim{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-11px) rotate(4deg);}}
#load .stopa{position:absolute;top:52%;right:100%;margin-right:9px;display:flex;gap:5px;}
#load .stopa i{width:4px;height:4px;border-radius:50%;background:var(--yellow);opacity:.25;
  animation:stopa 1.5s ease-in-out infinite;}
#load .stopa i:nth-child(2){animation-delay:.12s;} #load .stopa i:nth-child(3){animation-delay:.24s;}
@keyframes stopa{0%,100%{opacity:.12;transform:translateX(0);}50%{opacity:.7;transform:translateX(-5px);}}
#load .hlaska{font-family:var(--f-hand);font-size:19px;color:var(--yellow);min-height:24px;
  transition:opacity .3s;}
#load .lista{width:100%;height:4px;border-radius:100px;background:rgba(255,255,255,.1);overflow:hidden;}
#load .lista i{display:block;height:100%;width:0;background:var(--yellow);border-radius:100px;
  transition:width .35s cubic-bezier(.2,.7,.2,1);}

/* ==========================================================================
   UVODNI ANIMACE — spusti se az po odchodu loaderu (trida .nacteno)
   ========================================================================== */
.js .hero__art,.js .canvas>.t,.js .hero__meta,.js .hero__bar i{animation-play-state:paused;}
.nacteno .hero__art,.nacteno .canvas>.t,.nacteno .hero__meta,.nacteno .hero__bar i{animation-play-state:running;}
.hero__art{animation:artIn 1.53s cubic-bezier(.2,.7,.2,1) both;}
@keyframes artIn{from{opacity:0;transform:scale(1.05);}to{opacity:1;transform:none;}}

/* kotvy nesmi zaskocit pod pevnou hlavicku */
section,footer{scroll-margin-top:82px;}

/* odhaleni po jednom misto celeho bloku naraz */
.rv.rv--stag{opacity:1;transform:none;}   /* kontejner staticky, animuji az deti */
.rv--stag.in>*{animation:rise .77s cubic-bezier(.2,.7,.2,1) both;}
.rv--stag.in>*:nth-child(1){animation-delay:.05s;}
.rv--stag.in>*:nth-child(2){animation-delay:.14s;}
.rv--stag.in>*:nth-child(3){animation-delay:.24s;}
.rv--stag.in>*:nth-child(4){animation-delay:.33s;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  #load .vcela,#load .stopa i{animation:none;}
  /* nic se nesmi schovavat za animaci, kterou uzivatel nechce */
  .hero__art,.canvas>.t,.hero__meta,.hero__bar i,.rv--stag.in>*,.hero__scroll{
    animation:none !important;opacity:1 !important;transform:none !important;}
}

/* ==========================================================================
   HLAVICKA — Figma: pruh 1440x75 #F5B301, pilulka 168x43.5 @1197.75,18.75
   ========================================================================== */
header.top{position:fixed;top:0;left:0;right:0;z-index:60;height:66px;background:var(--yellow);
  transition:transform .32s cubic-bezier(.4,0,.2,1);}
header.top.hide{transform:translateY(-100%);}
.top__in{max-width:1440px;margin:0 auto;padding:0 74.25px 0 83.25px;height:66px;
  display:flex;align-items:center;gap:18px;}
@media(max-width:1240px){.top__in{padding:0 24px;}}
.logo{display:flex;align-items:center;gap:9px;transition:transform .16s;}
.logo:hover{transform:scale(1.04);}
.logo__mark{height:41px;width:auto;flex:none;display:block;}   /* maskot v raftu (landscape) */
.logo__name{font-family:var(--f-head);font-weight:700;font-size:11.5px;line-height:.98;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);}
nav.main{margin-left:auto;display:flex;align-items:center;gap:34px;}
nav.main a{font-family:var(--f-head);font-weight:700;font-size:13.5px;letter-spacing:.01em;
  text-transform:uppercase;color:var(--ink);transition:transform .16s,opacity .16s;}
nav.main a:hover{transform:scale(1.07);opacity:.72;}
/* pozor: 'nav.main a' prebiji .btn--ink, proto vyssi specificita */
nav.main a.btn--ink{background:var(--water);color:var(--ink);}
nav.main a.btn--ink:hover{opacity:1;color:var(--ink);box-shadow:0 8px 22px rgba(87,176,230,.42);}
nav.main .btn{height:35px;padding:0 20px;font-size:12px;letter-spacing:.03em;margin-left:-12px;}
.burger{display:none;margin-left:auto;background:none;border:1.5px solid rgba(0,0,0,.35);border-radius:9px;
  padding:9px 12px;color:var(--ink);font-family:var(--f-head);font-weight:700;font-size:14px;cursor:pointer;}
@media(max-width:1180px){nav.main{gap:22px;} nav.main a{font-size:12.5px;}}
@media(max-width:900px){
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;z-index:59;
    flex-direction:column;align-items:stretch;gap:0;background:var(--yellow);
    padding:6px 0 14px;box-shadow:0 16px 30px rgba(0,0,0,.4);
    max-height:calc(100vh - 66px);overflow-y:auto;}
  nav.main.open{display:flex;}
  nav.main a{padding:14px 24px;font-size:15px;}
  nav.main a:hover{transform:none;opacity:1;}
  nav.main a[aria-current]::after{display:none;}
  nav.main a[aria-current]{text-decoration:underline;text-underline-offset:5px;}
  nav.main a.btn--ink{margin:10px 24px 0;height:46px;justify-content:center;}
  .burger{display:inline-block;}
}

/* ==========================================================================
   HERO — presna rekonstrukce Figma platna 1440x900.
   Vsechno uvnitr .canvas je v "navrhovych pixelech": 1 * var(--px).
   Nad 1440 je --px = 1px (presne dle Figmy), pod 1440 se plynule zmensuje.
   ========================================================================== */
.hero{position:relative;background:transparent;overflow:hidden;}
.stage{container-type:inline-size;width:100%;max-width:1440px;margin:0 auto;}
.canvas{--px:calc(100cqw / 1440);position:relative;height:calc(900 * var(--px));}
.hero__art{position:absolute;inset:0;width:100%;height:100%;}
.hero__art svg{width:100%;height:100%;display:block;}

.canvas>.t{position:absolute;left:calc(83.25 * var(--px));margin:0;}
.hero__eyebrow{top:calc(315.23 * var(--px));font-family:var(--f-head);font-weight:600;
  font-size:calc(17.1 * var(--px));letter-spacing:calc(3.114 * var(--px));color:var(--water);line-height:1;}
.hero__h1{top:calc(335.7 * var(--px));font-size:calc(72 * var(--px));line-height:calc(87 * var(--px));
  letter-spacing:0;text-transform:uppercase;color:var(--white);}
.hero__h1 .sea{color:var(--water);}
/* Blok pod nadpisem je oproti Figme zmenseny (Vaclav: "pusobi to levne, nedycha to").
   Ridi se uz tokem, ne absolutnimi pozicemi - mezery se ladi jednim mistem. */
.hero__meta{position:absolute;left:calc(83.25 * var(--px));top:calc(538 * var(--px));}
.hero__km{position:static;font-family:var(--f-head);font-weight:700;
  font-size:calc(26 * var(--px));letter-spacing:0;line-height:1;color:var(--white);
  margin:0 0 calc(24 * var(--px));}
.hero__km .k{color:var(--yellow);}
.hero__bar{width:calc(340 * var(--px));height:calc(5 * var(--px));border-radius:100px;
  background:rgba(255,255,255,.12);overflow:hidden;margin:0 0 calc(22 * var(--px));}
.hero__bar i{display:block;height:100%;width:59%;background:var(--yellow);border-radius:100px;
  transform-origin:left;animation:barGrow 1.77s cubic-bezier(.2,.7,.2,1) .35s both;}
@keyframes barGrow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.hero__stats{position:static;font-family:var(--f-head);font-weight:600;
  font-size:calc(14.5 * var(--px));letter-spacing:calc(2.1 * var(--px));color:rgba(255,255,255,.6);
  line-height:1;margin:0 0 calc(30 * var(--px));}
.hero__cta{position:static;width:calc(142 * var(--px));height:calc(40 * var(--px));
  font-size:calc(13 * var(--px));letter-spacing:calc(.4 * var(--px));}
.hero__scroll{display:none;}   /* sipka "scrolluj" jen na mobilu */

.canvas>.t,.hero__meta{animation:rise .83s cubic-bezier(.2,.7,.2,1) both;}
.canvas>.hero__eyebrow{animation-delay:.06s;} .canvas>.hero__h1{animation-delay:.15s;} .hero__meta{animation-delay:.25s;}
@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

/* srsen na mape dycha, pulz kolem nej */
.hero__art .srsen{animation:bob 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center;
  will-change:transform;}   /* vlastni vrstva - jinak se kazdy snimek prekresluje cela mapa */
@keyframes bob{0%,100%{translate:0 0;}50%{translate:0 -4px;}}

/* Na monitorech sirsich nez platno (1440) zustava scena 1440 na stred a po
   stranach vznikaji cerne pruhy. Radialni zare + mrizka se ale orezavaly tvrdou
   svislou hranou (nejvic videt vlevo, kde je zare nejjasnejsi) - pusobilo to
   "oriznute zleva". Okraje sceny proto nechame plynule vyblednout do cerne,
   aby splynuly s pruhy. Text neni potomkem .hero__art, takze zustava ostry. */
@media(min-width:1441px){
  .hero__art{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 120px,#000 calc(100% - 70px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 120px,#000 calc(100% - 70px),transparent 100%);
  }
}

/* --- hero na mobilu: sloupec, vse na STRED, CELA mapa (dle Figmy) --- */
@media(max-width:900px){
  .canvas{--px:1px;height:auto;display:flex;flex-direction:column;align-items:center;
    padding:130px 24px 24px;}
  .canvas>.t,.hero__meta{position:static;left:auto;top:auto;width:100%;text-align:center;}
  /* poradi: eyebrow -> nadpis -> mapa -> cisla -> CTA -> sipka */
  /* .canvas>.t nastavuje margin:0, proto stejna specificita */
  .canvas>.hero__eyebrow{order:1;margin:0 0 20px;font-size:13.5px;letter-spacing:.05em;}
  .hero__h1{order:2;margin:0;font-size:clamp(28px,8vw,40px);line-height:1.1;}
  .hero__art{order:3;}
  .hero__meta{order:4;margin-top:24px;}
  .hero__scroll{order:5;}

  /* ================== CELA MAPA V HERO NA MOBILU ==================
     Okno je vyrez SVG presne kolem mapoveho bboxu (832..1307 x, 171..622 y),
     vycentrovany na stred mapy (1069,396) pres translate.
     width u SVG : VELIKOST mapy. Vetsi cislo = vetsi mapa (mene vzduchu kolem),
                   mensi cislo = mapa mensi a vic mista okolo. Pri 224% je cela
                   mapa (zapadni Cechy i vychodni Polsko) videt s okrajem; vyssi
                   hodnoty uz mapu po stranach orezavaji.
     max-width   : jak siroka je mapa na displeji (Figma ma mapu odsazenou).   */
  /* pres celou sirku displeje, at glow i mrizka jdou do kraju (zadne cerne pruhy).
     Sirka SVG je dopoctena tak, aby mapa zustala stejne velka jako pri 340px/205%. */
  .hero__art{position:relative;inset:auto;height:auto;
    width:100vw;max-width:100vw;
    margin:16px calc(50% - 50vw) 0;
    aspect-ratio:475/451;overflow:hidden;
    -webkit-mask-image:none;mask-image:none;}
  .hero__art svg{position:absolute;top:45%;left:50%;height:auto;
    width:179%;transform:translate(-74.3%,-44.1%);}
  .hero__art::before,.hero__art::after{display:none;}

  .hero__km{margin:0 0 12px;font-size:20px;}
  /* progress + statistiky sdili sirku: wrapper se zuzi na text "9 dni...",
     bar 100% se pak roztahne presne na tuto sirku */
  .hero__prog{width:fit-content;max-width:100%;margin:0 auto 22px;}
  .hero__bar{width:100%;max-width:100%;height:5px;margin:0 auto 12px;}
  .hero__stats{margin:0;font-size:12px;letter-spacing:.08em;line-height:1.6;white-space:nowrap;}
  .hero__cta{display:inline-flex;width:auto;height:44px;padding:0 26px;font-size:13px;letter-spacing:.05em;}

  /* sipka "scrolluj dal" */
  .hero__scroll{display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin:6px auto 0;color: var(--water);
    animation:heroSip 1.8s ease-in-out infinite;}
  .hero__scroll svg{width:26px;height:26px;}
}
@keyframes heroSip{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

/* ==========================================================================
   SPOLECNE PRO SEKCE
   ========================================================================== */
.sec{position:relative;background:transparent;
  content-visibility:auto;contain-intrinsic-size:auto 620px;}
.sec__in{position:relative;z-index:2;padding-top:74px;padding-bottom:90px;}
/* archiv navazuje rovnou na hero — po presunu podpory dolu tu zela mezera */
section#vypravy{margin-top:-46px;}
#vypravy .sec__in{padding-top:18px;}
@media(max-width:560px){
  .sec__in{padding-top:52px;padding-bottom:60px;}
  section#vypravy{margin-top:0;}
}

/* MLHOVINA — volna vrstva nad jednotnym pozadim.
   Ramecek je zamerne vetsi nez sekce (inset -34% -12%), takze zar dobehne
   do ztracena mimo sekci a nikde se neorizne. Sousedni mlhoviny se prekryvaji
   a tim vznikne prechod sam od sebe - nic se nelepi. */
.glow{position:absolute;inset:-34% 0;z-index:0;pointer-events:none;}
.glow--warm{background:radial-gradient(closest-side at 38% 50%,
  rgba(245,183,1,.26),rgba(245,181,1,.09) 48%,rgba(245,179,1,0) 76%);}
.glow--water{background:radial-gradient(closest-side at 56% 50%,
  rgba(87,176,230,.26),rgba(87,176,230,.09) 48%,rgba(87,176,230,0) 76%);}
.rule{position:relative;z-index:2;border:0;height:1px;margin:0;background:linear-gradient(90deg,
  transparent,rgba(245,179,1,.75) 12%,rgba(245,179,1,.75) 88%,transparent);}

.eyebrow{font-family:var(--f-hand);font-weight:400;font-size:19.8px;line-height:1;margin:0 0 10px;}
.eyebrow--y{color:var(--yellow);}
.eyebrow--w{color:var(--water);}
.sec h2{font-size:clamp(28px,3.34vw,48px);line-height:1.04;text-transform:uppercase;letter-spacing:-.01em;margin:0 0 34px;}
.lead{font-family:var(--f-body);font-size:15px;line-height:1.62;color:rgba(255,255,255,.82);margin:0;}

/* odhaleni pri scrollu */
.rv{opacity:0;transform:translateY(22px);transition:opacity .83s cubic-bezier(.2,.7,.2,1),transform .83s cubic-bezier(.2,.7,.2,1);}
.rv.in{opacity:1;transform:none;}

/* ==========================================================================
   PODPORA — Figma Frame 1, y 0..329
   ========================================================================== */
.support__in{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr auto;
  gap:44px;align-items:center;padding:80px 0;}
.qr{width:180px;height:180px;flex:none;border-radius:22.5px;background:#fff;border:5px solid var(--yellow);
  padding:17px;transition:transform .2s;}
.qr:hover{transform:scale(1.04) rotate(-1.5deg);}
.qr svg{width:100%;height:100%;display:block;}
.support h2{font-size:clamp(26px,2.8vw,40px);margin:0 0 12px;}
.support .acct{font-family:var(--f-body);font-size:15px;color:var(--yellow);margin:14px 0 0;letter-spacing:.01em;}
.support .btn{height:45px;padding:0 34px;font-size:14px;flex:none;}
@media(max-width:980px){
  .support__in{grid-template-columns:1fr;justify-items:center;text-align:center;gap:26px;padding:56px 0;}
}

/* ==========================================================================
   ARCHIV VYPRAV — Figma Frame 1, y 329..900. Karta 280x300, mezera 60, r 20.
   ========================================================================== */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:60px;}
.card{position:relative;border-radius:20px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);
  overflow:hidden;min-height:300px;display:flex;flex-direction:column;
  transition:transform .24s cubic-bezier(.2,.7,.2,1),border-color .24s,box-shadow .24s;}
.card:hover{transform:translateY(-6px);border-color:rgba(245,179,1,.42);box-shadow:0 18px 44px rgba(0,0,0,.5);}
.card__img{height:160px;flex:none;overflow:hidden;background:#0d0d0f;}
/* karta bez fotky - nez dorazi snimky z Moravy a Cerneho more */
.card__img--bez{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 100% at 50% 120%,rgba(245,179,1,.14),transparent 70%),#0c0c0e;}
.card__img--bez svg{width:44px;height:56px;opacity:.16;transition:opacity .4s,transform .5s;}
.card:hover .card__img--bez svg{opacity:.3;transform:translateY(-4px);}
.card__img img{width:100%;height:100%;object-fit:cover;object-position:center 62%;transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.card:hover .card__img img{transform:scale(1.07);}
.card__body{padding:15px;}
.card h3{font-size:22px;line-height:1.1;text-transform:uppercase;margin:0 0 9px;}
.card .meta{font-family:var(--f-head);font-weight:700;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--water);margin:0 0 10px;}
.card p{font-family:var(--f-body);font-size:12px;line-height:1.55;color:rgba(255,255,255,.72);margin:0;}
.card--soon{align-items:center;justify-content:center;text-align:center;padding:24px;}
.card--soon span{font-family:var(--f-hand);font-weight:400;font-size:16px;color:rgba(255,255,255,.26);}
.card--soon:hover{transform:none;border-color:rgba(255,255,255,.07);box-shadow:none;}
@media(max-width:1100px){.cards{grid-template-columns:repeat(2,1fr);gap:32px;}}
@media(max-width:620px){.cards{grid-template-columns:1fr;gap:22px;} .card{min-height:0;}}

/* ==========================================================================
   O MNE
   ========================================================================== */
.about__in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:64px;align-items:center;padding:88px 0;}
.about__txt p+p{margin-top:14px;}
.about__foto{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;}
.about__foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.about__foto:hover img{transform:scale(1.05);}
.about__foto::after{content:"";position:absolute;inset:0;border-radius:20px;
  border:1px solid rgba(245,179,1,.28);pointer-events:none;}
.facts{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px;}
.fact{border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:10px 15px;background:rgba(255,255,255,.03);}
.fact b{display:block;font-family:var(--f-head);font-weight:700;font-size:20px;line-height:1.1;}
.fact span{font-family:var(--f-head);font-weight:700;font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(255,255,255,.5);}
@media(max-width:900px){
  .about__in{grid-template-columns:1fr;gap:22px;padding:60px 0;}
  /* poradi na mobilu: nadpis, dlouhy text, FOTKA, obdelniky, odkaz */
  .about__txt{display:contents;}
  .about__txt .eyebrow{order:1;margin-bottom:0;}
  /* pri display:contents odsazuje uz grid (gap 22px), vlastni margin by se scital */
  .about__txt h2{order:2;margin-bottom:0;}
  .about__txt .lead{order:3;}
  .about__foto{order:4;}
  .about__txt .facts{order:5;}
  .about__txt .more{order:6;margin-top:4px;}
}

/* ==========================================================================
   SOCIALNI SITE — dlazdice
   ========================================================================== */
.soc{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.soc a{display:flex;flex-direction:column;gap:12px;border:1px solid rgba(255,255,255,.1);border-radius:18px;
  padding:26px;background:rgba(255,255,255,.025);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .22s,background .22s;}
.soc a:hover{transform:translateY(-6px);border-color:rgba(245,179,1,.5);background:rgba(245,179,1,.06);}
.soc svg{width:30px;height:30px;flex:none;}
.soc b{font-family:var(--f-head);font-weight:700;font-size:18px;line-height:1;}
.soc span{font-family:var(--f-head);font-weight:600;font-size:11px;letter-spacing:.05em;color:rgba(255,255,255,.5);}
.soc .hl{font-family:var(--f-hand);font-size:14px;color:var(--yellow);margin-top:2px;}
@media(max-width:900px){.soc{grid-template-columns:repeat(2,1fr);gap:14px;}}
@media(max-width:480px){.soc{grid-template-columns:1fr;}}

/* ==========================================================================
   PROKLIK NA PODSTRANKU — jeden odkaz na konci sekce
   ========================================================================== */
.more{display:inline-flex;align-items:center;gap:9px;margin-top:30px;
  font-family:var(--f-head);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--yellow);border-bottom:1.5px solid rgba(245,179,1,.35);padding-bottom:4px;
  transition:gap .2s,border-color .2s;}
.more:hover{gap:15px;border-color:var(--yellow);}

/* ==========================================================================
   MERCH — zivy nahled z WooCommerce Store API (tvorbanalepky.cz)
   ========================================================================== */
.shop{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.item{display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.1);border-radius:18px;
  overflow:hidden;background:rgba(255,255,255,.025);
  transition:transform .24s cubic-bezier(.2,.7,.2,1),border-color .24s,box-shadow .24s;}
.item:hover{transform:translateY(-6px);border-color:rgba(245,179,1,.5);box-shadow:0 18px 40px rgba(0,0,0,.5);}
.item__img{aspect-ratio:1/1;overflow:hidden;background:#0d0d0f;}
.item__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.item:hover .item__img img{transform:scale(1.06);}
.item__b{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.item h3{font-size:14px;line-height:1.25;text-transform:none;margin:0;}
.item .price{font-family:var(--f-head);font-weight:700;font-size:17px;color:var(--yellow);margin-top:auto;}
.item .stock{font-family:var(--f-head);font-weight:600;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:#7FBF7F;}
@media(max-width:1000px){.shop{grid-template-columns:repeat(2,1fr);gap:16px;}}
@media(max-width:620px){
  .shop{grid-template-columns:repeat(2,1fr);gap:12px;}
  .item__b{padding:11px;gap:5px;}
  .item h3{font-size:12px;}
  .item .price{font-size:14px;}
  .item .stock{font-size:8.5px;}
}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  .canvas>.t,.hero__cta,.hero__bar i,.hero__art .srsen{animation:none !important;}
}

/* ==========================================================================
   PATICKA — nese i kontakt (samostatnou sekci uz homepage nema)
   ========================================================================== */
footer.foot{position:relative;background:transparent;border-top:1px solid rgba(245,179,1,.22);}
.foot__in{position:relative;z-index:2;}
.foot__in{max-width:var(--wrap);margin:0 auto;padding:44px 24px 30px;}
.foot__top{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start;
  padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.09);}
.foot__logo{display:flex;align-items:center;gap:11px;margin-bottom:12px;position:relative;width:fit-content;}
.foot__logo::before{content:"";position:absolute;left:-26px;top:50%;width:calc(100% + 54px);height:150%;
  transform:translateY(-50%);border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(245,179,1,.32),rgba(245,179,1,.10) 52%,rgba(245,179,1,0) 74%);}
.foot__logo img,.foot__logo svg,.foot__logo b{position:relative;z-index:1;}
.foot__logo svg{width:30px;height:38px;}
.foot__logo img{height:40px;width:auto;}
.foot__logo b{font-family:var(--f-head);font-weight:700;font-size:15px;line-height:.96;
  letter-spacing:.05em;text-transform:uppercase;}
.foot .claim{font-family:var(--f-hand);font-size:17px;color:var(--yellow);margin:0;}
.foot__kontakt{text-align:right;font-family:var(--f-head);font-weight:600;font-size:14px;line-height:1.7;}
.foot__kontakt a{display:inline-block;padding:4px 0;}
.foot__kontakt a:hover{color:var(--yellow);}
.foot__kontakt .lbl{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.4);
  display:block;margin-bottom:2px;}
.foot__bot{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding-top:22px;font-family:var(--f-head);font-weight:600;font-size:12px;letter-spacing:.04em;
  color:rgba(255,255,255,.42);}
.foot__bot a{display:inline-block;padding:5px 0;}
.foot__bot a:hover{color:var(--yellow);}
@media(max-width:760px){.foot__top{grid-template-columns:1fr;} .foot__kontakt{text-align:left;}}

.note{position:fixed;right:14px;bottom:14px;z-index:80;background:var(--yellow);color:var(--ink);
  font-family:var(--f-head);font-weight:700;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  padding:7px 12px;border-radius:100px;box-shadow:0 6px 18px rgba(0,0,0,.4);}

/* ===== PRISPET: toast + zoom QR (klik = zkopiruje ucet a zvetsi QR) ===== */
.qr{cursor:zoom-in;}
.j-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:300;
  background:var(--yellow);color:var(--ink);font-family:var(--f-head);font-weight:700;font-size:13px;
  letter-spacing:.02em;padding:12px 20px;border-radius:100px;box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;max-width:90vw;text-align:center;}
.j-toast.in{opacity:1;transform:translate(-50%,0);}
.j-qrbox{position:fixed;inset:0;z-index:290;display:grid;place-items:center;padding:24px;
  background:rgba(0,0,0,.82);opacity:0;transition:opacity .3s;cursor:zoom-out;}
.j-qrbox.in{opacity:1;}
.j-qrbox__in{background:#fff;border-radius:22px;padding:22px;width:min(360px,86vw);
  border:6px solid var(--yellow);transform:scale(.94);transition:transform .3s;}
.j-qrbox.in .j-qrbox__in{transform:scale(1);}
.j-qrbox__in svg{width:100%;height:auto;display:block;}
.j-qrbox__acct{font-family:var(--f-head);font-weight:700;color:var(--ink);text-align:center;
  margin:14px 0 0;font-size:15px;letter-spacing:.02em;}
.j-qrbox__hint{font-family:var(--f-head);font-weight:600;color:rgba(255,255,255,.55);text-align:center;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin:14px 0 0;}