/* ==========================================================================
   Himalayan Trails — homepage sections
   ========================================================================== */

/* ---- Hero ----------------------------------------------------------------
   Full-bleed photograph, editorial headline, and a discovery bar that sits on
   the seam between the hero and the page below it. */

.ht-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(30rem, 24rem + 26vh, 44rem);
  padding-top: clamp(4rem, 2rem + 10vw, 8rem);
  padding-bottom: clamp(3rem, 2rem + 6vw, 6rem);
  color: var(--ht-text-inverse);
  background: var(--ht-pine-950);
  overflow: hidden;
}

.ht-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.ht-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* Two stacked scrims: a vertical one for text contrast at the bottom, and a
   soft left-side one so the headline holds up over a bright ridge. */
.ht-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(11 22 17 / 0.5) 0%, rgb(11 22 17 / 0.1) 34%, rgb(11 22 17 / 0.72) 100%),
    linear-gradient(90deg, rgb(11 22 17 / 0.46) 0%, rgb(11 22 17 / 0.1) 55%, transparent 100%);
}

.ht-hero__inner {
  position: relative;
  width: 100%;
}

.ht-hero__content {
  max-width: 44rem;
}

.ht-hero__eyebrow {
  color: var(--ht-clay-400);
}

.ht-hero__title {
  font-family: var(--ht-font-display);
  font-size: var(--ht-display-1);
  font-weight: 500;
  line-height: var(--ht-leading-tight);
  letter-spacing: -0.025em;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgb(11 22 17 / 0.4);
}

.ht-hero__lede {
  margin-top: var(--ht-space-6);
  max-width: 40rem;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
  line-height: var(--ht-leading-relaxed);
  color: rgb(242 239 232 / 0.86);
  text-wrap: pretty;
}

.ht-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ht-space-3);
  margin-top: var(--ht-space-8);
}

/* Hero slide crossfade — the slides stack, only opacity animates. */
.ht-hero__slides {
  position: absolute;
  inset: 0;
}

.ht-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ht-ease);
}

.ht-hero__slide[data-active="true"] {
  opacity: 1;
}

.ht-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--slide-pos, center 42%);
}

.ht-hero__dots {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  gap: var(--ht-space-2);
}

.ht-hero__dot {
  width: 2rem;
  height: 0.1875rem;
  border-radius: var(--ht-radius-pill);
  background: rgb(255 255 255 / 0.3);
  transition: background-color var(--ht-duration-base) var(--ht-ease);
}

.ht-hero__dot[aria-selected="true"] {
  background: var(--ht-clay-400);
}

.ht-hero__dot::before {
  /* Enlarges the hit area to 44px without changing the visual size. */
  content: "";
  position: absolute;
  inset-block: -1.25rem;
  inset-inline: -0.25rem;
}

.ht-hero__dot {
  position: relative;
}

@media (max-width: 47.9375rem) {
  .ht-hero__dots {
    position: static;
    margin-top: var(--ht-space-8);
  }

  /* Stacked, full-width CTAs on phones — two buttons of different widths side
     by side read as an accident, and a full-width target is easier to hit. */
  .ht-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ht-space-3);
  }

  .ht-hero__actions .ht-btn {
    width: 100%;
  }
}

/* ---- Discovery bar ------------------------------------------------------- */

.ht-discovery {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--ht-space-10) * -1);
}

.ht-discovery__card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  align-items: end;
  gap: var(--ht-space-4);
  padding: var(--ht-space-6);
  background: var(--ht-white);
  border: 1px solid var(--ht-border-soft);
  border-radius: var(--ht-radius-lg);
  box-shadow: var(--ht-shadow-lg);
}

.ht-discovery__submit {
  align-self: end;
}

@media (max-width: 47.9375rem) {
  .ht-discovery {
    margin-top: var(--ht-space-8);
  }

  .ht-discovery__card {
    box-shadow: var(--ht-shadow-md);
  }
}

/* ---- Category tiles ------------------------------------------------------ */

.ht-category {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 15rem;
  padding: var(--ht-space-5);
  border-radius: var(--ht-radius-lg);
  overflow: hidden;
  color: var(--ht-text-inverse);
  isolation: isolate;
}

.ht-category img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ht-duration-slow) var(--ht-ease-out);
}

.ht-category::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(11 22 17 / 0.1) 30%, rgb(11 22 17 / 0.82) 100%);
}

.ht-category:hover img {
  transform: scale(1.06);
}

.ht-category__title,
.ht-category__count {
  display: block;
}

.ht-category__title {
  font-family: var(--ht-font-display);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.2;
}

