/* =========================================================
   Home page (post 32272) — centred section headings on mobile

   On phones (≤ 767px, Elementor's mobile breakpoint) every section's head block —
   eyebrow, title and the lead / rating line under it — is centred. Desktop keeps
   the left-aligned design. Immerse and Popular Category were already centred by
   home-plate.css / discover-category-elementor.css; the rest are handled here.
   The hero is deliberately left out: its copy block stays left-aligned on mobile.

   Loaded after home-plate.css and the per-section *-elementor.css mapping files so
   these rules win ties. Container-level rules set text-align on the head wrapper
   (inherited), so an Alignment value set on an individual heading widget in the
   Elementor editor still overrides them; widget-level rules use :where() for the
   same reason.

   Sections & the selector that carries each head block:
     Hero ..................... (left-aligned on mobile, not touched here)
     Here's what we offer ..... .offer-head
     Immerse .................. .immerse-text     (title/paragraph boxes re-centred)
     Discover ................. .discover-points  (eyebrow + title) and each .discover-point
     Popular Category ......... .category-head    (already centred)
     Meet our key people ...... .section-head     (eyebrow, title, lead)
     From first pour .......... .section-head
     Testimonials (HTML) ...... .section-head     (eyebrow, title, rating)
     Gallery (HTML) ........... .gallery-head
   ========================================================= */

@media (max-width: 767px) {

	/* ---- Here's what we offer ---- */
	.theme-plate .e-con.offer-head { text-align: center; }

	/* ---- Immerse: the h2 (16ch) and paragraph (46ch) boxes were anchored left,
	        so their centred text sat a few px off-centre. Let them span the column. ---- */
	.theme-plate .immerse-text .section-title .elementor-heading-title { max-width: none; }
	.theme-plate .immerse-text .elementor-widget-text-editor { max-width: none; }

	/* ---- Discover: eyebrow + title, and each numbered point (01/02/03 circle, its
	        h3 and paragraph) stacked and centred. On desktop the point is a row
	        (circle left, copy right); Elementor's mobile flex-wrap already broke it
	        onto two lines, so an explicit column costs nothing. ---- */
	:where(.theme-plate .discover-points) > .eyebrow,
	:where(.theme-plate .discover-points) > .section-title { text-align: center; }
	.theme-plate .e-con.discover-point { flex-direction: column; align-items: center; text-align: center; }
	.theme-plate .discover-point > .e-con { width: 100%; }

	/* ---- Team + Journey (native containers) and Testimonials (HTML widget) ---- */
	.theme-plate .section-head { text-align: center; margin-inline: auto; }
	.theme-plate .e-con.section-head { align-items: center; }

	/* ---- Gallery (HTML widget; home-base.css sets text-align:left) ---- */
	.theme-plate .gallery-head { text-align: center; }
}