/* ==========================================================================
   Homepage v4 (2026-09) - the redesigned home page.
   Loaded on the `index` route ONLY (see _header.php).

   Everything here is prefixed `hp-`, or scoped to `body.page-index` where it
   overrides a shared component. Anything used by more than one route lives in
   custom-towlos.css instead (which is loaded globally) - that is the rule to
   follow when adding here.
   ========================================================================== */

/* ==========================================================================
   Homepage v4 (2026-09) - sections rebuilt from the Figma redesign.
   Prefixed `hp-` so these never collide with the `.home-*` component styles
   above, which the location landings also depend on. Only the home route
   uses `hp-` markup, so these rules are inert elsewhere in this file's scope.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Layout shell
   The design is drawn on a 1720px frame with 56px gutters, so its content is
   1608px - wider than the site container (~1250px). Home gets its own wider
   container rather than reflowing the design into a narrower grid.
   -------------------------------------------------------------------------- */
.hp-section {
  padding-block: 40px;
}

@media (min-width: 992px) {
  .hp-section {
    padding-block: 60px;
  }
}

.hp-bg-grey { background: #f2f3f5; }
.hp-bg-blue { background: var(--blue); }
.hp-bg-red { background: var(--red); }

/* --------------------------------------------------------------------------
   Section header: red accent bar + heading + subheading, with optional
   carousel buttons pinned to the right. Repeats across most sections.
   -------------------------------------------------------------------------- */
.hp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.hp-head-bar {
  display: flex;
  align-items: stretch;
  gap: 18px;
  min-width: 0;
}

.hp-head-accent {
  flex: 0 0 6px;
  width: 6px;
  border-radius: 3px;
  background: var(--red);
}

.hp-head-title {
  line-height: 1.3;
  margin: 0;
}

.hp-head-sub {
  line-height: 1.45;
  margin: 12px 0 0;
}

/* Centred variant (How it works) */
.hp-head-center {
  max-width: 978px;
  margin-inline: auto;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Carousel buttons - 40px square, matching the Figma chevron buttons.
   -------------------------------------------------------------------------- */
.hp-cbtn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(43, 50, 82, 0.25);
  background: #fff;
  color: var(--blue);
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.hp-cbtn:hover {
  background: rgba(43, 50, 82, 0.06);
}

.hp-cbtn.swiper-button-disabled {
  background: rgba(43, 50, 82, 0.25);
  border-color: transparent;
  opacity: 0.55;
  cursor: default;
}

.hp-cbtn .svg-icon {
  color: inherit; /* .svg-icon hardcodes --blue; the button owns the colour */
}

/* On the dark sections the buttons invert */
.hp-bg-blue .hp-cbtn {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.hp-bg-blue .hp-cbtn:hover {
  background: rgba(255, 255, 255, 0.14);
}

.hp-income-checks .hp-check { color: var(--blue); flex: 0 0 16px; }

/* --------------------------------------------------------------------------
   HERO
   The blue app banner sits above the header and the navbar is transparent and
   overlays the hero, so the photo has to run up underneath both. The top
   padding is therefore driven by the nav height, not by the Figma y-offset.
   -------------------------------------------------------------------------- */
.hp-hero {
  position: relative;
  min-height: 620px;
  /* The transparent navbar is position:absolute and overlays the hero, so the
     hero reserves its height. Measured at a constant 59px across every
     breakpoint - kept static on purpose: setting it from JS after load moved
     the headline on first paint. */
  padding-top: 59px;
  display: flex;
  flex-direction: column;
}

@media (min-width: 992px) {
  .hp-hero {
    min-height: 700px;
  }
}

.hp-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  z-index: 0;
}

/* The source photo is landscape; a portrait crop of it defaults to the road.
   Pull the framing up on small screens so the sunset sky reads, as drawn. */
@media (max-width: 767.98px) {
  /* The mobile asset is composed for this frame, so show it as-is. */
  .hp-hero-photo { object-position: center center; }
}

/* Two scrims: a soft top wash so the white nav stays legible, and a wedge in
   the lower right that darkens only behind the search bar and trust row.
   These sit between the photo and .hp-hero-inner in the DOM, so the content
   paints above them with no z-index anywhere (which is what keeps the search
   bar able to rise over .nav-backdrop on focus). */
.hp-hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hp-hero-scrim-top {
  bottom: auto;
  height: 200px;
  background: linear-gradient(180deg, rgba(43, 50, 82, 0.42), rgba(43, 50, 82, 0));
}

.hp-hero-scrim-wedge {
  background: linear-gradient(167.67deg,
    rgba(43, 50, 82, 0) 66.58%,
    rgba(43, 50, 82, 0.02) 72.57%,
    rgba(43, 50, 82, 0.48) 85.19%,
    rgba(43, 50, 82, 0.7) 99.82%);
}

.hp-hero-inner {
  /* Deliberately NO z-index: it would form a stacking context and trap the
     search bar below the fixed .nav-backdrop. The inner is last in the DOM, so
     it already paints over the photo and scrims. */
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* headline top, search bottom, as drawn */
  padding-block: 28px 32px;
}

@media (min-width: 992px) {
  .hp-hero-inner {
    padding-block: 40px 31px;
  }
}

/* Headline - the one size with no equivalent in the fs- scale. */
.hp-hero-title {
  margin: 0;
  font-size: 32px;
  line-height: 1.15;
  color: #fff;
  text-shadow:
    0 2px 4px rgba(9, 11, 22, 0.85),
    0 3px 16px rgba(9, 11, 22, 0.7),
    0 0 44px rgba(9, 11, 22, 0.55);
}

@media (min-width: 768px) {
  .hp-hero-title { font-size: 42px; }
}

@media (min-width: 1200px) {
  .hp-hero-title { font-size: 54px; line-height: 60px; }
}

.hp-hero-title .hp-accent { color: var(--yellow); }

/* Headline sits top-left, the action block bottom-right on desktop. */
.hp-hero-top { flex: 0 0 auto; }

.hp-hero-action {
  width: 100%;
  margin-left: auto;
}

@media (min-width: 1200px) {
  .hp-hero-action { max-width: 730px; }
}

/* Rent / List toggle */
.hp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow:
    0 2px 4px 0 rgba(10, 23, 28, 0.30) inset,
    0 2px 6px 0 rgba(22, 37, 71, 0.14);
}

.hp-toggle-btn {
  min-width: 132px;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #e6eaf1;
  text-shadow: 0 1px 2px rgba(9, 11, 22, 0.5);
  line-height: 1.35;
  transition: background-color 0.18s ease, color 0.18s ease;
}

@media (min-width: 768px) {
  .hp-toggle-btn { min-width: 150px; }
}

/* The List side is a host action, so it takes the blue the nav gives host
   buttons (.nav-btn-blue) rather than the guest teal. */
.hp-toggle-btn[data-hp-toggle="list"].is-active {
  background: var(--blue);
}

.hp-toggle-btn.is-active {
  background: var(--teal);
  color: #fff;
  text-shadow: none;
  box-shadow:
    0 5px 11px rgba(10, 23, 28, 0.16),
    0 2px 4px rgba(10, 23, 28, 0.3);
}

/* Rent and List share a single grid cell, so the cell is always as tall as
   the taller panel and the shorter one sits at its bottom edge. That keeps the
   submit button, the headline and the trust row still across a toggle without
   reserving a height by hand. The off panel is hidden with visibility so it
   still contributes its box (and stays out of the tab order). */
.hp-panels {
  display: grid;
}

.hp-panels > .hp-searchbar {
  grid-area: 1 / 1;
  align-self: end;
  /* Grid items default to min-width: auto, so the track cannot shrink below
     an item's min-content. The List panel is in the layout from first paint
     now, and its raw <select> is min-content-wide until Selectric wraps it,
     which stretched the whole cluster past the viewport for that moment. */
  min-width: 0;
}

/* Same reason, one level down: the select must be allowed to shrink before
   Selectric replaces it, or it sets the panel's min-content width itself. */
.hp-panels .hp-field select {
  width: 100%;
  min-width: 0;
}

.hp-searchbar.is-panel-off {
  visibility: hidden;
  pointer-events: none;
}

/* Search bar */
.hp-searchbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 768px) {
  .hp-searchbar {
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    height: 54px;
  }
}

