/* ==========================================================================
   Suburb / area pages (joondalup, cockburn, fremantle, armadale, mandurah,
   rockingham). Linked from each page's meta "extra_head". All selectors are
   prefixed .suburb-* so nothing leaks into other pages.
   ========================================================================== */

/* Joondalup and Cockburn carry their own local-office footer (rendered inside
   <main>), so the global layout footer is hidden on those two pages only. */
.page-joondalup > .site-footer, .page-cockburn > .site-footer { display: none; }

/* Hero: 392px band, h1 left, no CTA ------------------------------------- */
.suburb-hero { height: auto; padding: 230px 40px 90px; align-items: flex-start; background-position: 50% 0; }
.suburb-hero::before { background: rgba(0,0,0,.7); }
.suburb-hero .page-hero__inner { padding: 0; }
.suburb-hero__custom { font-size: 16px; line-height: 24px; color: var(--dark); margin: 0 0 12px; }
.suburb-hero .suburb-hero__custom + h1 { margin-top: 0; }

/* Intro text + form card (text vertically centred beside the card) ------- */
.suburb-split .split__text { padding-top: 0; align-self: center; text-align: center; }
.suburb-split .split__text h2 { margin: 0 0 20px; padding: 0 15px; }
.suburb-split .form-card { padding-bottom: 57px; }
.suburb-split .form-card__title { line-height: 45px; }
.suburb-text p { margin: 0 0 24px; }
.suburb-text p:last-child { margin-bottom: 0; }
.suburb-text p a { color: var(--orange); text-decoration: underline; }
.suburb-text p a.link-orange { font-weight: 700; }

/* "Solar Panel Services in ..." title band ------------------------------- */
.suburb-title { background: rgba(242,242,242,.5); padding: 10px 40px; text-align: center; }
.suburb-title--tall { padding: 90px 40px 30px; }
.suburb-title h2 { margin: 0 0 12px; }
.suburb-title p { font-size: 20px; line-height: 30px; font-weight: 700; margin: 0; }

/* Alternating image / text service rows ---------------------------------- */
.suburb-svc { padding: 80px 40px; }
.suburb-svc--first { padding-top: 40px; }
.suburb-svc--grey { background: rgba(242,242,242,.5); }
.suburb-svc__grid { display: grid; grid-template-columns: 570px 570px; gap: 60px; justify-content: center; align-items: center; max-width: var(--container); margin: 0 auto; }
.suburb-svc__media { position: relative; padding: 30px 0 0 20px; }
.suburb-svc__media::before { content: ""; position: absolute; top: 10px; left: 0; width: 200px; height: 200px; background: var(--navy); }
.suburb-svc__media img { position: relative; width: 550px; max-width: 100%; height: auto; display: block; }
.suburb-svc--flip .suburb-svc__media { order: 2; padding: 30px 20px 0 0; }
.suburb-svc--flip .suburb-svc__media::before { left: auto; right: 0; }
.suburb-svc__text { text-align: center; padding: 10px 0; }
.suburb-svc__text h2 { margin: 0 0 20px; }
.suburb-svc__text h2 a { color: var(--orange); }

/* Gallery + info cards (desktop only on the live site) ------------------- */
.suburb-started .gallery { height: 410px; }
.suburb-started .gallery__thumbs { padding: 20px 0 0; }
.suburb-started .info-cards { gap: 0; align-self: center; }
.suburb-started .info-card { padding-bottom: 12px; }
.suburb-started .info-card + .info-card { border-top: 0; }
.suburb-started .info-card__title { margin-bottom: 4px; }
.suburb-started .info-card .btn--pill { min-height: 50px; margin: 6px 0 0; }
.suburb-started .suburb-hide-lg { display: none; }

/* Map + suburb description ----------------------------------------------- */
.suburb-map { padding: 80px 40px; }
.suburb-map__grid { display: grid; grid-template-columns: 570px 570px; gap: 60px; justify-content: center; align-items: center; max-width: var(--container); margin: 0 auto; }
.suburb-map__media { padding: 10px 0; }
.suburb-map__media iframe { width: 100%; height: 450px; border: 0; display: block; }
.suburb-map__text { text-align: center; }
.suburb-map__text h2 { margin: 0 0 12px; }

/* Local-office footer (reuses the global footer classes) ----------------- */
.suburb-footer { padding: 40px 40px 50px; }
.suburb-footer .footer-top { padding-bottom: 25px; }
.suburb-footer .footer-cols { padding: 50px 0 60px; gap: 0; }
.suburb-footer .footer-links li { line-height: 21px; }
.suburb-footer .footer-col--map { text-align: left; }
.suburb-footer .footer-col--map .footer-col__title { text-align: left; }
.suburb-footer .footer-col__title { font-family: var(--font-head); font-weight: 900; font-size: 24px !important; line-height: 36px !important; margin: 0 0 12px !important; color: var(--orange); }
.suburb-footer .footer-col p.suburb-footer__tight { line-height: 21px; }
.suburb-footer .footer-col p a { text-decoration: underline; }
.suburb-footer .footer-links { margin-top: 19px; }
.suburb-footer .footer-col--map .footer-col__title { margin-bottom: 22px !important; }
.suburb-footer .footer-col--map iframe { height: 170px; }
.suburb-footer .footer-bottom { padding-top: 23px; }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1100px) {
  .suburb-svc__grid, .suburb-map__grid { grid-template-columns: 1fr; }
  .suburb-svc--flip .suburb-svc__media { order: 0; }
}
@media (max-width: 1024px) {
  .suburb-hero { height: auto; min-height: 0; padding: 52px 16px; }
  .suburb-hero .page-hero__inner { padding: 0; }
  .suburb-hero h1 { font-size: 30px; margin: 0; }
  .suburb-hero__custom { margin-bottom: 8px; }
  .suburb-started { display: none; }
}
@media (max-width: 767px) {
  .suburb-split { padding: 40px 20px 40px; }
  .suburb-split .split__grid { gap: 0; }
  .suburb-split .split__form { display: none; }
  .suburb-split .split__text h2 { padding: 0; }
  .suburb-split h2, .suburb-title h2, .suburb-svc__text h2, .suburb-map__text h2 { font-size: 24px; }
  .suburb-title { padding: 55px 16px 50px; }
  .suburb-title p { font-size: 16px; line-height: 24px; }
  .suburb-text p { font-size: 15px; line-height: 22.5px; }
  .suburb-svc { padding: 40px 20px 60px; }
  .suburb-svc__grid { gap: 20px; }
  .suburb-svc__media { padding: 20px 0 0 20px; }
  .suburb-svc__media::before { top: 0; width: 150px; height: 150px; }
  .suburb-svc--flip .suburb-svc__media { padding: 20px 20px 0 0; }
  .suburb-svc__media img { width: 100%; }
  .suburb-svc__text { padding: 0; }
  .suburb-map { padding: 40px 20px 60px; }
  .suburb-map__grid { gap: 30px; }
  .suburb-map__media { padding: 0; }
  .suburb-footer { padding: 40px 20px 54px; }
  .suburb-footer .footer-logo img { width: 180px; }
  .suburb-footer .footer-top { align-items: center; text-align: center; gap: 32px; padding-bottom: 27px; }
  .suburb-footer .footer-top__right { flex-direction: column; gap: 35px; }
  .suburb-footer .footer-cols { padding: 60px 0 46px; gap: 40px; }
  .suburb-footer .footer-links { margin-top: 0; }
  .suburb-footer .footer-bottom { padding-top: 21px; }
}