/* =============================================================
   main.css – Nabruseno.cz
   Vlastní styly extrahované z původního inline <style> bloku
   + utility třídy nahrazující původní inline style="..." atributy
   (kvůli kompatibilitě se Content-Security-Policy bez 'unsafe-inline'
   v style-src-attr).
   ============================================================= */

/* --- Pozadí mřížkový vzor --- */
.bg-grid-pattern {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* --- Globální chování --- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
section[id] { scroll-margin-top: 80px; }
@media (min-width: 768px) {
  section[id] { scroll-margin-top: 96px; }
}

/* --- Focus ring --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #d32f2f;
  outline-offset: 2px;
}

.brushed-metal {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  position: relative;
}

/* --- Navigační odkazy --- */
.nav-link {
  color: #a3a3a3;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
.nav-link:hover { color: #ffffff; }
.nav-link[aria-current="true"] {
  color: #d32f2f;
  border-bottom-color: #d32f2f;
}

.nav-link-mobile {
  color: #a3a3a3;
  transition: color 150ms ease, background-color 150ms ease;
}
.nav-link-mobile:hover { color: #ef4444; background-color: #262626; }
.nav-link-mobile[aria-current="true"] {
  background-color: #d32f2f;
  color: #ffffff;
}

/* --- Skip link (přístupnost) --- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: #d32f2f;
  color: #fff;
  padding: 12px 16px;
  z-index: 100;
  font-family: "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.skip-link:focus { top: 0; }

/* --- Mobilní drawer + backdrop --- */
.mobile-drawer {
  transform: translateX(-100%);
  transition: transform 250ms ease;
}
.mobile-drawer.open { transform: translateX(0); }

.mobile-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.mobile-backdrop.open { opacity: 1; pointer-events: auto; }

/* --- Reviews carousel --- */
#reviews-track { will-change: transform; }
.review-card { flex-shrink: 0; width: 100%; } /* JS přebíjí na nastavení */
.reviews-dot {
  width: 8px; height: 8px;
  background: #444;
  border: none;
  cursor: pointer;
  transition: background 150ms ease, width 150ms ease;
}
.reviews-dot[aria-selected="true"] { background: #d32f2f; width: 24px; }

/* --- Review modal --- */
#review-modal { opacity: 0; transition: opacity 200ms ease; }
#review-modal [data-modal-inner] {
  transform: translateY(16px);
  transition: transform 200ms ease;
}
#review-modal.modal-open { opacity: 1; }
#review-modal.modal-open [data-modal-inner] { transform: translateY(0); }

/* --- Privacy modal --- */
#privacy-modal { opacity: 0; transition: opacity 200ms ease; }
#privacy-modal [data-modal-inner] {
  transform: translateY(16px);
  transition: transform 200ms ease;
}
#privacy-modal.modal-open { opacity: 1; }
#privacy-modal.modal-open [data-modal-inner] { transform: translateY(0); }

/* --- Thanks modal (poděkování po odeslání) --- */
#thanks-modal { opacity: 0; transition: opacity 200ms ease; }
#thanks-modal [data-modal-inner] {
  transform: translateY(16px) scale(0.96);
  transition: transform 250ms ease;
}
#thanks-modal.modal-open { opacity: 1; }
#thanks-modal.modal-open [data-modal-inner] { transform: translateY(0) scale(1); }

/* --- Honeypot pole --- */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* --- Cookie banner --- */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: #0e0e0e;
  border-top: 2px solid #d32f2f;
  transform: translateY(100%);
  transition: transform 300ms ease;
}
.cookie-banner.show { transform: translateY(0); }

/* =============================================================
   Utility třídy nahrazující původní inline style="..." atributy
   ============================================================= */

/* Material Symbols – fill / no-fill varianta */
.icon-fill { font-variation-settings: 'FILL' 1; }
.icon-no-fill { font-variation-settings: 'FILL' 0; }

/* Velikosti ikon */
.icon-size-18 { font-size: 18px; }
.icon-size-36 { font-size: 36px; }
.icon-size-72 { font-size: 72px; }

/* Hvězdičky v review modalu */
.review-star-btn { color: #555; }
.review-star-btn.is-active { color: #d32f2f; }

/* Header s tmavým overlay přes backdrop */
.header-overlay {
  background-image: linear-gradient(rgba(0,0,0,0.92), rgba(0,0,0,0.92));
}

/* Hero pozadí (obrázek s mask gradientem) */
.hero-bg-image {
  background-image: url('../../img/nabruseno_hero-background_screen.png');
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent, black);
          mask-image: linear-gradient(to right, transparent, black);
}

/* Varovná hláška uvnitř děkovacího modalu (vkládáno z JS) */
.warning-text {
  color: #e4beba;
  font-size: 13px;
}

/* --- Gallery grid + lightbox --- */
.gallery-item img { display: block; }
.gallery-item:focus-visible { outline: 2px solid #d32f2f; outline-offset: 2px; }

/* Lightbox – nahrazuje původní inline style="..." atributy
   (kvůli CSP style-src-attr 'none'). */
.lightbox {
  background: #000;
  z-index: 9999;
}
.lightbox-btn-close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.lightbox-btn-nav {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.lightbox-figure {
  max-width: 90vw;
  padding: 0 4rem;
}
.lightbox-img {
  max-height: 85vh;
  max-width: 100%;
  margin: 0 auto;
  display: block;
  object-fit: contain;
}
.lightbox-caption {
  color: rgba(255, 255, 255, 0.6);
}

/* --- Landscape mobil: komprimovaná navigace (768–900px) --- */
@media (max-width: 900px) and (orientation: landscape) {
  header > div.flex {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }
  nav[aria-label="Hlavní navigace"] {
    gap: 0.3rem;
    font-size: 0.6rem;
  }
  nav[aria-label="Hlavní navigace"] .nav-link {
    white-space: nowrap;
    padding-bottom: 2px;
  }
  #nav-cta-desktop {
    padding: 3px 8px;
    font-size: 0.55rem;
    white-space: nowrap;
  }
}

/* --- Privacy modal – tisk / PDF export --- */
@media print {
  body > *:not(#privacy-modal) { display: none !important; }
  #privacy-modal {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    background: white !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }
  #privacy-modal [data-modal-inner] {
    transform: none !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: white !important;
    border: none !important;
  }
  #privacy-pdf-btn,
  #privacy-modal-close { display: none !important; }
  #privacy-modal [data-modal-inner] * { color: #111 !important; }
  #privacy-modal [data-modal-inner] a,
  #privacy-modal [data-modal-inner] h4 { color: #b71c1c !important; }
  #privacy-modal [data-modal-inner] [class*="border-"] { border-color: #ddd !important; }
  #privacy-modal [data-modal-inner] [class*="bg-"] { background: transparent !important; }
}

/* =============================================================
   Doplnění spacing utility tříd (chybí v precompiled tailwind.css)
   ============================================================= */
.mt-12 { margin-top: 3rem; }
.mt-14 { margin-top: 3.5rem; }
.mt-16 { margin-top: 4rem; }
.mt-20 { margin-top: 5rem; }
.mt-24 { margin-top: 6rem; }
.mt-28 { margin-top: 7rem; }
.mt-32 { margin-top: 8rem; }

.mb-20 { margin-bottom: 5rem; }
.mb-24 { margin-bottom: 6rem; }

.pt-8  { padding-top: 2rem; }
.pt-10 { padding-top: 2.5rem; }
.pt-14 { padding-top: 3.5rem; }
.pt-16 { padding-top: 4rem; }
.pt-24 { padding-top: 6rem; }
.pt-28 { padding-top: 7rem; }
.pt-32 { padding-top: 8rem; }

.pb-10 { padding-bottom: 2.5rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-20 { padding-bottom: 5rem; }
.pb-32 { padding-bottom: 8rem; }

@media (min-width: 768px) {
  .md\:mt-12 { margin-top: 3rem; }
  .md\:mt-14 { margin-top: 3.5rem; }
  .md\:mt-16 { margin-top: 4rem; }
  .md\:mt-20 { margin-top: 5rem; }
  .md\:mt-24 { margin-top: 6rem; }
  .md\:mt-28 { margin-top: 7rem; }
  .md\:mt-32 { margin-top: 8rem; }
  .md\:pt-12 { padding-top: 3rem; }
  .md\:pt-16 { padding-top: 4rem; }
  .md\:pt-20 { padding-top: 5rem; }
  .md\:pt-24 { padding-top: 6rem; }
  .md\:pt-28 { padding-top: 7rem; }
  .md\:pt-32 { padding-top: 8rem; }
}