.hp-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 5px 14px -5px rgba(13, 15, 31, 0.26);
  text-align: left;
  width: 100%;
}

.hp-field-label {
  color: var(--red);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin: 0;
}

.hp-field-value {
  color: var(--blue);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-field-value.is-placeholder { opacity: 0.65; }

.hp-field-where { flex: 1 1 auto; }

@media (min-width: 768px) {
  .hp-field-when { flex: 0 0 235px; width: 235px; }
}

.hp-search-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  box-shadow: 0 5px 14px -5px rgba(13, 15, 31, 0.26);
}

@media (min-width: 768px) {
  .hp-search-submit { width: 252px; padding-block: 0; }
}

.hp-search-submit .svg-icon { flex: 0 0 24px; }
.hp-search-submit > span { white-space: nowrap; }

/* Trust row under the search bar */
.hp-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 35px;
  margin-top: 18px;
  text-shadow: 0 1px 2px rgba(9, 11, 22, 0.45);
}

.hp-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  margin: 0;
}

.hp-trust-stars {
  letter-spacing: 2px;
}

.hp-trust-badge {
  width: 30px;
  height: 30px;
  filter: drop-shadow(1.5px 1px 2px rgba(255, 255, 255, 0.45));
}

/* --------------------------------------------------------------------------
   REVIEWS
   -------------------------------------------------------------------------- */
