/* ═══════════════════════════════════════════════════════════════════════════
   POSTCARD HERO — Photo banner + overlapping booking card
   Loaded AFTER premium-home.css; only overrides the hero section.
   ═══════════════════════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─── Hide the old hero (premium-home.css) ───────────────────────────────── */
.premium-hero { display: none; }

/* ─── Nav contrast fix for bright photos ─────────────────────────────────── */
.page-home .site-header {
  background: linear-gradient(to bottom, rgba(var(--primary-deep-alt3-rgb), 0.6), rgba(var(--primary-deep-alt3-rgb), 0.15));
}
.page-home .site-header.scrolled {
  background: rgba(var(--primary-deep-alt3-rgb), 0.97);
}

/* ─── Photo banner with slideshow ────────────────────────────────────────── */
.hero-photo {
  height: 58vh;
  min-height: 340px;
  position: relative;
  overflow: hidden;
  background: var(--primary-deep-alt3);
}

/* Before a tenant uploads their own photographs. Deliberately NOT a stock
   photo: shipping one means shipping its licence to every deployment, and the
   four that used to sit here were one island's. A gradient is nobody's, needs
   no attribution, and lets the page read as finished rather than broken while
   the owner is still setting up. Shorter than the photo hero, because it is a
   backdrop rather than the point. */
.hero-photo-empty {
  height: 34vh;
  min-height: 220px;
  background:
    radial-gradient(1200px 400px at 15% -10%, rgba(var(--accent-rgb), 0.18), transparent 60%),
    radial-gradient(900px 380px at 85% 110%, rgba(var(--sky-tint-alt2-rgb), 0.20), transparent 60%),
    linear-gradient(160deg, var(--primary-deep-alt3) 0%, var(--primary-deep-alt13) 55%, var(--primary-deep-alt3) 100%);
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.hero-slide-active {
  opacity: 1;
}

.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(var(--primary-deep-alt3-rgb), 0.45) 0%,
    rgba(var(--primary-deep-alt3-rgb), 0.1) 30%,
    transparent 50%,
    rgba(var(--primary-deep-alt3-rgb), 0.2) 100%
  );
  pointer-events: none;
}

/* ─── Overlapping booking section ────────────────────────────────────────── */
.hero-booking {
  position: relative;
  z-index: 1;
  margin-top: -44px;
  background: var(--bg-alt6);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 40px rgba(var(--ink-rgb), 0.1), 0 4px 24px rgba(var(--ink-rgb), 0.04);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.18);
  padding: 2.25rem 0 2rem;
}

.hero-booking-inner {
  width: min(1180px, calc(100% - 2.4rem));
  margin-inline: auto;
}

/* ─── Booking top row (header + badges) ──────────────────────────────────── */
.booking-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.booking-header-new h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  color: var(--text);
  margin: 0 0 0.35rem;
}

.booking-subline {
  font-size: 0.92rem;
  color: var(--muted);
  margin: 0;
}

.booking-badges {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}

.badge-google {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--surface-tint);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(var(--ink-rgb), 0.05);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.badge-google:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.15);
}

.badge-google-score {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.badge-google-score strong {
  font-size: 1.2rem;
  color: var(--text);
}

.badge-google-stars {
  color: var(--accent-alt2);
  font-size: 0.7rem;
  letter-spacing: 1px;
}

.badge-perks {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.perk {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

.perk::before {
  content: '\2713';
  color: var(--success-alt2);
  font-weight: 700;
  font-size: 0.7rem;
}

/* ─── Booking form bar ───────────────────────────────────────────────────── */
.booking-bar {
  display: flex;
  align-items: flex-end;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 1.25rem;
  background: var(--accent-pale-alt3);
  border: 1px solid var(--surface-tint);
  border-radius: 16px;
}

.bar-field {
  flex: 1;
  min-width: 115px;
}

.bar-field-wide {
  flex: 1.4;
  min-width: 155px;
}

.bar-field label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}

.bar-field input,
.bar-field select {
  width: 100%;
  border: 2px solid var(--surface-tint-alt26);
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  background: var(--surface);
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text);
  transition: border-color 200ms ease;
}

.bar-field input:focus,
.bar-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.bar-submit {
  background: linear-gradient(135deg, var(--accent-warm), var(--accent-alt));
  border: none;
  border-radius: 10px;
  padding: 0.65rem 1.6rem;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-on-accent);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.bar-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.35);
}

/* ─── Booking footer ─────────────────────────────────────────────────────── */
.booking-footer {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--surface-tint-alt34);
  text-align: center;
}

.hl-fleet {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  transition: color 200ms ease;
}
.hl-fleet:hover { color: var(--accent); }

/* ─── Pricing preview (inside bar) ──────────────────────────────────────── */
.booking-bar .pricing-preview {
  width: 100%;
  min-height: 0;
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
}

/* ─── Responsive: Postcard hero ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .booking-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }
  .bar-submit { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .hero-photo { height: 45vh; min-height: 280px; }
  .hero-booking { margin-top: -30px; padding: 1.75rem 0 1.5rem; }
  .booking-top { flex-direction: column; gap: 1rem; }
  .booking-badges { flex-direction: row; gap: 1rem; }
  .badge-perks { flex-direction: row; gap: 0.5rem; flex-wrap: wrap; }
  .booking-bar { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero-booking-inner { width: calc(100% - 1.5rem); }
  .booking-header-new h2 { font-size: 1.4rem; }
  .booking-badges { flex-direction: column; align-items: flex-start; }
}