/* =========================================================

   POCTIVÝ ZEDNÍK — stylesheet (v2, podle reálného webu)

   Paleta: černobílo-šedá, žádný barevný akcent.

   Nadpisy: Quicksand (zaoblený geometrický sans)

   Text: Mulish (čitelný humanistický sans)

   ========================================================= */



:root {

  --color-bg: #FFFFFF;

  --color-panel: #EFECE7;     /* světle šedý "betonový" pruh hlavičky */

  --color-ink: #1C1B19;       /* nadpisy, tučný text */

  --color-text: #59554F;      /* běžný odstavcový text */

  --color-muted: #8C887F;     /* data, drobný text */

  --color-line: #D9D5CC;      /* tenké linky/okraje */

  --color-charcoal: #1B1A18;  /* patička */

  --color-footer-text: #CFCBC2;



  --font-display: "Quicksand", "Arial Rounded MT Bold", sans-serif;

  --font-body: "Mulish", "Segoe UI", sans-serif;



  --maxw: 1180px;

  --radius: 10px;

}



* { box-sizing: border-box; }

html { scroll-behavior: smooth; }



body {

  margin: 0;

  font-family: var(--font-body);

  background: var(--color-bg);

  color: var(--color-text);

  line-height: 1.7;

  font-size: 18px;

}



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



a {

  color: inherit;

  text-decoration: underline;

  text-decoration-color: var(--color-line);

  text-underline-offset: 2px;

}

a:hover { color: var(--color-ink); text-decoration-color: var(--color-ink); }



strong { color: var(--color-ink); font-weight: 700; }



.wrap {

  max-width: var(--maxw);

  margin: 0 auto;

  padding: 0 28px;

}



/* ---------- nadpisy ---------- */

/* výchozí h1 (např. titulky článků na blogu) - obyčejné, NE velkými písmeny */

h1 {

  font-family: var(--font-body);

  font-weight: 800;

  font-size: clamp(1.9rem, 3.2vw, 2.1rem);

  color: var(--color-ink);

  margin: 0 0 0.4em;

}



.headline {

  font-family: var(--font-display);

  text-transform: uppercase;

  letter-spacing: 0.01em;

  font-weight: 700;

  line-height: 1.2;

  color: var(--color-ink);

  margin: 0 0 0.5em;

}

h1.headline { font-size: clamp(3.1rem, 4vw, 2.7rem); }

h2.headline { font-size: clamp(2.4rem, 2.6vw, 1.85rem); }



.headline.center { text-align: center; }



/* běžné dílčí nadpisy uvnitř textu - NE velká písmena */

h3 {

  font-family: var(--font-body);

  font-size: 1.9rem;

  font-weight: 800;

  color: var(--color-ink);

  margin: 0 0 0.6em;

}



p { margin: 0 0 1.2em; }



/* ---------- top bar (telefon/e-mail) ---------- */

.topbar {

  background: var(--color-bg);

  border-bottom: 1px solid var(--color-line);

  font-size: 1rem;

  color: var(--color-text);

}

.topbar .wrap {

  display: flex;

  justify-content: flex-end;

  align-items: center;

  gap: 28px;

  padding-top: 8px;

  padding-bottom: 8px;

}

.topbar a { text-decoration: none; color: var(--color-text); }

.topbar a:hover { color: var(--color-ink); }

.topbar .ic { color: var(--color-muted); margin-right: 6px; }



/* ---------- hlavička / navigace ---------- */

header.site-header { background: var(--color-panel); }

.site-header .wrap {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  padding-top: 16px;

  padding-bottom: 16px;

  gap: 17px;

}

.brand { display: flex; flex-direction: column; text-decoration: none; }

.brand .name {

  font-family: var(--font-display);

  font-size: 1.5rem;

  font-weight: 700;

  letter-spacing: 0.01em;

  color: var(--color-ink);

  text-transform: uppercase;

  white-space: nowrap;

}

.brand .sub {

  font-size: 1rem;

  letter-spacing: 0.04em;

  color: var(--color-muted);

  text-transform: uppercase;

  margin-top: 2px;

  white-space: nowrap;

}



nav.main-nav ul {

  list-style: none;

  display: flex;

  flex-wrap: wrap;

  gap: 4px 16px;

  margin: 0;

  padding: 0;

}

nav.main-nav li { margin: 2px 8px; }

nav.main-nav li:first-child { margin-left: 0; }

nav.main-nav li:last-child { margin-right: 0; }

nav.main-nav a {

  display: inline-block;

  font-family: var(--font-body);

  font-size: 1rem;

  color: var(--color-muted);

  font-weight: 500;

  text-decoration: none;

  white-space: nowrap;

}

nav.main-nav a:hover { color: var(--color-ink); }

