/* ==========================================================================
   Ukázkový web — Kavárna Na Rohu
   Vlastní paleta i písma: je to *vygenerovaný web*, ne aplikace Wevo.
   ========================================================================== */

/* Web běží skoro pořád v rámu náhledu (v okně prohlížeče i v telefonu) a pruh
   posuvníku tam vypadá jako závada přilepená k rámečku. Rolování zůstává,
   mizí jen ta čárka. */
/* Odkazy v menu vedou na kotvy sekcí. Bez tohohle stránka po kliknutí
   skočí a člověk ztratí, kde v ní vlastně je — plynulý posun mu to ukáže.
   Při systémovém „omezit pohyb" se skok vrací. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html { scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }

:root {
  --cream: #FBF5EC;
  --cream-2: #F3E8D8;
  --ink: #241A12;
  --muted: #7C6B58;
  --acc: #B4622A;
  --acc-soft: #F2B583;
  --line: #E6D8C4;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Outfit", system-ui, -apple-system, sans-serif;

  --pad: 20px;
}

@media (min-width: 720px) { :root { --pad: 40px; } }
@media (min-width: 1100px) { :root { --pad: 56px; } }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; line-height: 1.12; }
p, ul, dl { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

.h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.5rem);
  letter-spacing: -.02em;
}
.kicker {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acc);
  margin-bottom: 10px;
}
.link { font-weight: 600; font-size: .875rem; white-space: nowrap; }
.link--accent { color: var(--acc); }
.note { margin-top: 26px; color: var(--muted); font-size: .8125rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn--cream { background: var(--cream); color: var(--ink); }
.btn--outline { border: 1px solid rgba(251, 245, 236, .55); color: var(--cream); }

/* --- ÚVOD ----------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 430px;
  padding-bottom: 60px;
  color: var(--cream);
  background:
    linear-gradient(180deg, rgba(36,26,18,.95) 0%, rgba(36,26,18,.76) 42%, rgba(36,26,18,.4) 70%, rgba(36,26,18,0) 100%),
    url("../img/kavarna-hero.png") center / cover no-repeat;
}

@media (min-width: 900px) {
  .hero {
    /* space-between rozhazoval zbylou vysku mezi navigaci a text — min-height
       proto jen tolik, aby obsah nikdy nerozhodoval o mezere */
    min-height: 440px;
    padding-bottom: 60px;
    background:
      linear-gradient(90deg, rgba(36,26,18,.95) 0%, rgba(36,26,18,.7) 38%, rgba(36,26,18,0) 82%),
      linear-gradient(180deg, rgba(36,26,18,.4) 0%, rgba(36,26,18,0) 26%),
      url("../img/kavarna-hero.png") center / cover no-repeat;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px var(--pad);
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo__mark {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
}
.logo__mark svg { width: 18px; height: 18px; }
.logo__txt b {
  display: block;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.15;
}
.logo__txt small {
  display: block;
  font-size: .5rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(251, 245, 236, .65);
}

.nav__links { display: none; gap: 26px; margin-inline: auto; font-size: .875rem; }
.nav__links a { color: rgba(251, 245, 236, .85); }
.nav__links a:hover { color: var(--cream); }

.nav__right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.nav__tel { display: none; font-weight: 700; font-size: .875rem; }
.nav__burger {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 0; background: none; color: var(--cream); cursor: pointer;
}
.nav__burger svg { width: 22px; height: 22px; }

/* Úzký displej: tlačítko na rezervaci se do hlavičky nevejde a je i níž
   v obsahu; adresa pod značkou se musí vejít na jeden řádek. */
@media (max-width: 599px) {
  .nav__right .btn { display: none; }
  .logo, .logo__txt { min-width: 0; }
  .logo__txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

@media (min-width: 900px) {
  .nav { padding-block: 24px; }
  .nav__links { display: flex; }
  .nav__tel { display: block; }
  .nav__burger { display: none; }
  .nav__right { margin-left: 0; }
}

/* --- mobilní menu ---------------------------------------------------------
   Burger byl dosud jenom ikona. Odkazy z lišty se pod 900 px schovají,
   takže se po klepnutí rozbalí pod ní jako panel; otevírá a zavírá je
   js/menu.js třídou .je-otevrene. Bez skriptu zůstane lišta jako dřív. */
@media (max-width: 899px) {
  .nav { position: relative; }
  .nav__burger { flex: none; width: 44px; height: 44px; }
  .nav.je-otevrene .nav__links {
    position: absolute;
    top: calc(100% - 2px);
    left: var(--pad);
    right: var(--pad);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-inline: 0;
    padding: 4px 14px;
    border: 1px solid rgba(251, 245, 236, .16);
    border-radius: 16px;
    background: var(--ink);
    box-shadow: 0 18px 44px rgba(10, 7, 4, .5);
  }
  .nav.je-otevrene .nav__links li + li { border-top: 1px solid rgba(251, 245, 236, .1); }
  .nav.je-otevrene .nav__links a { display: flex; align-items: center; min-height: 46px; color: var(--cream); }
}

/* Na rozdil od ostatnich ukazek nema hero vlastni horni odsazeni — nese ho
   az obsahovy blok, jinak by se posunula i navigace. 60 px jako jinde. */
.hero__body { padding-inline: var(--pad); padding-top: 60px; max-width: 720px; }
.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 16px;
  border: 1px solid rgba(251, 245, 236, .35);
  border-radius: 999px;
  background: rgba(251, 245, 236, .12);
  font-size: .75rem;
}
.hero__chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc-soft); }
.hero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 1.2rem + 4vw, 4.125rem);
  letter-spacing: -.03em;
  line-height: 1.08;
}
.hero__title em { font-style: italic; color: var(--acc-soft); }
.hero__text {
  max-width: 34em;
  margin-top: 14px;
  color: rgba(251, 245, 236, .82);
  font-size: clamp(.9375rem, .9rem + .3vw, 1.0625rem);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* --- PROČ K NÁM ----------------------------------------------------------- */

.why {
  display: grid;
  gap: 24px;
  padding: 32px var(--pad);
  border-bottom: 1px solid var(--line);
}
.why__ico { width: 22px; height: 22px; color: var(--acc); margin-bottom: 10px; }
.why__item h3 { font-family: var(--serif); font-size: 1.125rem; font-weight: 600; margin-bottom: 4px; }
.why__item p { color: var(--muted); font-size: .8125rem; }

@media (min-width: 760px) {
  .why { grid-template-columns: repeat(3, 1fr); gap: 0; padding-block: 40px; }
  .why__item + .why__item { padding-left: 36px; border-left: 1px solid var(--line); }
  .why__item:not(:last-child) { padding-right: 36px; }
}

/* --- SEKCE ---------------------------------------------------------------- */

.sec { padding: 52px var(--pad); }
@media (min-width: 900px) { .sec { padding-block: 84px; } }

.sec__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
}

