/* ==================================================   KOMPONENTY — Sdílené šablony karet
   kostelec/components/cards.css

   Vzory:
     .c-card--media-top    Vzor 1: obrázek nahoře, obsah dole
     .c-card--media-side   Vzor 2: obrázek na straně (split layout)
     .c-card--icon         Vzor 3: SVG ikona, nadpis, text
     .c-card--package      Vzor 4: balíčková karta bez obrázku

   Sloty (prvky uvnitř karet):
     .c-card__img          obrázková část
     .c-card__body         obsahová část
     .c-card__icon         SVG kontejner (vzor 3)
     .c-card__label        malý popisek nad nadpisem (typ prostoru, kategorie)
     .c-card__meta         metadata — čas, datum, apod.
     .c-card__title        nadpis (DM Serif Display)
     .c-card__text         popis
     .c-card__capacity     ikona + text kapacity / plochy
     .c-card__pills        wrapper pro štítky
     .c-card__pill         jeden štítek
     .c-card__price        cena (volitelně s <strong> pro hlavní částku)
     .c-card__link         textový odkaz →
     .c-card__actions      wrapper pro tlačítka
     .c-card__tag          "featured" nebo kategorický odznak
     .c-card__head         hlavička balíčkové karty (nadpis + badge vedle)
     .c-card__badge        vedlejší odznak (délka pobytu, apod.)
     .c-card__list         odrážkový seznam v balíčkové kartě
     .c-card__footer       patička balíčkové karty (cena + tlačítka)

   Modifikátory karet:
     .c-card--warm         teplé krémové pozadí (#fffdf8)
     .c-card--cream        krémové pozadí (#faf5ed)
     .c-card--flat         bez stínu, jen rámeček
     .c-card--featured     zvýrazněná (červený okraj)
     .c-card--media-side--flip  obrázek vpravo místo vlevo

   Grid wrappery:
     .c-grid--2            2 sloupce
     .c-grid--3            3 sloupce
     .c-grid--4            4 sloupce
     .c-grid--auto         auto-fit (min 280px)
   ========================================================= */


/* ---------------------------------------------------------
   Grid wrappery
   --------------------------------------------------------- */

.c-grid {
  display: grid;
  gap: 24px;
}

.c-grid--2  { grid-template-columns: repeat(2, 1fr); }
.c-grid--3  { grid-template-columns: repeat(3, 1fr); }
.c-grid--4  { grid-template-columns: repeat(4, 1fr); }


/* ---------------------------------------------------------
   Základ karty — sdílený pro všechny vzory
   --------------------------------------------------------- */

.c-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(131, 20, 39, 0.1);
  box-shadow: 0 20px 60px rgba(61, 36, 17, 0.15);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.c-card--flat {
  box-shadow: none;
}

.c-card--featured {
  border-color: var(--color-primary);
  box-shadow:
    0 0 0 1px var(--color-primary),
    0 20px 60px rgba(131, 20, 39, 0.15);
}


/* ---------------------------------------------------------
   Sdílené prvky — fungují ve všech vzorech
   --------------------------------------------------------- */

/* Malý popisek / kategorie nad nadpisem */
.c-card__label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 8px;
}

/* Čas, datum nebo jiná metadata */
.c-card__meta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0;
}

/* Nadpis — serif, větší */
.c-card__title {
  font-family: "DM Serif Display", serif;
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
  color: var(--color-text);
}

/* Varianta — malý Montserrat nadpis (pro ikónové karty) */

/* Varianta — velký nadpis pro media-side karty */

/* Popis */
.c-card__text {
  font-size: 16px;
  line-height: 1.65;
  color: #5a4535;
  margin: 0;
}

/* Kapacita (ikona + text) */
.c-card__capacity {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-secondary);
  margin: 0;
}

.c-card__capacity svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Štítky */
.c-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 8px 0 16px;
  padding: 0;
}

.c-card__pill {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(131, 20, 39, 0.08);
  color: var(--color-primary);
}

/* Cena — <strong> hlavní číslo, <span> popisek */
.c-card__price {
  text-align: right;
  flex-shrink: 0;
  margin: 0;
}

.c-card__price strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
}

.c-card__price span {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: rgba(63, 47, 37, 0.55);
}

/* Tlačítka pod kartou */
.c-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 16px;
}

/* Textový odkaz → */
.c-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  margin-top: auto;
  padding-top: 4px;
}

.c-card__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Wrapper pro tlačítka */
.c-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}

/* Featured / kategorický odznak */
.c-card__tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 20px;
  background: #f8e9ec;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  margin-bottom: 10px;
}


/* ---------------------------------------------------------
   Vzor 1: Karta s obrázkem nahoře (.c-card--media-top)

   Použití: restaurace (r2-menu-card), svatby (svatby-menu-card,
   svatby-prostor-card), ubytovani + restaurace (room-listing-card)
   --------------------------------------------------------- */

.c-card--media-top .c-card__img {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-text);
  flex-shrink: 0;
}

.c-card--media-top .c-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.c-card--media-top:hover .c-card__img img {
  transform: scale(1.04);
}

.c-card--media-top .c-card__body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* Kompaktní varianta — menší padding, menší obrázek */

.c-card--media-top .c-card__title {
  font-size: 28px;
}


