/* Production responsive layer for the project detail pages. */
.detail-page { overflow-x: hidden; }

/* Odkaz „Zpět na výpis" leží nad hero nadpisem, který jinak polykal kliknutí. */
.detail-breadcrumbs {
  z-index: 5;
  pointer-events: none;
}

.detail-breadcrumbs a {
  display: inline-flex;
  align-items: center;
  padding: 6px 2px;
  pointer-events: auto;
}

/* Telefon a e-mail v kontaktní sekci — stejný panel jako na homepage. */
.detail-contact-copy .direct-contact {
  max-width: 460px;
  margin: 0 0 22px;
}

@supports (overflow: clip) {
  .detail-page { overflow-x: clip; }
}

.detail-page .detail-header,
.gallery-stream-wide > span,
.gallery-stream-more > span {
  -webkit-backdrop-filter: blur(12px) saturate(115%);
}

.gallery-stream button:focus-visible,
.gallery-thumbnails button:focus-visible {
  outline: 3px solid var(--detail-lime);
  outline-offset: 3px;
}

.detail-form input:not([type="checkbox"]):focus-visible,
.detail-form textarea:focus-visible,
.detail-project-modal input:focus-visible {
  border-color: var(--green);
  outline: 3px solid rgba(0, 182, 122, .18);
  outline-offset: 1px;
}

.gallery-lightbox {
  width: min(1320px, calc(100vw - 32px));
  height: min(880px, calc(100vh - 32px));
  max-height: calc(100vh - 32px);
}

@supports (height: 100dvh) {
  .gallery-lightbox {
    height: min(880px, calc(100dvh - 32px));
    max-height: calc(100dvh - 32px);
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .detail-page .detail-header { background: rgba(255, 255, 255, .98); }
  .detail-gallery-button { background: rgba(10, 28, 45, .94); }
  .gallery-stream-wide > span,
  .gallery-stream-more > span { background: rgba(255, 255, 255, .98); }
}

@media (hover: none) {
  .gallery-stream button:hover img { filter: none; transform: none; }
  .gallery-thumbnails button:hover { opacity: .48; }
  .gallery-thumbnails button.is-active { opacity: 1; }
}

@media (max-width: 1100px) {
  .detail-hero { min-height: 680px; }
  .project-overview-layout { grid-template-columns: minmax(0, 1fr) 330px; }
  .project-sidebar { padding: 26px; }
  .detail-benefit-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .detail-hero { min-height: 700px; }

  .detail-hero::before {
    background:
      linear-gradient(90deg, rgba(4, 20, 34, .9) 0%, rgba(4, 20, 34, .68) 62%, rgba(4, 20, 34, .26) 100%),
      linear-gradient(0deg, rgba(4, 20, 34, .58), transparent 58%);
  }

  .detail-hero-heading {
    align-items: center;
    padding-block: 82px 70px;
  }

  .project-overview-layout,
  .detail-calculator-layout,
  .detail-contact-layout { grid-template-columns: 1fr; }

  .project-sidebar {
    position: static;
    width: 100%;
  }

  .detail-calculator-copy,
  .detail-contact-copy { max-width: 680px; }

  .ownership-detail-heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 700px) {
  .detail-hero {
    min-height: 660px;
    background: #0b2032;
  }

  .detail-hero-heading { padding-block: 76px 58px; }
  .detail-hero-eyebrow { margin-bottom: 30px; }
  .detail-hero-actions { align-items: stretch; flex-direction: column; }
  .detail-hero-actions .button { width: 100%; }

  .overview-copy { border-radius: 22px; }
  .gallery-stream { gap: 8px; }
  .gallery-stream-pair { gap: 8px; }
  .gallery-stream button { border-radius: 18px; }

  .detail-benefit-panel { grid-template-columns: 1fr; }
  .detail-benefit-panel .benefit-item { min-height: 0; }

  .ownership-detail .ownership-timeline > li {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    padding-inline: 0;
  }

  .ownership-detail .ownership-timeline > li > span {
    width: 48px;
    height: 48px;
  }

  .ownership-detail .ownership-timeline > li > div {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 18px;
  }

  .ownership-timeline::before,
  .ownership-timeline::after { left: 23px; }

  .detail-form > div:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .detail-form > div:first-child strong { text-align: left; }

  .gallery-lightbox {
    width: calc(100vw - 12px);
    height: calc(100vh - 12px);
    max-height: calc(100vh - 12px);
    border-radius: 18px;
  }

  @supports (height: 100dvh) {
    .gallery-lightbox {
      height: calc(100dvh - 12px);
      max-height: calc(100dvh - 12px);
    }
  }
}

@media (max-width: 420px) {
  .detail-hero { min-height: 630px; }
  .detail-hero-copy h1 { font-size: clamp(2.55rem, 12vw, 3.15rem); }
  .detail-hero-media > img { object-position: 57% center; }
  .sidebar-grid { grid-template-columns: 1fr; }
  .sidebar-grid > div,
  .sidebar-grid > div:nth-child(even) {
    min-height: 0;
    padding: 16px 0;
    border-left: 0;
  }
  .detail-calculator,
  .detail-form { padding-inline: 18px; }
}