/* css/pages/pronajem.css
   -------------------------------------------------
   Pronájem salónku – Pastel Luxury
   (komorní, praktické, mobile-first)
*/


/* ===========================================================
   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).
   =========================================================== */

.page-pronajem .page-lead,
.page-pronajem .section-intro {
  max-width: 68ch;
}

.page-pronajem .page-lead {
  font-size: var(--type-lead);
  color: var(--color-text);
}

.page-pronajem .muted-note {
  margin-top: var(--space-3);
  font-size: var(--fs-body-sm);
  color: var(--color-text-soft);
}

/* --- Fotogalerie (reuse komponenty gallery.css) --- */
.page-pronajem .rental-gallery .gallery-grid {
  /* Na pronájmu chceme více fotek „na očích“ a komfortní tapy */
  column-gap: var(--space-3);
}


/* --- Jemný panel: Na co se nehodí --- */
.page-pronajem .soft-callout {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-large);
  background: color-mix(in srgb, var(--surface-1) 82%, white);
  border: 1px solid rgba(61, 48, 37, 0.08);
  box-shadow: var(--shadow-soft);
}

.page-pronajem .soft-callout h3 {
  margin-top: 0;
}

.page-pronajem .soft-callout ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-3);
}

.page-pronajem .soft-callout li {
  margin-top: var(--space-1);
}

.page-pronajem .soft-callout__hint {
  margin-top: var(--space-2);
  color: var(--color-text-soft);
  font-size: var(--fs-body-sm);
}

/* --- Catering split --- */
.page-pronajem .catering-split {
  align-items: start;
  gap: var(--space-4);
}

.page-pronajem .catering-mini {
  --grid-min: 210px;
  --grid-gap: var(--space-3);
  --grid-mt: var(--space-3);
}

/* .cta-row a .media-frame jsou sjednocené v komponentách (cta.css / media.css)
   Tady necháváme jen pronájem-specifické limity. */

.page-pronajem .media-frame img {
  max-height: 440px;
}

@media (max-width: 900px) {
  .page-pronajem .media-frame img {
    max-height: 320px;
  }
}

/* --- Kroky --- */
.page-pronajem .steps {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-3);
}

.page-pronajem .steps li {
  margin-top: var(--space-2);
  line-height: 1.55;
}

.page-pronajem .price-note {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface-2) 85%, white);
  border: 1px solid rgba(61, 48, 37, 0.08);
}

.page-pronajem .price-note h3 {
  margin-top: 0;
}

/* --- Form --- */
.page-pronajem .rental-form {
  margin-top: var(--space-3);
}

/* Základní form UI je sjednocené v css/components/forms.css
   (grid, inputy, focus, labely). Tady necháváme jen pronájem-specifika. */

.page-pronajem .field__hint {
  min-height: 1.2em;
}

.page-pronajem .field__hint.is-warn {
  color: color-mix(in srgb, var(--color-accent) 92%, #3d3025);
}

.page-pronajem .radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  /* 8px */
}

.page-pronajem .radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  /* 8px 16px */
  border-radius: 999px;
  border: 1px solid rgba(61, 48, 37, 0.15);
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--color-text-soft);
}

.page-pronajem .radio:hover {
  border-color: var(--color-accent);
  background: var(--surface-2);
  color: var(--color-text);
}

.page-pronajem .radio:has(input:checked) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
  box-shadow: 0 4px 12px rgba(228, 150, 93, 0.25);
}

.page-pronajem .radio input {
  accent-color: white;
  /* Make the radio dot white on accent bg */
}

.page-pronajem .form-actions {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-2);
}

.page-pronajem .form-fallback {
  margin: 0;
  color: var(--color-text-soft);
  font-size: var(--fs-body-sm);
  text-align: center;
}

.page-pronajem .form-success {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--space-3);
  /* 16px */
  background: color-mix(in srgb, var(--surface-2) 86%, white);
  border: 1px solid rgba(61, 48, 37, 0.08);
}

/* --- FAQ --- */
.page-pronajem .faq {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-2);
  /* 8px */
}

.page-pronajem .faq-item {
  border-radius: var(--radius-medium);
  /* 24px */
  border: 1px solid rgba(61, 48, 37, 0.10);
  background: color-mix(in srgb, var(--surface-1) 86%, white);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.page-pronajem .faq-item summary {
  cursor: pointer;
  padding: var(--space-3);
  font-weight: 650;
}

.page-pronajem .faq-item summary::-webkit-details-marker {
  display: none;
}

.page-pronajem .faq-body {
  padding: 0 var(--space-3) var(--space-3);
  color: var(--color-text-soft);
}

/* --- Parallax Section (Standalone duplicate for Page independency) --- */
.page-pronajem .parallax-section {
  --parallax-fade-top: var(--surface-1);
  --parallax-fade-bottom: var(--surface-2);
  --parallax-fade-height: 128px;

  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 60vh;
  min-height: 400px;
  overflow: hidden;
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.page-pronajem .parallax-section-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Fallback color */
  background-color: var(--surface-2);
}

/* Specific image for Pronajem */
.parallax-section-inner--pronajem {
  position: relative;
  background-size: cover;
  background-position: center 50%;
  background-attachment: fixed;
  background-image: url("../../images/prostor-salonek.webp");
}

/* Fade layers for smooth blending */
.page-pronajem .parallax-section::before,
.page-pronajem .parallax-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--parallax-fade-height);
  z-index: 2;
  pointer-events: none;
}

.page-pronajem .parallax-section::before {
  top: 0;
  background: linear-gradient(to bottom, var(--parallax-fade-top), transparent);
}

.page-pronajem .parallax-section::after {
  bottom: 0;
  background: linear-gradient(to top, var(--parallax-fade-bottom), transparent);
}

@media (max-width: 900px) {
  .page-pronajem .parallax-section {
    height: 50vh;
    min-height: 300px;
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
  }
}

@media (max-width: 700px) {

  /* Disable fixed on mobile for performance/jitter */
  .parallax-section-inner--pronajem {
    background-attachment: scroll;
  }
}