/* Passive House Adelaide - cross-device responsive fixes */
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
body { min-width: 0; }
img, picture, video, iframe, svg { max-width: 100%; height: auto; }
main, section, article, aside, div, form { min-width: 0; }
input, select, textarea, button { max-width: 100%; font: inherit; }
input, select, textarea { width: 100%; }
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Prevent embedded content and long labels from creating horizontal scroll. */
.container, .wrap, .phx-hd-in, .phx-ft-in { width: 100%; }
.card, .service-card, .concept-card, .problem-card, .insight-card,
.benefit-card, .value-card, .step-card, .when-card { min-width: 0; }

/* Mechanical Ventilation desktop focal-point correction. */
.hero-bg img { object-position: right center !important; }

@media (max-width: 1024px) {
  .container, .wrap { padding-left: 24px !important; padding-right: 24px !important; }
  section { scroll-margin-top: 76px; }
  .cards-grid, .solutions-grid, .benefits-grid, .values-grid,
  .quality-grid, .problem-grid, .insight-grid, .when-grid,
  .process-steps, .benefit-cards, .leak-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .two-col, .split, .story, .work, .measure, .planning {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 768px) {
  :root { --mobile-gutter: 18px; }
  body { font-size: 16px; }
  h1 { font-size: clamp(30px, 9vw, 42px) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(26px, 7.5vw, 34px) !important; line-height: 1.18 !important; }
  h3 { line-height: 1.25; }
  p, li { overflow-wrap: anywhere; }

  .container, .wrap { padding-left: var(--mobile-gutter) !important; padding-right: var(--mobile-gutter) !important; }
  section { padding-top: 48px !important; padding-bottom: 48px !important; }
  .btn, .btn-primary, .btn-secondary, .btn-solid, .btn-outline,
  .btn-light, .btn-white, .btn-ghost {
    min-height: 46px; max-width: 100%; white-space: normal; text-align: center;
  }
  .hero-buttons, .cta-buttons, .actions {
    width: 100%; flex-direction: column !important; align-items: stretch !important;
  }
  .hero-buttons > *, .cta-buttons > *, .actions > * { width: 100%; justify-content: center; }

  .cards-grid, .solutions-grid, .benefits-grid, .values-grid,
  .quality-grid, .problem-grid, .insight-grid, .when-grid,
  .process-steps, .benefit-cards, .leak-cards {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .two-col, .split, .story, .work, .measure, .planning {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }
  .story-image, .work-image, .measure-image, .planning-image,
  .split-media, .b-media { width: 100% !important; }

  /* Mechanical Ventilation: stack visual and copy instead of overlaying them. */
  .hero:has(> .hero-bg) {
    height: auto !important; min-height: 0 !important; display: flex !important;
    flex-direction: column !important; overflow: hidden; border-radius: 0 0 14px 14px;
  }
  .hero:has(> .hero-bg) .hero-bg {
    position: relative !important; inset: auto !important; width: 100% !important;
    height: clamp(260px, 72vw, 430px) !important; order: 1;
  }
  .hero:has(> .hero-bg) .hero-bg img {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
    object-position: right center !important;
  }
  .hero:has(> .hero-bg) .hero-overlay,
  .hero:has(> .hero-bg) .wave-effect { display: none !important; }
  .hero:has(> .hero-bg) .hero-content {
    position: relative !important; inset: auto !important; order: 2;
    width: 100% !important; height: auto !important; padding: 34px var(--mobile-gutter) 42px !important;
    background: #fff; display: flex !important;
  }

  .cta-content, .why-content, .hero-content { max-width: 100%; }
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  form { width: 100%; }
  .form-row, .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 480px) {
  :root { --mobile-gutter: 16px; }
  .phx-hd-in { padding-left: 14px !important; padding-right: 14px !important; }
  a.phx-logo img { height: 36px !important; }
  .phx-burger { width: 42px; height: 42px; }
  .phx-ft-links { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; gap: 24px !important; }
  .phx-ft-links > div { min-width: 0; }
  .phx-ft-bot { align-items: flex-start !important; text-align: left !important; }
  .card img, .service-card img, .concept-card img, .insight-card img,
  .step-image img, .b-media img { max-height: 300px; object-fit: cover; }
}

@media (max-width: 360px) {
  .phx-ft-links { grid-template-columns: 1fr; }
  h1 { font-size: 29px !important; }
}

@media (orientation: landscape) and (max-height: 540px) and (max-width: 960px) {
  .hero:has(> .hero-bg) .hero-bg { height: 68vh !important; min-height: 240px; }
}