/* ============================================================================
   SUNNY HUB BLOCKS
   ----------------------------------------------------------------------------
   The section library for Service Hub (parent) pages: Cooling, Heating,
   Mini Splits, Heat Pumps, Indoor Air Quality.

   MIGRATION NOTE (read before rebuilding in Elementor)
   Every block below is a plain nested flex/grid div, so each maps 1:1 onto an
   Elementor Container. Each <section> carries a data-block name; build one
   Elementor section template per data-block and every hub assembles from them.

   No colors are defined here. All values come from the :root token block in
   sunny-engine.css, which is the source for Elementor Global Colors.

   Animation is expressed only as class="reveal" + data-animation / data-parallax.
   In Elementor those go in Advanced > CSS Classes and Advanced > Attributes.
   ============================================================================ */

/* ---------- hub-hero: H1 + subhead + CTA over a photo ---------- */
.hub-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 520px;
  padding: 120px 0 84px;
  overflow: hidden;
  background: var(--sky-darker);
}
.hub-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hub-hero-bg img {
  position: absolute; top: -12%; left: 0;
  width: 100%; height: 124%;
  object-fit: cover; opacity: 0.42; will-change: transform;
}
.hub-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(2,136,168,0.92) 0%, rgba(2,136,168,0.62) 55%, rgba(2,136,168,0.30) 100%);
}
.hub-hero .container { position: relative; z-index: 2; }
.hub-hero-copy { max-width: 720px; }
.hub-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.04;
  color: var(--white);
  margin-bottom: 18px;
  text-wrap: balance;
}
.hub-hero-sub {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.45;
  color: var(--white);
  opacity: 0.95;
  margin-bottom: 30px;
}
.hub-crumb {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  color: var(--white); opacity: 0.8; margin-bottom: 18px;
}
.hub-crumb a { color: var(--white); text-decoration: none; }
.hub-crumb a:hover { text-decoration: underline; }

/* ---------- hub-cards: the service cards that link down to child pages ---------- */
.hub-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 46px;
}
/* Four-card sections read as a balanced 2x2 instead of an orphaned 3+1 */
.hub-cards-4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .hub-cards-4 { grid-template-columns: 1fr; } }
.hub-card {
  display: flex; flex-direction: column;
  padding: 30px 28px 28px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--sky);
  border-radius: 16px;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(5,8,18,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-top-color 0.25s ease;
}
.hub-card:nth-child(2n) { border-top-color: var(--orange); }
.hub-card:nth-child(3n) { border-top-color: var(--yellow); }
.hub-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(5,8,18,0.13);
}
.hub-card-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 10px;
}
.hub-card-desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  flex: 1;
}
/* Photo-forward variant to match the homepage service tiles: image header on the
   card, copy below. In Elementor: an Image widget above the text inside the same
   Container; keep the card's border/hover on the Container. */
.hub-card.has-media { padding: 0; overflow: hidden; }
.hub-card-media { width: 100%; height: 185px; overflow: hidden; }
.hub-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.hub-card:hover .hub-card-media img { transform: scale(1.05); }
.hub-card-body {
  display: flex; flex-direction: column; flex: 1;
  padding: 24px 26px 26px;
}
/* Bullet list inside a text card (e.g. repair-vs-replace comparisons) */
.hub-card-list {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: grid; gap: 9px;
}
.hub-card-list li {
  position: relative; padding-left: 26px;
  font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--muted);
}
.hub-card-list li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  font-weight: 900; color: var(--sky-deep);
}
.hub-card-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 18px;
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  color: var(--sky-deep);
}
.hub-card:hover .hub-card-link { color: var(--orange); }

/* ---------- hub-prose: heading + body copy, reusable N times per page ---------- */
.hub-prose { max-width: 900px; }
.hub-prose p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 18px;
}
.hub-prose p:last-child { margin-bottom: 0; }
/* .on-dark in sunny-engine.css is a SECTION utility that also paints a --sky-deep
   background. On a prose block it's only a text treatment, so cancel the surface. */
.hub-prose.on-dark { background: transparent; }
.hub-prose.on-dark p { color: rgba(255,255,255,0.9); }
/* In-prose sub-heading (a brief's H3 under an H2 section) */
.hub-prose .hub-sub-h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 21px;
  line-height: 1.15;
  color: var(--ink);
  margin: 26px 0 10px;
}

/* ---------- hub-split: copy beside a photo ---------- */
.hub-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.hub-split-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(5,8,18,0.22);
}
.hub-split-media img {
  position: absolute; top: -8%; left: 0;
  width: 100%; height: 116%;
  object-fit: cover; will-change: transform;
}
@media (max-width: 900px) { .hub-split { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- hub-steps: numbered process ---------- */
.hub-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 44px;
}
.hub-step {
  padding: 28px 26px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}
.hub-step-num {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: var(--sun-gradient);
  font-family: var(--font-display); font-weight: 900; font-size: 19px;
  color: var(--white);
}
.hub-step-title {
  font-family: var(--font-display); font-weight: 900; font-size: 19px;
  color: var(--ink); margin-bottom: 8px;
}
.hub-step-desc {
  font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--muted);
}

/* ---------- hub-brands: brand / model strip ---------- */
.hub-brands {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 32px;
}
.hub-brand {
  padding: 11px 20px;
  background: var(--off-sky);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  color: var(--sky-darker);
}

/* ---------- hub-faq: native accordion, maps to Elementor's Accordion widget ---------- */
.hub-faq { max-width: 880px; margin-top: 40px; }
.hub-faq details {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--white);
  margin-bottom: 14px;
  overflow: hidden;
}
.hub-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display); font-weight: 900; font-size: 18px;
  color: var(--ink);
}
.hub-faq summary::-webkit-details-marker { display: none; }
.hub-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-body); font-weight: 700; font-size: 24px;
  color: var(--orange);
  transition: transform 0.2s ease;
}
.hub-faq details[open] summary::after { transform: rotate(45deg); }
.hub-faq summary:hover { color: var(--sky-deep); }
.hub-faq-body {
  padding: 0 24px 22px;
  font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--muted);
}

/* ---------- hub CTA banner fixes ----------
   sunny-landing.css only styles .display-h1 and bare <p> inside .section-cta-banner
   (the homepage variant). Hub and child pages use .display-h2 + .hub-prose there,
   which inherited light-surface styles: a charcoal heading on the dark photo and a
   left-anchored 900px prose block with body-scale type. Scope banner styles to both. */
.section-cta-banner .display-h2 {
  color: var(--white);
  text-wrap: balance;
  margin-bottom: 0;
}
.section-cta-banner .hub-prose {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.section-cta-banner .hub-prose p,
.section-cta-banner .hub-prose.on-dark p {
  margin: 20px auto 0;
  font-size: 19px;
  line-height: 1.65;
  color: var(--white);
  opacity: 0.94;
}
.section-cta-banner .hub-prose p:last-child,
.section-cta-banner .hub-prose.on-dark p:last-child {
  margin-bottom: 36px;
}

/* ---------- hub-locations: the service-area city list ---------- */
.hub-locations {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 34px;
}
.hub-location {
  padding: 9px 18px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  color: var(--ink);
}

/* ---------- section rhythm ---------- */
.section-hub { padding: 88px 0; position: relative; }
.section-hub-tint { background: var(--off-sky); }
.section-hub .display-h2 { margin-bottom: 16px; text-wrap: balance; }

@media (max-width: 760px) {
  .hub-hero { min-height: 420px; padding: 100px 0 64px; }
  .section-hub { padding: 64px 0; }
}