.ht-category__count {
  margin-top: 0.25rem;
  font-size: var(--ht-text-sm);
  color: rgb(242 239 232 / 0.75);
}

.ht-category__title::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ---- Trust / differentiators --------------------------------------------- */

.ht-trust-item {
  display: flex;
  flex-direction: column;
  gap: var(--ht-space-3);
  padding-top: var(--ht-space-5);
  border-top: 2px solid var(--ht-pine-700);
}

.ht-section--dark .ht-trust-item {
  border-top-color: var(--ht-clay-500);
}

.ht-trust-item__index {
  font-family: var(--ht-font-display);
  font-size: var(--ht-text-sm);
  font-weight: 600;
  letter-spacing: var(--ht-tracking-caps);
  color: var(--ht-accent);
}

.ht-section--dark .ht-trust-item__index {
  color: var(--ht-clay-400);
}

.ht-trust-item__title {
  font-family: var(--ht-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
}

.ht-trust-item__body {
  color: var(--ht-text-soft);
  font-size: var(--ht-text-base);
  line-height: var(--ht-leading-relaxed);
}

.ht-section--dark .ht-trust-item__body {
  color: var(--ht-text-inverse-muted);
}

/* ---- Split section (safety, story) --------------------------------------- */

.ht-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}

.ht-split__media {
  border-radius: var(--ht-radius-lg);
  overflow: hidden;
  box-shadow: var(--ht-shadow-lg);
}

/*
 * Let the photograph fill the row height once the two columns sit side by side.
 * A fixed-ratio frame next to a taller text column left a large dead band under
 * the image; stretching keeps the section visually balanced instead.
 */
@media (min-width: 48rem) {
  .ht-split {
    align-items: stretch;
  }

  .ht-split__media,
  .ht-split__media > .ht-media {
    height: 100%;
    aspect-ratio: auto;
  }

  .ht-split__body {
    align-self: center;
  }
}

.ht-split--reverse .ht-split__media {
  order: 2;
}

@media (max-width: 47.9375rem) {
  .ht-split--reverse .ht-split__media {
    order: 0;
  }
}

.ht-split__body p + p {
  margin-top: var(--ht-space-4);
}

.ht-split__list {
  display: grid;
  gap: var(--ht-space-3);
  margin-top: var(--ht-space-6);
}

.ht-split__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--ht-space-3);
  font-size: var(--ht-text-base);
  line-height: var(--ht-leading-normal);
}

.ht-split__cta {
  margin-top: var(--ht-space-8);
}

.ht-split__list svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  color: var(--ht-clay-400);
}

/* ---- Package price list -------------------------------------------------- */

.ht-packages {
  border-top: 1px solid var(--ht-border);
}

.ht-package-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ht-space-4);
  padding: var(--ht-space-5) var(--ht-space-2);
  border-bottom: 1px solid var(--ht-border);
  transition: background-color var(--ht-duration-fast) var(--ht-ease);
}

.ht-package-row:hover {
  background: var(--ht-white);
}

.ht-package-row__name {
  font-family: var(--ht-font-display);
  font-size: var(--ht-text-xl);
  font-weight: 500;
  line-height: 1.25;
}

.ht-package-row__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ht-package-row__region {
  margin-top: 0.125rem;
  font-size: var(--ht-text-sm);
  color: var(--ht-text-muted);
}

.ht-package-row__cell {
  font-size: var(--ht-text-base);
  color: var(--ht-text-soft);
}

.ht-package-row__label {
  display: none;
  font-size: var(--ht-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ht-text-muted);
}

.ht-package-row__price {
  text-align: right;
  white-space: nowrap;
}

.ht-package-row__price strong {
  font-family: var(--ht-font-display);
  font-size: var(--ht-text-xl);
  font-weight: 600;
}

.ht-package-row__price span {
  display: block;
  font-size: var(--ht-text-xs);
  color: var(--ht-text-muted);
}

/* Below 48rem the row becomes a card: labels appear, price moves inline. */
@media (max-width: 47.9375rem) {
  .ht-package-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ht-space-3) var(--ht-space-4);
    padding-block: var(--ht-space-5);
  }

  .ht-package-row__head {
    grid-column: 1 / -1;
  }

  .ht-package-row__label {
    display: block;
    margin-bottom: 0.125rem;
  }

  .ht-package-row__price {
    text-align: left;
  }
}

/* ---- Departures strip ---------------------------------------------------- */

/* Six departures laid out as 3 × 2 — an auto-fit four-up left two dead cells. */
.ht-departures {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ht-space-4);
}

