/* ELUVO local air-conditioning landing pages (Bath first).
   Additive, page-scoped (.ac-local-page) styles only. Reuses the site's
   :root tokens (--navy/--blue/--green/--orange/--grey) and existing
   components; nothing here redefines a brand colour or a shared component. */

/* Guide-price callout inside the intro: .area-note-card is styled for dark
   sections, so give it an explicit navy surface on this light section. */
.ac-local-page .ac-price-callout { background: var(--navy); border-color: transparent; align-self: start; }
.ac-local-page .ac-price-callout strong { font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--white); }
.ac-local-page .ac-price-callout p { color: rgba(226,232,240,0.78); }

/* Light-surface variants of dark-styled card components, used where two
   dark sections would otherwise sit back to back. */
.ac-local-page .ac-light-cards .service-reason-grid article,
.ac-local-page .ac-light-cards .brand-card-ac,
.ac-local-page .ac-light-cards .service-check-panel {
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(10, 31, 51, 0.06);
}
.ac-local-page .ac-light-cards .service-reason-grid strong,
.ac-local-page .ac-light-cards .brand-card-ac strong,
.ac-local-page .ac-light-cards .service-check-panel h3 { color: var(--navy); }
.ac-local-page .ac-light-cards .service-reason-grid span,
.ac-local-page .ac-light-cards .brand-card-ac span { color: var(--grey); }
.ac-local-page .ac-light-cards .service-check-grid span { color: var(--text); }
.ac-local-page .ac-light-cards .ac-service-price { color: var(--navy); font-size: 1.25rem; }
.ac-local-page .ac-light-cards .ac-service-price strong { color: var(--green-dark); }

/* Package disclosure: "See what is included" */
.ac-local-details { border-top: 1px solid rgba(10, 31, 51, 0.1); padding-top: 12px; }
.ac-local-details summary { cursor: pointer; font-weight: 800; color: var(--navy); list-style-position: inside; }
.ac-local-details summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.ac-local-details ul { margin: 12px 0 10px; padding-left: 1.2rem; color: var(--grey); display: grid; gap: 6px; }
.ac-local-details p { margin: 0; font-size: 0.88rem; color: var(--grey); }
.ac-options-note { margin-top: 24px; font-size: 0.9rem; color: var(--grey); max-width: 70ch; }

/* Mid-page and closing wizard entry */
.ac-local-page .ac-wizard-cta {
  background: linear-gradient(135deg, var(--navy) 0%, #0d2844 100%);
  color: var(--white);
}
.ac-local-page .ac-wizard-cta h2 { color: var(--white); }
.ac-local-page .ac-wizard-cta p:not(.eyebrow) { color: rgba(226, 232, 240, 0.8); max-width: 60ch; }
.ac-wizard-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
@media (max-width: 700px) {
  .ac-wizard-cta-inner .btn { width: 100%; }
}

/* Layout: three package cards fill the row (the shared .ac-options-grid is a
   4-column grid), cards keep natural height when a disclosure is opened. */
.ac-local-page .ac-options-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.ac-local-page .ac-package { align-content: start; }
@media (max-width: 960px) {
  .ac-local-page .ac-options-grid { grid-template-columns: 1fr; max-width: 560px; }
}

/* Room-by-room: four cards in one row on desktop, two on tablet, one on mobile. */
.ac-local-page .room-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ac-local-page .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ac-local-page .room-grid { grid-template-columns: 1fr; } }

/* The "Most Popular" ribbon sits on the card's top edge - keep it clear of the title. */
.ac-local-page .ac-package.featured { padding-top: 46px; }

/* second stacked topic inside one dark editorial section (Portishead coastal + ownership) */
.ac-local-page .ac-extra-second { margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.16); }

/* bullet lists inside editorial sections (heritage, hillside, stone-building checklists) */
.ac-local-page .section-head .ac-rich-list { margin: 14px 0 0; padding-left: 1.3rem; display: grid; gap: 6px; max-width: 70ch; color: inherit; line-height: 1.6; }

/* city hero images are 1672x941 (16:9): show them uncropped instead of the generic 16:11 cover box */
.ac-hero-media > img[src*="/assets/images/local-ac/"],
.sub-hero img[src*="/assets/images/local-ac/"] { aspect-ratio: 1672 / 941; height: auto; }

/* Cheltenham / Frome / Wells AC pages: package "best suited to" lists, multi-paragraph cards, related links */
.ac-local-page .ac-package .ac-best-for-label { margin: 14px 0 4px; font-weight: 700; font-size: 0.92rem; text-align: left; }
.ac-local-page .ac-package .ac-best-for { margin: 0 0 14px; padding-left: 1.1rem; display: grid; gap: 3px; line-height: 1.5; font-size: 0.92rem; text-align: left; }
.ac-local-page .regional-coverage-grid .regional-card { align-content: start; }
.ac-local-page .ac-related-links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.ac-local-page .ac-wizard-cta .hero-actions { flex-wrap: wrap; }