.hp-review-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow:
    0 2px 3px rgba(22, 37, 71, 0.06),
    0 8px 12px rgba(22, 37, 71, 0.1);
}

/* Swiper clips at its own box, which sliced the card shadow. Inset the track
   and pull it back so the shadow has room to render. */
.hp-reviews-swiper {
  padding: 8px 14px 26px;
  margin: -8px -14px -26px;
}

/* Sizing mirrors .llp-review-slide on the landings: a fixed card while the
   rail scrolls, then flex-to-fit at 992+ where Swiper shows exactly 3. That is
   what keeps a half card from ever appearing at the edge. */
.hp-review-slide {
  width: 285px;
  height: auto;
}

@media (min-width: 992px) {
  .hp-review-slide { width: auto; }
}

.hp-review-stars { color: var(--yellow); letter-spacing: 1px; }

.hp-review-text {
  line-height: 26px;
  margin: 0;
  color: var(--blue);
}

.hp-review-who { margin: 0; color: var(--blue); }

.hp-review-reply {
  background: #f4f5f7;
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--blue);
}

.hp-review-reply p { margin: 0; }
.hp-review-reply p + p { margin-top: 4px; line-height: 19px; }

.hp-review-listing {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  text-decoration: none;
  color: var(--blue);
}

/* The trailer row is context, not a link (see index.phtml), so no hover cue. */

.hp-review-thumb {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
}

.hp-review-listing-name { line-height: 17px; }

/* --------------------------------------------------------------------------
   PROTECT+ banner
   -------------------------------------------------------------------------- */
.hp-protect-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 21px 9px 26px;
  border-radius: 10px;
  background: var(--yellow);
  color: var(--blue);
}

.hp-protect-badge-pill img { width: 57px; height: 57px; }

.hp-protect-list { list-style: none; margin: 0; padding: 0; }

.hp-protect-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
}

.hp-protect-list li + li { margin-top: 20px; }

.hp-protect-list .svg-icon-md {
  flex: 0 0 20px;
}

/* --------------------------------------------------------------------------
   ADVENTURE ("Peer to Peer Trailer Rental") - full-bleed photo rail
   -------------------------------------------------------------------------- */
.hp-moment {
  position: relative;
  display: block;
  /* 290px is the mobile comp's card width (desktop draws 340), and the
     narrower card leaves more of the next one peeking in. */
  width: 290px;
  max-width: 74vw;
  /* Height follows the width rather than being pinned to the comp's 440px,
     so narrowing the card (or the vw cap kicking in on a small phone) keeps
     the 340x440 proportion instead of stretching it tall. */
  aspect-ratio: 340 / 440;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
}

.hp-moment img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-moment::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 23, 38, 0) 0%,
    rgba(20, 23, 38, 0) 42%,
    rgba(15, 18, 31, 0.82) 100%);
}

@media (min-width: 992px) {
  /* Slides flex to fill at 4-up; the aspect-ratio on the base rule keeps the
     proportion, so only the width constraints need lifting here. */
  .hp-moment {
    width: auto;
    max-width: none;
  }
}

.hp-moment-label {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 1;
}

