/*
 * WFL — Ingredients section ([wfl_ingredients] shortcode + "WFL Ingredients"
 * Elementor widget). The Figma "ingredients" infographic: the Misdemeanor bottle
 * centred on a radial-red field, a hand-drawn arrow, and the eight FLC-1
 * botanicals — each just icon + heading + copy — laid out around it.
 *
 * One DOM, three layouts. CSS Grid `grid-template-areas` is redefined at each
 * breakpoint so the same eight items + bottle reflow exactly as drawn. These are
 * the three responsive frames the client signed off on:
 *   base (<600)  single column, bottle mid-stack   (Figma mobile  187:2   / 375)
 *   ≥600 tablet  2×2 · bottle band · 2×2           (Figma tablet  236:379 / 834)
 *   ≥900 desktop two left-aligned columns + bottle (Figma desktop 236:292 / 1440)
 *
 * (There is NO full-ring desktop layout — the client's desktop reference is the
 * two-column 236:292, so the section keeps that shape at every width ≥900.)
 *
 * Content (heading, sub-head, each name + copy) is client-editable through the
 * Elementor widget; icons / bottle / arrow / layout / colour are locked here.
 */

.wfl-ing {
	position: relative;
	color: #fff;
	/* Fonts loaded via Google Fonts (see enqueue). Georgia is the closest
	   system fallback while the web fonts arrive. */
	font-family: "Lora", Georgia, "Times New Roman", serif;
	-webkit-font-smoothing: antialiased;
	/* Full-bleed: break out to the viewport edges so the red field reads
	   edge-to-edge even when the host Elementor column adds side padding (it
	   does at mobile — a 37.5px gutter otherwise crushes the section to 300px).
	   Portable — no template change, works wherever the widget is dropped. */
	margin-inline: calc(50% - 50vw);
	overflow-x: clip;
}

/* Beat the theme's global typography. It sets `h2 { font-family:"Cooper BT"
   !important }` (and body copy) inline, so only an !important rule at higher
   specificity restores the section's Caprasimo/Lora — otherwise those web
   fonts never even load. */
.wfl-ing .wfl-ing__title,
.wfl-ing .wfl-ing__name {
	font-family: "Caprasimo", Georgia, serif !important;
}
.wfl-ing .wfl-ing__subhead,
.wfl-ing .wfl-ing__desc {
	font-family: "Lora", Georgia, serif !important;
}

/* Radial-red field filling the section. Place the widget in a FULL-WIDTH
   Elementor container so this reads edge-to-edge like the design. */
