/* Import Inter font from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

/* Apply Inter font to the entire body */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}

/* 1) Posun čtvrté kolony carouselu doleva o 120px od MD výše */
@media (min-width: 768px) {
  .custom-offset-right {
    margin-right: 0 !important;
  }
}

/* 2) Přecizné styly pro tlačítko v carousel-control-next */
.control-next-custom {
  right: 30px;
  bottom: 50%;
  transform: translateY(260%);
  width: 64px;
  height: 64px;
}

/* 3) Podtržení nadpisu "Náš tým" */
.underline-custom {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  padding-bottom: 0.5rem;
  border-bottom: none !important;
}

.underline-custom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 0.5px;
  background-color: var(--sr-black);
}

/* 4) Minimum výšky pro popis rolí lektorů */
.team-role {
  min-height: 60px;
}

/* 5) Velikost a oříznutí obrázků lektorů */
.team-photo {
  width: 140px;
  height: 140px;
  object-fit: cover;
}

/* Plus ikona u jmen lektorů (náhrada obrázku) */
.team-plus {
  font-size: 18px;
  line-height: 1;
}

/* Kruhový rámeček kolem pluska jako v původním obrázku */
.team-plus-btn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--sr-black);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 7) Malý dělicí proužek */
.divider-small {
  width: 50px;
  height: 2px;
  background: var(--sr-black);
  border: none;
}

/* 8) Ikonky sociálních sítí v CTA */
.social-icon {
  width: 96px;
  height: 96px;
}
.social-icon img {
  width: 60px;
  height: 60px;
}

/* 10) Max šířka loga v patičce */
.footer-logo {
  max-width: 200px;
  height: auto;
}

/* Hero CTA – úzké růžové tlačítko "REZERVOVAT" */
.btn-hero-reserve {
  background-color: var(--sr-pink-200);
  color: var(--sr-black);
  border: 1px solid var(--sr-black);
  border-radius: 50px;
  padding: 0.35rem 1.1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  transition: background-color 0.2s ease, transform 0.1s ease,
    box-shadow 0.2s ease;
}

.btn-hero-reserve:hover {
  background-color: var(--sr-pink-300);
  color: var(--sr-black);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.btn-hero-reserve:active {
  transform: translateY(1px);
}

/* Hero CTA icon circle to match sauna CTA */
.btn-hero-reserve .icon-circle {
  width: 36px;
  height: 36px;
  background-color: var(--sr-pink-200);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sr-white);
  font-size: 1rem;
  font-weight: bold;
}

/* 11) Barva teček v kartách sauny */
.sauna-bullets {
  margin-bottom: 0 !important;
}

.sauna-bullets li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1rem;
  margin-bottom: 0.5rem !important;
}

.sauna-bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: -0.1rem;
  color: var(--sr-bullet);
  font-weight: 900;
  font-size: 1.2em;
}

/* 12) Custom sauna reservation button */
.btn-sauna-reserve {
  background-color: var(--sr-white);
  border: 1px solid var(--sr-black);
  color: var(--sr-black);
  border-radius: 50px;
  padding: 0.3rem 0.3rem 0.3rem 1.5rem;
  text-decoration: none;
  display: inline-flex;
  width: fit-content;
  white-space: nowrap;
  align-items: center;
  gap: 1rem;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.btn-sauna-reserve:hover {
  background-color: var(--sr-gray-50);
  color: var(--sr-black);
  text-decoration: none;
}

.btn-sauna-reserve .icon-circle {
  width: 36px;
  height: 36px;
  background-color: var(--sr-pink-200);
  border-radius: 50%;
  display: flex;

  align-items: center;
  justify-content: center;
  color: var(--sr-white);
  font-size: 1rem;
  font-weight: bold;
}

/* Delší varianta hero tlačítka pouze pro homepage */
.btn-hero-long {
  gap: 2.5rem;
}

/* 14) Badge s délkou lekce v hlavičce karty (zarovnaný s nadpisem) */
.duration-badge {
  background-color: var(--sr-pink-200);
  color: var(--sr-text-dark);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1;
  display: inline-block;
}

/* 15) Jemný dělící proužek uvnitř karty lekce */
.lesson-divider {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  margin: 2rem 0 1.5rem 0;
}

/* 16) Divider použivaný v kartách (náhrada inline stylu) */
.card-divider {
  border: 0;
  border-top: 1px solid var(--sr-black);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

/* 17) Hero sekce – přesun inline stylů do CSS */
.hero-title-offset {
  margin-top: -3rem;
}

.hero-image-wrap {
  margin-top: -2rem;
}

.hero-image-frame {
  min-height: 400px;
}

.hero-image {
  object-fit: cover;
  object-position: left center;
}

.hero-lead {
  max-width: 350px;
}

/* 18) Doplňující styl pro podtržení nadpisů sekcí */
.section-underline {
  white-space: nowrap;
  font-size: 1.2rem;
}

/* 19) Utilita pro centrování inline bloků (použito pro pseudo-podtržení) */
.centered-inline {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

/* 20) Hero – varianta pro stránku sauna */
.sauna-hero-wrap {
  margin-top: -2rem;
  margin-right: 2rem;
}

.sauna-hero-frame {
  min-height: 400px;
}

.hero-image-right {
  object-fit: cover;
  object-position: right center;
}

/* Mobil:hero*/
@media (max-width: 767.98px) {
  .sauna-hero-wrap {
    margin-right: 0;
  }

  .hero-image-right {
    object-position: 80% center;
  }

  /* Hero text */
  #hero .hero-title-offset {
    margin-bottom: 1.25rem !important;
  }

  #hero .hero-lead {
    margin-top: 0 !important;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

/* Homepage hero: zarovnání CTA tlačítka na střed na mobilu, vlevo na desktopu */
@media (max-width: 991.98px) {
  body#home #hero .btn-hero-long {
    align-self: center;
  }
}

@media (min-width: 992px) {
  body#home #hero .btn-hero-long {
    align-self: flex-start;
  }
}

/*  Carousel controls */
#programCarousel .carousel-control-prev,
#programCarousel .carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 72px !important;
  height: 72px !important;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  backdrop-filter: saturate(120%) blur(2px);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Zabraň přetékání obsahu uvnitř carouselu */
#programCarousel {
  overflow: hidden;
}

#programCarousel .carousel-control-prev {
  left: 24px;
}

#programCarousel .carousel-control-next {
  right: 24px;
}

#programCarousel .carousel-control-prev-icon,
#programCarousel .carousel-control-next-icon {
  filter: invert(1);
  width: 1.35rem;
  height: 1.35rem;
}

#programCarousel .carousel-control-prev:hover,
#programCarousel .carousel-control-next:hover {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

@media (max-width: 767.98px) {
  body#home #hero {
    padding-right: 1rem !important;
  }

  #programCarousel .carousel-control-prev,
  #programCarousel .carousel-control-next {
    width: 56px !important;
    height: 56px !important;
  }

  #programCarousel .carousel-control-prev {
    left: 12px;
  }

  #programCarousel .carousel-control-next {
    right: 12px;
  }
}

/*  Obecné utility */
.img-cover {
  object-fit: cover;
}

.section-description {
  max-width: 1000px;
  margin: 0 auto;
}

.section-cta-lg {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

/*  Sauna cards and image height adjustment */
.sauna-card-primary,
.sauna-card-secondary,
.sauna-image-container {
  max-height: 90%;
  min-height: 420px;
}

/* Pozadí sekce "péče o ženy" */
.bg-pece-zeny {
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 300px;
}