/* Křižovatka | STÁR[cow] — společný základ webu.
   Sdílí ho index.html i listek.html. Stránkové styly patří do css/uvod.css a css/listek.css. */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap");

:root{
  /* barvy domu Křižovatka */
  --g:#507058;          /* zelená Křižovatky (CMYK 70 38 67 15) */
  --g-tma:#3E5A46;      /* tmavší zelená pro plochy a hover */
  --g-svetla:#E6EDE8;   /* zelený tón pro jemné plochy */
  --ink:#161616;        /* text */
  --sede:#625E5B;       /* vedlejší text */
  --linka:#E2DDD8;
  --papir:#F4F1ED;      /* podklad stránky */
  --bila:#FFFFFF;
  --sepie:#2A2218;      /* STÁR[cow] na papíře */
  --rezna:#F1EBDD;      /* STÁR[cow] na zelené */

  --font:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* typografie: jedna rodina, váha dělá hierarchii */
  --t-hero:clamp(48px, 9vw, 128px);
  --t-h1:clamp(40px, 6vw, 80px);
  --t-h2:clamp(30px, 4.2vw, 52px);
  --t-h3:clamp(20px, 2vw, 24px);
  --t-text:17px;
  --t-male:14px;

  --gutter:clamp(16px, 4vw, 40px);
  --max:1200px;
  --radius:6px;

  /* kříž: úhel z loga */
  --uhel:40deg;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--papir);color:var(--ink);font-family:var(--font);font-size:var(--t-text);line-height:1.55}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0;text-wrap:balance;line-height:1}
p{margin:0}
:focus-visible{outline:3px solid var(--g);outline-offset:3px}

.obal{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.nadpis{font-weight:900;letter-spacing:-.03em}
.stitek{font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--g)}
.wm{font-weight:900;letter-spacing:-.025em;line-height:.9;white-space:nowrap}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* logo a podpis domu: Křižovatka | STÁR[cow] (STÁR[cow] = 0,773 × výška jména) */
.logo{display:inline-flex;align-items:center;gap:.2em;color:var(--g);text-decoration:none}
.logo svg{width:1.05em;height:1.05em;flex:none}
.logo .wm{color:var(--ink)}
.podpis{display:inline-flex;align-items:center;gap:.62em;text-decoration:none;font-size:24px}
.podpis .linka{width:1px;height:1.15em;background:#B9B2A8}
.podpis .sc{height:.58em;width:auto;color:var(--sepie)}
.na-zelene .logo,.na-zelene .logo .wm{color:#fff}
.na-zelene .podpis .linka{background:rgba(255,255,255,.45)}
.na-zelene .podpis .sc{color:var(--rezna)}

/* tlačítka */
.btn{display:inline-flex;align-items:center;gap:10px;font:inherit;font-weight:800;font-size:16px;text-decoration:none;padding:14px 22px;border-radius:4px;border:2px solid var(--g);background:var(--g);color:#fff;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--g-tma);border-color:var(--g-tma)}
.btn.obrys{background:transparent;color:var(--g)}
.btn.obrys:hover{background:var(--g);color:#fff}
.na-zelene .btn{background:#fff;color:var(--g-tma);border-color:#fff}
.na-zelene .btn.obrys{background:transparent;color:#fff}

/* hlavička */
.hlavicka{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(244,241,237,.92);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--linka)}
.hlavicka .obal{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.hlavicka nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-weight:700;font-size:15px}
.hlavicka nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.hlavicka nav a:hover,.hlavicka nav a[aria-current="page"]{border-bottom-color:var(--g)}
.hlavicka .akce{display:flex;gap:10px;align-items:center}
.hlavicka .btn{padding:9px 14px;font-size:14px}
@media (max-width:820px){
  .hlavicka nav{display:none}
  .podpis{font-size:20px}
  .hlavicka .podpis .linka,.hlavicka .podpis .sc{display:none}
}

/* patička */
.paticka{background:var(--ink);color:#d9d6d2;margin-top:96px;padding-block:56px 40px;font-size:15px}
.paticka a{color:#fff}
.paticka .sloupce{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
.paticka h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#9FB7A6;margin-bottom:10px}
.paticka .starcow{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;border-top:1px solid #2e2e2e;margin-top:40px;padding-top:28px;color:#bdb8b2}
.paticka .starcow svg{height:28px;width:auto;color:var(--rezna)}
.paticka .logo,.paticka .logo .wm{color:#fff}
.paticka .logo svg{color:#9FB7A6}
@media (max-width:820px){.paticka .sloupce{grid-template-columns:1fr 1fr}.paticka .starcow{grid-template-columns:1fr}}
@media (max-width:480px){.paticka .sloupce{grid-template-columns:1fr}}

/* kříž jako maska fotky: zaoblená ramena ±40° (použít přes SVG clipPath, viz zadání) */
.kriz-ikona{width:64px;height:64px;color:var(--g);--knock:var(--papir)}

/* oznámení otevření (pruh nad hlavičkou) */
.oznameni{margin:0;background:var(--g);color:#fff;text-align:center;padding:10px 16px;font-size:15px;line-height:1.35}
.oznameni strong{font-weight:900;letter-spacing:-.01em}
.oznameni span{opacity:.85}
@media (max-width:520px){.oznameni span{display:block;font-size:13px}}