nav.main-nav a.active { color: var(--color-ink); font-weight: 800; }



@media (max-width: 820px) {

  nav.main-nav ul { gap: 8px 16px; }

  .topbar .wrap { justify-content: center; }

}



/* ---------- hero foto (jen Úvod, fullbleed, bez overlay) ---------- */

.hero-photo { width: 100%; margin-top: 36px; }

.hero-photo img { width: 100%; height: auto; display: block; }



/* ---------- titulek podstránky (bez fotky) ---------- */

.page-title { padding: 56px 0 10px; }

.page-title.center { text-align: center; }



/* ---------- obsah ---------- */

main { padding-bottom: 0; }

.section { padding: 54px 0; }



.two-col {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 50px;

  align-items: start;

}

@media (max-width: 760px) {

  .two-col { grid-template-columns: 1fr; gap: 26px; }

}

.two-col .col-label {

  font-family: var(--font-display);

  text-transform: uppercase;

  font-weight: 700;

  font-size: 1.3rem;

  color: var(--color-ink);

}



.quote-block {

  font-family: var(--font-display);

  text-transform: uppercase;

  font-weight: 700;

  font-size: clamp(1.3rem, 2.4vw, 1.8rem);

  line-height: 1.35;

  color: var(--color-ink);

  text-align: right;

}

@media (max-width: 760px) { .quote-block { text-align: left; } }



/* fotky jako "kartičky" - zaoblené rohy + stín, NE přes celou šířku */

.photo-card {

  border-radius: var(--radius);

  overflow: hidden;

  box-shadow: 0 18px 40px -18px rgba(28,27,25,0.35);

}

.photo-card.center { margin-left: auto; margin-right: auto; }

.photo-card.w-60 { max-width: 62%; }

@media (max-width: 760px) { .photo-card.w-60 { max-width: 100%; } }



/* placeholder pro fotky, dokud nejsou nahrané reálné soubory */

