/* === PLAYFAIR DISPLAY FROM GOOGLE FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,900;1,400;1,600;1,900&display=swap');

/* === OPEN SANS SEMI-CONDENSED (SELF-HOSTED) === */
@font-face {
  font-family: 'Open Sans SemiCondensed';
  src: url('fonts/Open_Sans/OpenSans_SemiCondensed-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans SemiCondensed';
  src: url('fonts/Open_Sans/OpenSans_SemiCondensed-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

/* === USAGE EXAMPLES === */

/* Playfair Display Regular */
.playfair-regular {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-style: normal;
}

/* Playfair Display SemiBold Italic */
.playfair-semibold-italic {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-style: italic;
}

/* Playfair Display Black Italic */
.playfair-black-italic {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-style: italic;
}

/* Open Sans SemiCondensed Regular */
.opensans-semicondensed {
  font-family: 'Open Sans SemiCondensed', sans-serif;
  font-weight: 400;
}

/* Open Sans SemiCondensed SemiBold */
.opensans-semicondensed-semibold {
  font-family: 'Open Sans SemiCondensed', sans-serif;
  font-weight: 600;
}



/* - - - - HEADER */
.stoliva-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 8vh;
  background: #001b3d;
  z-index: 9999;
  box-shadow: 0 1px 18px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
}





/* Optionally animate hamburger on open (future expansion) */
/* .header-hamburger.active span:nth-child(1) {...} */

@media (max-width: 700px) {
  .header-inner {
    padding: 0 5vw;
  }
  .header-logo img {
    height: 7vh;
    max-height: 30px;
    min-height: 22px;
  }
}












/* === GLOBAL === */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: 'Open Sans Condensed', sans-serif;
  overflow-x: hidden;
}


#book-now-btn{
font-family: 'Open Sans SemiCondensed', sans-serif;
font-size: 0.9vw;
padding-left: 2.5vw;
padding-right: 2.5vw;
padding-top: 0.45vw;
padding-bottom: 0.45vw;
border: solid;
border-width: 0px;
position: absolute;
top:45vh;
right: 0vw;
background-color: #499fdd;
}


p {
  
  font-family: 'Open Sans SemiCondensed', sans-serif;
  font-size: 1.25vw;
  line-height: 1.5;
  overflow-x: hidden;
}


h1 {
  font-family: 'Playfair Display', serif;
  font-size: 3vw;
  font-weight: 100;
  text-align: right;
  line-height: 1.25;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}

h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2vw;
  font-weight: 100;
  margin: 0;
  z-index: 1;
}

h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.75vw;
  font-weight: 600;
  line-height: 1;
  margin: 0;
  z-index: 1;
}



/* === LANDING SECTION === */
.landing-carousel {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url("uploads/stalexphotography-1394.jpg") center/cover no-repeat;
}
.landing-carousel .overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 27, 61, 0.3);
  z-index: 1;
}
.landing-carousel .logo {
  position: absolute;
  top: 3vw;
  left: 3vw;
  max-width: 17vw;
  z-index: 3;
}
.landing-carousel .title-text {
  position: absolute;
  top: 53%;
  right: 7vw;
  transform: translateY(-50%);
  width: 43vw;
  color: white;
  font-size: 3vw;
  text-align: right;
  line-height: 1.25;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
  z-index: 2;
}
.landing-carousel .ligature {
  font-family: 'Playfair SemiBold Italic', serif;
}

/* === STORY SECTION === */
.story-section {
  background: #fffaee;
  padding: 3vw;
  display: flex;
  flex-direction: column;
  gap: 3vw;
  color: #001B3D;
}
.container-1 {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* align text container to the right */
  position: relative;
  min-height: 200px;
  padding-right: 5vw; /* optional: add right padding */
}