/* ---------------------------------------------------------
   Story sekce (.c-story)

   Použití: restaurace (soukromé akce), homepage (rodiny)
   Layout: text vlevo + obrázek vpravo, 2 sloupce
   --------------------------------------------------------- */

.c-story {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: center;
}

.c-story__copy h2 {
  font-size: 40px;
  line-height: 1.2;
  color: var(--color-primary);
  margin-bottom: 0;
}

.c-story__copy > p:not(.c-card__label) {
  margin: 28px 0 0;
  max-width: 590px;
  color: var(--color-accent);
  font-size: 20px;
  line-height: 1.65;
}

.c-story__list {
  display: grid;
  gap: 34px;
  margin-top: 38px;
}

.c-story__list h3 {
  margin-bottom: 14px;
  color: var(--color-secondary);
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
}

.c-story__list ul {
  margin: 0 0 14px;
  padding-left: 16px;
  line-height: 1.75;
}

.c-story__list li { font-size: 16px; }

.c-story__list a {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.c-story__img { align-self: start; }

.c-story__img img {
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  display: block;
  border-radius: 24px;
}

@media (max-width: 1080px) {
  .c-story { gap: 30px; }
  .c-story__copy > p:not(.c-card__label) {
    max-width: 100%;
    margin-top: 22px;
    margin-bottom: 22px;
    font-size: 17px;
    line-height: 1.55;
  }
  .c-story__list { gap: 24px; margin-top: 28px; }
  .c-story__list h3 { margin-bottom: 10px; font-size: 20px; }
  .c-story__list ul { margin-bottom: 12px; padding-left: 18px; line-height: 1.6; }
  .c-story__list li { font-size: 15px; }
  .c-story__list a { font-size: 15px; }
  .c-story__img img { margin: 0 auto; border-radius: 18px; }
}

@media (max-width: 760px) {
  .c-story { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------
   Vzor 2: Karta s obrázkem vedle (.c-card--media-side)

   Použití: cross-sell bloky (lodging-cross-sell, gift-vouchers),
   story sekce (story-grid), promo bannery (lodging-relax-banner)
   --------------------------------------------------------- */

.c-card--media-side {
  flex-direction: row;
  border-radius: 20px;
  min-height: 480px;
  box-shadow: 0 24px 64px rgba(61, 36, 17, 0.13);
}

.c-card--media-side .c-card__img {
  width: 46%;
  flex-shrink: 0;
  overflow: hidden;
}

.c-card--media-side .c-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c-card--media-side .c-card__body {
  flex: 1;
  padding: 48px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.c-card--media-side .c-card__title {
  font-size: 40px;
  color: var(--color-primary);
  margin-bottom: 0;
}

.c-card--media-side .c-card__actions {
  margin-top: 0;
}

.c-card--media-side .c-card__text {
  font-size: 16px;
}

/* Obrázek vpravo */
.c-card--media-side--flip .c-card__img { order: 2; }
.c-card--media-side--flip .c-card__body { order: 1; }

/* Flush — bez ohraničení, transparentní pozadí, od kraje po kraj */
.c-card--media-side--flush {
  border-radius: 0;
  box-shadow: none;
  border: none;
  background: transparent;
  min-height: 0;
}
.c-card--media-side--flush .c-card__img {
  border-radius: 12px;
}
.c-card--media-side--flush .c-card__body {
  padding: 48px 64px;
}


/* ---------------------------------------------------------
   Vzor 3: Ikonová karta (.c-card--icon)

   Použití: svatby (svatby-why-card), výhody, features sekce
   --------------------------------------------------------- */

.c-card--icon {
  padding: 32px 28px 36px;
  gap: 0;
}

.c-card__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(177, 127, 74, 0.14);
  margin-bottom: 20px;
}

.c-card__icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Červená varianta ikony (pro téma svateb, akcí) */
.c-card__icon--primary {
  background: rgba(131, 20, 39, 0.08);
}

.c-card__icon--primary svg {
  stroke: var(--color-primary);
}

.c-card--icon .c-card__title {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.c-card--icon .c-card__text {
  font-size: 15px;
  line-height: 1.65;
  color: #5a4535;
}

/* Horizontální varianta (malá fakta-bar karta) */
.c-card--icon.c-card--inline {
  flex-direction: row;
  align-items: center;
  padding: 20px 24px;
  gap: 14px;
  border-radius: 12px;
  box-shadow: none;
  background: #faf5ed;
  border-color: transparent;
}

.c-card--icon.c-card--inline .c-card__icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

.c-card--icon.c-card--inline .c-card__title {
  font-size: 14px;
  margin-bottom: 2px;
}

.c-card--icon.c-card--inline .c-card__text {
  font-size: 12px;
  font-weight: 600;
  color: rgba(63, 47, 37, 0.58);
}

.c-facts-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
}

.c-facts-bar .c-card--icon.c-card--inline {
  min-height: 100%;
}


/* ---------------------------------------------------------
   Relax pas — cenový přehled (reusable napříč stránkami)
   --------------------------------------------------------- */

.relax-pas__prices {
  display: flex;
  gap: 12px;
  margin: 4px 0 4px;
}

.relax-pas__price-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 20px;
  border: 1px solid rgba(131, 20, 39, 0.12);
  border-radius: 8px;
  background: #ffffff;
  min-width: 130px;
}

.relax-pas__price-item span {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted, #6b5b4e);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.relax-pas__price-item strong {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* ---------------------------------------------------------
   Vzor 4: Balíčková karta (.c-card--package)

   Použití: pobytové balíčky (relaxacni-pobyty, pobyty)
   --------------------------------------------------------- */

.c-card--package {
  border: 1.5px solid #e8e0d5;
  box-shadow: none;
}

.c-card--package:hover {
  border-color: #8b7355;
  box-shadow: 0 12px 30px rgba(61, 53, 48, 0.08);
}

.c-card--package.c-card--featured {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.c-card--package.c-card--featured:hover {
  box-shadow:
    0 0 0 1px var(--color-primary),
    0 12px 30px rgba(131, 20, 39, 0.12);
}

.c-card--package .c-card__body {
  padding: 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Hlavička: nadpis + odznak délky vedle sebe */
.c-card__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.c-card--package .c-card__title {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 700;
  flex: 1;
  line-height: 1.25;
}

/* Odznak délky pobytu / počtu procedur apod. */
.c-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 20px;
  background: #f5f0ea;
  color: #8b7355;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.c-card--package .c-card__text {
  color: #9e9189;
  font-size: 16px;
  margin-bottom: 14px;
}

/* Odrážkový seznam (checkmarky) */
.c-card__list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.c-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.45;
}

.c-card__list li::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background:
    rgba(131, 20, 39, 0.08)
    url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3,8.5 6.5,12 13,5' stroke='%23831427' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 12px 12px no-repeat;
}

/* Patička: cena vlevo, tlačítka vpravo */
.c-card__footer {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #f0ebe3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}


/* ---------------------------------------------------------
   Responzivita
   --------------------------------------------------------- */

@media (max-width: 1080px) {
  .c-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .c-grid--3 { grid-template-columns: repeat(2, 1fr); }

  .c-card--media-side .c-card__body {
    padding: 36px 40px;
  }
}

@media (max-width: 760px) {
  .c-grid--2,
  .c-grid--3,
  .c-grid--4 {
    grid-template-columns: 1fr;
  }

  .c-facts-bar {
    grid-template-columns: 1fr;
  }

  /* media-side se skládá do sloupce */
  .c-card--media-side {
    flex-direction: column;
    min-height: unset;
  }

  .c-card--media-side .c-card__img {
    width: 100%;
    height: 260px;
    order: 0 !important;
  }

  .c-card--media-side .c-card__body {
    padding: 28px 24px 32px;
    order: 0 !important;
  }

  .c-card--media-side .c-card__title {
    font-size: 24px;
  }

  .c-card__footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .c-card--media-top .c-card__body {
    padding: 18px 18px 22px;
  }

  .c-card--icon {
    padding: 24px 20px 28px;
  }

  .c-card--package .c-card__body {
    padding: 20px;
  }
}

/* ---------------------------------------------------------
   Vzor 5: Rozcestník — dlaždice s obrázkem (.stay-type-tile)

   Použití: pobyty.html — navigace kategorií pobytů.
   Třídy: .stay-type-grid, .stay-type-tile, .stay-type-tile--wide,
          .stay-type-tile__overlay, .stay-type-tile__name, .stay-type-tile__label
   --------------------------------------------------------- */

.stay-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.stay-type-tile {
  position: relative;
  min-height: 360px;
  border-radius: 10px;
  overflow: hidden;
  background: #3f2f25;
  box-shadow: var(--shadow-soft);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.stay-type-tile--wide {
  grid-column: span 2;
}

.stay-type-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 70px rgba(61, 36, 17, 0.18);
}

.stay-type-tile img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.stay-type-tile:hover img {
  transform: scale(1.04);
}

.stay-type-tile__overlay {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  min-height: 44%;
  flex-direction: column;
  justify-content: flex-end;
  padding: 72px 22px 22px;
  background: linear-gradient(to top, rgba(22, 14, 10, 0.72) 0%, rgba(22, 14, 10, 0.32) 56%, rgba(22, 14, 10, 0) 100%);
  color: var(--color-white);
}

.stay-type-tile__name {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.18;
}

.stay-type-tile__label {
  margin-top: 8px;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.4;
}

/* Responzivita */

@media (max-width: 1080px) {
  .stay-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stay-type-tile {
    min-height: 300px;
  }
}

@media (max-width: 760px) {
  .stay-type-grid {
    grid-template-columns: 1fr;
  }

  .stay-type-tile--wide {
    grid-column: auto;
  }

  .stay-type-tile {
    min-height: 250px;
  }

  .stay-type-tile__name {
    font-size: 19px;
  }
}

/* ---------------------------------------------------------
   Vzor 4b: Balíčková karta — produkční varianta (.package-card)

   Použití: pobyty.html — přesná kopie z styles.css.
   Třídy: .package-grid, .package-card, .package-card--featured,
          .package-card__tag, .package-card__head, .package-card__body,
          .package-card__list, .package-card__footer, .package-card__actions,
          .package-card__detail, .nights-badge
   --------------------------------------------------------- */

.package-card[hidden] {
  display: none;
}

.package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.package-card {
  position: relative;
  overflow: hidden;
  border: 1.5px solid #e8e0d5;
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: none;
  transition: 0.2s ease;
  display: flex;
}

.package-card:hover {
  border-color: #8b7355;
  box-shadow: 0 12px 30px rgba(61, 53, 48, 0.08);
}

.package-card--featured {
  background: var(--color-white);
}

.package-card__body {
  padding: 26px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.package-card__tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 20px;
  background: #f8e9ec;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.package-card__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.package-card h3 {
  flex: 1;
  margin: 0;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: #3d3530;
}

.nights-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: auto;
  padding: 5px 12px;
  border-radius: 20px;
  background: #f5f0ea;
  color: #8b7355;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.package-card p {
  margin: 0 0 16px;
  color: #9e9189;
  font-size: 16px;
  line-height: 1.55;
}

.package-card__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.package-card__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #9e9189;
  font-size: 15px;
  line-height: 1.45;
}

.package-card__list li::before {
  content: "✓";
  color: #7a9e7e;
  font-weight: 700;
  flex-shrink: 0;
}

.package-card__footer {
  display: block;
  margin-top: auto;
  padding-top: 0;
  border-top: 0;
}

.package-card__footer > span {
  display: block;
  margin-bottom: 18px;
  color: #9e9189;
  font-size: 15px;
  line-height: 1.3;
}

.package-card__footer strong {
  margin-right: 4px;
  color: #3d3530;
  font-size: 25px;
  font-weight: 700;
}

.package-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.package-card__actions .button {
  width: 100%;
  min-height: auto;
  padding: 14px 18px;
  border-radius: 5px;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.package-card__detail {
  border: 1.5px solid #e8e0d5;
  background: transparent;
  color: #3d3530;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.package-card__detail:hover {
  background: #faf5ed;
  border-color: #8b7355;
  color: #8b7355;
}

.package-card__actions .button--solid {
  background: #831427;
  color: #ffffff;
  border: none;
  font-weight: 600;
}

.package-card__actions .button--solid:hover {
  background: #64101e;
  transform: translateY(-1px);
  box-shadow: 0 4px 24px rgba(61, 53, 48, 0.1);
}

/* Responzivita */

@media (max-width: 1080px) {
  .package-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .package-grid {
    grid-template-columns: 1fr;
  }

  .package-card,
  .package-card__body,
  .package-card__footer,
  .package-card__actions {
    min-width: 0;
  }

  .package-card__actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .package-card__actions .button {
    border-radius: 999px;
  }

  .package-card__body {
    padding: 18px;
  }

  .package-card__head {
    flex-direction: row;
    gap: 10px;
  }

  .package-card h3 {
    font-size: 17px;
  }

  .nights-badge {
    padding: 4px 10px;
    font-size: 11px;
  }

  .package-card p {
    margin-bottom: 12px;
    font-size: 13px;
  }

  .package-card__list {
    gap: 6px;
    margin-bottom: 14px;
  }

  .package-card__list li {
    gap: 8px;
    font-size: 13px;
  }

  .package-card__footer > span {
    margin-bottom: 14px;
    font-size: 13px;
  }

  .package-card__footer strong {
    font-size: 20px;
  }

  .package-card__actions .button {
    padding: 11px 16px;
    font-size: 13px;
    white-space: normal;
  }

  .package-card__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .package-card__footer .button {
    width: 100%;
  }
}

/* ---------------------------------------------------------
   Vzor 6: Fotogalerie — carousel s taby (.lodging-gallery__)

   Použití: restaurace.html, ubytovani.html, apartman.html
   Třídy: .lodging-gallery__tabs, .lodging-gallery__tab, .lodging-gallery__panel,
          .lodging-gallery__carousel, .lodging-gallery__track, .lodging-gallery__arrows,
          .lodging-gallery__arrow
   JS: js/gallery.js (inicializace carouselu, drag, lightbox, přepínání tabů)
   --------------------------------------------------------- */

.lodging-gallery__tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 40px 0 32px;
  flex-wrap: wrap;
}

.lodging-gallery__tab {
  padding: 10px 24px;
  border: 1.5px solid rgba(139, 115, 85, 0.3);
  border-radius: 100px;
  background: transparent;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.lodging-gallery__tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.lodging-gallery__tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.lodging-gallery__panel {
  display: none;
}

.lodging-gallery__panel.is-active {
  display: block;
}

.lodging-gallery__carousel {
  overflow: hidden;
  border-radius: 8px;
  cursor: grab;
}

.lodging-gallery__carousel:active {
  cursor: grabbing;
}

.lodging-gallery__track {
  display: flex;
  gap: 10px;
  transition: transform 0.5s ease;
  will-change: transform;
}

.lodging-gallery__track img {
  flex: 0 0 calc(25% - 8px);
  width: calc(25% - 8px);
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  user-select: none;
}

.lodging-gallery__arrows {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.lodging-gallery__arrow {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(139, 115, 85, 0.25);
  border-radius: 50%;
  background: transparent;
  color: rgba(139, 115, 85, 0.6);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lodging-gallery__arrow:hover {
  border-color: rgba(139, 115, 85, 0.6);
  color: rgba(139, 115, 85, 1);
}

/* Responzivita */

@media (max-width: 700px) {
  .lodging-gallery__track img {
    flex: 0 0 100%;
    width: 100%;
  }

  .lodging-gallery__tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .lodging-gallery__tabs::-webkit-scrollbar {
    display: none;
  }

  .lodging-gallery__tab {
    flex: 0 0 auto;
  }

  .lodging-gallery__arrows {
    margin-top: 18px;
  }
}

/* ---------------------------------------------------------
   Vzor 6 — Lightbox (.lb)

   Generován dynamicky přes gallery.js, CSS musí být přítomno.
   --------------------------------------------------------- */

.lb {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  align-items: center;
  justify-content: center;
}

.lb.is-open {
  display: flex;
}

.lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
}

.lb__img-wrap {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb__img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  user-select: none;
  -webkit-user-drag: none;
}

.lb__close {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 2;
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  padding: 4px 8px;
  transition: opacity 0.2s;
}

.lb__close:hover { opacity: 1; }

.lb__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  font-size: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.lb__arrow:hover { background: rgba(255, 255, 255, 0.25); }
.lb__arrow--prev { left: 20px; }
.lb__arrow--next { right: 20px; }

.lb__counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
}

@media (max-width: 760px) {
  .lb__arrow--prev { left: 8px; }
  .lb__arrow--next { right: 8px; }
  .lb__arrow { width: 40px; height: 40px; font-size: 20px; }
}

/* ---------------------------------------------------------
   Vzor 7: FAQ — rozbalovací seznam (.lodging-faq-item)

   Použití: restaurace.html, ubytovani.html, svatby.html, firemni-akce.html
   Třídy: .lodging-faq__inner, .lodging-faq-list, .lodging-faq-item
   JS: script.js — toggle přes [data-lodging-faq]
   --------------------------------------------------------- */

.lodging-faq__inner {
  max-width: 920px;
  margin: 0 auto;
}

.lodging-faq-list {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(63, 47, 37, 0.1);
}

.lodging-faq-item {
  border-bottom: 1px solid rgba(63, 47, 37, 0.1);
  background: transparent;
}

.lodging-faq-item button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 22px 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
}

.lodging-faq-item button strong {
  font-size: 20px;
  font-weight: 300;
  color: var(--color-muted);
  line-height: 1;
  flex-shrink: 0;
}

.lodging-faq-item p,
.lodging-faq-item div {
  margin: 0;
  padding: 0 0 20px;
  color: rgba(63, 47, 37, 0.72);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
}

.lodging-faq-item div ul {
  margin: 8px 0;
  padding-left: 18px;
}

.lodging-faq-item div li {
  margin-bottom: 4px;
}


/* ---------------------------------------------------------
   Contact card (.c-contact-card)

   Použití: přímý kontakt na koordinátora, recepci nebo osobu
   --------------------------------------------------------- */

.c-contact-card {
  max-width: 580px;
  margin: 40px auto 0;
  background: #fffdf8;
  border: 1px solid rgba(131, 20, 39, 0.1);
  box-shadow: 0 18px 50px rgba(61, 36, 17, 0.1);
  border-radius: 14px;
  padding: 32px 40px;
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.c-contact-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e8d8c0;
  color: var(--color-secondary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-contact-card__avatar svg {
  width: 38px;
  height: 38px;
}

.c-contact-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.c-contact-card__name {
  font-family: "DM Serif Display", serif;
  font-size: 24px;
  line-height: 1.18;
  color: var(--color-text);
  margin: 0;
}

.c-contact-card__role {
  font-size: 13px;
  color: #a08070;
  margin: 0 0 4px;
}

.c-contact-card__row {
  font-size: 15px;
  color: var(--color-text);
  margin: 0;
}

.c-contact-card__row a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.c-contact-card__row a:hover {
  text-decoration: underline;
}

.c-contact-card__note {
  font-size: 13px;
  color: #a08070;
  margin: 4px 0 0;
}

@media (max-width: 620px) {
  .c-contact-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 24px;
  }
}


/* ---------------------------------------------------------
   Cross-sell CTA bar (.c-crosssell)

   Použití: restaurace (polopenze), procedury, pobyty
   Tmavý banner s titulkem, textem a outline tlačítkem
   --------------------------------------------------------- */

.c-crosssell {
  background: var(--color-primary);
  border-radius: 14px;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.c-crosssell__title {
  display: block;
  font-family: "DM Serif Display", serif;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 400;
  color: #fff;
  margin-bottom: 8px;
}

.c-crosssell__text {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 540px;
}

.c-crosssell__cta.button--outline {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  white-space: nowrap;
}

.c-crosssell__cta.button--outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 760px) {
  .c-crosssell {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 20px;
  }
}

/* ---------------------------------------------------------
   Vzor 1D: Pokojová karta (.room-listing-card)

   Použití: ubytovani.html — výpis pokojů s cenou a tlačítky
   Wrapper: .room-listing-stack (3sloupce)
   --------------------------------------------------------- */

.room-listing-stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.room-listing-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(131, 20, 39, 0.1);
  box-shadow: 0 18px 50px rgba(61, 36, 17, 0.1);
}

.room-listing-card--featured {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), 0 18px 50px rgba(61, 36, 17, 0.12);
}