@media (min-width: 40rem) {
  .ht-departures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .ht-departures {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ht-departure {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ht-space-2);
  padding: var(--ht-space-5);
  background: var(--ht-white);
  border: 1px solid var(--ht-border-soft);
  border-radius: var(--ht-radius-md);
  transition: border-color var(--ht-duration-fast) var(--ht-ease), box-shadow var(--ht-duration-fast) var(--ht-ease);
}

.ht-departure:hover {
  border-color: var(--ht-stone-400);
  box-shadow: var(--ht-shadow-sm);
}

.ht-departure__date {
  font-family: var(--ht-font-display);
  font-size: var(--ht-text-xl);
  font-weight: 600;
  letter-spacing: var(--ht-tracking-tight);
}

.ht-departure__trek {
  font-size: var(--ht-text-base);
  color: var(--ht-text-soft);
}

.ht-departure__trek a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ht-departure__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ht-space-3);
  margin-top: var(--ht-space-2);
}

/* Thin capacity meter — communicates "filling" faster than the text alone. */
.ht-meter {
  flex: 1;
  height: 0.25rem;
  border-radius: var(--ht-radius-pill);
  background: var(--ht-stone-200);
  overflow: hidden;
}

/* The only inline style in the project: --fill carries a per-row datum, not a
   design decision. The styling itself stays here. */
.ht-meter__fill {
  width: var(--fill, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--ht-pine-500);
}

.ht-meter__fill[data-level="warn"] {
  background: var(--ht-clay-500);
}

.ht-meter__fill[data-level="full"] {
  background: var(--ht-danger);
}

/* ---- Rental teaser ------------------------------------------------------- */

.ht-rental {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ht-space-4);
  padding: var(--ht-space-4) var(--ht-space-5);
  background: var(--ht-white);
  border: 1px solid var(--ht-border-soft);
  border-radius: var(--ht-radius-md);
}

.ht-rental__label {
  display: flex;
  align-items: center;
  gap: var(--ht-space-3);
  min-width: 0;
}

.ht-rental__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ht-radius-sm);
  background: var(--ht-paper-warm);
  color: var(--ht-pine-700);
}

.ht-rental__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.ht-rental__label > span:last-child {
  min-width: 0;
}

.ht-rental__name {
  display: block;
  font-weight: 600;
  font-size: var(--ht-text-base);
}

.ht-rental__desc {
  display: block;
  font-size: var(--ht-text-sm);
  color: var(--ht-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ht-rental__price {
  flex: none;
  font-family: var(--ht-font-display);
  font-size: var(--ht-text-lg);
  font-weight: 600;
  white-space: nowrap;
}

.ht-rental__price span {
  font-family: var(--ht-font-body);
  font-size: var(--ht-text-xs);
  font-weight: 500;
  color: var(--ht-text-muted);
}

/* ---- Testimonials -------------------------------------------------------- */

.ht-quote {
  display: flex;
  flex-direction: column;
  gap: var(--ht-space-5);
  height: 100%;
  padding: var(--ht-space-8) var(--ht-space-6) var(--ht-space-6);
  background: var(--ht-white);
  border: 1px solid var(--ht-border-soft);
  border-radius: var(--ht-radius-lg);
}

.ht-quote__mark {
  width: 2rem;
  height: 2rem;
  color: var(--ht-clay-400);
}

.ht-quote__headline {
  font-family: var(--ht-font-display);
  font-size: var(--ht-text-xl);
  font-weight: 500;
  line-height: 1.32;
  text-wrap: pretty;
}

.ht-quote__body {
  color: var(--ht-text-soft);
  font-size: var(--ht-text-base);
  line-height: var(--ht-leading-relaxed);
}

.ht-quote__author {
  display: flex;
  align-items: center;
  gap: var(--ht-space-3);
  margin-top: auto;
  padding-top: var(--ht-space-5);
  border-top: 1px solid var(--ht-border-soft);
}

.ht-quote__initials {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--ht-pine-800);
  color: var(--ht-text-inverse);
  font-size: var(--ht-text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.ht-quote__name {
  font-weight: 600;
  font-size: var(--ht-text-base);
}

.ht-quote__meta {
  font-size: var(--ht-text-sm);
  color: var(--ht-text-muted);
}

/* ---- Gallery strip ------------------------------------------------------- */

.ht-gallery-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--ht-space-3);
}

.ht-gallery-strip figure {
  border-radius: var(--ht-radius-md);
  overflow: hidden;
}

/*
 * A 4 × 3 mosaic. The lead photograph holds a 2 × 2 block, which leaves exactly
 * eight single cells — so nine images fill the block with no gaps and no tile
 * stretched to cover for a missing one.
 */
@media (min-width: 48rem) {
  .ht-gallery-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(9rem, 6rem + 8vw, 13rem);
  }

  .ht-gallery-strip .ht-gallery-tile:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  .ht-gallery-strip .ht-gallery-tile,
  .ht-gallery-strip .ht-media {
    height: 100%;
    aspect-ratio: auto;
  }
}

