/* =========================================================
   Home page — "Here's what we offer" and "Immerse yourself..." sections
   rebuilt from Elementor HTML widgets into native Elementor Containers +
   Heading / Text Editor / Image / Icon / Button widgets (post 32272).

   The visual design comes from home-base.css (.offer, .offer-head,
   .card-grid, .feature-card) and home-plate.css (.immerse, .immerse-grid,
   .immerse-media, .immerse-text, .eyebrow-icon). Most of those classes
   apply automatically since they're set on the containers/widgets via
   Elementor's "CSS Classes" field. This file only:
     1. neutralises Elementor's container defaults (padding/gap/max-width)
        so the original grid/flex layouts show through, and
     2. restyles the phone/food-menu buttons and the eyebrow icon, which
        Elementor renders with its own wrapper markup.
   ========================================================= */

/* ---------- Merge "offer" visually with the trust strip above it ---------- */
#trust { border-bottom: none; }
.e-con.offer.offer-merge { background: #FFFFFF; padding-top: 0; }

/* ---------- Container resets ---------- */
.e-con.offer,
.e-con.offer .e-con,
.e-con.immerse,
.e-con.immerse .e-con {
	--padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0;
	--margin-top: 0; --margin-right: 0; --margin-bottom: 0; --margin-left: 0;
	--gap: 0; --row-gap: 0; --column-gap: 0;
	max-width: none;
}

/* ---------- "Here's what we offer" ---------- */
.e-con.offer { display: block; width: 100%; padding: clamp(56px, 10vw, 120px) 0; }
.e-con.offer > .e-con.container {
	display: block; width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px;
}
@media (min-width: 768px)  { .e-con.offer > .e-con.container { padding-inline: 40px; } }
@media (min-width: 1280px) { .e-con.offer > .e-con.container { padding-inline: 24px; } }

.e-con.offer-head { display: grid; grid-template-columns: 1fr; gap: 24px; width: 100%; margin-bottom: clamp(32px, 6vw, 56px); }
@media (min-width: 900px) { .e-con.offer-head { grid-template-columns: 1fr 1fr; align-items: end; } }

.e-con.card-grid { display: grid; grid-template-columns: 1fr; gap: 22px; width: 100%; }
@media (min-width: 700px) { .e-con.card-grid { grid-template-columns: repeat(3, 1fr); } }

.e-con.feature-card {
	display: block; width: 100%; padding: 30px 26px; border-radius: var(--radius-lg, 18px);
	background: var(--card-bg); border: 1px solid var(--card-border, transparent);
	transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease;
}
.e-con.feature-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px -30px rgba(0,0,0,0.4); }
.feature-card .num .elementor-heading-title { margin-bottom: 14px; font-weight: 400; }
.feature-card .elementor-widget-text-editor p { margin: 0; }

/* WordPress's block-theme global styles set an explicit font-size directly on the
   <h2>/<h3> tag (h1{...} h2{...} h3{...} in #global-styles-inline-css). A direct rule on
   an element always wins over a value the element only *inherits* from an ancestor's
   class, regardless of that class's specificity — so `.section-title { font-size: … }`
   on the wrapper div never reaches the h2/h3 inside it. These rules target the heading
   tag itself (it carries the `.elementor-heading-title` class) to restore the design's
   sizes; see the matching fix on the hero's title/eyebrow/count. */
.offer-head .section-title .elementor-heading-title,
.immerse-text .section-title .elementor-heading-title {
	font-size: clamp(1.9rem, 4.5vw, 3.1rem); line-height: 1.12; font-weight: 600;
}
.immerse-text .section-title .elementor-heading-title {
	font-weight: 500; max-width: 16ch;
}
.feature-card h3.elementor-heading-title {
	font-size: 1.2rem; line-height: 1.3; font-weight: 600; margin-bottom: 10px;
}

/* ---------- "Immerse yourself..." ---------- */
.e-con.immerse { display: block; width: 100%; background: var(--bg); padding-top: clamp(40px, 6vw, 80px); }
.e-con.immerse > .e-con.container {
	display: grid; grid-template-columns: 1fr; gap: 40px; width: 100%;
	max-width: 1400px; margin-inline: auto; padding-inline: 20px;
}
@media (min-width: 768px)  { .e-con.immerse > .e-con.container { padding-inline: 40px; } }
@media (min-width: 900px)  { .e-con.immerse > .e-con.container { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; } }
@media (min-width: 1280px) { .e-con.immerse > .e-con.container { padding-inline: 24px; } }