.room-listing-card__img {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #3f2f25;
  flex-shrink: 0;
}

.room-listing-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.room-listing-card__body {
  padding: 22px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.room-listing-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.room-listing-header h3 {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.2;
}

.room-listing-price {
  text-align: right;
  flex-shrink: 0;
}

.room-listing-price strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
}

.room-listing-price span {
  font-size: 11px;
  font-weight: 400;
  color: rgba(63, 47, 37, 0.55);
}

/* Badges (Snídaně v ceně, Pro rodiny) */
.lodging-room-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.lodging-room-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(131, 20, 39, 0.08);
  color: var(--color-primary);
}

.lodging-room-badge--breakfast {
  background: #eaf4ec;
  color: #2a7a3c;
}

.lodging-room-badge--family {
  background: rgba(177, 127, 74, 0.14);
  color: var(--color-secondary);
}

.lodging-room-badge--extra {
  background: #e8f0fb;
  color: #2352a0;
}

/* Kapacita (ikona + text) */

.room-listing-card .c-card__capacity {
  margin: 12px 0;
}

.room-listing-desc {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(63, 47, 37, 0.75);
  line-height: 1.65;
  flex: 1;
}

.room-listing-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: auto;
}

.room-listing-actions .button {
  width: 100%;
  min-height: auto;
  padding: 14px 18px;
  border-radius: 5px;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  justify-content: center;
}