.container-1-bg {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  padding-top: 10vh;
  width: 35vw;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.container-1-text {
  text-align: right;
  max-width: 50vw;
  line-height: 1.5;
}

.container-1-text .emphasis {
  font-family: 'Playfair SemiBold Italic', serif;
}

.container-2,
.container-5 {
  max-width: 50vw;
  margin: 0 auto;
  z-index: 10;
}
.container-3 {
  text-align: center;
  font-size: 2vw;
  margin-top:5vh;
  margin-bottom:5vh;
}
.container-4 {
  display: flex;
  justify-content: center;
}
.intro-video {
  width: 70vw;
  border: none;
}

/* === SECTION HOUSES === */
#section-houses {
  display: flex;
  position: relative;
  width: 100%;
  padding-top:3vw;
  background: #fffaee;
}

.stoliva-text-wrapper {
  width: 33.3333%;
  min-height: 240vh;
  background: #fffaee;
  position: relative;
  color: #001B3D;
}

.stoliva-fixed-text {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 5;
}

.stoliva-text-block {
  position: absolute;
  max-width: 30vw;
  padding: 0 4vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 1.2vw;
}

.stoliva-text-block.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Text styles */
.stoliva-label {
  text-transform: uppercase;
  font-size: 0.9vw;
  letter-spacing: 0.15em;
  font-family: 'Open Sans SemiCondensed', sans-serif;
  font-weight: 600;
}
.stoliva-title {
  font-size: 2.4vw;
}

.stoliva-title-plain {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
}

.stoliva-title-emphasis {
  font-family: 'Playfair SemiBold Italic', serif;
  font-size: 2vw;
  font-weight: 400;
  display: inline; /* Ensure it doesn’t break lines or layout */
}



.stoliva-description {
  font-size: 1.15vw;
  line-height: 1.7;
  font-family: 'Open Sans SemiCondensed', sans-serif;
}
.stoliva-link {
  font-size: 1.75vw;
  font-family: 'Open Sans SemiCondensed', sans-serif;
  font-weight: 600;
  color: #001B3D;
  text-decoration: none;
  border-bottom: 2px solid #001B3D;
  padding-bottom: 0.2vw;
  width: fit-content;
}
.stoliva-link:hover {
    font-size: 1.75vw;
  font-family: 'Open Sans SemiCondensed', sans-serif;
  font-weight: 600;
  color: #001B3D;
  text-decoration: none;
  border-bottom: 2px solid #001B3D;
  padding-bottom: 0.2vw;
  width: fit-content;
  opacity: 0.8;
}

#stoliva-link2 {
  font-size: 1.75vw;
  font-family: 'Open Sans SemiCondensed', sans-serif;
  font-weight: 600;
  color: #001B3D;
  text-decoration: none;
  border-bottom: 2px solid #001B3D;
  padding-bottom: 0.2vw;
  display: block;     /* makes it a block so margin works */
  width: fit-content; /* shrink to text size */
  margin: 0 auto;     /* centers horizontally */
}



/* Image Layout */
.stoliva-layout {
  width: 66.6667%;
  display: flex;
  flex-direction: column;
}
.stoliva-image-column img {
  width: 100%;
  height: 105vh;
  object-fit: cover;
  display: block;
}

/* === MEDIA === */
@media screen and (max-width: 1024px) {
  .stoliva-fixed-text {
    display: none;
  }
  .stoliva-text-wrapper {
    display: none;
  }
  .stoliva-layout {
    width: 100%;
  }
}
/***** CURATED SERVICES + VISIT MONTENEGRO (unified card design) *****/
:root{
  --navy: #001b3d;
  --cream: #fffaee;
  --arrow-w: clamp(28px, 3vw, 56px);
  --card-gap: 2vw;
}