.hp-moment-label p { margin: 0; }
.hp-moment-title { color: #fff; }
.hp-moment-sub { color: rgba(255, 255, 255, 0.9); margin-top: 4px !important; }

/* --------------------------------------------------------------------------
   HOW IT WORKS - reuses .llp-step-card from the location landings.
   Only the surrounding section colour differs here.
   -------------------------------------------------------------------------- */
.hp-steps .llp-step-card { border-color: rgba(43, 50, 82, 0.12); }

/* --------------------------------------------------------------------------
   TRAILER TYPE TILES - reuse .home-type__item (same component the location
   landings use via .llp-type-tile); only the border and image height differ.
   -------------------------------------------------------------------------- */
.hp-type-tile {
  border: 1px solid rgba(43, 50, 82, 0.25);
  overflow: hidden;
  width: 300px;
  max-width: 78vw;
}

@media (min-width: 992px) {
  .hp-type-tile { width: auto; max-width: none; }
}

.hp-type-tile .home-type__item-img img {
  width: 100%;
  height: 195px;
  object-fit: cover;
  display: block;
}

.hp-type-tile .home-type__item-content p {
  min-height: 0;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   INCOME ("Do you own a trailer?")
   -------------------------------------------------------------------------- */
.hp-income { background: var(--red); }

/* Text column: sits toward the middle of the split but keeps growing on wide
   screens instead of being pinned to the centre line by an auto margin. */
.hp-income-body {
  max-width: 560px;
}

@media (min-width: 992px) {
  .hp-income-body { margin-left: auto; }
}

/* Desktop only: keep the copy clear of the photo edge. Mobile is full width
   and needs no extra inset. */
@media (min-width: 992px) {
  .hp-income-body { padding-right: 3.5rem !important; }
}

@media (min-width: 1400px) {
  .hp-income-body { padding-right: 5rem !important; }
}

.hp-income-checks li + li { margin-top: 18px; }

.hp-income-checks { list-style: none; margin: 0; padding: 0; }
.hp-income-checks li { display: flex; align-items: center; gap: 8px; color: #fff; }
.hp-income-checks li + li { margin-top: 14px; }
.hp-income-checks .hp-check { color: var(--blue); }

.hp-income-photo { position: relative; }

/* The listing tag that sits inside the income photo. Carried over verbatim
   from the retired parts/home.css, where it was styled by these class names
   already; index.phtml is the only page that uses it. */
.home-host-image-label {
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 1);
  align-self: start;
  position: absolute;
  z-index: 0;
  display: flex;
  min-height: 30px;
  align-items: center;
  gap: 4px;
  justify-content: center;
  left: 25px;
  bottom: 25px;
  padding: 3px 8px;
  border: 1px solid rgba(43, 50, 82, 1);
}

.home-host-image-label > span {
  display: flex;
  flex-direction: column;
  line-height: 120%;
}


.hp-income-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}


/* --------------------------------------------------------------------------
   COMMUNITY mosaic
   -------------------------------------------------------------------------- */
.hp-tilecard {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  height: 100%;
  min-height: 190px;
}

.hp-tilecard img.hp-tilecard-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-tilecard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 15, 33, 0) 0%,
    rgba(10, 15, 33, 0) 45%,
    rgba(10, 15, 33, 0.9) 100%);
}

.hp-tilecard-body {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  z-index: 1;
}

.hp-tilecard-body p { margin: 0; }

/* The tiles sit on photography, so the labels carry their own shadow rather
   than relying on the gradient alone. */
.hp-tilecard-body p {
  text-shadow:
    0 1px 3px rgba(9, 11, 22, 0.75),
    0 2px 12px rgba(9, 11, 22, 0.55);
}
.hp-tilecard-title { color: var(--yellow); }
.hp-tilecard-desc { color: rgba(255, 255, 255, 0.9); margin-top: 6px !important; line-height: 1.35; }
.hp-tilecard-cta { color: #fff; margin-top: 6px !important; }

.hp-tilecard-logo {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 62px;
  z-index: 1;
}

.hp-tilecard-tall { min-height: 500px; }
.hp-tilecard-wide { min-height: 240px; }

/* Play affordance on the video tile */
.hp-tilecard-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92) url("/assets/frontend/img-towlos/home/play-icon.svg") no-repeat center / 22px;
  z-index: 2;
  transition: transform 0.15s ease;
}

.hp-tilecard-play:hover::before { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   FEATURED LOCATIONS
   -------------------------------------------------------------------------- */
.hp-city {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  height: 100%;
  min-height: 160px;
}

.hp-city img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hp-city::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 15, 33, 0) 40%, rgba(10, 15, 33, 0.85) 100%);
}

