/*
 * Sunny Estate Agent — v7
 * Mobile footer: two-column rows.
 * Mobile/tablet internal heroes: compact enough to reveal the following section.
 * Loaded last so it is the final responsive source of truth.
 */

@media (max-width: 900px) {
  /*
   * Keep internal hero content over the image, but remove the old fixed
   * 640–740px heights. The content can grow naturally when required.
   */
  .page-hero {
    --compact-page-hero-height: 520px;
    min-height: var(--compact-page-hero-height) !important;
    height: auto !important;
  }

  .projects-hero { --compact-page-hero-height: 525px; }
  .services-hero { --compact-page-hero-height: 555px; }
  .about-hero { --compact-page-hero-height: 545px; }
  .area-hero { --compact-page-hero-height: 500px; }
  .blog-hero { --compact-page-hero-height: 505px; }
  .contact-hero { --compact-page-hero-height: 515px; }

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

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

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

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

  .page-hero-copy h1 {
    margin-bottom: 13px !important;
  }

  .page-hero-copy .lead {
    margin-bottom: 16px !important;
  }

  .page-hero-features {
    gap: 9px 14px !important;
  }

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

  /* The following section should begin immediately after the compact hero. */
  .page-hero + .section,
  .page-hero + .section-sm {
    position: relative;
    z-index: 2;
  }
}

@media (max-width: 700px) {
  .page-hero {
    --compact-page-hero-height: 490px;
  }

  .projects-hero { --compact-page-hero-height: 510px; }
  .services-hero { --compact-page-hero-height: 540px; }
  .about-hero { --compact-page-hero-height: 535px; }
  .area-hero { --compact-page-hero-height: 475px; }
  .blog-hero { --compact-page-hero-height: 485px; }
  .contact-hero { --compact-page-hero-height: 495px; }

  .page-hero-copy {
    padding: 20px 18px 30px !important;
  }

  .page-hero-copy h1,
  .services-hero .page-hero-copy h1,
  .projects-hero .page-hero-copy h1 {
    font-size: clamp(34px, 10.2vw, 43px) !important;
    line-height: 1.01 !important;
  }

  .page-hero-copy .lead {
    font-size: 14px !important;
    line-height: 1.48 !important;
  }

  .page-hero-copy .eyebrow {
    font-size: 10px !important;
    line-height: 1.45 !important;
  }

  .page-hero-features {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .page-hero-features span {
    min-width: 0;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .page-hero-copy .hero-actions {
    gap: 9px !important;
  }

  .page-hero-copy .hero-actions .btn {
    min-height: 44px;
    padding: 11px 14px;
    font-size: 11px;
  }

  /* Contact strip above the footer: two items per row on mobile. */
  .contact-strip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .contact-strip-item {
    min-width: 0;
    min-height: 96px !important;
    padding: 14px 11px !important;
    gap: 9px !important;
    border-top: 1px solid var(--line) !important;
    border-right: 1px solid var(--line) !important;
    align-items: flex-start !important;
  }

  .contact-strip-item:nth-child(-n+2) {
    border-top: 0 !important;
  }

  .contact-strip-item:nth-child(2n) {
    border-right: 0 !important;
  }

  .contact-strip-item .icon-orb {
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
  }

  .contact-strip-item > span:last-child {
    min-width: 0;
  }

  .contact-strip-item small {
    font-size: 10px !important;
  }

  .contact-strip-item strong {
    font-size: 11px !important;
    line-height: 1.42 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Main footer: brand full width, then every row has two columns. */
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 18px !important;
    padding: 38px 0 32px !important;
  }

  .footer-grid > div {
    min-width: 0;
    grid-column: auto !important;
  }

  .footer-grid .footer-about {
    grid-column: 1 / -1 !important;
    padding-bottom: 4px;
  }

  .footer-about img {
    width: 180px;
    height: auto;
  }

  .footer-about p {
    max-width: 520px;
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 1.65;
  }

  .footer-grid h3 {
    margin-bottom: 12px;
    font-size: 11px !important;
    line-height: 1.35;
  }

  .footer-grid a,
  .footer-grid p {
    margin: 7px 0 !important;
    font-size: 11px !important;
    line-height: 1.48 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .footer-contact a,
  .footer-contact p {
    display: flex;
    align-items: flex-start;
    gap: 6px;
  }

  .footer-contact svg {
    flex: 0 0 auto;
    margin-top: 2px;
  }

  .footer-bottom-inner {
    gap: 10px;
    padding: 16px 0;
    text-align: center;
  }
}

@media (max-width: 430px) {
  /* Override v6's old 680–740px fixed mobile hero heights. */
  .page-hero {
    --compact-page-hero-height: 480px !important;
    min-height: var(--compact-page-hero-height) !important;
  }

  .projects-hero { --compact-page-hero-height: 500px !important; }
  .services-hero { --compact-page-hero-height: 530px !important; }
  .about-hero { --compact-page-hero-height: 525px !important; }
  .area-hero { --compact-page-hero-height: 465px !important; }
  .blog-hero { --compact-page-hero-height: 475px !important; }
  .contact-hero { --compact-page-hero-height: 485px !important; }

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

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 25px 14px !important;
  }

  .footer-grid h3,
  .footer-grid a,
  .footer-grid p {
    word-break: normal;
    overflow-wrap: anywhere;
  }
}

/* Prevent the closed off-canvas navigation from widening the mobile document. */
html,
body {
  max-width: 100%;
  overflow-x: clip !important;
}

@media (max-width: 1160px) {
  .mobile-nav {
    right: 0 !important;
    transform: translate3d(0, 0, 0) !important;
  }

  .mobile-nav.open {
    transform: translate3d(0, 0, 0) !important;
  }
}