/* ===========================================
	   PAGES / ZÁMEK — hero + časová osa
	   =========================================== */


/* ===========================================================
   PAGE CSS GUARD (v52)
   Tento soubor NESMÍ definovat nový grid/card/form systém.
   Používej komponenty z /css/components:
   - .card-grid (+ modifikátory)
   - .info-card (+ varianty)
   - .chip-row/.chip
   - .form/.form-grid
   Page CSS je jen pro unikátní části stránky (hero, timeline, masonry, spacing).
   =========================================================== */

/* HERO (half) je stejného rytmu jako index/kavárna:
   fotka je “místo”, dlaždice pod ní jemně vykukuje (peek). */
#zamek-hero.parallax-hero {
  --hero-overlay: rgba(0, 0, 0, 0.44);
  --hero-bottom-fade: rgba(249, 244, 236, 0.10);
}

/* -------------------------------------------
   PHOTO ART DIRECTION + COLOR GRADE
   Warm Editorial for chateau page
   ------------------------------------------- */
.page-zamek {
  --zamek-photo-grade-base: saturate(0.9) contrast(1.04) brightness(1.02) sepia(0.09) hue-rotate(-5deg);
  --zamek-photo-grade-hero: saturate(0.82) contrast(1.1) brightness(0.93) sepia(0.14) hue-rotate(-6deg);
  --zamek-photo-grade-portal: saturate(0.84) contrast(1.08) brightness(0.96) sepia(0.12) hue-rotate(-5deg);
  --zamek-photo-grade-nature: saturate(0.9) contrast(1.06) brightness(1.01) sepia(0.08) hue-rotate(-4deg);
}

/* HERO (Zámek) override */
#zamek-hero .parallax-bg {
  /* primární obrázek: images/zamek-portal-1-top (výřez portálu)
     fallback: původní zamek-hero / zamecek */
  background-image: url("../../images/zamek-portal-1-top.jpg");
  background-image: image-set(url("../../images/zamek-portal-1-top.webp") type("image/webp"),
      url("../../images/zamek-portal-1-top.jpg") type("image/jpeg"),
      url("../../images/zamek-hero.webp") type("image/webp"),
      url("../../images/zamecek.webp") type("image/webp"),
      url("../../images/zamecek.jpg") type("image/jpeg"));
  background-position: center top;
  filter: var(--zamek-photo-grade-hero);
}

#zamek-hero .parallax-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(160deg,
      rgba(249, 240, 228, 0.16) 0%,
      rgba(217, 131, 87, 0.08) 52%,
      rgba(38, 23, 15, 0.2) 100%);
}

#zamek-hero .hero-overlay {
  background: linear-gradient(to bottom,
      rgba(30, 19, 13, 0.2) 0%,
      rgba(45, 29, 20, 0.32) 54%,
      rgba(34, 22, 15, 0.52) 100%);
}


/* -------------------------------------------
   PORTÁL – postupné odhalení při scrollu (3 řezy)
   Hero = 1/3 (top), v <main> jsou 2 parallax bloky (mid + bot)
   ------------------------------------------- */

/* Barva, do které fotka „mizí“ (napojení do stránky)
   - default: plná barva pozadí
   - moderní prohlížeče: lehce průhledná (méně „mlhy“) */
.portal-slice {
  --parallax-fade: var(--bg-body);
}

@supports (color: color-mix(in srgb, white, black)) {
  .portal-slice {
    --parallax-fade: color-mix(in srgb, var(--bg-body) 92%, transparent);
  }
}

/* výšky parallax bloků (aby to nebyl billboard) */
.portal-slice.parallax-section {
  height: clamp(360px, 56vh, 680px);
}

/* sjednocený jemný grading přes fotku (Pastel Luxury) */
.portal-slice {
  --portal-overlay: linear-gradient(to bottom,
      rgba(249, 240, 228, 0.08) 0%,
      rgba(43, 28, 20, 0.16) 54%,
      rgba(31, 20, 14, 0.24) 100%);
}

/* Jemnější přechod nahoře/dole jen pro portálové řezy
   (default v komponentě je 110px a působilo to „vypraně“) */