/* ================= Curated Services ================= */
.curated-services{
  width: 100vw;
  background: var(--navy);
  color: var(--cream);
  padding: 7vw 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* Headline bar: 100vw with 7vw padding, right-aligned */
.curated-headline-bar{
  width: 100vw;
  padding: 0 7vw;           /* 7vw padding (fixed) */
  box-sizing: border-box;
  text-align: right;
}
.curated-headline-bar h2{
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  margin: 0;
  color: inherit;           /* uses section color */
}
.curated-headline-bar .emphasis{
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 600;
  color: inherit;
}

/* Description: 50vw content width, centered, left-aligned text */
.curated-description{
  width: 50vw;
  margin: 6vh auto 8vh;
  text-align: left;
  opacity: .96;
  font-family: 'Open Sans SemiCondensed', sans-serif;
  color: inherit;
}

/* Carousel: cards region is 60vw + arrow widths */
.curated-carousel{
  width: calc(60vw + (2 * var(--arrow-w)));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1.2vw;
}

/* Arrows (no background) */
.carousel-arrow{
  width: var(--arrow-w);
  min-width: var(--arrow-w);
  height: auto;
  background: none;
  border: none;
  color: currentColor; /* inherits section text color */
  font-size: clamp(28px, 3rem, 4rem);
  line-height: 1;
  cursor: pointer;
  padding: 0;
  user-select: none;
  transition: opacity .2s ease;
}
.carousel-arrow:hover{ opacity: .85; }

/* Track is exactly 60vw wide with 3 cards and gaps */
.curated-track{
  width: 60vw;
  display: flex;
  gap: var(--card-gap);
  box-sizing: border-box;
}

/* Card: 3 per row inside 60vw with two gaps of var(--card-gap) */
.curated-card{
  flex: 0 0 calc((60vw - (2 * var(--card-gap))) / 3);
  background: var(--cream);
  color: var(--navy);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  transition: transform .26s cubic-bezier(.57,0,.32,1.1), box-shadow .22s cubic-bezier(.57,0,.32,1.1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  margin:10px;
}
.curated-card:hover{
  transform: scale(1.05);
  box-shadow: 0 4px 32px rgba(0,0,0,.14);
}

/* Image area */
.curated-card-img-wrap{
  width: 100%;
  aspect-ratio: 3/2;
  background: #ddd;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.curated-card-img-wrap img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .33s cubic-bezier(.17,.67,.83,.67);
}
.curated-card:hover .curated-card-img-wrap img{
  transform: scale(1.055) rotate(-1deg);
}

/* ===== Shared title band for BOTH sections (fixed height + typography) ===== */
.curated-card-title{
  height: 8vh;                         /* FIXED HEIGHT */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 1rem;
  line-height: 1.2;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 28px);
  text-align: center;
  overflow: hidden;                     /* enforce fixed height */
  white-space: normal;                  /* allow wrapping */
}

/* Curated Services: title band colors */
.curated-services .curated-card-title{
  background: var(--cream);
  color: var(--navy);
}

/* Learn More: 100% centered */
.carousel-learnmore{
  width: 100%;
  text-align: center;
  margin-top: 2vw;
}
.carousel-learnmore .btn-link{
  font-size: 1.75vw;
  font-family: 'Open Sans SemiCondensed', sans-serif;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 2px solid #ffffff;
  padding-bottom: 0.2vw;
}
.carousel-learnmore .btn-link:hover{ opacity: .85; }

/* Responsive (keep proportions) */
@media (max-width: 900px){
  .curated-description{ width: 92vw; }
  .curated-carousel{ width: calc(92vw + (2 * var(--arrow-w))); }
  .curated-track{ width: 92vw; gap: 4vw; }
  .curated-card{ flex-basis: calc(92vw - 8vw); } /* ~1 card visible */
  .carousel-arrow{ font-size: 2.4rem; }
}

/* ================= Visit Montenegro (ONLY invert title band colors) ================= */
.visitMontenegro {
  width: 100vw;
  background: var(--cream);
  color: var(--navy);
  padding: 7vw 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* Headline + description reuse curated classes; just inherit navy text */
.visitMontenegro .curated-headline-bar,
.visitMontenegro .curated-description {
  color: var(--navy);
}

/* Carousel frame identical to curated; arrows inherit navy */
.visitMontenegro .curated-carousel { /* same sizing; no change */ }
.visitMontenegro .carousel-arrow   { color: var(--navy); }

/* Track & cards identical to curated (no border radius added) */
.visitMontenegro .curated-track { /* same as curated */ }
.visitMontenegro .curated-card  { /* same as curated */ }
.visitMontenegro .curated-card-img-wrap { /* same as curated */ }
.visitMontenegro .curated-card:hover .curated-card-img-wrap img { /* same as curated */ }

/* ONLY invert the title band colors here */
.visitMontenegro .curated-card-title{
  background: var(--navy);
  color: var(--cream);
}

/* Learn More (navy) */
.visitMontenegro .carousel-learnmore .btn-link{
  color: var(--navy);
  border-bottom-color: var(--navy);
}

/* Responsive mirrors curated */
@media (max-width: 900px){
  .visitMontenegro .curated-description{ width: 92vw; }
  .visitMontenegro .curated-carousel{ width: calc(92vw + (2 * var(--arrow-w))); }
  .visitMontenegro .curated-track{ width: 92vw; gap: 4vw; }
  .visitMontenegro .curated-card{ flex-basis: calc(92vw - 8vw); }
  .visitMontenegro .carousel-arrow{ font-size: 2.4rem; }
}


/* GALLERY */
/* GALLERY SECTION */
@font-face {
  font-family: 'Open Sans SemiCondensed';
  src: url('fonts/Open_Sans/OpenSans_SemiCondensed-Regular.ttf') format('truetype');
}

/* GALLERY */
/* GALLERY SECTION */
.story-gallery {
  background: #fffaee;
  padding: 4vw 6vw;
  display: flex;
  flex-direction: column;
  gap: 3vw;
  color: #001b3d;
}

.story-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
.story-header h2 {
  font-size: 2.5vw;
  font-family: 'Playfair Display', serif;
}
.story-header p {
  font-size: 1.1vw;
  margin: 1vw 0 2vw;
}
.story-button {
  font-size: 1vw;
  background: transparent;
  border: 2px solid #001b3d;
  color: #001b3d;
  padding: 0.8vw 2vw;
  cursor: pointer;
  font-family: 'Playfair Display', serif;
}
.story-button:hover {
  background: #001b3d;
  color: #fffaee;
}

/* CAROUSEL */
.story-carousel-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 55vh;
  width: 100%;
}

/* Track holds the slides */
.story-carousel-track {
  display: flex;
  gap: 1vw;
  transition: transform 0.6s ease-in-out;
  width: max-content;
  margin: 0 auto;
}

/* Each Slide */
.story-slide {
  flex: 0 0 45vw;
  height: 55vh;
  border-radius: 10px;
  overflow: hidden;
  position: relative; /* for overlay */
  transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 0.6;
  transform: scale(0.9);
  cursor: pointer;
  user-select: none;
}

/* Overlay gradient: black at bottom fading to transparent on top */
.story-slide::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;  /* height of the gradient */
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  border-radius: 10px;
  pointer-events: none;
  z-index: 1;
}

