/*
 * Sunny Estate Agent — v8
 * Tablet and desktop internal-page heroes are compact enough to reveal the
 * beginning of the following section. Mobile (700px and below) is untouched.
 */

/* Standard tablets using the image-backed hero treatment from v6/v7. */
@media (min-width: 701px) and (max-width: 900px) {
  .page-hero {
    --compact-page-hero-height: 455px;
    min-height: var(--compact-page-hero-height) !important;
    height: auto !important;
  }

  .projects-hero { --compact-page-hero-height: 465px; }
  .services-hero { --compact-page-hero-height: 495px; }
  .about-hero { --compact-page-hero-height: 490px; }
  .area-hero { --compact-page-hero-height: 445px; }
  .blog-hero { --compact-page-hero-height: 450px; }
  .contact-hero { --compact-page-hero-height: 455px; }

  .page-hero > .page-hero-grid,
  .projects-hero > .page-hero-grid,
  .page-hero-copy {
    min-height: var(--compact-page-hero-height) !important;
    height: auto !important;
  }

  .page-hero-copy {
    padding-top: 22px !important;
    padding-bottom: 28px !important;
    justify-content: flex-start !important;
  }

  .page-hero-copy h1,
  .services-hero .page-hero-copy h1,
  .projects-hero .page-hero-copy h1 {
    font-size: clamp(39px, 6.2vw, 50px) !important;
    line-height: 1.02 !important;
  }

  .page-hero-copy .lead {
    max-width: 650px;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .page-hero-copy .breadcrumbs,
  .page-hero-copy .eyebrow {
    margin-bottom: 8px !important;
  }

  .page-hero-features {
    margin-top: 12px !important;
    gap: 8px 16px !important;
  }

  .page-hero-copy .hero-actions {
    margin-top: 14px !important;
  }
}

/* Large tablets and desktop: preserve the split layout but reduce its height. */
@media (min-width: 901px) {
  .page-hero {
    --desktop-compact-hero-height: 420px;
    min-height: var(--desktop-compact-hero-height) !important;
    height: auto !important;
  }

  .projects-hero { --desktop-compact-hero-height: 420px; }
  .services-hero { --desktop-compact-hero-height: 450px; }
  .about-hero { --desktop-compact-hero-height: 440px; }
  .area-hero { --desktop-compact-hero-height: 420px; }
  .blog-hero { --desktop-compact-hero-height: 420px; }
  .contact-hero { --desktop-compact-hero-height: 420px; }

  .page-hero > .page-hero-grid,
  .projects-hero > .page-hero-grid {
    min-height: var(--desktop-compact-hero-height) !important;
    height: auto !important;
    align-items: stretch !important;
  }

  .page-hero-copy {
    min-height: var(--desktop-compact-hero-height) !important;
    height: auto !important;
    padding-top: 24px !important;
    padding-bottom: 26px !important;
    justify-content: center !important;
  }

  .page-hero-image,
  .projects-hero .page-hero-image {
    min-height: var(--desktop-compact-hero-height) !important;
    height: auto !important;
  }

  .page-hero-copy .breadcrumbs {
    margin-bottom: 8px !important;
  }

  .page-hero-copy .eyebrow {
    margin-bottom: 8px !important;
  }

  .page-hero-copy h1,
  .services-hero .page-hero-copy h1,
  .projects-hero .page-hero-copy h1 {
    margin-bottom: 10px !important;
    font-size: clamp(40px, 3.25vw, 52px) !important;
    line-height: 1.02 !important;
  }

  .page-hero-copy .lead {
    max-width: 620px;
    margin-bottom: 10px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .page-hero-features {
    margin-top: 12px !important;
    gap: 8px 18px !important;
  }

  .page-hero-features span {
    font-size: 12px !important;
  }

  .page-hero-copy .hero-actions {
    margin-top: 14px !important;
  }

  .page-hero-copy .hero-actions .btn {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .page-hero + .section,
  .page-hero + .section-sm {
    position: relative;
    z-index: 2;
  }
}

/* 901–1060px previously stacked copy and image, making the hero very tall. */
@media (min-width: 901px) and (max-width: 1060px) {
  .page-hero > .page-hero-grid,
  .projects-hero > .page-hero-grid {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: max(21px, calc((100vw - var(--container)) / 2));
    grid-template-columns: minmax(390px, 48%) minmax(0, 1fr) !important;
  }

  .page-hero-copy {
    padding-left: 0 !important;
    padding-right: 28px !important;
  }

  .page-hero-image,
  .projects-hero .page-hero-image {
    width: 100% !important;
  }
}