/* ---- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
  color: var(--color-on-dark);
}
.hero__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__sun { fill: var(--color-accent); }
.hero__hill-back { fill: var(--color-primary-hill-back); }
.hero__hill-front { fill: var(--color-primary-hill-front); }

.hero__content {
  position: relative;
  padding-top: 36px;
  padding-bottom: 96px;
}
.hero__eyebrow {
  margin-bottom: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-hero-eyebrow);
}
.hero__title {
  max-width: 680px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-hero);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.hero__lede {
  max-width: 520px;
  margin-top: 14px;
  font-size: 16px;
  color: var(--color-hero-lede);
}
.hero__search { position: relative; margin-top: -48px; }

@media (min-width: 768px) {
  .hero__content { padding-top: 64px; padding-bottom: 140px; }
  .hero__lede { margin-top: var(--space-4); font-size: 18px; }
  .hero__search { margin-top: -88px; }
}
@media (min-width: 1024px) {
  .hero__content { padding-top: 88px; }
  .hero__lede { margin-top: var(--space-5); font-size: 19px; }
  .hero__search { margin-top: -72px; }
}

/* ---- Trust badges ---------------------------------------------------------- */
.trust { padding-top: var(--space-6); }
.trust__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.trust__item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px;
  background: var(--color-surface);
  border-radius: 14px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.trust__stars { display: flex; gap: 1px; color: var(--color-star); }

@media (min-width: 768px) {
  .trust { padding-top: var(--space-7); }
  .trust__list { gap: var(--space-3); }
  .trust__item { flex-direction: row; align-items: center; gap: var(--space-3); padding: 16px 18px; font-size: var(--text-sm); }
}
@media (min-width: 1024px) {
  .trust { padding-top: 40px; }
  .trust__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
  .trust__item { padding: 18px 20px; }
}

/* ---- Holiday types --------------------------------------------------------- */
.stay-types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.stay-type {
  min-height: 96px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: 14px;
  color: var(--color-ink);
  text-decoration: none;
}
.stay-type:hover { color: var(--color-ink); box-shadow: inset 0 0 0 2px var(--color-border-strong); }
.stay-type__label { font-weight: 600; }

@media (min-width: 768px) {
  .stay-types { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .stay-type { min-height: 112px; padding: 18px; border-radius: var(--radius-lg); }
}
@media (min-width: 1024px) {
  .stay-types { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); }
  .stay-type { min-height: 128px; padding: var(--space-5); }
}

/* ---- Why book -------------------------------------------------------------- */
.why-grid { display: grid; gap: 14px; }
.why-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); box-shadow: none; }
.why-card h3 { font-size: var(--text-h3); font-weight: 600; }
.why-card p { color: var(--color-ink-muted); }

@media (min-width: 768px) {
  .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .why-card { padding: 22px; }
  .why-card p { font-size: 0.9375rem; }
}
@media (min-width: 1024px) {
  .why-grid { gap: var(--space-5); }
  .why-card { padding: 28px; border-radius: 18px; }
  .why-card h3 { font-size: 19px; }
  .why-card p { font-size: var(--text-md); }
}

/* ---- Owner promo + newsletter --------------------------------------------- */
.promo-grid { display: grid; gap: var(--space-4); }

.owner-cta {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-ink);
  color: var(--color-on-dark);
}
.owner-cta p { color: var(--color-on-dark-muted); max-width: 420px; }
.owner-cta .btn { align-self: flex-start; margin-top: var(--space-1); }
.owner-cta__icon { color: var(--color-accent); }
.owner-cta__title,
.newsletter__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.newsletter {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-xl);
  box-shadow: none;
}
.newsletter__row { display: flex; flex-direction: column; gap: 10px; }
.newsletter__small { font-size: var(--text-xs); color: var(--color-ink-subtle); }

@media (min-width: 768px) {
  .owner-cta, .newsletter { padding: var(--space-7); }
  .newsletter__row { flex-direction: row; }
  .newsletter__row .control__input { flex: 1; }
}
@media (min-width: 1024px) {
  .promo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .owner-cta, .newsletter { padding: 40px; border-radius: 22px; }
}