/* Kevoba — tessera-modules
   Písečná paleta s cihlovým a modrým akcentem */

:root{
  --bg:#f4ece0;
  --bg-alt:#e8dbc7;
  --dark:#33231a;
  --ink:#2a2119;
  --muted:#7d6f5c;
  --brick:#b0512c;
  --blue:#37596b;
  --seam:4px;
  --mono:ui-monospace,Consolas,'Liberation Mono',monospace;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--brick);text-decoration:underline;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}

a:focus-visible,
:focus-visible{
  outline:3px solid var(--brick);
  outline-offset:2px;
}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* --- mřížka modulů --- */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--seam);
}

.mod{
  padding:32px 28px;
  background:var(--bg-alt);
  min-width:0;
}

.mod.plain{background:var(--bg)}
.mod.brick{background:var(--brick)}
.mod.blue{background:var(--blue)}
.mod.dark{background:var(--dark);color:var(--bg)}
.mod.flat{padding:0}

.c1{grid-column:span 1}
.c2{grid-column:span 2}
.c3{grid-column:span 3}
.c4{grid-column:span 4}
.c5{grid-column:span 5}
.c6{grid-column:span 6}
.c7{grid-column:span 7}
.c8{grid-column:span 8}
.c12{grid-column:span 12}

/* --- typografie --- */
h1,h2,h3,.label,.num,nav a,.site-name{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:0.09em;
  font-weight:600;
}

h1{
  font-size:clamp(1.6rem,3.4vw,2.55rem);
  line-height:1.22;
  margin:0;
  letter-spacing:0.03em;
}

h2{
  font-size:clamp(1.05rem,1.7vw,1.28rem);
  line-height:1.4;
  margin:0 0 18px;
}

h3{
  font-size:0.95rem;
  line-height:1.45;
  margin:26px 0 8px;
  color:var(--brick);
  letter-spacing:0.11em;
}