/* --- NABÍDKA -------------------------------------------------------------- */

.menu { display: grid; gap: 34px; }
@media (min-width: 760px) { .menu { grid-template-columns: 1fr 1fr; gap: 64px; } }

.menu__cat {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--acc);
  margin-bottom: 4px;
}
.menu li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.menu li b { font-family: var(--serif); font-weight: 600; color: var(--muted); white-space: nowrap; }

/* --- O NÁS ---------------------------------------------------------------- */

.about { display: grid; background: var(--cream-2); }
.about__media img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
.about__text { padding: 40px var(--pad); display: grid; gap: 16px; align-content: center; }
.about__text p { color: var(--muted); line-height: 1.75; }
.sign { display: flex; align-items: center; gap: 10px; color: var(--ink) !important; font-size: .8125rem; font-weight: 600; }
.sign span { width: 28px; height: 1px; background: var(--muted); }

@media (min-width: 900px) {
  .about { grid-template-columns: 440px 1fr; }
  .about__text { padding: 64px 56px; }
}

/* --- OTEVÍRACÍ DOBA + KONTAKT --------------------------------------------- */

.info {
  display: grid;
  gap: 28px;
  padding: 40px var(--pad);
  background: var(--ink);
  color: var(--cream);
}
@media (min-width: 900px) { .info { grid-template-columns: repeat(3, 1fr); gap: 56px; padding-block: 64px; } }

.info__h {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acc-soft);
  margin-bottom: 14px;
}
.hours div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: rgba(251, 245, 236, .7);
  font-size: .875rem;
}
.hours .is-today { color: var(--cream); font-weight: 600; }
.hours dd { margin: 0; font-family: var(--serif); font-weight: 600; }
.info__addr { line-height: 1.8; margin-bottom: 10px; }
.info__mail { font-size: .9375rem; }
.info__tel { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; margin-top: 4px; }

/* --- GALERIE -------------------------------------------------------------- */

/* Mozaika místo tří sloupců vedle sebe. Velká dlaždice nese celkový dojem,
   malé detaily — tři stejně široké fotky vedle sebe vypadaly jako sklad.
   Pořadí v HTML není libovolné: 1. fotka musí být na výšku, 2. na šířku. */
.gal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: clamp(104px, 26vw, 140px);
  gap: 10px;
  margin-top: 30px;
}
.gal > *:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gal > *:nth-child(2) { grid-column: span 2; }
.gal > *:nth-child(3),
.gal > *:nth-child(4) { grid-column: span 1; }

@media (min-width: 760px) {
  .gal {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: clamp(126px, 12vw, 168px);
    gap: 16px;
    margin-top: 34px;
  }
  .gal > *:nth-child(1) { grid-column: 1 / 7;  grid-row: 1 / 4; }
  .gal > *:nth-child(2) { grid-column: 7 / 13; grid-row: 1 / 3; }
  .gal > *:nth-child(3) { grid-column: 7 / 10; grid-row: 3; }
  .gal > *:nth-child(4) { grid-column: 10 / 13; grid-row: 3; }
}

/* Rám musí ořezávat — bez toho vyleze přiblížená fotka přes sousedy. */
.gal > * { overflow: hidden; border-radius: 0; }
.gal > *:nth-child(1) { border-radius: 0; }
.gal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.gal > *:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .gal img { transition: none; }
  .gal > *:hover img { transform: none; }
}

/* --- RECENZE -------------------------------------------------------------- */

.quote {
  padding: 56px var(--pad);
  background: var(--cream-2);
  text-align: center;
}
.quote__mark { width: 30px; height: 30px; color: var(--acc); margin: 0 auto 16px; }
.quote blockquote {
  margin: 0 auto;
  max-width: 26em;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.25rem, .9rem + 1.5vw, 1.875rem);
  line-height: 1.35;
}
.quote__who { margin-top: 14px; color: var(--muted); font-size: .8125rem; font-weight: 600; }

/* --- PATIČKA -------------------------------------------------------------- */

.foot {
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 30px var(--pad);
  border-top: 1px solid var(--line);
  text-align: center;
}
.foot__brand { font-family: var(--serif); font-size: 1rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; font-size: .8125rem; color: var(--muted); }
.foot__copy { font-size: .8125rem; color: var(--muted); }

@media (min-width: 760px) {
  .foot { grid-template-columns: auto 1fr auto; align-items: center; justify-items: start; }
  .foot__links { justify-content: center; }
  .foot__copy { justify-self: end; }
}