.room-listing-actions .button--outline {
  border: 1.5px solid #e8e0d5;
  background: transparent;
  color: #3d3530;
}

.room-listing-actions .button--outline:hover {
  background: #faf5ed;
  border-color: #8b7355;
  color: #8b7355;
}

.room-listing-actions .button--solid {
  background: #831427;
  color: #ffffff;
  border: none;
  font-weight: 600;
}

.room-listing-actions .button--solid:hover {
  background: #64101e;
  transform: translateY(-1px);
  box-shadow: 0 4px 24px rgba(61, 53, 48, 0.1);
}

@media (max-width: 1080px) {
  .room-listing-stack {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .room-listing-card__img {
    aspect-ratio: 16 / 9;
  }

  .room-listing-header {
    flex-direction: column;
    gap: 6px;
  }

  .room-listing-price {
    text-align: left;
  }

  .room-listing-actions {
    flex-direction: column;
  }

  .room-listing-actions .button {
    width: 100%;
  }
}

/* ==================================================   page-intro — intro sekce builder stránek
   Breadcrumbs + eyebrow + h1 + lead + tlačítka + volitelná fotka.
   Používá se na všech stránkách s builder sekcemi místo page-hero.
   Foto (.page-intro__media) je volitelné — vynecháme pokud není k dispozici.
   ========================================================= */

.page-intro {
  padding: 48px 0 0;
  background: linear-gradient(180deg, #faf5ed 0%, #faf5ed 40%, #ffffff 65%, #ffffff 100%);
}

/* Potlač dekorativní trojúhelník sekce */
.page-intro::before {
  display: none;
}

/* Úzký container — shodný s room-detail-page (1200px) */
.page-intro > .container {
  max-width: min(1200px, calc(100% - 64px));
}

/* Builder stránky: obsah pod introm sedí v `.block-section__inner`, který je
   široký jako běžný `.container` (1440px). Úzké intro by začínalo o 79px jinde
   než odstavec a tlačítka pod ním — modifikátor proto zúžení ruší.          */
.page-intro--builder > .container {
  max-width: none;
}

/* Intro přechází gradientem do bílé. Když je první sekce pod ním krémová, potká
   se bílá s krémovou a je mezi nimi vidět zlom — v návrhu je přitom celý úvod
   jedna plocha (časté dotazy). Intro proto přebírá barvu navazující sekce.
   Sekce `--soft` se to netýká: ta má vlastní přechod z krémové do bílé a návrh
   ji za introm takhle má (lázeňská kaple).                                   */
.page-intro--builder:has(+ .block-section--grey) {
  background: #faf5ed;
}

/* Intro jako jediná sekce stránky (chybové stránky, "ve výstavbě").
   Základní .page-intro má spodní odsazení 0, protože na builder stránkách za ním
   vždycky následuje další sekce. Když je poslední, doléhalo by tlačítko na patičku —
   doplníme odsazení shodné s běžnou .section. */
.page-intro--standalone {
  padding-bottom: 80px;
}

/* Nulové spodní odsazení funguje jen proti bílé sekci, kde gradient intra plynule
   navazuje. Když je další sekce podbarvená (jídelní lístek a denní menu), začíná
   béžová plocha hned pod tlačítky — proto se odsazení doplní. */
.page-intro:has(+ .section--soft) {
  padding-bottom: 56px;
}

/* Tlačítka */
.page-intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* Fotka pod textem (volitelná) */
.page-intro__media {
  margin-top: 44px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(61, 36, 17, 0.16);
}

.page-intro__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

@media (max-width: 760px) {
  /* Hlavička (.hero__nav) je na mobilu position:fixed — obsah musí vyčistit
     její výšku, jinak se breadcrumb/intro překrývá s logem (stránky bez klasického hero). */
  .page-intro {
    padding-top: 120px;
  }

  .page-intro--standalone {
    padding-bottom: 64px;
  }

  .page-intro__actions .button {
    width: 100%;
  }
}

/* ==================================================   page-intro--side — dvousloupcové intro (text vlevo, foto vpravo)
   Použití: detail pobytu a detail pokoje s fotkou po straně.
   Struktura: .page-intro__body (text) + .page-intro__media (foto)
   ========================================================= */

/* Container: dvousloupcový grid uvnitř normálního containeru */
.page-intro--side > .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding-bottom: 56px;
}

/* Obrázek: zaoblené rohy ze všech stran, stín */
.page-intro--side .page-intro__media {
  margin-top: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(61, 36, 17, 0.14);
}

.page-intro--side .page-intro__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
  aspect-ratio: unset;
  border-radius: 0;
}

