/* ============================================================
   Homepage sections: hero + search bar, featured listings,
   towns, owners band.
   ============================================================ */

/* ============================================================ HERO */
.hero { padding-block: var(--sp-8) var(--sp-6); overflow-x: clip; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-7); align-items: center;
}
.hero__title {
  font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -.03em;
  color: var(--ocean-deep);
}
/* Rolling town name (city-rotator.js). Every name stacks in one grid cell, so
   the widest reserves the space and the headline never reflows mid-roll. */
.heroCity {
  display: grid; color: var(--turquoise-ink);
  overflow: clip; padding-bottom: .14em; margin-bottom: -.14em;
}
.heroCity__item {
  grid-area: 1 / 1; white-space: nowrap;
  opacity: 0; transform: translateY(.55em);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.heroCity__item.is-current { opacity: 1; transform: none; }
.heroCity__item.is-leaving { opacity: 0; transform: translateY(-.55em); }

.hero__lead { margin-top: var(--sp-4); font-size: var(--fs-md); color: var(--slate); max-width: 46ch; }

/* ---- hero search: one wide bar, magnifier inside on the right --------- */
.heroSearch { margin-top: var(--sp-6); max-width: 620px; view-transition-name: search; }
.heroSearch__modes { display: flex; gap: var(--sp-5); margin: 0 0 var(--sp-3); padding: 0; border: 0; min-inline-size: 0; }
.heroSearch__mode { position: relative; }
.heroSearch__mode input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.heroSearch__mode span {
  display: block; padding-block: var(--sp-1);
  font-size: var(--fs-md); font-weight: 700; color: var(--slate);
  border-bottom: 3px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.heroSearch__mode:hover span { color: var(--ocean-deep); }
.heroSearch__mode input:checked + span { color: var(--ocean-deep); border-bottom-color: var(--turquoise); }
.heroSearch__mode input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }

.heroSearch__bar {
  display: flex; align-items: center;
  height: 64px; padding: 6px 6px 6px var(--sp-5);
  background: var(--white); border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.heroSearch__bar:hover { border-color: var(--slate); }
.heroSearch__bar:focus-within { border-color: var(--ocean); box-shadow: var(--shadow-lift), 0 0 0 4px var(--focus-halo); }
.heroSearch__input {
  flex: 1; min-width: 0; height: 100%; padding: 0;
  border: 0; background: transparent; outline: none;
  font-size: var(--fs-md); color: var(--charcoal);
}
.heroSearch__input::placeholder { color: var(--slate); }
.heroSearch__submit {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 100%; padding: 0;
  border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--ocean-deep); cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.heroSearch__submit:hover { color: var(--turquoise); background: var(--seafoam-tint); }
.heroSearch__submit:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 0; }
.heroSearch__submit .ico { width: 26px; height: 26px; stroke-width: 2; }
.heroSearch__submit[aria-busy="true"] { pointer-events: none; }

.quickLink {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong); background: var(--white);
  font-size: var(--fs-xs); font-weight: 700; color: var(--ocean-deep);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.quickLink:hover { border-color: var(--ocean); color: var(--ocean); text-decoration: none; }

/* ---- arcade art: two arched photos + a pinned listing ----------------- */
.hero__art { position: relative; aspect-ratio: 5 / 6; max-width: 480px; justify-self: end; width: 100%; }
.arch {
  position: absolute; overflow: hidden; border-radius: var(--r-arch);
  background: var(--seafoam); box-shadow: var(--shadow-med);
  animation: archRise var(--dur-slow) var(--ease) both;
}
.arch img { width: 100%; height: 100%; object-fit: cover; animation: archSettle 1.4s var(--ease) both; }
.arch--tall { left: 0; top: 0; width: 64%; height: 92%; }
.arch--short {
  right: 0; bottom: 0; width: 48%; height: 62%;
  border: 6px solid var(--white); animation-delay: .12s;
}
.arch--short img { animation-delay: .12s; }

@keyframes archRise { from { opacity: 0; transform: translateY(28px); } }
@keyframes archSettle { from { transform: scale(1.08); } }

/* ============================================================ FEATURED */
.featured__grid { min-height: 380px; }
.featured__foot { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-7); }
.featured__foot [hidden] { display: none; } /* .btn is inline-flex */

/* ============================================================ TOWNS */
.towns {
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1.35fr 1fr; grid-template-rows: repeat(2, minmax(220px, auto));
}
.towns > li:first-child { grid-row: span 2; }
.townTile {
  position: relative; display: flex; align-items: flex-end; height: 100%; min-height: 220px;
  overflow: hidden; border-radius: var(--r-photo); background: var(--ocean-deep); color: var(--on-dark);
}
.townTile:hover { text-decoration: none; }
.townTile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.townTile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--scrim); }
.townTile:hover img { transform: scale(1.04); }
.townTile__body { position: relative; z-index: 2; display: grid; gap: 2px; padding: var(--sp-5); width: 100%; }
.townTile__name { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-xl); font-weight: 700; }
.townTile__name .ico { width: 22px; height: 22px; stroke-width: 2; transition: transform var(--dur-fast) var(--ease); }
.townTile:hover .townTile__name .ico { transform: translateX(4px); }
.townTile__note { font-size: var(--fs-sm); color: var(--on-dark-muted); }
.townTile__count { font-size: var(--fs-sm); font-weight: 700; min-height: 1.5em; }
.townTile:focus-visible { outline-offset: 4px; }

.towns__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--slate); }

/* ============================================================ OWNERS */
.owners { background: var(--ocean-deep); color: var(--on-dark); padding-block: var(--section-y); }
.owners__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: center; }
.owners h2 { font-size: var(--fs-2xl); letter-spacing: -.02em; max-width: 18ch; }
.owners__lead { margin-top: var(--sp-4); font-size: var(--fs-md); color: var(--on-dark-muted); max-width: 44ch; }
.owners__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.owners__note { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--on-dark-muted); max-width: 52ch; }
.owners__note a { color: var(--on-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.owners__steps { display: grid; gap: 0; counter-reset: step; }
.owners__step {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-4); align-items: center;
  padding-block: var(--sp-5); border-top: 1px solid var(--on-dark-line);
}
.owners__step:last-child { border-bottom: 1px solid var(--on-dark-line); }
.owners__step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill);
  border: 1.5px solid var(--on-dark-line); font-weight: 700; color: var(--on-dark);
}
.owners__step h3 { font-size: var(--fs-lg); }

/* ============================================================ RESPONSIVE */
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .hero__title { max-width: 18ch; }
  .hero__art { display: none; } /* only works beside the search, not stacked under it */
  .owners__grid { grid-template-columns: 1fr; gap: var(--sp-7); }
}

@media (max-width: 760px) {
  .hero { padding-block: var(--sp-6) var(--sp-4); }
  .heroSearch__bar { height: 56px; padding-left: var(--sp-4); }
  .heroSearch__submit { width: 46px; }

  /* featured: swipeable carousel instead of a grid */
  .featured__grid {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 300px); grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    padding-bottom: var(--sp-2);
  }
  .featured__grid > * { scroll-snap-align: start; }
  .featured__grid > .statePanel { grid-column: auto; width: calc(100vw - 2 * var(--gutter)); }

  .towns { grid-template-columns: 1fr; grid-template-rows: none; }
  .towns > li:first-child { grid-row: auto; }
  .townTile { min-height: 200px; }
}

@media (max-width: 520px) {
  .owners__actions .btn { flex: 1; }
}