.hp-city-label {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 1;
  color: #fff;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Swiper rails: let slides size to content and bleed to the container edge.
   -------------------------------------------------------------------------- */
/* Swiper must clip: a visible overflow lets the off-screen slides widen the
   document, which shifts every section left on narrow screens. */
.hp-rail {
  overflow: hidden;
}

/* Below lg the rail runs out to the screen edge so the next card peeks in and
   signals "swipe me". From lg up it stays inside the grid and shows whole
   cards only, which is how the design draws it. */
@media (max-width: 991.98px) {
  .hp-rail {
    margin-right: calc(50% - 50vw);
    padding-right: 20px;
  }
}
.hp-rail .swiper-slide { width: auto; height: auto; }

/* Nothing on the page may push the document wider than the viewport. */
.hp-hero,
.hp-section { max-width: 100%; overflow-x: clip; }

/* Reduced motion: drop the hover lift and the step-card animation */
@media (prefers-reduced-motion: reduce) {
  .hp-tile,
  .hp-tilecard-play::before {
    transition: none;
  }
  .hp-tile:hover { transform: none; }
}


/* Brand Partnerships "Learn More" carries a soft lift in the Figma
   (drop-shadow 0 2px 3px rgba(22,37,71,0.12)). */
.home-partnerships__text .btn,
.home-partnerships__mobile .btn {
  box-shadow: 0 2px 3px rgba(22, 37, 71, 0.12);
}

/* --------------------------------------------------------------------------
   SEO link hub - plain link columns (replaces the old uppercase chip grid)
   -------------------------------------------------------------------------- */
.hp-seo { background: #f4f5f7; }

.hp-seo-cols {
  margin-top: 22px;
  column-count: 2;
  column-gap: 24px;
}

@media (min-width: 768px) {
  .hp-seo-cols { column-count: 3; }
}

@media (min-width: 992px) {
  .hp-seo-cols { column-count: 5; }
}

.hp-seo-link {
  display: block;
  break-inside: avoid;
  color: rgba(43, 50, 82, 0.68);
  text-decoration: none;
  line-height: 1.35;
  margin-bottom: 10px;
}

.hp-seo-link:hover,
.hp-seo-link:focus {
  color: var(--blue);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   SEO link hub - plain link columns (replaces the old uppercase chip grid)
   -------------------------------------------------------------------------- */
.hp-seo { background: #f4f5f7; }

.hp-seo-cols {
  margin-top: 22px;
  column-count: 2;
  column-gap: 24px;
}

@media (min-width: 768px) {
  .hp-seo-cols { column-count: 3; }
}

@media (min-width: 992px) {
  .hp-seo-cols { column-count: 5; }
}

.hp-seo-link {
  display: block;
  break-inside: avoid;
  color: rgba(43, 50, 82, 0.68);
  text-decoration: none;
  line-height: 1.35;
  margin-bottom: 10px;
}

.hp-seo-link:hover,
.hp-seo-link:focus {
  color: var(--blue);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Home CTA hover. The Bootstrap bg-* utilities are !important, so the base
   .btn:hover cannot repaint these; give them their own affordance.
   -------------------------------------------------------------------------- */
.hp-income .btn.bg-white:hover,
.hp-income .btn.bg-white:focus {
  background-color: #f2f3f5 !important;
  color: var(--blue);
}

.hp-income .btn.bg-transparent:hover,
.hp-income .btn.bg-transparent:focus,
.hp-bg-blue .btn.bg-transparent:hover,
.hp-bg-blue .btn.bg-transparent:focus {
  background-color: rgba(255, 255, 255, 0.16) !important;
  color: #fff;
}

.hp-income .btn,
.hp-bg-blue .btn {
  transition: background-color 0.15s ease;
}

/* --------------------------------------------------------------------------
   Hero "What are you listing" - the site-standard selectric dropdown, with its
   own border/background/padding stripped so it reads as the field's value line
   rather than a nested control (which pushed the label onto the top border).
   -------------------------------------------------------------------------- */
.hp-field .select-default,
.hp-field .selectric-wrapper {
  width: 100%;
}

.hp-field .selectric {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.hp-field .selectric .label {
  margin: 0 26px 0 0;
  padding: 0;
  height: auto;
  font-size: 15px;
  font-weight: 500;
  /* Same line box as the Where / When inputs, which inherit the body's 1.5.
     At 1.45 this value sat 0.75px shorter and left the field a pixel under
     When's height. */
  line-height: 1.5;
  color: var(--blue);
}

.hp-field .selectric .button {
  top: 50%;
  right: 0;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background-size: 12px;
}

.hp-field .selectric-open .selectric,
.hp-field .selectric-focus .selectric {
  border: 0;
  box-shadow: none;
}

/* The options list has to clear the hero scrims and the nav backdrop. */
.hp-field .selectric-items {
  z-index: 1060;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(13, 15, 31, 0.24);
}

/* Partnership photo followed the row height; with the body copy gone it read
   far too tall next to the logo card. */
@media (min-width: 768px) {
  .home-partnerships__image img {
    max-height: 420px;
  }
}

/* The review card is a flex column with a gap, and its first children are the
   schema.org <meta> / itemReviewed wrapper. They render at zero height but
   still take a gap each, which stacked up as dead space above the stars. */
.hp-review-card > meta,
.hp-review-card > span[itemprop="itemReviewed"] {
  display: none;
}

/* Beta pill in the hero trailer-type dropdown (mirrors the list-trailer modal). */
.pilot-category-badge {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
}

.pilot-category-badge .pilot-label {
  font-size: 0.55em;
  font-weight: 600;
  color: #fff;
  background-color: #6c757d;
  padding: 0 3px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.4;
  margin-top: 0.1em;
}

/* Featured location tiles on mobile: the comp shows compact 160x120 cards
   with no blurb (the blurb is hidden in markup with d-none d-lg-block). */
@media (max-width: 767.98px) {
  .hp-city-tile {
    width: 160px;
    max-width: 46vw;
  }

  .hp-city-tile .home-type__item-img img {
    height: 96px;
  }

  /* Only the city name shows on mobile, so centre it in the strip and bring
     the size down a step. */
  .hp-city-tile .home-type__item-content {
    padding: 0 12px;
    min-height: 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hp-city-tile .home-type__item-content h3 {
    font-size: 14px;
    line-height: 1.25;
    margin: 0;
  }
}

/* --------------------------------------------------------------------------
   Small mobile. Scoped to body.page-index so the location landings, which
   share this stylesheet, keep their own sizing.
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
  /* 25px still crowds a 390 screen; step the section headings down again. */
  .page-index .hp-head-title,
  .page-index .hp-seo h2,
  .page-index .home-faq__title .hp-head-title {
    font-size: 21px !important;
  }

  /* The FAQ is the last white band before the grey SEO hub, so its 60px tail
     just stacks with the next section's lead-in on a small screen. */
  .page-index .home-faq--area.home-section-padding {
    padding-bottom: 20px;
  }
}

/* Community mosaic on small mobile: the Facebook / YouTube tiles sit two-up at
   ~165px wide (as the comp draws them), so the label type has to come down to
   fit "towlos YouTube Channel" without wrapping awkwardly. */
@media (max-width: 575px) {
  /* Smaller type needs tighter leading, or the two-line titles open up. */
  .page-index .hp-tilecard-title { font-size: 17px !important; line-height: 1.2; }
  .page-index .hp-tilecard-desc { font-size: 14px !important; line-height: 1.35 !important; }
  .page-index .hp-tilecard-cta { font-size: 13px !important; line-height: 1.2; }

  .page-index .hp-tilecard-body {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }

  .page-index .hp-tilecard-logo {
    width: 44px;
    height: 44px;
    top: 34px;
  }
}

/* Both CTAs share the row, as the comp draws them (two 165px buttons on a
   342px row) rather than stacking. */
.hp-income-ctas .btn {
  flex: 1 1 0;
  min-width: 0;
}

@media (min-width: 576px) {
  .hp-income-ctas .btn { flex: 0 1 auto; min-width: 178px; }
}

/* Desktop: the Peer to Peer heading stays centred, so the rail arrows are
   lifted out of the flex row and pinned to the rail edge instead, which is
   where every other rail puts them. top: 0 lines them up with the title the
   same way .hp-head's align-items: flex-start does. */
@media (min-width: 992px) {
  .hp-moments-headwrap {
    position: relative;
  }

  .hp-moments-nav {
    position: absolute;
    top: 0;
    /* Mirrors .container's own padding-right, so the arrows land exactly on
       the rail's content edge. --bs-gutter-x is only set on .row here, so the
       fallback is what actually applies - without it the calc() was invalid
       and the buttons fell back to their static spot, on top of the title. */
    right: var(--bs-gutter-x, 0.75rem);
  }
}

/* Peer to Peer header: centred on desktop, but the comp shows it left-aligned
   on mobile with a red rule under the title and the rail arrows alongside. */
@media (max-width: 991.98px) {
  .hp-head-moments {
    text-align: left;
    max-width: none;
  }

  .hp-head-moments .hp-underline {
    position: relative;
    padding-bottom: 12px;
  }

  .hp-head-moments .hp-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: var(--red);
  }
}

/* Protect+ eats a lot of height on a small screen: the badge pill, a 3-line
   headline and the paragraph all stack. Tighten them up. */
@media (max-width: 767.98px) {
  .page-index .hp-protect-badge-pill {
    height: auto;
    padding: 6px 14px;
    gap: 8px;
  }

  .page-index .hp-protect-badge-pill img {
    width: 40px;
    height: 40px;
  }

  .page-index .hp-protect-badge-pill span {
    font-size: 18px !important;
  }

  .page-index .hp-protect-list li + li { margin-top: 12px; }

  /* Tighter leading throughout the band, as the comp draws it. */
  .page-index .hp-bg-blue h2.fs-1 { line-height: 1.2; margin-bottom: 12px !important; }
  .page-index .hp-bg-blue p.fs-5 { line-height: 1.4 !important; }
  .page-index .hp-protect-list { font-size: 15px; }
  .page-index .hp-protect-badge-pill { margin-bottom: 14px !important; }

  /* Learn More sits centred under the bullets on mobile. */
  /* Bootstrap's d-inline-flex is !important, so the centring needs to win. */
  .page-index .hp-bg-blue .hp-protect-list + .btn {
    display: flex !important;
    margin-inline: auto;
    width: max-content;
  }
}

/* Rail arrows are 30px in the mobile comp, 40px on desktop. */
@media (max-width: 767.98px) {
  .page-index .hp-cbtn {
    width: 30px;
    height: 30px;
  }

  .page-index .hp-cbtn .svg-icon {
    width: 16px;
    height: 16px;
  }
}

/* --------------------------------------------------------------------------
   HERO - mobile composition
   The comp stacks it differently from desktop: the action cluster leads, the
   headline sits below it over the trailer, and the trust block closes the
   frame. display:contents promotes the action wrapper's children to flex items
   of .hp-hero-inner so they can be ordered without duplicating any markup.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .page-index .hp-hero {
    min-height: 804px;
  }

  .page-index .hp-hero-inner {
    justify-content: flex-start;
    padding-block: 18px 32px;
  }

  .page-index .hp-hero-action {
    display: contents;
  }

  .page-index .hp-hero-toggle { order: 1; }
  .page-index .hp-panels { order: 2; }
  .page-index .hp-hero-top { order: 3; }
  .page-index .hp-trust { order: 4; }

  /* Search cluster sits in a 315px column, centred */
  .page-index .hp-panels {
    width: 100%;
    max-width: 315px;
    margin-inline: auto;
  }

  .page-index .hp-searchbar {
    gap: 12px;
  }

  .page-index .hp-search-submit {
    height: 50px;
    justify-content: center;
  }

  /* 67px of air between the search cluster and the headline, per the comp */
  .page-index .hp-hero-top {
    margin-top: 67px;
    text-align: center;
  }

  .page-index .hp-hero-title {
    font-size: 33px;
    line-height: 1.08;
    letter-spacing: -0.66px;
    text-shadow:
      0 1px 3px rgba(9, 11, 22, 0.85),
      0 2px 10px rgba(9, 11, 22, 0.7),
      0 0 28px rgba(9, 11, 22, 0.55);
  }

  /* Trust closes the frame: Protect+ on its own line, then rating + verified */
  .page-index .hp-trust {
    margin-top: auto;
    padding-top: 24px;
    gap: 12px 18px;
  }

  .page-index .hp-trust-protect {
    order: 1;
    flex: 0 0 100%;
    justify-content: center;
  }

  .page-index .hp-trust-rating { order: 2; }
  .page-index .hp-trust-verified { order: 3; }

  /* The mobile scrim is heavier top and bottom so the nav, the search cluster
     and the trust line all hold against the sky and the lot. */
  .page-index .hp-hero-scrim-top { display: none; }

  .page-index .hp-hero-scrim-wedge {
    background: linear-gradient(180deg,
      rgba(43, 50, 82, 0.8) 0%,
      rgba(43, 50, 82, 0.64) 7%,
      rgba(43, 50, 82, 0.28) 16%,
      rgba(43, 50, 82, 0.11) 30%,
      rgba(43, 50, 82, 0.05) 55%,
      rgba(43, 50, 82, 0.03) 72%,
      rgba(43, 50, 82, 0.2) 84.5%,
      rgba(43, 50, 82, 0.58) 88.5%,
      rgba(43, 50, 82, 0.72) 94%,
      rgba(43, 50, 82, 0.86) 100%);
  }
}

/* --------------------------------------------------------------------------
   Hero field inputs. These rules were lost in an earlier edit, which is why
   the focus ring and the readonly grey came back.
   -------------------------------------------------------------------------- */
.hp-field-value,
.hp-field-value:focus,
.hp-field-value:focus-visible,
.hp-field .selectric-wrapper:focus,
.hp-field select:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* attach() makes the dates input readonly, which picks up the form-control
   grey. Target the input itself, not just the wrapper. */
.hp-field .hp-hero__dates,
.hp-field input[readonly].hp-hero__dates,
.hp-field .dt-attach-host > input[readonly].hp-hero__dates {
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}

.hp-field .dt-attach-host {
  width: 100%;
}

/* Focusing .location-typed shows the fixed .nav-backdrop dim (z-index 10) and
   raises .search-form above it; the hero search cluster needs the same lift so
   the field and the Google autocomplete list stay reachable. Mirrors
   body.location-open .llp-hero__search on the location landings. */
body.location-open .hp-searchbar,
body.datepicker-open .hp-searchbar,
body.location-open .hp-hero-action,
body.datepicker-open .hp-hero-action {
  position: relative;
  z-index: 11;
}

/* The global rule .select-default:not(.select-sm):not(.select-xs) .selectric
   .label carries 8px 10px padding and outweighs a plain .hp-field selector,
   which indented the value 10px past its label and made the field 16px taller
   than WHERE / WHEN. Match its specificity via the .hp-select hook. */
.hp-field .select-default.hp-select .selectric .label {
  padding: 0;
  margin: 0 26px 0 0;
  height: auto;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--blue);
}

/* Income CTAs wrap their labels on narrow screens, so give each the full row. */
@media (max-width: 575.98px) {
  /* direction comes from .flex-column above; just make them fill the row */
  .page-index .hp-income-ctas .btn {
    width: 100%;
    flex: 0 0 auto;
  }
}

/* FAQ sits white-on-white against Featured Locations, so its tail reads as a
   large empty gap. Trim it on desktop (mobile is already handled above). */
@media (min-width: 768px) {
  .page-index .home-faq--area.home-section-padding {
    padding-bottom: 30px;
  }
}

/* Section headings sit too far off their descriptions on a small screen, and
   the 40px tail under each header is more than a phone needs. Applies to every
   section header on the page, not just the FAQ. */
@media (max-width: 767.98px) {
  .page-index .hp-head-sub {
    margin-top: 6px;
  }

  .page-index .hp-head,
  .page-index .hp-head-center,
  .page-index .hp-head-bar.mb-7 {
    margin-bottom: 1.25rem !important;
  }
}

/* Dock the hero date popup centred under its field rather than left-aligned,
   where it hangs off past the search bar. The shared .dt-float docks at
   calc(100% + 6px); the hero field wants a little more breathing room. */
.hp-field-when .dt-attach-popup {
  top: calc(100% + 14px);
}

@media (min-width: 768px) {
  .hp-field-when .dt-attach-popup {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* Yellow Protect+ pill, desktop only: a step down from the Figma 24px/57px.
   Mobile keeps its own smaller treatment in the max-width:767.98px block. */
@media (min-width: 768px) {
  .page-index .hp-protect-badge-pill {
    padding: 7px 18px 7px 22px;
    gap: 8px;
  }

  .page-index .hp-protect-badge-pill img {
    width: 46px;
    height: 46px;
  }

  .page-index .hp-protect-badge-pill span {
    font-size: 21px !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile: stop the page drifting after a back navigation.

   iOS Safari zooms the whole layout whenever a text field with a computed
   font-size under 16px takes focus, and that zoom survives navigating away
   and coming back. The page then paints wider than the visual viewport, so
   the right-hand edge (avatar in the fixed navbar, rail arrows) sits off
   screen and everything reads as shifted. The hero WHERE / WHEN fields are
   the only text inputs on this page and they inherit .fs-6 (15px), so hold
   them at 16px on phones. The 1px is invisible; the zoom is not.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .page-index .hp-field-value,
  .page-index .hp-field input[readonly].hp-hero__dates {
    font-size: 16px !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile: tighten the band spacing. 40px top and bottom on every section
   stacks into an 80px gutter between two bands, which is most of a phone
   screen of nothing. Cut it to 26px (52px between bands) and take the FAQ
   lead-in down with it.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .page-index .hp-section {
    padding-block: 26px;
  }

  .page-index .home-faq--area.home-section-padding {
    padding-top: 30px;
    padding-bottom: 20px;
  }
}

/* --------------------------------------------------------------------------
   Mobile: square the hero date popup up with its field.

   attach() anchors the popup to the .dt-attach-host span it wraps the input
   in, which sits inside .hp-field's 14px padding, so the popup rendered 15px
   right of the field's edge and then ran past it on the other side. Hand the
   anchoring to the field itself and let the popup span it exactly. Desktop
   keeps the centred docking above, so this stays under 768px.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .page-index .hp-field-when {
    position: relative;
  }

  .page-index .hp-field-when .dt-attach-host {
    position: static;
  }

  .page-index .hp-field-when .dt-attach-popup {
    /* now measured from the field's border box, not the input's line */
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }
}