@media (max-width: 900px) {
  .page-intro--side > .container {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 0;
  }

  .page-intro--side .page-intro__media img {
    min-height: unset;
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

/* ==================================================   stay-detail — komponenty pro detail stránky pobytu
   Spec grid, checklists, contact banner, bottom CTA.
   ========================================================= */

/* Obsah detailu — plná šířka kontejneru */
.stay-detail {
  padding: 0;
}

/* Kontaktní řádek v intro ("Potřebujete poradit? Zavolejte...") */
.stay-intro-contact {
  margin-top: 20px;
  font-size: 14px;
  color: rgba(63, 47, 37, 0.6);
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}

.stay-intro-contact a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.stay-intro-contact a:hover {
  text-decoration: underline;
}

/* 4-sloupcový spec bar (DÉLKA / NÁSTUPNÍ DEN / NÁSTUPNÍ ČAS / CENA OD) */

/* Popis + aside vedle sebe */
.stay-detail__body {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 0.65fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.stay-detail__main {
  display: flex;
  flex-direction: column;
  max-width: 760px;
}

/* Popis pobytu */
.stay-detail__desc {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(63, 47, 37, 0.74);
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}

.stay-detail__desc p {
  margin: 0 0 16px;
}

.stay-detail__desc p:last-child {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .stay-detail__body {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Dvě dlaždice vedle sebe — Pobyt zahrnuje + V ceně je zahrnuto */
.stay-checklists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 48px;
}

/* Jedna dlaždice — shodný styl s c-card */
.stay-checklist-group {
  padding: 28px 32px;
  border: 1px solid rgba(131, 20, 39, 0.1);
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: 0 20px 60px rgba(61, 36, 17, 0.15);
}

/* Nadpisy sekcí uvnitř detailu */
.stay-detail__heading {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  font-family: 'Montserrat', sans-serif;
  margin: 0 0 16px;
}

/* Checklist s fajfkami */
.stay-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stay-checklist li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(131, 20, 39, 0.06);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.5;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}

.stay-checklist li:last-child {
  border-bottom: none;
}

.stay-checklist li::before {
  content: '✓';
  flex-shrink: 0;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 13px;
}

/* Banner "Vstupenka zdarma" — bonus k pobytu */

/* Banner "Potřebujete poradit?" */
.stay-contact-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid rgba(131, 20, 39, 0.1);
  border-radius: 10px;
  background: #fffdf8;
  margin-top: 0;
}

.stay-contact-banner__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(131, 20, 39, 0.07);
  border-radius: 8px;
  color: var(--color-primary);
}

.stay-contact-banner__text {
  flex: 1;
  min-width: 0;
}

.stay-contact-banner__title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 2px;
}

