/* AK Steel — web. Světlý architektonický minimalismus. */

:root {
  --bg: #ffffff;
  --bg-soft: #f6f5f3;
  --text: #1a1a1a;
  --text-muted: #8a8a8a;
  --over: #ffffff;            /* text přes fotku */
  --space: clamp(1.1rem, 3vw, 2.2rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* --- Horní lišta (přes hero) --- */
.topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space);
  color: var(--over);
}

/* jemný ztmavovací přechod nahoře, ať je lišta čitelná na světlé i tmavé fotce */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 160px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.28), rgba(0,0,0,0));
  pointer-events: none;
  z-index: -1;
}

.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45em;
  text-align: center;
}
.wordmark__img {
  height: clamp(46px, 5.4vw, 80px);
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.4));
}
.wordmark__text {
  font-weight: 500;
  font-size: clamp(0.66rem, 1.9vw, 0.92rem);
  letter-spacing: 0.3em;
  padding-left: 0.3em;          /* opticky vyrovná letter-spacing vpravo */
  color: var(--over);
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}

.contact {
  font-weight: 300;
  font-size: clamp(0.85rem, 1.8vw, 1rem);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
  transition: opacity 0.2s ease;
}
.contact:hover { opacity: 0.7; }

/* --- Hero --- */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: var(--bg-soft);
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* vždy vyplní, nikdy pruhy; ořez = detail */
  object-position: center;
  display: block;
}

/* horní vrstva pro plynulé prolnutí (crossfade) */
.hero__img--top { opacity: 0; z-index: 1; }

/* Klasický Ken Burns: pomalý zoom + drift jedním směrem, per fotka.
   Restart animace řeší hero.js při každé nové fotce. Zoom drží rezervu,
   takže drift nikdy neodkryje okraj - fotka pořád vyplňuje celý prostor. */
@keyframes heroZoom {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.08) translate(-2%, -1.5%); }
}
.hero__img--zoom { animation: heroZoom 21s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
  .hero__img--zoom { animation: none; }
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(1.2rem, 4vh, 2.4rem);
  transform: translateX(-50%);
  z-index: 2;
  color: var(--over);
  font-size: 1.6rem;
  line-height: 1;
  text-shadow: 0 1px 10px rgba(0,0,0,0.4);
  animation: nudge 2.4s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll { animation: none; }
  html { scroll-behavior: auto; }
}

/* --- Sekce pod hero (zatím placeholder pro proud realizací) --- */
.work {
  padding: clamp(3rem, 9vh, 6rem) var(--space);
}

.work__lead {
  font-weight: 300;
  font-size: clamp(1.3rem, 4vw, 2.4rem);
  letter-spacing: 0.01em;
  color: var(--text);
  text-align: center;
}

