/* Mobile-only header and hero adjustments. Desktop styling remains in styles.css. */
@media (max-width: 768px) {
  /* Give the homepage photograph its own full-strength panel instead of hiding it
     behind the copy and a tall ivory fade. */
  .hero {
    min-height: auto;
    display: flex;
    flex-direction: column;
    background: var(--ivory);
    overflow: hidden;
  }

  .hero::after { display: none; }

  .hero-copy {
    min-height: auto;
    justify-content: flex-start;
    padding: 60px 24px 52px;
    background: var(--ivory);
  }

  .hero-copy::before { display: none; }
  .hero-copy h1 {
    font-size: clamp(36px, 9.4vw, 48px);
    line-height: 1.08;
  }
  .hero-copy .lede {
    max-width: 590px;
    font-size: clamp(19px, 5.2vw, 22px);
    line-height: 1.48;
  }
  .hero-actions {
    width: 100%;
    margin-top: 26px;
  }

  .hero-visual {
    display: block;
    width: 100%;
    height: clamp(290px, 78vw, 430px);
    flex: 0 0 auto;
    background-image:
      linear-gradient(180deg, rgba(36,35,34,.01), rgba(36,35,34,.08)),
      url('/images/hero-estate-mountains.png');
    background-size: cover;
    background-position: 70% center;
    background-repeat: no-repeat;
    border-top: 1px solid var(--line);
  }

  /* On small screens, crop away the upper sky and lock the lower focal area
     to the bottom edge so the estate, grounds, and tent remain visible. */
  .estate-banner,
  .gallery-banner {
    min-height: 0;
    height: clamp(275px, 74vw, 360px);
    border-bottom: 2px solid var(--gold-line);
  }

  .estate-banner {
    background-size: auto 150%;
    background-position: 66% bottom;
  }

  .gallery-banner {
    background-size: auto 155%;
    background-position: 61% bottom;
  }

  .faq-banner { min-height: 390px; background-position: center 48%; }

  .estate-banner.banner-curve,
  .gallery-banner.banner-curve {
    margin-bottom: 0;
  }

  .estate-banner.banner-curve::after,
  .gallery-banner.banner-curve::after {
    content: '';
    display: block;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
    transform: none;
    border-radius: 0;
    box-shadow: none;
    background: linear-gradient(180deg, rgba(255,253,249,0), rgba(255,253,249,.28));
  }

  .estate-banner + .refined-page-header,
  .gallery-banner + .refined-page-header {
    width: calc(100% - 32px);
    margin: 18px 16px 0;
    padding: 48px 24px 46px;
    border-top-color: var(--line);
    box-shadow: 0 16px 38px rgba(36,35,34,.09);
  }

  .refined-page-header h1 {
    font-size: clamp(28px, 7.6vw, 38px);
    line-height: 1.12;
    letter-spacing: .02em;
  }

  .refined-page-header p:last-child {
    margin-top: 20px;
    font-size: clamp(18px, 4.9vw, 21px);
    line-height: 1.5;
  }
}

@media (max-width: 420px) {
  .hero-copy { padding: 52px 22px 46px; }

  .hero-visual {
    height: clamp(290px, 80vw, 336px);
    background-position: 70% center;
  }

  .faq-banner { min-height: 370px; }

  .estate-banner + .refined-page-header,
  .gallery-banner + .refined-page-header {
    padding: 44px 22px 42px;
  }
}