/* =========================================================
   Home page — "Discover the coffee..." and "Everything on the menu..."
   sections rebuilt from Elementor HTML widgets into native widgets
   (post 32272). Same conventions as hero-elementor.css / sections-elementor.css:
     - CONTAINERS take Elementor's "css_classes" field; WIDGETS take "_css_classes".
     - WordPress's block-theme global styles set an explicit font-size directly
       on h1–h6 tags, which always wins over a value only *inherited* from a
       class on the wrapper div — so every heading override below targets
       `.elementor-heading-title` (the tag itself), not just its wrapper class.
   ========================================================= */

.e-con.discover,
.e-con.discover .e-con,
.e-con.category,
.e-con.category .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;
}

/* ---------- "Discover the coffee at Espresso Perk U Later" ---------- */
.e-con.discover { display: block; width: 100%; background: #F5F4F1; padding: clamp(56px, 10vw, 120px) 0; }
.e-con.discover > .e-con.container {
	display: block; width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px;
}
@media (min-width: 768px)  { .e-con.discover > .e-con.container { padding-inline: 40px; } }
@media (min-width: 1280px) { .e-con.discover > .e-con.container { padding-inline: 24px; } }

/* The content container carries both .container and .discover-grid, so the grid rule
   must outrank the .container "display:block" rule above (same element). */
.e-con.discover > .e-con.container.discover-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 900px) { .e-con.discover > .e-con.container.discover-grid { grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } }

.e-con.discover-points { display: flex; flex-direction: column; gap: 26px; width: 100%; }
.discover-points .eyebrow.elementor-widget,
.discover-points .section-title.elementor-widget { width: 100%; }
.discover-points .eyebrow .elementor-heading-title { margin: 0 0 -16px; }
.discover-points .section-title .elementor-heading-title {
	font-size: clamp(1.9rem, 4.5vw, 3.1rem); line-height: 1.12; font-weight: 600; margin-bottom: 4px;
}

.e-con.discover-point { display: flex; flex-direction: row; gap: 18px; width: 100%; align-items: flex-start; }
.discover-point .idx { flex: none; width: auto; }
.discover-point .idx .elementor-heading-title {
	width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	font-family: var(--font-display); border: 1px solid var(--accent); color: var(--accent); font-size: 0.95rem; font-weight: 400 !important;
}
.discover-point > .e-con { flex: 1 1 auto; min-width: 0; }
.discover-point h3.elementor-heading-title { font-size: 1.1rem; line-height: 1.3; font-weight: 600; margin-bottom: 6px; }
.discover-point .elementor-widget-text-editor p { opacity: 0.8; font-size: 0.94rem; margin: 0; }

.e-con.discover-media img { width: 100%; height: auto; border-radius: var(--radius-lg, 20px); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6); aspect-ratio: 16/10; object-fit: cover; }
@media (min-width: 900px) { .e-con.discover-media img { aspect-ratio: auto; } }

/* ---------- "Everything on the menu, made with care." ---------- */
.e-con.category { display: block; width: 100%; background: #F5F4F1; padding: clamp(56px, 10vw, 120px) 0; }
.e-con.category > .e-con.container {
	display: block; width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px;
}
@media (min-width: 768px)  { .e-con.category > .e-con.container { padding-inline: 40px; } }
@media (min-width: 1280px) { .e-con.category > .e-con.container { padding-inline: 24px; } }

.e-con.category-head { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 620px; margin: 0 auto clamp(40px, 6vw, 60px); }
/* The eyebrow is a flex-row container; keep it shrink-wrapped so it centres in the head */
.e-con.category-head > .e-con.eyebrow-icon { width: auto; justify-content: center; }
.category-head .eyebrow-icon .elementor-icon i,
.category-head .eyebrow-icon .elementor-icon svg { width: 14px; height: 14px; font-size: 14px; color: var(--accent); }
.category-head .eyebrow-icon .elementor-heading-title { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0; }
.category-head .section-title .elementor-heading-title {
	font-weight: 500; font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.12;
}

.e-con.category-grid { display: grid; grid-template-columns: 1fr; gap: clamp(90px, 14vw, 110px) 26px; padding-top: 90px; width: 100%; }
@media (min-width: 720px) { .e-con.category-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; } }

