/* =====================================================================
   home.css — Trang chủ DODO
   ===================================================================== */

/* ---------- HERO ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: clamp(520px, 74vh, 760px);
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
  padding: clamp(60px, 9vw, 140px) var(--gutter) clamp(96px, 9vw, 140px);
}
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.1) saturate(1.02); }
.hero::after {            /* lớp phủ nhẹ để chữ nổi, giữ ảnh sáng */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,28,22,.20) 0%, rgba(0,28,22,.30) 55%, rgba(0,28,22,.5) 100%);
}
.hero__title {
  font-size: var(--fs-hero); color: var(--cream);
  text-transform: uppercase; line-height: 1; letter-spacing: .01em;
  text-shadow: 0 2px 20px rgba(0,20,15,.4);
}
.hero__subtitle { margin-top: clamp(14px, 1.4vw, 22px); font-size: var(--fs-lead); color: var(--cream); text-shadow: 0 1px 12px rgba(0,20,15,.5); }
.hero__cta { margin-top: clamp(22px, 2.4vw, 36px); display: flex; justify-content: center; }
.hero__cta .btn { min-width: 180px; }
.hero__welcome {
  position: absolute;
  left: calc((100% - min(var(--content), var(--maxw))) / 2);
  bottom: clamp(28px, 3.4vw, 52px);
  max-width: 46ch; text-align: left; font-size: var(--fs-lead); color: var(--cream);
  line-height: 1.45; text-shadow: 0 1px 12px rgba(0,20,15,.6);
}

/* ---------- O NÁS ---------- */
.about {
  position: relative; isolation: isolate;
  display: grid; place-items: center;
  padding: clamp(40px, 6vw, 96px) var(--gutter);
  min-height: clamp(360px, 30vw, 500px);
}
.about__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.about__bg img { width: 100%; height: 100%; object-fit: cover; }
.about::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0,38,31,.35); }
.about__card {
  width: min(960px, 100%);
  background: var(--green-panel); backdrop-filter: blur(14px);
  text-align: center;
  padding: clamp(36px, 4.4vw, 84px) clamp(24px, 5vw, 110px);
  display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 2vw, 30px);
}
.about__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1); text-transform: uppercase; }
.about__text { font-size: var(--fs-lead); max-width: 46ch; }

/* ---------- PREČO / Features ---------- */
.features { padding-block: var(--section-y); }
.features__title { margin-bottom: clamp(40px, 4.5vw, 84px); }
.features__grid {
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-top: clamp(36px, 4vw, 64px);
}
.feature {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 22px; padding-inline: clamp(14px, 2vw, 40px);
}
.feature + .feature::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--line);
}
.feature__icon { height: clamp(82px, 7vw, 127px); display: grid; place-items: center; }
.feature__icon img { height: 100%; width: auto; }
.feature__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); white-space: nowrap; }
.feature__text { font-size: var(--fs-16); max-width: 30ch; }

/* ---------- MENU (tabs + carousel) ---------- */
.menu { position: relative; isolation: isolate; padding-block: var(--section-y); overflow: hidden; }
.menu__bg { position: absolute; inset: 0; z-index: -2; }
.menu__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(14px); transform: scale(1.06); }
.menu::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0,38,31,.78); }
.menu__title { margin-bottom: clamp(26px, 2.6vw, 40px); }

.menu__tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-bottom: clamp(34px, 3.6vw, 56px);
}
.menu__carousel { display: flex; align-items: stretch; gap: clamp(16px, 1.6vw, 24px); }
.menu__track {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 24px);
}
.carousel-arrow {
  flex: none; align-self: center;
  width: 56px; height: 56px; background: var(--cream);
  display: grid; place-items: center;
  border: 1px solid var(--cream);
  transition: background .2s var(--ease);
}
.carousel-arrow:hover { background: var(--gold-hover); }
.carousel-arrow img { width: 28px; }
.carousel-arrow--next img { transform: rotate(180deg); }
.carousel-arrow[disabled] { opacity: .4; cursor: default; }