/* Images inside slide */
.story-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  position: relative;
  z-index: 0;
}

/* Centered Slide (fully visible) */
.story-slide.centered {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* Description box (bottom-left of center image) */
.story-description {
  position: absolute;
  bottom: 3vh;
  left: 23vw;
  font-size: 1.3vw;
  color: white;
  background: transparent;
  padding: 0;
  border-radius: 0;
  max-width: 45vw;
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(0,0,0,0.8); /* improve readability */
  font-family: 'Open Sans SemiCondensed', sans-serif;
}

/* Navigation arrows */
/* Navigation arrows */
.nav-btn {
  width: 3vw;
  height: 3vw;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: absolute !important;
  z-index: 9999 !important;
}


.nav-btn.left {
  left: 59vw;
  bottom: 2vh;
}

.nav-btn.right {
  left: 62vw;
  bottom: 2vh;
}

.nav-btn img {
  width: 60%;  /* Adjust size as needed */
  height: auto;
  pointer-events: none;
}

.nav-btn:hover {
  background-color: #001b3d;
}

.nav-btn:hover {
  background: none;
  filter: brightness(0.8);
}






/* Reuse container-1 styles for the blog section */

.blog{
background-color: #fffaee;

}

/* Blog content container */
.blog-content {
  max-width: 700px;
  margin: 0 auto;
  background: transparent; /* changed from #fff to transparent */
  padding: 3vw 4vw;
  border-radius: 10px;
  box-shadow: none; /* remove shadow or reduce if needed */
  color: #001b3d;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
}

/* Optional: add subtle border or shadow if needed */
.blog-content.with-border {
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  padding: 3vw 4vw;
}

/* Titles */
.blog-title {
  font-size: 1.8vw;
  font-weight: 400;
  margin: 0;
  color: #001b3d;
  font-family: 'Open Sans SemiCondensed';
}

/* Excerpts */
.blog-excerpt {
  font-size: 1.1vw;
  color: #333;
  margin: 0;
  font-family: 'Open Sans SemiCondensed', sans-serif;
}


.container-3{
  font-size: 2vw;
  color: #333;
  margin: 0;
  font-family: 'Open Sans SemiCondensed', sans-serif;
}


/* Read more links */
.blog-readmore {
  font-size: 1vw;
  color: #001b3d;
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
  align-self: flex-start;
  transition: opacity 0.3s ease;
  font-family: 'Playfair Display', serif;
}

.blog-readmore:hover {
  opacity: 0.7;
}


.latest-feed{ 
  font-size: 1.8vw;
  font-weight: 400;
  margin: 0;
  color: #001b3d;
  font-family: 'Playfair SemiBold Italic', serif;
}


    .btn-book {
      display: block;
      margin: 2rem auto 0 auto;
      font-size: 1.75vw;
      font-family: 'Open Sans SemiCondensed', sans-serif;
      font-weight: 600;
      color: #001b3d;
      text-decoration: none;
      border-bottom: 2px solid #001b3d;
      padding-bottom: 0.2vw;
      background-color: transparent;
      width: fit-content;
    }

    .btn-book:hover {
      display: block;
      margin: 2rem auto 0 auto;
      font-size: 1.75vw;
      font-family: 'Open Sans SemiCondensed', sans-serif;
      font-weight: 600;
      color: #001b3d;
      text-decoration: none;
      border-bottom: 2px solid #001b3d;
      padding-bottom: 0.2vw;
      background-color: transparent;
      width: fit-content;
    }

/* ===== Mobile overrides (append at end; desktop unchanged) ===== */
.desktop-only { display: block; }
.mobile-only  { display: none; }

@media (max-width: 900px){
  /* Swap visibility */
  .desktop-only { display: none; }
  .mobile-only  { display: grid; }

  /* Typography (mobile only) */
  h1 { font-size: clamp(28px, 9vw, 44px); text-align: left; line-height: 1.2; }
  h2 { font-size: clamp(22px, 6.4vw, 32px); }
  h3 { font-size: clamp(18px, 5.2vw, 26px); }
  p  { font-size: clamp(15px, 4.6vw, 20px); line-height: 1.6; }

  /* Hero */
  .landing-carousel { height: 78vh; }
  .landing-carousel .title-text{
    top: 54%;
    right: 50%;
    transform: translate(50%,-50%);
    width: 86vw;
    text-align: left;
  }

  /* Story section widths */
  .container-1 { justify-content: center; padding-right: 0; }
  .container-1-bg{
    width: 56vw; opacity: .18;
    left: 50%; transform: translate(-50%,-50%);
  }
  .container-1-text { max-width: 86vw; text-align: center; }
  .container-2, .container-5 { max-width: 86vw; }
  .intro-video { width: 92vw; }

  /* Static lists replace carousels on mobile */
  .curated-static{
    width: 92vw;
    margin: 0 auto;
    gap: 4vw;
    grid-template-columns: 1fr; /* 1 per row */
  }
  .curated-static .curated-card{
    background: #fff;
    color: #001b3d;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
  }

  /* Title band tighter on phones */
  .curated-card-title{
    height: auto;
    padding: .9rem 1rem;
    font-size: clamp(18px, 5vw, 22px);
  }

  /* Invert for Visit Montenegro */
  .visitMontenegro .curated-static .curated-card-title{
    background: #001b3d;
    color: #fffaee;
  }
}

/* --- Fix carousel arrow layout on desktop --- */
.curated-carousel{
  /* include both arrow widths AND the two gaps */
  width: calc(60vw + (2 * var(--arrow-w)) + (2 * var(--card-gap)));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--card-gap);     /* replaces column-gap to match width calc */
  flex-wrap: nowrap;        /* prevent wrapping that pushes the right arrow down */
}