.e-con.category-card {
	position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
	background: var(--sand); padding: 120px 24px 40px; width: 100%; text-decoration: none;
	transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease;
}
.e-con.category-card:hover { transform: translateY(-8px); box-shadow: 0 30px 50px -30px rgba(0,0,0,0.35); }

.e-con.category-img {
	position: absolute; top: -90px; left: 50%; transform: translateX(-50%);
	width: 180px; height: 180px; border-radius: 50%; overflow: hidden; z-index: 1;
	box-shadow: 0 24px 40px -22px rgba(0,0,0,0.6);
}
/* Elementor wraps the <img> in two auto-height divs; give them the circle's full height
   so the image's height:100% resolves and object-fit:cover fills the circle. */
.category-img .elementor-widget-image,
.category-img .elementor-widget-image .elementor-widget-container { width: 100%; height: 100%; margin: 0; }
.category-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s cubic-bezier(.2,.8,.2,1); }
.category-card:hover .category-img img { transform: scale(1.1) rotate(3deg); }

.category-card .category-eyebrow.elementor-widget,
.category-card .category-eyebrow .elementor-heading-title {
	display: block; width: 100%; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px;
}
.category-card h3.elementor-heading-title {
	display: block; width: 100%; font-size: clamp(1.4rem, 2.4vw, 1.75rem); font-weight: 500; line-height: 1.2; margin-bottom: 20px;
}
/* "Our Menu" label: same look as .btn (solid accent, squared, uppercase) but small.
   The theme's .category-link rule (padding/background/hover lift) also matches the widget
   WRAPPER div that carries the class, which doubled the padding and background — strip it
   there and style only the label span inside. */
.category-card .category-link.elementor-widget {
	width: auto; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; display: block;
}
.category-card:hover .category-link.elementor-widget { transform: none; box-shadow: none; }
.category-card .category-link.elementor-widget > .elementor-widget-container { padding: 0; }
.category-card .category-link .elementor-heading-title {
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
	background: var(--accent); color: var(--btn-text, #FFFFFF);
	border: 1px solid transparent; border-radius: var(--btn-radius, 4px); padding: 10px 18px;
	transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
}
.category-card:hover .category-link .elementor-heading-title { transform: translateY(-3px); box-shadow: 0 16px 30px -14px var(--accent); }

/* ---------- Mobile: compact horizontal cards ---------- */
@media (max-width: 767px) {
	.theme-plate .e-con.discover { padding: 40px 0; }
	.theme-plate .discover .discover-grid { gap: 26px; }

	.theme-plate .e-con.category { padding: 40px 0; }
	.theme-plate .e-con.category-head { margin: 0 auto 20px; }
	.theme-plate .category-head .eyebrow-icon { justify-content: center; }
	.theme-plate .category-head .section-title .elementor-heading-title { font-size: 1.6rem; line-height: 1.15; }
	.theme-plate .e-con.category-grid { gap: 12px; padding-top: 0; }
	.theme-plate .e-con.category-card {
		display: grid; grid-template-columns: 84px 1fr auto; grid-template-rows: 1fr 1fr;
		align-items: center; justify-items: start; text-align: left;
		column-gap: 16px; row-gap: 0; padding: 12px 16px 12px 12px;
	}
	.theme-plate .e-con.category-card:hover { transform: none; box-shadow: none; }
	.theme-plate .e-con.category-img {
		position: static; transform: none; grid-column: 1; grid-row: 1 / span 2; align-self: center;
		width: 84px; height: 84px; box-shadow: 0 10px 20px -12px rgba(0,0,0,0.5);
	}
	.theme-plate .category-card .category-eyebrow.elementor-widget { grid-column: 2; grid-row: 1; width: auto; align-self: end; }
	.theme-plate .category-card .category-eyebrow .elementor-heading-title { font-size: 0.62rem; margin-bottom: 4px; }
	.theme-plate .category-card h3.elementor-widget { grid-column: 2; grid-row: 2; width: auto; align-self: start; }
	.theme-plate .category-card h3.elementor-heading-title { font-size: 1.15rem; margin-bottom: 0; }
	.theme-plate .category-card .category-link.elementor-widget { grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: end; }
	.theme-plate .category-card .category-link .elementor-heading-title { font-size: 0.66rem; padding: 8px 14px; white-space: nowrap; }
}