.portal-slice .parallax-section-inner::before,
.portal-slice .parallax-section-inner::after {
  height: clamp(70px, 10vh, 170px);
}

/* Na zámku zmenši i fade v HERO, aby fotka nepůsobila „nedodělaně“ */
#zamek-hero.parallax-hero::after {
  height: clamp(90px, 14vh, 190px);
}


/* mobile/tablet = scroll, desktop = fixed (bez JS) */
.portal-slice .parallax-section-inner {
  background-attachment: scroll;
  background-size: cover;
  background-repeat: no-repeat;
  filter: var(--zamek-photo-grade-portal);
}

@media (min-width: 1025px) {
  .portal-slice .parallax-section-inner {
    background-attachment: fixed;
  }
}

.portal-slice--mid .parallax-section-inner {
  background-image: var(--portal-overlay), image-set(url("../../images/zamek-portal-2-mid.webp") type("image/webp"),
      url("../../images/zamek-portal-2-mid.jpg") type("image/jpeg"),
      url("../../images/zamek-hero.webp") type("image/webp"),
      url("../../images/zamecek.webp") type("image/webp"),
      url("../../images/zamecek.jpg") type("image/jpeg"));
  background-position: center;
}

.portal-slice--bot .parallax-section-inner {
  background-image: var(--portal-overlay), image-set(url("../../images/zamek-portal-3-bot.webp") type("image/webp"),
      url("../../images/zamek-portal-3-bot.jpg") type("image/jpeg"),
      url("../../images/zamek-hero.webp") type("image/webp"),
      url("../../images/zamecek.webp") type("image/webp"),
      url("../../images/zamecek.jpg") type("image/jpeg"));
  background-position: center bottom;
}

@media (max-width: 520px) {
  .portal-slice.parallax-section {
    height: clamp(320px, 52vh, 520px);
  }
}

#zamek-hero.parallax-hero+main {
  padding-top: 0;
}

#zamek-hero.parallax-hero+main #zamek {
  position: relative;
  z-index: 10;
  padding-top: 1px;
  padding-bottom: calc(var(--section-padding-y-sm) + var(--hero-peek));
}

#zamek-hero.parallax-hero+main #zamek .section-panel {
  margin-top: calc(-1 * (var(--hero-peek) + 1px));
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-soft);
}

.page-zamek .eyebrow {
  justify-content: center;
}

.page-zamek .eyebrow::before {
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0.55;
}

/* Hero readability */
@media (min-width: 960px) {
  .page-zamek .parallax-hero__content {
    background: rgba(255, 250, 244, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: var(--space-6) var(--space-6);
    border-radius: var(--radius-large);
  }
}

.page-zamek .zamek-lead,
.page-zamek .section-intro {
  max-width: 66ch;
}


.page-zamek .zamek-lead {
  margin-left: auto;
  margin-right: auto;
  font-size: var(--type-lead);
}

.page-zamek .contact-lines a {
  white-space: nowrap;
}

/* CTA řádky a timeline jsou sjednocené v komponentách (cta.css / timeline.css) */


/* -------------------------------------------
   HI-RES (2×) zdroje pro velké monitory / retina
   - zdrojové řezy jsou 1440px široké → na 2K/ultrawide by se musely upscalovat
   - @2x varianty (2880px) se pak jen downscalují → ostřejší dojem
   ------------------------------------------- */

@media (min-width: 1600px),
(min-resolution: 2dppx) {
  #zamek-hero .parallax-bg {
    background-image: url("../../images/zamek-portal-1-top@2x.jpg");
    background-image: image-set(url("../../images/zamek-portal-1-top@2x.webp") type("image/webp"),
        url("../../images/zamek-portal-1-top@2x.jpg") type("image/jpeg"),
        url("../../images/zamek-portal-1-top.webp") type("image/webp"),
        url("../../images/zamek-portal-1-top.jpg") type("image/jpeg"));
  }

  .portal-slice--mid .parallax-section-inner {
    background-image: var(--portal-overlay), image-set(url("../../images/zamek-portal-2-mid@2x.webp") type("image/webp"),
        url("../../images/zamek-portal-2-mid@2x.jpg") type("image/jpeg"),
        url("../../images/zamek-portal-2-mid.webp") type("image/webp"),
        url("../../images/zamek-portal-2-mid.jpg") type("image/jpeg"));
  }

  .portal-slice--bot .parallax-section-inner {
    background-image: var(--portal-overlay), image-set(url("../../images/zamek-portal-3-bot@2x.webp") type("image/webp"),
        url("../../images/zamek-portal-3-bot@2x.jpg") type("image/jpeg"),
        url("../../images/zamek-portal-3-bot.webp") type("image/webp"),
        url("../../images/zamek-portal-3-bot.jpg") type("image/jpeg"));
  }
}

