/* responsive-hero.css — fix hero image proportions on mobile devices
 *
 * Problem: Banner photos are landscape (~16:9). The default Webflow CSS sets
 *   .banner-image { height: 100%; position: absolute }
 * with no width rule. On portrait mobile viewports, this leaves the photo
 * looking horizontally stretched / cropped strangely.
 *
 * Fix: Force object-fit on banner-image with !important (to win the cascade
 * against Webflow's inline data-w-id styles), set explicit width: 100% and
 * height: 100%, and shrink the banner container height on phones so the
 * container aspect ratio gets closer to the photo aspect ratio.
 */

/* ──────────────────────────────────────────────────────────────────────
   .banner sections (about-us, gallery, contact, rooms, hotelrooms, price)
   ────────────────────────────────────────────────────────────────────── */
.banner-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 40% !important;
  max-width: none !important;
  inset: 0 !important;
}

@media (max-width: 991px) {
  .banner {
    min-height: 48vh;
  }
}

@media (max-width: 767px) {
  .banner {
    min-height: 44vh;
    padding-top: 170px;
    padding-bottom: 50px;
  }
  .banner .heading {
    font-size: 2rem;
    line-height: 1.15;
  }
  .banner .breadcrumb-block {
    margin-top: 10px;
  }
}

@media (max-width: 479px) {
  .banner {
    min-height: 40vh;
    padding-top: 160px;
    padding-bottom: 40px;
  }
  .banner .heading {
    font-size: 1.75rem;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   .project-main-image-wrapper (services: restaurante, spa-center, etc.)
   This wrapper contains BOTH the title/paragraph block AND the hero
   image, so we must NOT constrain it with a fixed aspect-ratio (the
   image gets squished to whatever vertical space is left after the
   text). Let the image use its own aspect-ratio: 3/2 from Webflow base.
   ────────────────────────────────────────────────────────────────────── */
.project-main-image-wrapper {
  width: 100%;
  overflow: hidden;
}
.project-main-image-wrapper .project-cover {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  display: block;
  /* aspect-ratio: 3/2 is already set by Webflow base CSS */
}

@media (max-width: 767px) {
  .project-main-image-wrapper {
    margin-bottom: 40px;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   .hero-section (index.html homepage)
   Webflow's base CSS pulls this section up under the navbar with a
   negative margin-top. Mobile heading is huge and ends up overlapping
   the small Pristan logo / hamburger. Fix: push the heading content
   down a bit so it clears the logo area, no other layout changes.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero-section {
    padding-top: 140px;
  }
}

@media (max-width: 479px) {
  .hero-section {
    padding-top: 120px;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   Partner logos — make them larger and stretch to fill the available
   horizontal space evenly between the carousel side dividers.
   ────────────────────────────────────────────────────────────────────── */
.partner-logo {
  height: 100px !important;
  max-width: 360px !important;
  width: auto !important;
  margin: 0 24px !important;
  flex: 0 1 auto;
}

@media (max-width: 991px) {
  .partner-logo {
    height: 80px !important;
    max-width: 280px !important;
    margin: 0 16px !important;
  }
}

@media (max-width: 767px) {
  .partner-logo {
    height: 65px !important;
    max-width: 200px !important;
    margin: 0 12px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   Sticky navbar — keep the hamburger/logo bar visible while scrolling.
   The navbar starts transparent (designed to sit over hero photos) and
   gains a translucent dark background once the user scrolls past ~40px,
   so the menu and logo stay legible over white/light content below.
   The .is-scrolled class is added by a small inline script on each page.

   Important: do NOT use backdrop-filter / filter / transform on
   .navbar-main-block — those CSS properties turn the element into a
   containing block for any position:fixed descendants, which would
   shrink the fullscreen hamburger menu down to the navbar's tiny box
   instead of letting it cover the viewport. The translucent solid
   background below is intentionally chosen so backdrop-filter isn't
   needed for readability.
   ────────────────────────────────────────────────────────────────────── */
.navbar-main-block {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar-main-block.is-scrolled {
  background-color: rgba(8, 8, 8, 0.92);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.navbar-main-block.is-scrolled .top-header {
  padding-top: 8px;
  padding-bottom: 8px;
  transition: padding 0.3s ease;
}

.navbar-main-block.is-scrolled .navbar {
  padding-top: 12px;
  padding-bottom: 12px;
  transition: padding 0.3s ease;
}

/* When the fullscreen hamburger menu is open the sticky navbar must
   step out of the way: drop the dark backdrop and unstick so the menu
   overlay can fill the viewport without the navbar drawing over it. */
body.nav-menu-open .navbar-main-block,
body.nav-menu-open .navbar-main-block.is-scrolled {
  position: relative !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body.nav-menu-open .navbar-main-block .top-header,
body.nav-menu-open .navbar-main-block .navbar {
  padding-top: revert !important;
  padding-bottom: revert !important;
}

/* ──────────────────────────────────────────────────────────────────────
   Fullscreen hamburger menu — make the logo + menu items a bit smaller
   so the logo doesn't get cropped at the top on phones (it was being
   pushed off the viewport because everything was too big to fit) and
   so the text doesn't feel oversized on desktop either.
   ────────────────────────────────────────────────────────────────────── */
.nav-menu-desktop-wrapper .menu-logo {
  max-width: 180px !important;
  margin-bottom: 24px !important;
}

.nav-menu-desktop-wrapper .nav-link {
  font-size: 28px !important;
  max-height: 1.3em !important;
  line-height: 1.3em !important;
}

.nav-menu-desktop-wrapper .menu-column {
  grid-row-gap: 16px !important;
  row-gap: 16px !important;
}

@media (max-width: 991px) {
  .nav-menu-desktop-wrapper .menu-logo {
    width: 90px !important;
    max-width: 90px !important;
    margin-bottom: 18px !important;
  }
  .nav-menu-desktop-wrapper .nav-link {
    font-size: 22px !important;
  }
  .nav-menu-desktop-wrapper .menu-column {
    grid-row-gap: 12px !important;
    row-gap: 12px !important;
  }
}

@media (max-width: 479px) {
  .nav-menu-desktop-wrapper .menu-logo {
    width: 80px !important;
    max-width: 80px !important;
    margin-bottom: 14px !important;
  }
  .nav-menu-desktop-wrapper .nav-link {
    font-size: 19px !important;
  }
  .nav-menu-desktop-wrapper .menu-column {
    grid-row-gap: 10px !important;
    row-gap: 10px !important;
  }
}

/* Make the Стаи dropdown menu fully readable when the navbar is sticky
   and scrolled — slightly more opaque background and a guaranteed
   high z-index so it never gets visually clipped by the navbar's
   translucent backdrop. */
.rooms-dropdown-menu {
  z-index: 1100 !important;
  background: rgba(8, 8, 8, 0.98) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   Hotel-rooms inline gallery — a simple responsive grid placed beneath
   the room selection cards on hotelrooms.html. Uses the shared
   data-lightbox-group attribute so lightbox.js handles the lightbox.
   ────────────────────────────────────────────────────────────────────── */
.hotelrooms-gallery-section {
  padding-top: 40px;
  padding-bottom: 80px;
}

@media (max-width: 767px) {
  .hotelrooms-gallery-section {
    padding-top: 24px;
    padding-bottom: 50px;
  }
}

.hotelrooms-gallery-title {
  text-align: center;
  margin-bottom: 36px;
}

/* Eyebrow: a single <p> centred under the heading, with thin gold lines
   drawn by ::before and ::after pseudo-elements. Using inline-block
   pseudos with vertical-align:middle guarantees the lines sit on the
   text's optical middle no matter what font ends up loading. */
.hotelrooms-gallery-eyebrow {
  font-size: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #c9a96a;
  font-weight: 500;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.hotelrooms-gallery-eyebrow::before,
.hotelrooms-gallery-eyebrow::after {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  vertical-align: middle;
  background: #c9a96a;
  opacity: 0.75;
  margin: 0 14px;
  /* Pull the line down very slightly to optically center it with the
     uppercase glyphs (which have no descenders). */
  transform: translateY(-1px);
}

.hotelrooms-gallery-heading {
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  font-weight: 400;
  letter-spacing: 1px;
  margin: 0;
  line-height: 1.2;
}

@media (max-width: 479px) {
  .hotelrooms-gallery-eyebrow::before,
  .hotelrooms-gallery-eyebrow::after {
    width: 24px;
    margin: 0 10px;
  }
}

.hotelrooms-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 30px;
}

.hotelrooms-gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 4 / 3;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  cursor: zoom-in;
}

.hotelrooms-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.hotelrooms-gallery-item:hover img {
  transform: scale(1.06);
}

@media (max-width: 991px) {
  .hotelrooms-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (max-width: 479px) {
  .hotelrooms-gallery-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .hotelrooms-gallery-item {
    aspect-ratio: 16 / 10;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   Room-gallery (used on hotelrooms/for1.html and for2.html) — ensure
   each gallery thumbnail behaves consistently on all viewports and is
   never stretched (object-fit: cover crops, never distorts).
   ────────────────────────────────────────────────────────────────────── */
.room-gallery .full-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Make the gallery section narrower on desktop / tablet so the photos
   render at a smaller, more compact size. Just constrains the width —
   doesn't fight Webflow's grid height calculation. */
@media (min-width: 992px) {
  .details-section .room-images {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  .details-section .room-images {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* On mobile, Webflow's `.gallery-lightbox { height: 100% }` is circular
   (parent .w-dyn-list / .room-gallery have no fixed height), so each
   cell ends up sized by the IMAGE's intrinsic height — for a 1:2 portrait
   that's ~580px tall and the gallery balloons to fill the viewport.
   Override with explicit aspect-ratio + height:auto so cells stay small. */
@media (max-width: 767px) {
  .room-gallery .gallery-lightbox {
    aspect-ratio: 4 / 3;
    height: auto !important;
  }
  .room-images > .gallery-lightbox {
    aspect-ratio: 16 / 10;
    height: auto !important;
  }
  /* Hero image fills its (now aspect-ratio'd) cell with cover-cropping
     so it doesn't overflow or letterbox. */
  .room-images > .gallery-lightbox .room-details-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   Room carousel — replaces the default Webflow hero+grid gallery on
   the room detail pages. One large featured image with prev/next
   arrows, a small counter, and a thumbnail strip beneath that lets
   the visitor jump to any photo. Clicking the main image opens the
   shared lightbox (via the gallery-lightbox class + lightbox.js).
   The active thumbnail gets a warm-gold border accent.
   ────────────────────────────────────────────────────────────────────── */
.room-carousel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 60px;
}

.room-carousel-main-wrap {
  position: relative;
  /* JS sets --photo-aspect to the natural aspect of the current photo,
     so the frame perfectly fits any orientation — no letterboxing,
     no cropping. Falls back to 16:9 before the first photo loads. */
  aspect-ratio: var(--photo-aspect, 16 / 9);
  background: #1a1614;
  border-radius: 14px;
  overflow: hidden;
  transition: aspect-ratio 0.25s ease;
}

.room-carousel-main-link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.room-carousel-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s ease;
}

.room-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.room-carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.8);
}

.room-carousel-arrow:active {
  transform: translateY(-50%) scale(0.94);
}

.room-carousel-arrow.prev {
  left: 14px;
}

.room-carousel-arrow.next {
  right: 14px;
}

.room-carousel-counter {
  position: absolute;
  bottom: 14px;
  right: 14px;
  padding: 5px 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  z-index: 2;
  pointer-events: none;
}

.room-carousel-thumbs {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.room-carousel-thumb {
  flex: 1;
  min-width: 0;
  aspect-ratio: 3 / 4;
  padding: 0;
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  transition: border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

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

.room-carousel-thumb:hover {
  opacity: 0.85;
}

.room-carousel-thumb.is-active {
  opacity: 1;
  border-color: #c9a96a;
}

.room-carousel-thumb:focus-visible {
  outline: 2px solid #c9a96a;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .room-carousel {
    gap: 10px;
    margin-bottom: 40px;
  }
  .room-carousel-main-wrap {
    border-radius: 10px;
  }
  /* Apple-recommended 44px tap targets on mobile */
  .room-carousel-arrow {
    width: 44px;
    height: 44px;
    font-size: 24px;
    background: rgba(0, 0, 0, 0.65);
  }
  .room-carousel-arrow.prev { left: 8px; }
  .room-carousel-arrow.next { right: 8px; }
  .room-carousel-counter {
    bottom: 10px;
    right: 10px;
    font-size: 11px;
    padding: 4px 10px;
  }
  /* Thumbs scroll horizontally on phones so each stays touch-friendly
     (~70px) instead of getting squished to 50-60px when there are 5. */
  .room-carousel-thumbs {
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .room-carousel-thumbs::-webkit-scrollbar {
    display: none;
  }
  .room-carousel-thumb {
    flex: 0 0 72px;
    scroll-snap-align: start;
    border-radius: 6px;
    border-width: 1.5px;
  }
}

@media (max-width: 479px) {
  .room-carousel-thumb {
    flex: 0 0 66px;
  }
}



/* ──────────────────────────────────────────────────────────────────────
   Room/apartment cards on rooms.html and index.html
   Center the text content (title, price, "ВИЖ ОЩЕ" button, beds/baths
   icons) inside each card. This way the button sits in the middle of
   the card instead of the left edge — on mobile, tapping the right
   half of the card was triggering swipes through the rooms slider
   instead of opening the room page.
   ────────────────────────────────────────────────────────────────────── */
.room-card .room-title-price {
  text-align: center;
}
.room-card .room-title-price .room-price-block {
  justify-content: center;
}
.room-card .room-info {
  align-items: center;
}
.room-card .room-beds-baths-info {
  justify-content: center;
}

/* ──────────────────────────────────────────────────────────────────────
   Contact cards (contact.html — "Пишете ни", "Пишете във вайбър",
   "Обадете ни се"). Add a consistent hover/tap animation across all
   three: gold border glow, subtle lift, slight background tint.
   Works on mouse hover, touch tap (:active), and keyboard focus.
   ────────────────────────────────────────────────────────────────────── */
.contact-card-with-bg-image {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease,
              background-color 0.3s ease;
}
.contact-card-with-bg-image:hover,
.contact-card-with-bg-image:focus-within,
.contact-card-with-bg-image:active {
  transform: translateY(-6px);
  border-color: #c9a96a;
  box-shadow: 0 12px 30px rgba(201, 169, 106, 0.18);
}

/* ──────────────────────────────────────────────────────────────────────
   Hamburger menu hover animation — replace the stock pexels/unsplash
   photos that Webflow's IX bundle reveals on each nav-link hover with
   a subtle dark+gold gradient. Webflow's IX was only bound to "Начало"
   (the first menu item) — so we use pure CSS :hover instead, which
   works for ALL menu items.
   ────────────────────────────────────────────────────────────────────── */
.nav-menu-desktop-wrapper .nav-image-wrapper img {
  display: none !important;
}

/* Override Webflow's default `display: none` so CSS opacity transition
   works. Default hidden via opacity, revealed on parent hover. */
.nav-menu-desktop-wrapper .nav-image-wrapper {
  display: block !important;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 30%, rgba(201, 169, 106, 0.22), transparent 55%),
    radial-gradient(circle at 30% 80%, rgba(201, 169, 106, 0.12), transparent 60%),
    linear-gradient(135deg, #1a1614 0%, #2a221a 50%, #1a1614 100%);
  transition: opacity 0.4s ease;
}

.nav-menu-desktop-wrapper .nav-image-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(201, 169, 106, 0.18) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
}

/* Show on hover/focus of the parent link, restart sheen on each enter */
.nav-menu-desktop-wrapper .nav-link-block:hover .nav-image-wrapper,
.nav-menu-desktop-wrapper .nav-link-block:focus-visible .nav-image-wrapper {
  opacity: 1;
}
.nav-menu-desktop-wrapper .nav-link-block:hover .nav-image-wrapper::before,
.nav-menu-desktop-wrapper .nav-link-block:focus-visible .nav-image-wrapper::before {
  animation: nav-image-sheen 2.2s ease-in-out infinite;
}

@keyframes nav-image-sheen {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* ──────────────────────────────────────────────────────────────────────
   Slide-up text reveal — Webflow IX was animating this only on Начало
   (the dual-text pattern: normal text + gold "primary-color" text on top).
   Apply CSS-only equivalent to ALL menu items for consistency.
   ────────────────────────────────────────────────────────────────────── */
.nav-menu-desktop-wrapper .nav-link {
  position: relative !important;
  overflow: hidden !important;
  display: inline-block !important;
}

.nav-menu-desktop-wrapper .nav-link .default-text {
  display: block !important;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1) !important;
}

/* Gold text starts BELOW the normal text */
.nav-menu-desktop-wrapper .nav-link .default-text.primary-color {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

/* On hover: both slide up by one line — normal text moves up out of view,
   gold text moves up into view (replacing it). */
.nav-menu-desktop-wrapper .nav-link-block:hover .nav-link .default-text,
.nav-menu-desktop-wrapper .nav-link-block:focus-visible .nav-link .default-text {
  transform: translateY(-100%) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   hotelrooms.html — remove the dark gradient .room-overlay on this page
   only (scoped via :has() to the unique .hotel-rooms-intro-text class).
   The overlay was bleeding past the cards on mobile and visually cutting
   off the "ГАЛЕРИЯ" heading of the next section.
   ────────────────────────────────────────────────────────────────────── */
#works:has(.hotel-rooms-intro-text) .room-overlay {
  display: none !important;
}