.menu__more { display: flex; justify-content: center; margin-top: clamp(34px, 3.6vw, 56px); }
.menu__more .btn { min-width: 206px; }

/* ---------- GALLÉRIA ---------- */
.gallery { padding-block: var(--section-y); }
.gallery__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: clamp(34px, 3.6vw, 56px);
}
.gallery__heading { display: flex; flex-direction: column; gap: 16px; }
.gallery__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1); text-transform: uppercase; }
.gallery__lead { font-size: var(--fs-lead); max-width: 46ch; }
.gallery__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, 42vw, 510px);
  gap: clamp(16px, 1.6vw, 24px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 4px; scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track figure { scroll-snap-align: start; }
.gallery__track img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.gallery__controls { display: flex; align-items: center; gap: 24px; margin-top: clamp(24px, 2.4vw, 40px); }
.gallery__progress { flex: 1; height: 3px; background: var(--cream-20); position: relative; }
.gallery__progress span { position: absolute; left: 0; top: 0; height: 100%; width: 25%; background: var(--cream-80); transition: left .25s var(--ease), width .25s var(--ease); }
.gallery__arrows { display: flex; gap: 8px; }

/* ---------- REZERVUJTE ---------- */
.reserve {
  position: relative; isolation: isolate;
  display: grid; place-items: center;
  padding: clamp(48px, 6vw, 110px) var(--gutter);
}
.reserve__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.reserve__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(16px); transform: scale(1.08); }
.reserve::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0,38,31,.45); }
.reserve__card {
  width: min(760px, 100%);
  background: var(--cream); color: var(--ink-dark);
  border: 2px solid var(--cream);
  padding: 8px;
}
.reserve__inner {
  border: 1px solid rgba(0,50,42,.35);
  text-align: center;
  padding: clamp(34px, 4vw, 64px) clamp(24px, 4vw, 72px);
  display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2vw, 28px);
}
.reserve__sign { width: clamp(140px, 14vw, 210px); }
.reserve__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1); text-transform: uppercase; }
.reserve__text { font-size: var(--fs-lead); max-width: 42ch; }
.reserve__card .btn--dark { min-width: 316px; }

/* ---------- MAP ---------- */
.map { padding-block: clamp(48px, 6vw, 96px); }
.map__frame { overflow: hidden; }
.map__frame img { width: 100%; height: clamp(320px, 38vw, 720px); object-fit: cover; }

/* ---------- KONTAKTUJTE NÁS ---------- */
.contact-heading { padding-block: clamp(24px, 3vw, 48px) clamp(8px, 2vw, 32px); }
.contact-heading h2 { font-size: var(--fs-h1); }

/* ===================== Responsive ===================== */
@media (max-width: 1024px) {
  .features__grid { grid-template-columns: repeat(2, 1fr); gap: 48px 0; }
  .feature:nth-child(odd)::before { display: none; }
  .menu__track { grid-template-columns: repeat(2, 1fr); }
  .menu__track .dish:nth-child(3) { display: none; }
}

@media (max-width: 768px) {
  .hero__welcome { position: static; margin-top: 40px; max-width: none; text-align: center; }
  .hero { justify-content: flex-end; }
  .menu__carousel { gap: 8px; }
  .carousel-arrow { width: 46px; height: 46px; }
  .menu__track { grid-template-columns: 1fr; }
  .menu__track .dish:nth-child(2),
  .menu__track .dish:nth-child(3) { display: none; }
  .gallery__head { flex-direction: column; align-items: stretch; }
}

@media (max-width: 560px) {
  .features__grid { grid-template-columns: 1fr; gap: 40px; }
  .feature::before { display: none !important; }
  .feature__title { white-space: normal; }
  .menu__tabs { gap: 8px; }
  .reserve__card .btn--dark { min-width: 0; width: 100%; }
}