.carousel-arrow{
  flex: 0 0 var(--arrow-w); /* don’t shrink */
  width: var(--arrow-w);
  height: var(--arrow-w);   /* gives it a box so vertical centering works */
  display: grid;
  place-items: center;
  line-height: 1;
  padding: 0;
}

.curated-track{ width: 60vw; }  /* keep track width stable */

/* ---------- MOBILE TITLE/SPAN FIXES ---------- */
@media (max-width: 900px){

  /* Let title bands grow to fit wrapped text */
  .curated-card-title{
    height: auto;            /* no fixed height on mobile */
    min-height: 3.2em;       /* ensures a decent band height */
    padding: .7rem 1rem;     /* breathing room */
    white-space: normal;
    overflow: visible;       /* avoid clipping italics descenders */
    line-height: 1.25;
  }

  /* Make any spans inside titles inherit the parent typography/colors */
  .curated-card-title span,
  h1 span, h2 span, h3 span{
    display: inline;
    font: inherit;           /* font-family/weight/size/italic from parent */
    color: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    white-space: inherit;
  }

  /* Your emphasis classes should NOT rescale on mobile */
  .emphasis,
  .stoliva-title-emphasis{
    font-style: italic;
    font-weight: 600;
    font-size: inherit;      /* override the desktop 2vw */
  }

  /* Optional: slightly larger mobile heading sizes so they read well */
  .curated-headline-bar h2{
    font-size: clamp(20px, 5.2vw, 30px);
  }
  .curated-description p{
    font-size: clamp(14px, 3.8vw, 18px);
  }
}