/* Two-up on phones: nine tiles still divide evenly, and the lead keeps its
   emphasis by spanning the full width. */
@media (max-width: 47.9375rem) {
  .ht-gallery-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ht-gallery-strip .ht-gallery-tile:first-child {
    grid-column: span 2;
  }
}

/* ---- Gallery tile (opens the lightbox) ----------------------------------- */

.ht-gallery-tile {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border-radius: var(--ht-radius-md);
  overflow: hidden;
  background: var(--ht-stone-200);
  cursor: zoom-in;
}

.ht-gallery-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(11 22 17 / 0);
  transition: background-color var(--ht-duration-base) var(--ht-ease);
}

.ht-gallery-tile:hover::after,
.ht-gallery-tile:focus-visible::after {
  background: rgb(11 22 17 / 0.22);
}

.ht-gallery-tile:hover .ht-media--zoom > img {
  transform: scale(1.05);
}

/* A quiet affordance that the tile opens — it only appears on hover, so the
   photographs are never covered by furniture at rest. */
.ht-gallery-tile__zoom {
  position: absolute;
  z-index: 1;
  right: var(--ht-space-3);
  bottom: var(--ht-space-3);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgb(251 248 243 / 0.92);
  color: var(--ht-pine-900);
  opacity: 0;
  transform: translateY(0.35rem);
  transition:
    opacity var(--ht-duration-base) var(--ht-ease),
    transform var(--ht-duration-base) var(--ht-ease);
}

.ht-gallery-tile:hover .ht-gallery-tile__zoom,
.ht-gallery-tile:focus-visible .ht-gallery-tile__zoom {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Articles ------------------------------------------------------------ */

.ht-article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ht-space-4);
  height: 100%;
}

.ht-article-card__media {
  border-radius: var(--ht-radius-md);
  overflow: hidden;
}

.ht-article-card:hover .ht-media--zoom > img {
  transform: scale(1.05);
}

.ht-article-card__meta {
  display: flex;
  align-items: center;
  gap: var(--ht-space-2);
  font-size: var(--ht-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ht-text-muted);
}

.ht-article-card__title {
  font-family: var(--ht-font-display);
  font-size: var(--ht-display-4);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: var(--ht-tracking-tight);
}

.ht-article-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ht-article-card__excerpt {
  color: var(--ht-text-soft);
  font-size: var(--ht-text-base);
  line-height: var(--ht-leading-relaxed);
}

/* ---- Enquiry CTA --------------------------------------------------------- */

.ht-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ht-pine-900);
  color: var(--ht-text-inverse);
}

.ht-cta__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}

.ht-cta__form {
  display: grid;
  gap: var(--ht-space-4);
  padding: var(--ht-space-6);
  background: var(--ht-paper);
  color: var(--ht-text);
  border-radius: var(--ht-radius-lg);
}

.ht-cta__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--ht-space-4);
}

.ht-cta__contact {
  display: grid;
  gap: var(--ht-space-4);
  margin-top: var(--ht-space-8);
  padding-top: var(--ht-space-6);
  border-top: 1px solid var(--ht-border-inverse);
}

.ht-cta__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--ht-space-3);
  font-size: var(--ht-text-lg);
  font-weight: 500;
}

.ht-cta__contact svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ht-clay-400);
}

/* ---- Floating actions ---------------------------------------------------- */

.ht-float {
  position: fixed;
  right: clamp(0.875rem, 0.5rem + 1vw, 1.5rem);
  bottom: clamp(0.875rem, 0.5rem + 1vw, 1.5rem);
  z-index: var(--ht-z-float);
  display: flex;
  flex-direction: column;
  gap: var(--ht-space-3);
}

.ht-float__btn {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  color: var(--ht-white);
  box-shadow: var(--ht-shadow-md);
  transition: transform var(--ht-duration-fast) var(--ht-ease);
}

.ht-float__btn:hover {
  transform: translateY(-2px);
}

.ht-float__btn svg {
  width: 1.625rem;
  height: 1.625rem;
}

.ht-float__btn--whatsapp {
  background: #1faa54;
}