.wfl-ing__bg {
	position: absolute;
	z-index: 0;
	inset: 0;
	background:
		radial-gradient(115% 90% at 50% 46%,
			#ffdad7 0%,
			#eab4af 8%,
			#d58d87 16%,
			#bf726c 31%,
			#a95750 46%,
			#953f38 63%,
			#802720 79%,
			#761612 90%,
			#6c0505 100%);
	pointer-events: none;
}

.wfl-ing__inner {
	position: relative;
	z-index: 1;
	max-width: 1440px;
	margin-inline: auto;
	padding-block: clamp(48px, 7vw, 100px);
	padding-inline: 16px;
}

/* ---- Heading ------------------------------------------------------------ */

.wfl-ing__head {
	max-width: 1040px;
	margin: 0 auto 48px;
	text-align: center;
}

.wfl-ing__title {
	margin: 0 0 12px;
	font-family: "Caprasimo", Georgia, serif;
	font-weight: 400;
	font-size: 40px;              /* mobile 187:9 */
	line-height: 1.3;             /* 52 / 40 */
	letter-spacing: -0.02em;
	color: #fff;
}

.wfl-ing__subhead {
	margin: 0;
	font-family: "Lora", Georgia, serif;
	font-weight: 400;
	font-size: 24px;              /* 187:10 — constant across the three frames */
	line-height: 1.667;           /* 40 / 24 */
	color: #cdcdcd;
}

/* ---- Ring grid (mobile-first: single column, 187:2) --------------------- */

.wfl-ing__ring {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;                     /* item → item (mobile) */
	align-items: start;
	justify-items: stretch;
	grid-template-areas:
		"kanna"
		"cinquefoil"
		"licorice"
		"ginger"
		"bottle"
		"blackcumin"
		"sophora"
		"vinetea"
		"clove";
}

.wfl-ing__item {
	display: flex;
	flex-direction: column;
	gap: 12px;                     /* icon → content (mobile) */
	align-items: flex-start;
	text-align: left;
}

.wfl-ing__icon {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
}

.wfl-ing__icon img {
	display: block;
	width: auto;
	height: 60px;                  /* mobile icons ~60px (187:75 etc.) */
}

.wfl-ing__body {
	display: flex;
	flex-direction: column;
	gap: 16px;                     /* heading → desc (mobile) */
}

.wfl-ing__name {
	margin: 0;
	font-family: "Caprasimo", Georgia, serif;
	font-weight: 400;
	font-size: 24px;              /* mobile 187:79 */
	line-height: 1.333;           /* 32 / 24 */
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: #fff;
}

.wfl-ing__desc {
	margin: 0;
	font-family: "Lora", Georgia, serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;             /* 24 / 16 — constant across all frames */
	color: #edeaea;
}

/* Grid-area hooks — one per botanical + the bottle */
.wfl-ing__item--kanna      { grid-area: kanna; }
.wfl-ing__item--blackcumin { grid-area: blackcumin; }
.wfl-ing__item--licorice   { grid-area: licorice; }
.wfl-ing__item--ginger     { grid-area: ginger; }
.wfl-ing__item--cinquefoil { grid-area: cinquefoil; }
.wfl-ing__item--sophora    { grid-area: sophora; }
.wfl-ing__item--vinetea    { grid-area: vinetea; }
.wfl-ing__item--clove      { grid-area: clove; }

/* ---- Bottle ------------------------------------------------------------- */

.wfl-ing__bottle {
	grid-area: bottle;
	position: relative;
	margin: 16px 0;                /* 24px item gaps + 16 = ~40 around the bottle (187) */
	align-self: center;
	justify-self: stretch;
	width: 100%;
	display: flex;
	justify-content: center;
}

.wfl-ing__bottle-img {
	display: block;
	width: 100%;                   /* mobile: fills the column (187:71 is w-full) */
	max-width: 420px;
	height: auto;
	filter: drop-shadow(0 24px 40px rgba(40, 0, 0, 0.45));
}

/* ---- Hand-drawn arrow (decorative, anchored to the bottle) -------------- */

.wfl-ing__arrow {
	position: absolute;
	z-index: 3;
	width: 108px;
	top: -34px;
	left: -6px;
	/* Native art points up-left; flip so the head curls toward the bottle */
	transform: rotate(158deg);
	transform-origin: center;
	pointer-events: none;
}

.wfl-ing__arrow img {
	display: block;
	width: 100%;
	height: auto;
}

/* ======================================================================== *
 * ≥600px — tablet (Figma 236:379 / 834): 2×2 · bottle band · 2×2
 * ======================================================================== */
@media (min-width: 600px) {
	.wfl-ing__inner {
		padding-inline: 40px;
	}

	.wfl-ing__title  { font-size: clamp(40px, 5.4vw, 46px); line-height: 1.5; } /* → 46/69 */

	.wfl-ing__ring {
		grid-template-columns: 1fr 1fr;
		column-gap: clamp(24px, 4vw, 56px);
		row-gap: 24px;
		grid-template-areas:
			"kanna      blackcumin"
			"licorice   ginger"
			"bottle     bottle"
			"cinquefoil sophora"
			"vinetea    clove";
	}

	.wfl-ing__item { gap: 24px; }          /* icon → content */
	.wfl-ing__body { gap: 8px; }           /* heading → desc */
	.wfl-ing__icon img { height: 44px; }   /* tablet/desktop icons ~44px */
	.wfl-ing__name { font-size: 20px; line-height: 1.6; } /* 20 / 32 */

	.wfl-ing__bottle { margin: 8px 0; }
	.wfl-ing__bottle-img { width: min(60vw, 488px); max-width: none; }

	.wfl-ing__arrow {
		width: 120px;
		top: -18px;
		left: -8px;
		transform: rotate(150deg);
	}
}

/* ======================================================================== *
 * ≥900px — desktop (Figma 236:292 / 1440): two LEFT-aligned text columns
 * flanking the centred bottle. Bottle is taken out of grid flow and floated
 * over the middle gap so the columns can stay wide (479px) and the bottle
 * large (489px) at the same time — as they overlap in the design.
 * ======================================================================== */
@media (min-width: 900px) {
	.wfl-ing__inner {
		padding-inline: 52px;
	}

	.wfl-ing__ring {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(300px, 26vw, 380px);  /* the middle lane the bottle floats in */
		row-gap: 12px;                            /* item → item (236:292) */
		align-items: start;
		grid-template-areas:
			"kanna      cinquefoil"
			"blackcumin sophora"
			"licorice   vinetea"
			"ginger     clove";
	}

	/* Both columns read left-aligned in 236:292 (no right-hand mirroring). */
	.wfl-ing__item { align-items: flex-start; text-align: left; }
	.wfl-ing__icon { justify-content: flex-start; }

	.wfl-ing__bottle {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: min(34vw, 489px);
		margin: 0;
		z-index: 2;
	}
	.wfl-ing__bottle-img { width: 100%; max-width: 489px; }

	/* Upper-left of the bottle, curling down toward it (236:378). Sits in the
	   gap above the first heading, not over the copy. */
	.wfl-ing__arrow {
		width: 150px;
		top: -104px;
		left: -140px;
		transform: rotate(150deg);
	}
}