/* =========================================================

/* =========================================================
   ZÁMEK — MOBILE/TABLET (čisté, dle README)
   Cíl:
   - portál na mobilu ukázat JEN jednou (žádná repetice → žádný „template“ pocit)
   - zarámovaný „editorial“ panel (klidný, luxusní)
   - desktop ponechat trojitý parallax (wow efekt)
   ========================================================= */

.portal-frame {
  display: none;
}

/* Mobile + tablet */
@media (max-width: 1024px) {

  /* Na mobilu/tabletu nechceme „photo background hero“ (řeže se a ruší text).
     Hero je klidný přechod, portál ukážeme jako zarámovaný panel. */
  #zamek-hero.parallax-hero {
    height: auto;
    min-height: unset;
    display: block;

    /* klidný pastelový gradient místo fotky */
    /* background-image is on .parallax-bg, so we rely on hiding it or overriding it there. 
       But wait, strictly speaking we should just hide .parallax-bg on mobile? 
       Let's strip the image from .parallax-bg on mobile. */

    /* text na světle */
    color: var(--color-text);
    text-align: center;

    /* prostor pod sticky header */
    padding: calc(var(--header-h) + var(--space-4)) var(--space-3) var(--space-5);

    background: linear-gradient(180deg,
        rgba(255, 248, 240, 0.92) 0%,
        var(--bg-body) 72%);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--surface-1) 92%, transparent) 0%,
        var(--bg-body) 72%);
  }

  #zamek-hero .parallax-bg {
    display: none;
  }

  /* overlay na světle nedává smysl */
  #zamek-hero .hero-overlay {
    display: none;
  }

  /* subtitle: bez shadow, jemnější barva */
  #zamek-hero .hero-subtitle {
    color: var(--color-text-soft);
    text-shadow: none;
  }

  /* 1× editorial rám portálu */
  .portal-frame {
    display: block;
    margin: var(--space-3) auto 0;
    width: min(92vw, 560px);
    padding: var(--space-2);

    border-radius: var(--radius-large);
    background: var(--surface-1);
    border: 1px solid rgba(61, 48, 37, 0.10);
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    box-shadow: var(--shadow-soft);
  }

  .portal-frame picture,
  .portal-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--radius-large) - var(--space-2));
  }

  .portal-frame img {
    filter: var(--zamek-photo-grade-base);
    object-position: center 54%;
  }

  /* Jemný „mat“ efekt: světlo nahoře, klidný přechod dole */
  .portal-frame {
    position: relative;
    overflow: hidden;
  }

  .portal-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.00) 42%,
        rgba(249, 241, 231, 0.30) 100%);
    mix-blend-mode: soft-light;
  }

  /* Mid + bot parallax řezy na mobilu/tabletu vypnout úplně
     (na mobilu by to bylo repetitivní a „template“). */
  .page-zamek .portal-slice--mid,
  .page-zamek .portal-slice--bot {
    display: none !important;
  }
}

/* Desktop: portal-frame nikdy nezobrazovat */
@media (min-width: 1025px) {
  .portal-frame {
    display: none !important;
  }
}

/* ======================================================================
   Zámek – obsahové sekce (8pt / 12-8-4)
   Park • Rybníky • Prostory
   ====================================================================== */