/* ===== MOBILE: simple stacked Section HOUSES (no JS) ===== */
.stoliva-mobile{ display:none; }

@media (max-width:1024px){
  /* Hide desktop scroll-sync parts entirely */
  .stoliva-text-wrapper,
  .stoliva-fixed-text,
  .stoliva-layout,
  #scrollStart, #scrollEnd{
    display:none !important;
  }

  /* Show the mobile list */
  .stoliva-mobile{
    display:grid;
    gap: 8vw;
    width: 100%;
    padding: 6vw 5vw 12vw;
    background:#fffaee;
    color:#001B3D;
  }

  .stoliva-mobile .m-block{
    display:grid;
    gap: 4vw;
	padding-top: 10px;
	padding-bottom: 10px;
  }

  .stoliva-mobile .m-images{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 3vw;
  }
  .stoliva-mobile .m-images img{
    width:100%;
    height: 40vw;           /* responsive box with same height for both */
    object-fit:cover;
    display:block;
  }

  .stoliva-mobile .m-text h2{
    margin:0 0 .8rem 0;
    font-family: 'Playfair Display', serif;
    font-weight:400;
    line-height:1.15;
    font-size: clamp(22px, 6.2vw, 30px);
  }
  .stoliva-mobile .m-text h3{
    margin:.2rem 0 .6rem 0;
    font-family:'Playfair Display', serif;
    font-weight:600;
    font-size: clamp(18px, 4.8vw, 22px);
    line-height:1.1;
  }
  .stoliva-mobile .stoliva-description,
  .stoliva-mobile .m-text p{
    font-family:'Open Sans SemiCondensed', sans-serif;
    font-size: clamp(14px, 3.8vw, 18px);
    line-height:1.6;
    margin:.4rem 0 0 0;
  }

  /* Make emphasis spans inherit size on mobile */
  .stoliva-mobile .stoliva-title-emphasis{
    font-style: italic; font-weight:600; font-size: inherit;
  }

  /* Link */
  .stoliva-mobile .stoliva-link{
    display:inline-block;
    margin-top: .9rem;
    font-size: clamp(14px, 4.5vw, 18px);
    border-bottom: 2px solid currentColor;
    color:#001B3D;
    text-decoration:none;
    padding-bottom:.15rem;
  }
  .stoliva-mobile .stoliva-link:hover{ opacity:.85; }
}


/* === Mobile: bigger BOOK NOW & LEARN MORE === */
@media (max-width: 900px){
  .btn-book{
    font-size: clamp(18px, 5.6vw, 26px);
    line-height: 1.2;
    padding-bottom: .35rem;   /* keeps underline away from text */
    border-bottom-width: 2px;
  }

  /* Both Learn More styles */
  .carousel-learnmore .btn-link,
  .stoliva-link{
    font-size: clamp(18px, 5.2vw, 24px);
    line-height: 1.2;
    padding-bottom: .35rem;
    border-bottom-width: 2px;
  }
}