/* --- Proud projektů: editorální alternující layout (fotka + prostor) --- */
.projekty {
  width: 100%;
  max-width: 1200px;
  margin: clamp(3rem, 8vh, 6rem) auto 0;
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 12vh, 9rem);
}
.projekt {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  cursor: pointer;
}
.projekt:nth-child(even) { flex-direction: row-reverse; }
.projekt__media {
  flex: 1 1 56%;
  position: relative;
  margin: 0;
  overflow: hidden;
}
.projekt__media img {
  width: 100%;
  display: block;
  background: var(--bg-soft);
  transition: transform 0.6s ease;
}
.projekt:hover .projekt__media img { transform: scale(1.03); }
.projekt__info { flex: 1 1 44%; }
.projekt__index {
  font-weight: 400;
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: 0.18em;
  color: var(--text);
  margin-bottom: 0.5em;
}
.projekt__meta {
  font-weight: 300;
  font-size: clamp(0.85rem, 1.8vw, 1rem);
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
@media (max-width: 760px) {
  .projekt,
  .projekt:nth-child(even) {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .projekt__media,
  .projekt__info { flex-basis: auto; }
}

/* --- Lightbox (zvětšení fotky + listování v projektu) --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(15, 15, 15, 0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox__img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  display: block;
}
.lightbox__close {
  position: absolute;
  top: 0.8rem;
  right: 1.2rem;
  background: none;
  border: 0;
  color: #fff;
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: #fff;
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.5rem 1rem;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.lightbox__nav:hover { opacity: 1; }
.lightbox__prev { left: 0.3rem; }
.lightbox__next { right: 0.3rem; }
.lightbox__counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  opacity: 0.8;
}

/* --- Hamburger --- */
.menu-toggle {
  position: relative;
  z-index: 3;
  width: 34px;
  height: 28px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--over);
  box-shadow: 0 1px 6px rgba(0,0,0,0.35);
}

/* --- Menu (boční panel zprava) --- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(15, 15, 15, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}
.menu.open { opacity: 1; visibility: visible; }
.menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: clamp(260px, 78vw, 320px);
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 5vw, 2.4rem);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
.menu.open .menu__panel { transform: translateX(0); }
.menu__close {
  align-self: flex-end;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 2rem;
  line-height: 1;
  color: var(--text);
}
.menu__list { list-style: none; margin-top: clamp(1.5rem, 7vh, 3.5rem); }
.menu__list li { margin: 0.75em 0; }
.menu__list a {
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(0.9rem, 2.5vw, 1.05rem);
  letter-spacing: 0.16em;
  color: var(--text);
  transition: opacity 0.2s ease;
}
.menu__list a:hover { opacity: 0.5; }
.menu__contact {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.menu__contact a { transition: color 0.2s ease; }
.menu__contact a:hover { color: var(--text); }

body.menu-open { overflow: hidden; }

/* --- Sekce: Řemeslo / Kontakt --- */
.section-title {
  font-weight: 400;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  letter-spacing: 0.02em;
  margin-bottom: 0.6em;
}
.about,
.contact-section {
  padding: clamp(4rem, 14vh, 9rem) var(--space);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.about { background: var(--bg-soft); }
.about__text {
  font-weight: 300;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: var(--text);
  max-width: 46ch;
  line-height: 1.75;
}
.about__text p { margin: 0 0 1.1em; }
.about__text p:last-child { margin-bottom: 0; }

/* --- Proces (5 kroků) --- */
.proces {
  padding: clamp(4rem, 14vh, 9rem) var(--space);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.proces__intro {
  font-weight: 300;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  line-height: 1.6;
  color: var(--text);
  max-width: 42ch;
  text-align: center;
  margin-bottom: clamp(2.5rem, 7vh, 5rem);
}
.proces__steps {
  list-style: none;
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: clamp(2.2rem, 5vh, 3.5rem);
}
.step { display: flex; gap: clamp(1rem, 3vw, 2.2rem); }
.step__num {
  flex: 0 0 auto;
  min-width: 1.4em;
  font-weight: 300;
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  line-height: 1.15;
  color: var(--text-muted);
}
.step__title {
  font-weight: 400;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  margin-bottom: 0.45em;
}
.step__text {
  font-weight: 300;
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  line-height: 1.7;
  color: var(--text);
}
.contact-section__line {
  font-weight: 300;
  font-size: clamp(1.3rem, 4vw, 2.2rem);
  margin-bottom: 1.2em;
}
.contact-section__people {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.6rem, 8vw, 4.5rem);
}
.contact-person {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  font-weight: 300;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.contact-person__name { color: var(--text); }
.contact-person a { transition: opacity 0.2s ease; }
.contact-person a:hover { opacity: 0.55; }

/* --- Patička --- */
.footer {
  background: var(--bg-soft);
  padding: clamp(2.5rem, 7vh, 4.5rem) var(--space);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.2rem, 3vh, 2rem);
  text-align: center;
}
.footer__logo {
  height: clamp(58px, 7.5vw, 84px);
  width: auto;
  display: block;
  opacity: 0.9;
}
.footer__legal {
  font-weight: 300;
  font-size: clamp(0.78rem, 1.6vw, 0.9rem);
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 60ch;
}
/* logo + údaje firmy přesunuté do sekce Kontakt */
.contact-section .contact-section__people { margin-top: clamp(1.5rem, 4vh, 2.5rem); }
.contact-section .footer__logo { margin-top: clamp(4.5rem, 10vh, 7rem); }
.contact-section .footer__legal { margin-top: 1.8rem; }

/* --- Dotace (povinná publicita EU) — decentně --- */
.dotace {
  background: var(--bg-soft);
  padding: clamp(2rem, 5vh, 3.5rem) var(--space);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.dotace__text {
  font-weight: 300;
  font-size: clamp(0.72rem, 1.4vw, 0.82rem);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  max-width: 64ch;
  text-align: center;
}
.dotace__text a { color: var(--text-muted); text-decoration: underline; }
.dotace__text a:hover { color: var(--text); }
.dotace__loga {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
}