.page-zamek .anchor-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-3) 0 var(--space-4);
}

.page-zamek .anchor-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: var(--btn-letter-spacing);
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.page-zamek .anchor-chip:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--surface-1) 96%, transparent);
  box-shadow: var(--shadow-soft);
}

.page-zamek .anchor-chip:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  outline-offset: 2px;
}

.page-zamek .action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.page-zamek .action-row--tight {
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.page-zamek .action-row--center {
  justify-content: center;
}

/* Park – layout: 1 foto vedle textu + 2 foto pod tím (8pt) */
.page-zamek .park-grid {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

.page-zamek .park-grid__content {
  min-width: 0;
}

.page-zamek .park-photo {
  margin: 0;
  aspect-ratio: 16 / 10;
  display: grid;
}

.page-zamek .park-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  display: block;
  filter: var(--zamek-photo-grade-nature);
}

.page-zamek .park-photo--main {
  aspect-ratio: 16 / 10;
}

.page-zamek .image-compare__before,
.page-zamek .image-compare__after {
  filter: var(--zamek-photo-grade-nature);
  object-position: center 52%;
}

/* Place the "Jeden z navrhu" pill in the lower-left corner for park compare */
.page-zamek .park-photo--main .image-compare__label--single {
  top: auto;
  right: auto;
  bottom: 20px;
  left: 20px;
  transform: none;
}

.page-zamek .park-photo--sub1 img {
  object-position: center 56%;
}

.page-zamek .park-photo--sub2 img {
  object-position: center 44%;
}

.page-zamek #rybniky .media-frame img {
  filter: var(--zamek-photo-grade-nature);
  object-position: center 60%;
}

.page-zamek .park-note {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-large);
  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  box-shadow: var(--shadow-soft);
  color: var(--color-text-soft);
  line-height: 1.55;
}

@media (min-width: 720px) {
  .page-zamek .park-grid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--space-6);
    row-gap: var(--space-4);
  }

  .page-zamek .park-grid__content {
    grid-column: 6 / -1;
    grid-row: 1;
    align-self: start;
  }

  .page-zamek .park-photo--main {
    grid-column: 1 / span 5;
    grid-row: 1;
  }

  .page-zamek .park-photo--sub1 {
    grid-column: 1 / span 6;
    grid-row: 2;
    align-self: start;
  }

  .page-zamek .park-photo--sub2 {
    grid-column: 7 / -1;
    grid-row: 2;
    align-self: start;
  }

  /* Fix pro nové obrázky (aby se neořezávaly) */
  .page-zamek .park-photo--sub {
    aspect-ratio: auto;
    /* Zrušit vynucený poměr */
  }

  .page-zamek .park-photo--sub img {
    object-fit: contain;
    /* Pro jistotu */
    height: auto;
    /* Aby se nedeformovaly */
    max-height: 400px;
    /* Omezení výšky */
    margin: 0 auto;
    /* Centrování */
  }

  .page-zamek .park-note {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

/* Prostory – karta s fotkou */
.page-zamek .space-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.page-zamek .space-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-paper) 92%, transparent);
  border-radius: var(--radius-large);
  /* Added radius for Pastel Luxury feel */
}

.page-zamek .space-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--zamek-photo-grade-base);
  display: block;
}

.page-zamek #prostory .space-card:nth-child(1) .space-card__media img {
  object-position: center 54%;
}

.page-zamek #prostory .space-card:nth-child(2) .space-card__media img {
  object-position: center 46%;
}

.page-zamek #prostory .space-card:nth-child(3) .space-card__media img {
  object-position: center 40%;
}

.page-zamek .space-card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.page-zamek .space-card__body h3 {
  margin: 0;
  letter-spacing: var(--track-h3);
}

.page-zamek .space-card__lead {
  margin: 0;
  color: var(--color-text);
}

.page-zamek .space-card__list {
  --bullet-gap: var(--space-2);
  --bullet-margin: 0;
}

.page-zamek .space-card__list li {
  line-height: 1.4;
}

.page-zamek .space-card__body .action-row {
  margin-top: auto;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}