.e-con.immerse-media {
	/* --width is Elementor's container Width control (100% by default), so a width the
	   client sets on the "Media" container in the editor is honoured, capped at 520px. */
	position: relative; width: min(var(--width, 100%), 520px); margin-inline: auto; aspect-ratio: 1;
}
.e-con.immerse-media::before {
	content: ""; position: absolute; inset: 8% -6% -6% 8%; border-radius: 50%; background: var(--sand); z-index: 0;
}
.immerse-media .elementor-widget-image,
.immerse-media .elementor-widget-image .elementor-widget-container { position: relative; z-index: 1; width: 100%; height: 100%; }
.immerse-media img {
	width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
	box-shadow: 0 40px 70px -35px rgba(0,0,0,0.55);
	transition: transform 0.8s cubic-bezier(.2,.8,.2,1);
}
.e-con.immerse-media:hover img { transform: rotate(-4deg) scale(1.02); }

.e-con.immerse-text { display: block; width: 100%; }
.immerse-text > .elementor-widget,
.immerse-text > .e-con { width: auto; max-width: 100%; margin: 0; }
.immerse-text .eyebrow-icon .elementor-icon-wrapper,
.immerse-text .eyebrow-icon .elementor-icon { display: inline-flex; }
.immerse-text .eyebrow-icon .elementor-icon i,
.immerse-text .eyebrow-icon .elementor-icon svg { width: 14px; height: 14px; font-size: 14px; color: var(--accent); fill: var(--accent); }
.immerse-text .section-title.elementor-widget { margin-bottom: 22px; }
.immerse-text .section-title .elementor-heading-title { max-width: 16ch; }
.immerse-text .elementor-widget-text-editor { max-width: 46ch; margin-bottom: 16px; }
.immerse-text .elementor-widget-text-editor p { margin: 0; }
.e-con.immerse-actions { display: flex; flex-wrap: wrap; align-items: center; width: 100%; margin-top: 30px; }

/* Mobile: smaller photo and centred buttons. The hand-built template's compact rules in
   home-plate.css (".theme-plate .immerse-*") lose to the container rules above, so restate
   them here through Elementor's own variables at low specificity: the "Media" container's
   mobile Width and the button containers' mobile Justify Content set in the editor still win. */
@media (max-width: 767px) {
	.e-con.immerse-media { --width: 72%; }
	:where(.e-con.immerse-actions, .e-con.immerse-actions .e-con) { --justify-content: center; }
}

/* Both buttons share the site's base .btn shape (pill/radius, size, weight, uppercase) */
.immerse-actions .elementor-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 14px 30px; border-radius: var(--btn-radius, 4px); border: 1px solid transparent;
	font-weight: 600; font-size: 0.9rem; letter-spacing: 0.03em; text-transform: uppercase;
	transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
}
.immerse-actions .elementor-button:hover { transform: translateY(-3px); }

/* Food Menu — primary button (site's .btn: solid accent) */
.immerse-actions .btn:not(.btn-dark) .elementor-button { background: var(--accent); color: #FFFFFF; }
.immerse-actions .btn:not(.btn-dark) .elementor-button:hover { box-shadow: 0 14px 30px -12px var(--accent); }

/* Phone number — filled black button (site's .btn-dark), with its call icon */
.immerse-actions .btn-dark .elementor-button { background: var(--dark); color: #FFFFFF; }
.immerse-actions .btn-dark .elementor-button:hover { box-shadow: 0 16px 30px -14px rgba(0,0,0,0.6); }
.immerse-actions .phone-btn .elementor-button-icon { display: inline-flex; }
.immerse-actions .phone-btn .elementor-button-icon i,
.immerse-actions .phone-btn .elementor-button-icon svg { width: 16px; height: 16px; font-size: 16px; }

/* ---------- Elementor editor: nothing special needed — both sections render
   the same in the editor as on the live site (no absolute/stacked layers
   like the hero slider), so no editor-only overrides are required. ---------- */