.stay-contact-banner__sub {
  font-size: 13px;
  color: rgba(63, 47, 37, 0.6);
  font-family: 'Montserrat', sans-serif;
}

/* Spodní CTA — cena + tlačítko */
.stay-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 32px;
  margin-top: 40px;
  border-top: 1px solid rgba(131, 20, 39, 0.1);
}

.stay-cta__price-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(63, 47, 37, 0.5);
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 4px;
}

.stay-cta__price-value {
  font-size: 32px;
  font-weight: 400;
  color: var(--color-primary);
  font-family: 'DM Serif Display', Georgia, serif;
  line-height: 1;
}

@media (max-width: 760px) {
  .stay-detail {
    padding: 40px 0 60px;
  }

  .stay-checklists {
    grid-template-columns: 1fr;
  }

  .stay-contact-banner {
    flex-wrap: wrap;
  }

  .stay-contact-banner .button {
    width: 100%;
  }

  .stay-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .stay-cta .button {
    width: 100%;
  }
}


/* ===================================================================   Vzor 9 — Dárkový poukaz (.voucher-card)
   Použití: darkove-poukazy.html
   ========================================================================== */

/* Filtrační pills */
.voucher-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.voucher-filter-pill {
  padding: 8px 20px;
  border-radius: 24px;
  border: 1.5px solid rgba(131, 20, 39, 0.22);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text, #3f2f25);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  font-family: 'Montserrat', sans-serif;
}

