.featured-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1rem;
  gap: 2rem;
}

.featured-card {
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 280px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.featured-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.featured-content {
  padding: 1rem;
}

.featured-title {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.featured-location {
  color: #555;
  margin-bottom: 0.5rem;
}

.featured-price {
  color: #4CAF50;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.scs-color-6 {
  background-color: var(--scs-cool-grey-300);
}

.photo-card {
  height: 600px;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.feature-card {
  height: 890px !important;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

#carousel-featured {
  display: block;
}

/* ====== Tunables ====== */
:root {
  /* Fixed card height (independent of slide height) */
  --card-h: clamp(320px, 38dvh, 540px);
  --card-radius: 1rem;

  /* Fixed media band inside the card */
  --card-img-h: clamp(180px, 24dvh, 260px);
}

/* Ensure slides let their child fill available height */
.swiper-slide {
  display: flex;
  align-items: stretch; /* so the card can use full height if desired */
}

/* ====== Card (drop-in replacement) ====== */
.scs-feature-card {
  display: flex;
  flex-direction: column;

  /* your width behavior preserved */
  width: clamp(var(--card-w-min), var(--card-w-ideal), var(--card-w-max));
  margin-inline: clamp(0.5rem, 2dvw, 1em);

  /* 🔒 fixed card height */
  height: var(--card-h);

  background: #fff;
  border: 1px solid #F4F6F7;
  border-radius: var(--card-radius);
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
  font-family: "Manrope", sans-serif !important;
  font-size: clamp(0.95rem, 0.7rem + 0.6dvw, 1.1rem);
  text-align: center;

  /* clip inner corners/content */
  overflow: hidden;
}

/* Media band (fixed height) */
.scs-feature-card .card-media {
  flex: 0 0 auto;
  height: var(--card-img-h);
  overflow: hidden;
}
.scs-feature-card .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crop without distortion */
  display: block;
}

/* Body flexes but won’t overflow outside the card */
.scs-feature-card .card-body {
  flex: 1 1 auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  overflow: hidden;    /* prevents content from pushing card taller */
}

/* Footer sticks to the bottom edge of the card */
.scs-feature-card .card-footer {
  margin-top: auto;
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid #F4F6F7;
  background: #fff;    /* avoids transparency if images underneath */
}

/* Optional: line clamps to keep titles/blurbs tidy without scrollbars */
.scs-line-2, .scs-line-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.scs-line-2 { -webkit-line-clamp: 2; }
.scs-line-3 { -webkit-line-clamp: 3; }

/* If you have buttons/CTAs in the footer, prevent wrapping jitter */
.scs-feature-card .btn,
.scs-feature-card .button {
  white-space: nowrap;
}

/* Image */
.scs-feature-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;

  /* corners handled by parent overflow; keep a subtle inner top shadow if you want */
  /* box-shadow: 0 2px 4px rgba(0,0,0,.3); */
  /* remove stray offsets */
  margin: 0;
  padding: 0.125rem;
}

/* Type scale – all responsive with clamp() */
.scs-feature-card h1 { /* rate */
  font-weight: 600;
  font-size: clamp(1.75rem, 1.1rem + 2.2dvw, 3rem);
  color: #2E2E3A;
  margin-top: clamp(-0.5rem, -0.2rem - 0.5dvw, -1rem);
}

.scs-feature-card h2 { /* pricing */
  font-weight: 400;
  font-size: clamp(1.25rem, 0.9rem + 1.4dvw, 2rem);
  color: #2E2E3A;
  margin-top: clamp(.5rem, .25rem + .5dvw, 1rem);
}

.scs-feature-card h3 { /* Starting from */
  font-weight: 300;
  font-size: clamp(1rem, .85rem + .5dvw, 1.25rem);
  color: #2E2E3A;
  margin-bottom: clamp(-.5rem, -.25rem - .4dvw, -.75rem);
}

.scs-feature-card h4 { /* property title */
  font-family: "Cormorant", serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 1rem + .9dvw, 1.75rem);
  line-height: 1.2;
  color: #2E2E3A;
  margin-top: clamp(.5rem, .25rem + .6dvw, 1rem);
  padding-bottom: .5rem;
}

.scs-feature-card h5 { /* per night */
  font-weight: 300;
  font-size: clamp(.7rem, .6rem + .3dvw, .9rem);
  color: #2E2E3A;
  margin-top: clamp(-.5rem, -.35rem - .2dvw, -.25rem);
}

/* Two-line clamp stays, but harmonize line-height with responsive title */
.scs-feature-card .force-two-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: clamp(1.5rem, 1.2rem + .5dvw, 2.1rem);
  min-height: calc(2 * clamp(1.5rem, 1.2rem + .5dvw, 2.1rem));
}

/* Optional: tighten spacing on very narrow screens */
@media (max-width: 575.98px) {
  .scs-feature-card { margin-inline: 0.5rem; }
}

.currency {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 2.0rem;
  color: #2E2E3A;
}

.two-line-truncate {
  display: -webkit-box;
  line-clamp: 2;     /* Limit to 2 lines */
  -webkit-line-clamp: 2;     /* Limit to 2 lines */
  line-clamp: 2;             /* Standard property for compatibility */
  line-clamp: 2;             /* Standard property for compatibility */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scs-feature-card-price {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-style: bold;
}

.carousel-inner-featured {
  height: 573px !important;
}

/* Make the whole card a vertical flex container */
.scs-feature-card {
  display: flex;
  flex-direction: column;
  height: var(--card-h);
}

/* Everything except the bottom icons goes in a "content" wrapper */
.scs-feature-card .card-content {
  flex: 1 1 auto; /* grows to fill available space */
}

/* Footer with icons/counters fixed to the bottom */
.scs-feature-card .card-icons {
  flex-shrink: 0;            /* don't let it collapse */
  padding: 0.75rem 1rem 1rem;
  text-align: center;        /* center everything */
  display: flex;
  justify-content: center;   /* center horizontally */
  gap: 1rem;                  /* space between icon groups */
  border-top: 1px solid #F4F6F7;
}

/* Make each icon+count a unit */
.scs-feature-card .card-icon-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.scs-feature-card .card-icon {
  display: inline-block;
  width: 1.25rem;  /* adjust to fit your SVG/sprite size */
  height: 1.25rem;
  background-size: contain;
  background-repeat: no-repeat;
}

.scs-feature-card .card-count {
  font-weight: 500;
}