.photo-slot {

  background: repeating-linear-gradient(135deg, var(--color-line), var(--color-line) 10px, #fff 10px, #fff 20px);

  border: 1px dashed var(--color-muted);

  color: var(--color-muted);

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  font-size: 0.82rem;

  padding: 16px;

  min-height: 200px;

}

.photo-card .photo-slot { border-radius: var(--radius); }



/* obrysová tlačítka */

.btn {

  display: inline-block;

  font-family: var(--font-display);

  text-transform: uppercase;

  letter-spacing: 0.04em;

  font-weight: 700;

  font-size: 0.92rem;

  background: transparent;

  color: var(--color-ink);

  padding: 16px 30px;

  border: 1px solid var(--color-line);

  border-radius: 2px;

  cursor: pointer;

  text-decoration: none;

}

.btn:hover { border-color: var(--color-ink); color: var(--color-ink); text-decoration: none; }



/* CTA blok - vodorovné linky + nadpis + tlačítko, na bílé ploše */

.cta-bracket { text-align: center; padding: 50px 0; }

.cta-bracket hr {

  border: none;

  border-top: 1px solid var(--color-ink);

  margin: 0;

}

.cta-bracket .headline { margin: 34px 0; }

.cta-bracket .btn-wrap { margin-top: 6px; }



.closing-line {

  text-align: center;

  color: var(--color-text);

  font-size: 0.95rem;

  padding: 28px 0 10px;

}



/* chevron seznam */

ul.chevron { list-style: none; margin: 18px 0; padding: 0; }

ul.chevron li {

  position: relative;

  padding-left: 24px;

  margin-bottom: 12px;

  color: var(--color-text);

}

ul.chevron li::before {

  content: "❯";

  position: absolute;

  left: 0; top: 0;

  color: var(--color-muted);

  font-size: 0.85em;

}

ul.chevron a { color: inherit; }



.stack-photos { display: grid; gap: 18px; }



/* reference - galerie bez mezer a bez zaoblení (skutečné fotky vedle sebe) */

.gallery-flush {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  margin: 36px 0 0;

}

.gallery-flush .photo-slot { min-height: 220px; border-radius: 0; }

.gallery-flush img { width: 100%; height: 220px; object-fit: cover; }

@media (max-width: 760px) { .gallery-flush { grid-template-columns: repeat(2, 1fr); } }



/* o mně */

.about-grid {

  display: grid;

  grid-template-columns: 320px 1fr;

  gap: 46px;

  align-items: start;

}

@media (max-width: 720px) { .about-grid { grid-template-columns: 1fr; } }

.about-grid .photo-slot { aspect-ratio: 3/4; }



/* formulář - štítek vlevo, pole vpravo (jako na originále) */

form.contact-form { max-width: 640px; margin: 0 auto; }

.f-row {

  display: grid;

  grid-template-columns: 190px 1fr;

  gap: 18px;

  align-items: start;

  margin-bottom: 22px;

}

@media (max-width: 600px) { .f-row { grid-template-columns: 1fr; gap: 8px; } }

.f-row label {

  font-family: var(--font-body);

  font-weight: 800;

  color: var(--color-ink);

  padding-top: 12px;

}

.f-row input[type="text"],

.f-row input[type="email"],

.f-row textarea {

  width: 100%;

  padding: 12px 0;

  border: none;

  border-bottom: 1px solid var(--color-line);

  background: transparent;

  font-family: var(--font-body);

  font-size: 1rem;

  color: var(--color-text);

}

.f-row textarea { min-height: 140px; resize: vertical; }

.f-row input:focus, .f-row textarea:focus { outline: none; border-bottom-color: var(--color-ink); }

.radio-group { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }

.radio-group label {

  font-weight: 400;

  color: var(--color-text);

  padding-top: 0;

  display: flex;

  align-items: center;

  gap: 10px;

}

.radio-group input { accent-color: var(--color-ink); }

.form-actions { text-align: left; }



.form-note {

  font-size: 0.92rem;

  padding: 14px 18px;

  border-radius: 4px;

  max-width: 640px;

  margin: 0 auto 22px;

}

.form-note.success { background: #EEF3EC; color: #33502F; border: 1px solid #C9DAC4; }

.form-note.error { background: #F6E9E5; color: #6E3722; border: 1px solid #E3C3B6; }



.map-embed iframe { width: 100%; height: 360px; border: 0; }



.biz-details {

  font-size: 0.95rem;

  color: var(--color-muted);

  border-top: 1px solid var(--color-line);

  padding-top: 26px;

  margin-top: 40px;

}

.biz-details strong { color: var(--color-ink); }



/* blog */

.post-list { display: grid; gap: 38px; margin: 36px 0; }

.post-card {

  display: grid;

  grid-template-columns: 230px 1fr;

  gap: 28px;

  align-items: start;

}

.post-card .photo-card { min-height: 150px; }

.post-card .photo-card .photo-slot { min-height: 150px; }

.post-card .photo-card img { height: 150px; object-fit: cover; }

.post-card time {

  display: block;

  font-style: italic;

  font-size: 0.88rem;

  color: var(--color-muted);

  margin: 4px 0 10px;

}

.post-card h2 {

  font-family: var(--font-body);

  font-weight: 800;

  font-size: 1.45rem;

  color: var(--color-ink);

  margin: 0;

}

.post-card h2 a { text-decoration: none; color: inherit; }

.post-card h2 a:hover { text-decoration: underline; }

.post-card p { color: var(--color-text); margin-top: 8px; }

@media (max-width: 620px) {

  .post-card { grid-template-columns: 1fr; }

}



article.post h1 { text-align: left; }

article.post .post-meta {

  font-style: italic;

  font-size: 0.92rem;

  color: var(--color-muted);

  margin-bottom: 24px;

}

article.post .photo-card { margin-bottom: 26px; }

article.post p { margin: 0 0 1.2em; }

article.post h2 {

  font-family: var(--font-body);

  font-weight: 800;

  font-size: 1.25rem;

  color: var(--color-ink);

  margin: 1.4em 0 0.6em;

}

.share-row { margin-top: 34px; }

.share-row a {

  font-family: var(--font-display);

  text-transform: uppercase;

  font-size: 0.85rem;

  border: 1px solid var(--color-line);

  padding: 10px 18px;

  text-decoration: none;

}

.share-row a:hover { border-color: var(--color-ink); }



/* patička */

footer.site-footer {

  background: var(--color-charcoal);

  color: var(--color-footer-text);

  padding: 38px 0;

  text-align: center;

  font-size: 0.92rem;

}

footer.site-footer .built {

  font-style: italic;

  color: #fff;

  margin-bottom: 6px;

}

footer.site-footer a { color: var(--color-footer-text); text-decoration: underline; }

footer.site-footer a:hover { color: #fff; }



/* cookie lišta */

#cookie-bar {

  position: fixed;

  left: 0; right: 0; bottom: 0;

  background: var(--color-charcoal);

  color: #fff;

  padding: 18px 24px;

  display: none;

  z-index: 999;

  box-shadow: 0 -4px 18px rgba(0,0,0,0.25);

}

#cookie-bar.visible { display: block; }

#cookie-bar .wrap {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 14px;

  max-width: var(--maxw);

}

#cookie-bar p { margin: 0; font-size: 0.92rem; max-width: 640px; }

#cookie-bar .cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }

#cookie-bar .btn { color: #fff; border-color: #6b6862; }

#cookie-bar .btn:hover { border-color: #fff; }