.mod.dark h3{color:#d9915f}

p{margin:0 0 18px}
p:last-child{margin-bottom:0}

.lead{font-size:1.06rem;line-height:1.7}

.label{
  display:block;
  font-size:0.72rem;
  color:var(--blue);
  letter-spacing:0.2em;
  margin-bottom:12px;
}

.mod.dark .label{color:#8fb3c2}

.num{
  font-size:0.72rem;
  color:var(--blue);
  letter-spacing:0.2em;
}

.cap{
  font-family:var(--mono);
  font-size:0.7rem;
  line-height:1.6;
  letter-spacing:0.08em;
  color:var(--muted);
  text-transform:none;
}

.mod.dark .cap{color:#b9a894}

.muted{color:var(--muted)}

ul,ol{margin:0 0 18px;padding-left:20px}
li{margin-bottom:9px}
ul{list-style:none;padding-left:0}
ul li{position:relative;padding-left:22px}
ul li::before{
  content:"";
  position:absolute;
  left:0;top:0.72em;
  width:8px;height:8px;
  background:var(--brick);
}
.mod.dark ul li::before{background:#d9915f}

ol li::marker{font-family:var(--mono);color:var(--blue);font-size:0.85em}

dl{margin:0}
dt{font-family:var(--mono);font-size:0.8rem;letter-spacing:0.08em;color:var(--brick);margin-top:16px}
dd{margin:4px 0 0}
.mod.dark dt{color:#d9915f}

/* --- hlavička --- */
.top{padding:20px 0 0}
.top .grid{align-items:stretch}

.site-name{
  font-size:1.02rem;
  letter-spacing:0.28em;
  text-decoration:none;
  color:var(--ink);
  display:flex;
  align-items:center;
}
.site-name:hover{color:var(--brick)}

nav ul{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0}
nav li{margin:0;padding:0}
nav li::before{display:none}
nav a{
  font-size:0.74rem;
  letter-spacing:0.14em;
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}
nav a:hover,nav a[aria-current="page"]{border-bottom-color:var(--brick);color:var(--brick)}

.nav-mod{display:flex;align-items:center}

/* --- hero mozaika --- */
.hero{margin-top:24px}
.hero .mod{padding:36px 30px}
.hero .h1mod{
  grid-column:span 8;
  background:var(--bg-alt);
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:230px;
}
.hero .introMod{grid-column:span 4;background:var(--bg);min-height:230px}
.tile-brick,.tile-blue,.tile-dark{min-height:64px}
.tile-brick{background:var(--brick)}
.tile-blue{background:var(--blue)}
.tile-dark{background:var(--dark)}

/* --- pás dlaždic (oddělovač) --- */
.strip{
  display:flex;
  flex-wrap:wrap;
  gap:var(--seam);
  margin:0;
  padding:0;
}
.strip span{width:24px;height:24px;display:block;background:var(--bg-alt)}
.strip span:nth-child(3n+1){background:var(--brick)}
.strip span:nth-child(5n+3){background:var(--blue)}

/* --- rytmus sekcí --- */
section{margin-top:96px}
section.tight{margin-top:72px}
.strip-wrap{margin-top:72px}

/* --- obrázky --- */
.figmain{grid-column:span 6;background:var(--bg-alt);padding:0}
.figmain img{width:100%}
.figside{grid-column:span 4;display:flex;flex-direction:column;justify-content:flex-end}
.offset2{grid-column-start:3}

figure{margin:0}
figcaption{padding:14px 18px}

.figdetail{grid-column:span 5;background:#2a1c15;padding:0}
.figdetail img{width:100%}
.figdetail figcaption{padding:12px 16px}

/* --- kontrastní sekce --- */
.contrast{background:var(--dark);color:var(--bg);padding:80px 0}
.contrast a{color:#e08a54}
.contrast h2,.contrast h1{color:var(--bg)}

/* --- tabulkové řádky (barvy žáru) --- */
.rows{display:grid;gap:var(--seam)}
.row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,2fr);
  gap:var(--seam);
}
.row>div{background:var(--bg);padding:12px 16px;font-size:0.94rem}
.row .k{font-family:var(--mono);font-size:0.76rem;letter-spacing:0.08em;color:var(--brick);text-transform:uppercase}
.row .t{font-family:var(--mono);font-size:0.8rem;color:var(--blue)}

/* --- patička --- */
footer{margin-top:96px;padding-bottom:56px}
footer .grid{margin-top:var(--seam)}
footer .mod{padding:26px 24px;background:var(--bg-alt);min-height:150px}
footer .fname{font-family:var(--mono);letter-spacing:0.24em;font-size:0.95rem;text-transform:uppercase;margin-bottom:10px;display:block}
footer nav ul{flex-direction:column;gap:8px}
footer p{font-size:0.9rem;line-height:1.65;color:var(--muted)}
footer .mod a{font-size:0.9rem}

/* --- responzivita --- */
@media (max-width:900px){
  .c3,.c4,.c5,.c6,.c7,.c8{grid-column:span 6}
  .c1,.c2{grid-column:span 3}
  .hero .h1mod{grid-column:span 12;min-height:0}
  .hero .introMod{grid-column:span 12;min-height:0}
  .figmain,.figside,.figdetail{grid-column:span 12}
  .offset2{grid-column-start:auto}
  .row{grid-template-columns:1fr 1fr}
  .row .d{grid-column:span 2}
}

@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c12{grid-column:span 12}
  .c1,.c2{display:none}
  .mod,.hero .mod,footer .mod{padding:24px 20px}
  section{margin-top:48px}
  section.tight,.strip-wrap{margin-top:48px}
  footer{margin-top:48px}
  .contrast{padding:48px 0}
  .top .grid{gap:var(--seam)}
  .nav-mod{padding-top:14px;padding-bottom:14px}
  nav ul{gap:10px 16px}
  .row{grid-template-columns:1fr}
  .row .d{grid-column:span 1}
  .strip span{width:18px;height:18px}
  footer .mod{min-height:0}
}