.voucher-filter-pill:hover {
  border-color: var(--color-primary, #831427);
  color: var(--color-primary, #831427);
}

.voucher-filter-pill[data-active="true"] {
  background: var(--color-primary, #831427);
  border-color: var(--color-primary, #831427);
  color: #fff;
}

/* Grid */
.voucher-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Karta */
.voucher-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(61, 53, 48, 0.08);
  transition: transform 0.22s, box-shadow 0.22s;
}

.voucher-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(61, 53, 48, 0.14);
}

/* Obrázek */
.voucher-card__img {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.voucher-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}

.voucher-card:hover .voucher-card__img img {
  transform: scale(1.04);
}

/* Kategoriový odznak */
.voucher-card__badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.voucher-cat--pobyty      { background: rgba(131, 20, 39, 0.88);  color: #fff; }
.voucher-cat--procedury   { background: rgba(177, 127, 74, 0.92); color: #fff; }
.voucher-cat--permanentky { background: rgba(35, 82, 160, 0.88);  color: #fff; }
.voucher-cat--restaurace  { background: rgba(90, 53, 22, 0.88);   color: #fff; }

/* Tělo karty */
.voucher-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
}

.voucher-card__title {
  font-family: "Montserrat", sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--color-text, #3f2f25);
  margin: 0 0 8px;
  line-height: 1.25;
}

.voucher-card__desc {
  font-size: 13px;
  color: #9e9189;
  margin: 0;
  line-height: 1.55;
  flex: 1;
}

/* Patička karty */
.voucher-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(131, 20, 39, 0.08);
}

.voucher-card__price {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary, #831427);
  font-family: "Montserrat", sans-serif;
  line-height: 1.1;
}

.voucher-card__validity {
  display: block;
  font-size: 12px;
  color: #9e9189;
  margin-top: 3px;
}

/* Karta s odkazem (bez ceny) */
.voucher-card--link .voucher-card__footer {
  border-top: none;
  padding-top: 0;
  margin-top: 16px;
}

/* Responzivita */
@media (max-width: 1080px) {
  .voucher-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .voucher-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .voucher-card__title { font-size: 18px; }
  .voucher-card__price { font-size: 20px; }
}



/* ===================================================================   Ubytování — „Součást ceny a možnosti dokoupení"
   (převzato z kod-13-07/styles.css, které se do components/ nepřenášelo)
   ========================================================================== */

.lodging-inclusions__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 48px;
}

.lodging-inclusions__col {
  background: var(--color-white);
  border: 1px solid rgba(139, 115, 85, 0.15);
  border-radius: 14px;
  padding: 36px 40px;
}

.lodging-inclusions__col--addons {
  background: var(--color-white);
}

.lodging-inclusions__col h3 {
  margin: 0 0 24px;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-heading);
}

.lodging-inclusions__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lodging-inclusions__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
}

.lodging-inclusions__list svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #2e7d40;
  stroke: #2e7d40;
}