.ht-float__btn--call {
  background: var(--ht-pine-800);
}

/* The call button is redundant on desktop where tel: rarely works — the header
   already shows the number there. */
@media (min-width: 48rem) {
  .ht-float__btn--call {
    display: none;
  }
}

.ht-quote__name,
.ht-quote__meta {
  display: block;
}

/* headline and body are both inside the blockquote, so the card's flex gap does
   not separate them. */
.ht-quote__headline + .ht-quote__body {
  margin-top: var(--ht-space-3);
}

/* ---- FAQ ------------------------------------------------------------------
   A two-column band: the questions on the right at a comfortable reading width,
   and on the left the heading plus a card offering the thing an unanswered
   question needs — a person to ask. */

.ht-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}

@media (min-width: 62rem) {
  .ht-faq__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  /* No sticky here: the aside is the taller column, so pinning it would only
     hold it in place while nothing scrolled past. */
  .ht-faq__aside {
    align-self: start;
  }
}

.ht-faq__card {
  margin-top: var(--ht-space-8);
  background: var(--ht-surface-card);
  border: 1px solid var(--ht-border-soft);
  border-radius: var(--ht-radius-lg);
  overflow: hidden;
  box-shadow: var(--ht-shadow-md);
}

.ht-faq__card-media {
  aspect-ratio: 21 / 7;
  overflow: hidden;
}

.ht-faq__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ht-faq__card-body {
  display: grid;
  gap: var(--ht-space-3);
  padding: var(--ht-space-5) var(--ht-space-6) var(--ht-space-6);
}

.ht-faq__card-title {
  font-family: var(--ht-font-display);
  font-size: var(--ht-display-4);
  font-weight: 500;
  line-height: 1.2;
}

.ht-faq__card-text {
  color: var(--ht-text-soft);
  font-size: var(--ht-text-base);
  line-height: var(--ht-leading-relaxed);
}

.ht-faq__card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ht-space-3);
  margin-top: var(--ht-space-1);
}

.ht-faq__card-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--ht-space-2);
  padding-top: var(--ht-space-3);
  border-top: 1px solid var(--ht-border-soft);
  font-family: var(--ht-font-display);
  font-size: var(--ht-text-lg);
  font-weight: 600;
  color: var(--ht-pine-800);
}

.ht-faq__card-phone svg {
  color: var(--ht-accent);
}

.ht-faq__card-phone:hover {
  color: var(--ht-accent);
}

/* The list carries the section on its own, so it starts flush with the heading
   rather than inheriting the shared head block's bottom margin. */
.ht-faq__list .ht-accordion {
  border-top: 1px solid var(--ht-border);
}

.ht-faq__list .ht-accordion__trigger {
  font-size: var(--ht-text-xl);
  padding-block: var(--ht-space-6);
}

.ht-faq__more {
  margin-top: var(--ht-space-6);
}

@media (max-width: 47.9375rem) {
  .ht-faq__card-actions .ht-btn {
    flex: 1 1 10rem;
  }
}

/* On a phone the headline sits directly over the photograph across the full
   width, with no clear column to the side. These are bright snow images, so the
   scrim has to work harder here than it does on a desktop layout where the text
   only covers the left third. */
@media (max-width: 47.9375rem) {
  .ht-hero__media::after {
    background:
      linear-gradient(180deg, rgb(11 22 17 / 0.62) 0%, rgb(11 22 17 / 0.34) 38%, rgb(11 22 17 / 0.8) 100%);
  }
}

/* A phone has the width for the full description; the single-line clamp was a
   desktop constraint from the three-up grid. */
@media (max-width: 47.9375rem) {
  .ht-rental__desc {
    -webkit-line-clamp: 2;
  }
}

/* Scroll-aware: the buttons slide out of the way while reading down and return
   on the way up (see modules/float-actions.js). */
.ht-float {
  transition:
    translate var(--ht-duration-base) var(--ht-ease),
    opacity var(--ht-duration-base) var(--ht-ease);
}

.ht-float[data-hidden="true"] {
  /* Fade in place: sliding 7rem down used to sweep through the sticky price bar. */
  translate: 0 1.5rem;
  pointer-events: none;
  opacity: 0;
  pointer-events: none;
}

/* Slightly smaller on phones — two 52px circles crowd a 375px screen. */
@media (max-width: 47.9375rem) {
  .ht-float__btn {
    width: 3rem;
    height: 3rem;
  }

  .ht-float__btn svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}

@media (max-width: 47.9375rem) {
  .ht-faq__card-phone {
    padding-block: var(--ht-space-4) var(--ht-space-2);
  }
}