/* Production compatibility, accessibility and responsive layer. */
html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body { overflow-x: hidden; }

@supports (overflow: clip) {
  body { overflow-x: clip; }
}

button,
a,
input,
select,
textarea,
summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(194, 255, 8, .2);
}

button,
select { cursor: pointer; }

img { height: auto; }

[id] { scroll-margin-top: 92px; }

.site-header,
.project-status,
.project-use,
.project-units,
.yield-hud,
.button-hero-secondary {
  -webkit-backdrop-filter: blur(16px) saturate(120%);
}

/* Otevřené mobilní menu: filtr na headeru by z něj udělal containing block
   pro fixed panel menu (Safari/WebKit) — po dobu otevření ho vypneme. */
body.menu-open .site-header {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(246, 248, 246, .99);
}

/* Badge INVESTICE: starší media queries tlačily text pod tečku odznaku. */
@media (max-width: 900px) {
  .division { padding-left: 24px; }
}

/* Mezi 901–1040 px je desktopová navigace skrytá — zobrazíme hamburger. */
@media (min-width: 901px) and (max-width: 1040px) {
  .menu-toggle { display: block; margin-left: 18px; }
  .mobile-nav { inset: 80px 0 0; }
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
}

input[type="range"]::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: #dbe3df;
}

input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--green);
}

input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 5px solid var(--paper);
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 1px var(--green), 0 4px 12px rgba(0, 143, 97, .25);
}

select { color: var(--navy); background-color: var(--paper); }

.calc-contact-modal,
.gallery-lightbox {
  overscroll-behavior: contain;
}

/* Fallback pro prohlížeče bez podpory jednotek dvh. */
.calc-contact-modal { max-height: calc(100vh - 32px); }

@supports (height: 100dvh) {
  .calc-contact-modal { max-height: calc(100dvh - 32px); }
}

@media (max-width: 600px) {
  .calc-contact-modal { max-height: calc(100vh - 20px); }

  @supports (height: 100dvh) {
    .calc-contact-modal { max-height: calc(100dvh - 20px); }
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header { background: rgba(246, 248, 246, .98); }
  .button-hero-secondary { background: rgba(12, 29, 45, .94); }
  html.perspective-demo .yield-hud { background: rgba(8, 25, 40, .92); }
  .project-status,
  .project-use,
  .project-units { background: rgba(255, 255, 255, .98); }
}

@media (hover: none) {
  .project-card:hover {
    transform: none;
    box-shadow: 0 10px 34px rgba(36, 59, 90, .055);
  }

  .project-card:hover img { transform: none; }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Benefit karty na mobilu a tabletu — přepis staré řádkové verze z styles.css,
   která tlačila text do 38px sloupce. */
@media (max-width: 1040px) {
  .benefit-item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 56px auto;
    gap: 20px;
    min-height: 0;
    padding: 24px 22px 26px;
  }

  .benefit-icon { width: 56px; height: 56px; border-radius: 16px; }
  .benefit-icon svg { width: 26px; height: 26px; }

  .benefit-copy {
    grid-row: 2;
    grid-column: 1;
    padding-top: 16px;
  }
}

/* Vertikální layout modalů už od tabletu (do 600 px ho řeší styles.css). */
@media (min-width: 601px) and (max-width: 900px) {
  .calc-modal-panel { grid-template-columns: 1fr; min-height: 0; }
  .calc-modal-intro { padding: 50px 28px 30px; }
  .calc-modal-intro h2 { max-width: 520px; }
  .calc-modal-intro > p:not(.calc-modal-kicker) { max-width: 470px; margin: 20px 0 26px; }
  .calc-modal-summary { margin-top: 26px; }
  .calc-modal-form { justify-content: flex-start; gap: 16px; padding: 32px 28px 36px; }
}

html.hero-mode-static.perspective-demo .hero {
  background: #0b2032 url("assets/media/hero-investice-static.jpg") 58% center / cover no-repeat;
}

html.hero-mode-static.perspective-demo .hero-video,
html.hero-mode-static.perspective-demo .hero-video-backdrop,
html.hero-mode-static.perspective-demo .unit-track,
html.hero-mode-static.perspective-demo .yield-hud,
html.hero-mode-static.perspective-demo .video-toggle {
  display: none !important;
}

html.hero-mode-static.perspective-demo .hero-copy {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

/* Delší horizontální gradient v hero — tmavá část sahá kousek za polovinu. */
html.perspective-demo .hero-video-shade {
  background:
    linear-gradient(90deg, rgba(7, 23, 39, .94) 0%, rgba(7, 23, 39, .78) 30%, rgba(7, 23, 39, .34) 52%, rgba(7, 23, 39, .12) 66%, rgba(7, 23, 39, 0) 78%),
    linear-gradient(180deg, rgba(7, 23, 39, .05) 55%, rgba(7, 23, 39, .56) 100%);
}

@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
  html.perspective-demo .hero {
    height: 720px;
    min-height: 680px;
    background: #0b2032 url("assets/media/hero-investice-static.jpg") 58% center / cover no-repeat;
  }

  html.perspective-demo .hero-video,
  html.perspective-demo .hero-video-backdrop,
  html.perspective-demo .unit-track,
  html.perspective-demo .yield-hud,
  html.perspective-demo .video-toggle {
    display: none !important;
  }

  html.perspective-demo .hero-copy {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  html.perspective-demo .hero-video-shade {
    background:
      linear-gradient(90deg, rgba(7, 24, 39, .93) 0%, rgba(7, 24, 39, .78) 50%, rgba(7, 24, 39, .3) 78%, rgba(7, 24, 39, .12) 100%),
      linear-gradient(0deg, rgba(7, 24, 39, .38), transparent 62%);
  }
}

@media (max-width: 900px) {
  .benefit-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-grid { grid-template-columns: 1fr; }
  .contact-copy,
  .calculator-copy,
  .faq-copy { max-width: 680px; }
}

@media (max-width: 680px) {
  :root {
    --shell: calc(100% - 32px);
    --section-space-y: 56px;
  }

  .site-header,
  .header-inner { min-width: 0; }

  .mobile-nav {
    padding-right: max(24px, env(safe-area-inset-right));
    padding-bottom: max(26px, env(safe-area-inset-bottom));
    padding-left: max(24px, env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  html.perspective-demo .hero {
    height: 690px;
    min-height: 640px;
    background-position: 62% center;
  }

  html.perspective-demo .hero-copy {
    right: 16px;
    left: 16px;
  }

  .hero-actions .button { width: 100%; }
  .benefit-panel { grid-template-columns: 1fr; }

  .project-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .project-filters::-webkit-scrollbar { display: none; }
  .project-filters button { flex: 0 0 auto; scroll-snap-align: start; }

  .contact-form,
  .calculator,
  .calc-modal-intro,
  .calc-modal-form { min-width: 0; }

  .mobile-contact-bar {
    height: calc(58px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (max-width: 420px) {
  :root { --shell: calc(100% - 24px); }
  .brand img { width: 122px; }
  .division { font-size: .56rem; }
  html.perspective-demo .hero { height: 660px; min-height: 620px; }
  .hero h1 { font-size: clamp(2.55rem, 12vw, 3.15rem); }
  .project-card-featured .project-image,
  .project-image { height: 205px; }
  .calc-modal-intro,
  .calc-modal-form { padding-inline: 18px; }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1024px) {
  html.perspective-demo .hero { height: 620px; min-height: 620px; }
  html.perspective-demo .hero-copy { max-width: 610px; }
}