.lodging-inclusions__list--addons li {
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(139, 115, 85, 0.15);
}

.lodging-inclusions__list--addons li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.lodging-inclusions__addon-name {
  font-weight: 600;
  color: var(--color-text);
}

.lodging-inclusions__addon-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .lodging-inclusions__grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 32px;
  }

  .lodging-inclusions__col {
    padding: 24px;
  }

  .lodging-inclusions__list--addons li {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .lodging-inclusions__addon-price {
    white-space: normal;
  }
}
/* ====================================================================   Svatební posuvník (wedding-slider) — použití: svatby.html „Jak může vypadat den"
   Horizontální scroll-snap karty s číselnými odznaky + šipky (ovládá script.js).
   =========================================================================== */

.wedding-slider {
  margin-top: 40px;
}

.wedding-slider__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(131, 20, 39, 0.35) transparent;
}

.wedding-slider__track::-webkit-scrollbar { height: 6px; }
.wedding-slider__track::-webkit-scrollbar-thumb { background: rgba(131, 20, 39, 0.3); border-radius: 3px; }
.wedding-slider__track::-webkit-scrollbar-track { background: transparent; }

.wedding-slide {
  flex: 0 0 320px;
  max-width: 84%;
  scroll-snap-align: start;
  background: #fffdf8;
  border: 1px solid rgba(131, 20, 39, 0.1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(61, 36, 17, 0.06);
  display: flex;
  flex-direction: column;
}

.wedding-slide__media {
  position: relative;
}

.wedding-slide__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.wedding-slide__step {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: #ffffff;
  font-family: "DM Serif Display", serif;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.wedding-slide__body {
  padding: 20px 22px 24px;
}

.wedding-slide__title {
  font-family: "DM Serif Display", serif;
  font-size: 22px;
  line-height: 1.2;
  color: var(--color-primary);
  margin: 0 0 8px;
}

.wedding-slide__text {
  font-size: 14px;
  line-height: 1.65;
  color: #5a4535;
  margin: 0;
}

.wedding-slider__nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.wedding-slider__arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(131, 20, 39, 0.25);
  background: #ffffff;
  color: var(--color-primary);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}

.wedding-slider__arrow:hover {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}

.wedding-slider__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.wedding-slider__arrow:disabled:hover {
  background: #ffffff;
  color: var(--color-primary);
  border-color: rgba(131, 20, 39, 0.25);
}

@media (max-width: 760px) {
  .wedding-slider { margin-top: 28px; }
  .wedding-slide { flex-basis: 280px; }
  .wedding-slide__title { font-size: 20px; }
}