/* === Mobile rhythm & gaps (small, consistent spacing) === */
@media (max-width: 900px){
  :root{
    --m-gap-xs: 2.5vw;   /* tiny */
    --m-gap:    4vw;     /* small (default) */
    --m-gap-lg: 6vw;     /* section spacing */
  }

  /* Make sure our mobile/static versions show */
  .desktop-only{ display: none !important; }
  .mobile-only{  display: block !important; }

  /* Global vertical rhythm */
  h1,h2,h3,p{ margin: 0; }
  h1 + p, h2 + p, h3 + p, p + p{ margin-top: var(--m-gap); }

  /* Story section spacing */
  .story-section{
    padding: var(--m-gap-lg) 5vw;
    gap: var(--m-gap);
  }
  .container-1{ margin-bottom: var(--m-gap); }
  .container-1-text > div > h2 + h2{ margin-top: .35em; } /* small gap between stacked lines */
  .container-2{ margin: var(--m-gap) auto; }
  .intro-video{
    width: 92vw;
    margin: var(--m-gap) auto var(--m-gap-lg);
    border-radius: 10px;
    display: block;
  }
  .story-cta{ margin-top: var(--m-gap-lg); }

  /* BOOK NOW + LEARN MORE already larger; add breathing room */
  .btn-book{ margin-top: var(--m-gap-lg); }
  .stoliva-link{ margin-top: var(--m-gap); }

  /* SECTION: Houses — simple stacked layout spacing on mobile */
  #section-houses{ padding: var(--m-gap-lg) 0; }
  .stoliva-image-column img{
    height: auto;              /* ensure not too tall on mobile */
    margin: 0 auto var(--m-gap);
    max-width: 92vw;
    display: block;
    border-radius: 8px;
  }
  /* If the sticky text is hidden on mobile, ensure any visible text blocks have gaps */
  .stoliva-text-block{
    position: static;
    opacity: 1;
    pointer-events: auto;
    max-width: 92vw;
    padding: 0 4vw;
    margin: 0 auto var(--m-gap-lg);
    gap: var(--m-gap);
  }

  /* Curated sections — mobile static lists with small gaps */
  .curated-description{
    width: 92vw;
    margin: var(--m-gap) auto var(--m-gap-lg);
  }
  .curated-static{
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--m-gap);
    padding: 0 4vw;
  }
  .curated-static .curated-card{
    margin: 0;                 /* rely on grid gap */
  }
  .carousel-learnmore{ margin-top: var(--m-gap-lg); }

  /* Visit Montenegro uses the same card styles; just inherits the above */
}

/* ==== MOBILE CARD FIX (append at end of landing.css) ==== */
@media (max-width: 900px){
  /* Grid spacing for mobile list */
  .curated-static{
    display: grid;
    grid-template-columns: 1fr;
    gap: 4vw;
    padding: 0 4vw;
  }

  /* Make the CARD the rounded container; clip children */
  .curated-static .curated-card{
    background: #fff;
    border-radius: 12px;
    overflow: hidden;                /* clips image & title to radius */
    margin: 0;                       /* rely on grid gap only */
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    transform: none !important;      /* no hover-zoom on touch */
  }
  .curated-static .curated-card:hover{
    transform: none;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
  }

  /* Image wrapper: no own radius; inherits clipping from card */
  .curated-static .curated-card-img-wrap{
    border-radius: 0;
  }

  /* Title band flush under image (no extra top gap) */
  .curated-static .curated-card-title{
    margin: 0;
    padding: .9rem 1rem;
    height: auto;
    min-height: 0;
    line-height: 1.25;
  }

  /* Section-specific title band colors */
  .curated-services .curated-static .curated-card-title{
    background: #fff;
    color: var(--navy);
  }
  .visitMontenegro .curated-static .curated-card-title{
    background: var(--navy);
    color: var(--cream);
  }
}