/**
 * Front-page section styles.
 *
 * These live in the child theme rather than in Divi module settings so the
 * design is version-controlled and reviewable. Divi still owns the page
 * structure — every block below sits inside a real Divi section/row/column and
 * stays editable in the builder.
 */

/* ==========================================================================
   Hero
   ========================================================================== */

.dalua-hero {
	position: relative;
	display: grid;
	place-items: center;
	min-block-size: clamp(30rem, 82vh, 46rem);
	padding: var(--dalua-section) var(--dalua-gutter);
	overflow: hidden;
	background: var(--dalua-plaster);
	isolation: isolate;
}

/**
 * The warm wash.
 *
 * The previous hero was a dark lunar sky, and that is what banded: a gradient
 * running down to near-black spends most of its length inside a handful of 8-bit
 * steps, so the terminator showed as visible rings. This replaces it with warm
 * plaster — the brand's own paper colour — lifted by two very shallow glows.
 *
 * Both stops stay within a few percent of each other in luminance, which is
 * what keeps it smooth: there is no long dark ramp left to quantise. It also
 * suits the shop far better than a night sky — an artisanal gelateria reads as
 * daylight and warm plaster, not as outer space.
 */
.dalua-hero__sky {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		/* A soft daylight bloom behind the wordmark. */
		radial-gradient(72% 55% at 50% 30%, #fffdf8 0%, rgba(255, 253, 248, 0) 70%),
		/* Blush warming the base, so the block is not flat. */
		radial-gradient(130% 80% at 50% 118%, rgba(232, 207, 201, 0.55) 0%, rgba(232, 207, 201, 0) 62%),
		var(--dalua-plaster);
}

.dalua-hero__inner {
	position: relative;
	inline-size: min(58rem, 100%);
	text-align: center;
	display: grid;
	justify-items: center;
	gap: 1.15rem;
}

.dalua-hero__mark {
	inline-size: min(30rem, 78vw);
	block-size: auto;
	display: block;
	/* The asset is sage on transparent. On plaster it needs no lifting — the
	   brightness filter it used to carry was there to make it read on the dark
	   sky, and on this background it would only wash the wordmark out. */
}

.dalua-hero__tagline {
	margin: 0;
	font-family: var(--dalua-font-display);
	font-size: var(--dalua-step-1);
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--dalua-night);
	text-indent: 0.34em;
}

.dalua-hero__sub {
	margin: 0;
	max-inline-size: 30ch;
	font-family: var(--dalua-font-body);
	font-size: var(--dalua-step-0);
	font-weight: 300;
	line-height: 1.6;
	color: var(--dalua-ink-muted);
}

.dalua-hero .dalua-eyebrow {
	color: var(--dalua-ink-muted);
}

.dalua-hero .dalua-moon {
	background: var(--dalua-sage);
	box-shadow: inset -0.16em 0 0 0 var(--dalua-night);
}

/* The call to action was written in plaster for the dark hero; on the light one
   it takes the ink treatment instead. Overridden here rather than in the page
   markup so the hero stays one editable Divi code module. */
.dalua-hero .dalua-btn {
	color: var(--dalua-night);
	border-color: rgba(31, 42, 46, 0.35);
}

.dalua-hero .dalua-btn:hover,
.dalua-hero .dalua-btn:focus-visible {
	background: var(--dalua-night);
	border-color: var(--dalua-night);
	color: var(--dalua-plaster);
}

/* ==========================================================================
   Shared section furniture
   ========================================================================== */

.dalua-block {
	inline-size: min(72rem, 100%);
	margin-inline: auto;
	padding-block: var(--dalua-section);
	padding-inline: var(--dalua-gutter);
}

.dalua-block__head {
	display: grid;
	gap: 0.9rem;
	justify-items: start;
	margin-block-end: clamp(2rem, 1.2rem + 2.4vw, 3.5rem);
	max-inline-size: 46rem;
}

.dalua-block__title {
	margin: 0;
	font-family: var(--dalua-font-display);
	font-size: var(--dalua-step-3);
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--dalua-night);
}

.dalua-block__lede {
	margin: 0;
	font-size: var(--dalua-step-0);
	font-weight: 300;
	line-height: 1.7;
	color: var(--dalua-ink-muted);
	max-inline-size: 52ch;
}

.dalua-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.85em 1.9em;
	/* This class is worn by both <a> and <button>. Without an explicit
	   background the button picks up the UA's `buttonface`, which on the dark
	   map gate rendered as a white pill with white text in it. */
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-family: var(--dalua-font-body);
	font-size: 0.8rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--dalua-plaster);
	transition: background-color 0.35s var(--dalua-ease), color 0.35s var(--dalua-ease);
}

.dalua-btn:hover,
.dalua-btn:focus-visible {
	background: var(--dalua-plaster);
	color: var(--dalua-night);
}

.dalua-btn--ink {
	color: var(--dalua-night);
}

.dalua-btn--ink:hover,
.dalua-btn--ink:focus-visible {
	background: var(--dalua-night);
	color: var(--dalua-plaster);
}

/* ==========================================================================
   Story
   ========================================================================== */

/* The page alternates warm/white down its length: hero and carta sit on
   plaster, so the story block takes the white slot between them and Instagram. */
.dalua-story {
	background: #fff;
}

.dalua-story__grid {
	display: grid;
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	align-items: start;
}

@media (min-width: 62rem) {
	.dalua-story__grid {
		grid-template-columns: 1.05fr 0.95fr;
	}
}

.dalua-story__pull {
	margin: 0;
	font-family: var(--dalua-font-display);
	font-size: var(--dalua-step-2);
	line-height: 1.22;
	letter-spacing: 0.03em;
	color: var(--dalua-night);
}

.dalua-story__body {
	display: grid;
	gap: 1.1rem;
}

.dalua-story__body p {
	margin: 0;
	font-size: var(--dalua-step-0);
	font-weight: 300;
	line-height: 1.75;
	color: var(--dalua-ink);
	max-inline-size: 54ch;
}

/* ==========================================================================
   Instagram grid (Phase 1: curated stills)
   ========================================================================== */

.dalua-ig__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
	gap: clamp(0.5rem, 0.3rem + 0.8vw, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dalua-ig__tile {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--dalua-sage-tint);
}

.dalua-ig__tile img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--dalua-ease);
}

.dalua-ig__tile:hover img,
.dalua-ig__tile:focus-within img {
	transform: scale(1.045);
}

.dalua-ig__foot {
	margin-block-start: 1.75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	justify-content: space-between;
}

/* ==========================================================================
   Contact
   ========================================================================== */

.dalua-contact {
	background: var(--dalua-night);
	color: var(--dalua-plaster);
}

.dalua-contact .dalua-block__title {
	color: var(--dalua-plaster);
}

.dalua-contact .dalua-block__lede {
	color: rgba(246, 243, 236, 0.7);
}

.dalua-contact .dalua-eyebrow {
	color: rgba(246, 243, 236, 0.55);
}

.dalua-contact__grid {
	display: grid;
	gap: clamp(2rem, 1rem + 3.5vw, 3.5rem);
	align-items: start;
}

@media (min-width: 56rem) {
	.dalua-contact__grid {
		grid-template-columns: 0.85fr 1.15fr;
	}
}

.dalua-contact__list {
	display: grid;
	gap: 1.6rem;
	margin: 0;
}

.dalua-contact__list dt {
	font-family: var(--dalua-font-body);
	font-size: var(--dalua-step--1);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(246, 243, 236, 0.5);
	margin-block-end: 0.4rem;
}

.dalua-contact__list dd {
	margin: 0;
	font-size: var(--dalua-step-0);
	font-weight: 300;
	line-height: 1.6;
	color: var(--dalua-plaster);
}

.dalua-contact__list a {
	color: var(--dalua-sage);
	text-decoration: none;
	border-block-end: 1px solid rgba(169, 190, 156, 0.4);
}

.dalua-contact__list a:hover,
.dalua-contact__list a:focus-visible {
	color: var(--dalua-plaster);
	border-block-end-color: currentColor;
}

/* --------------------------------------------------------------------------
   Map, behind a click-to-load gate.

   Nothing reaches Google until the visitor asks for it: the embed URL is held
   in a data attribute and only becomes an <iframe src> on click. The gate and
   the loaded map share an aspect-ratio so the swap causes no layout shift.
   -------------------------------------------------------------------------- */

.dalua-map {
	position: relative;
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	display: grid;
	place-items: center;
	overflow: hidden;
	border: 1px solid rgba(169, 190, 156, 0.26);
	background:
		radial-gradient(80% 60% at 50% 0%, rgba(169, 190, 156, 0.16) 0%, rgba(31, 42, 46, 0) 70%),
		var(--dalua-night-soft);
}

@media (min-width: 56rem) {
	.dalua-map {
		aspect-ratio: 16 / 11;
	}
}

.dalua-map__gate {
	display: grid;
	gap: 1.15rem;
	justify-items: center;
	text-align: center;
	padding: var(--dalua-gutter);
	/* A ch measure here is counted in the body face, but the line that has to
	   fit is the address in uppercase Italiana at display size — far wider per
	   character — so it broke mid-address. The narrow measure that actually
	   matters, on the privacy notice, is set on that element instead. */
	max-inline-size: 88%;
}

.dalua-map__address {
	margin: 0;
	font-family: var(--dalua-font-display);
	font-size: var(--dalua-step-1);
	letter-spacing: 0.05em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--dalua-plaster);
}

.dalua-map .dalua-eyebrow {
	color: rgba(246, 243, 236, 0.55);
}

.dalua-map .dalua-moon {
	background: var(--dalua-sage);
	box-shadow: inset -0.31em 0 0 0 var(--dalua-night-soft);
}

.dalua-map__notice {
	margin: 0;
	font-family: var(--dalua-font-body);
	font-size: 0.72rem;
	font-weight: 300;
	line-height: 1.55;
	letter-spacing: 0.02em;
	color: rgba(246, 243, 236, 0.46);
	max-inline-size: 32ch;
}

/* Once the visitor opts in, the iframe fills the same box. */
.dalua-map.is-loaded {
	border-color: rgba(169, 190, 156, 0.18);
	background: var(--dalua-night-soft);
}

.dalua-contact__map {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	display: block;
	filter: grayscale(1) contrast(0.92) brightness(0.94);
	background: var(--dalua-night-soft);
}

/* No-JS: the gate cannot work, so offer a plain link out instead of a dead
   button. Divi pages always render this markup, script or not. */
.dalua-map__fallback {
	display: none;
}

.no-js .dalua-map__btn {
	display: none;
}

.no-js .dalua-map__fallback {
	display: inline-flex;
}

/* ==========================================================================
   Divi container reset
   Divi ships a default 54px section padding and a 1080px row max-width, and
   the builder did not honour custom_padding on every section. Left alone,
   those inset the dark hero and contact blocks inside white bands. Each
   selector below carries the .dalua-fullbleed class so it outranks Divi's
   single-class defaults without touching any other module on the site.
   ========================================================================== */

.dalua-fullbleed.et_pb_section {
	padding-block: 0;
	margin-block: 0;
}

.dalua-fullbleed .et_pb_row {
	inline-size: 100%;
	max-inline-size: none;
	margin: 0;
	padding: 0;
}

.dalua-fullbleed .et_pb_column {
	inline-size: 100%;
	max-inline-size: none;
	margin: 0;
	padding: 0;
}

.dalua-fullbleed .et_pb_module {
	margin-block-end: 0;
}

/* The menu section has no .dalua-block wrapper — the shortcode brings its own
   markup — so it gets the shared rhythm here instead. */
.dalua-s-menu .dalua-menu {
	inline-size: min(72rem, 100%);
	margin-inline: auto;
	padding-block: var(--dalua-section);
	padding-inline: var(--dalua-gutter);
}

/* Plaster canvas, white cards — the same figure/ground the POS uses, and what
   makes the product grid read as cards rather than as panels on a panel. The
   hairline is what separates it from the hero, which is plaster too. */
.dalua-s-menu {
	background: var(--dalua-plaster);
	border-block-start: 1px solid rgba(31, 42, 46, 0.07);
}

/* Instagram takes the warm slot before the footer goes dark. */
.dalua-s-ig {
	background: var(--dalua-plaster);
}

/* Divi's text module sets its own colour and line-height; the menu defines
   both explicitly, but reset the wrapper so nothing cascades in. */
.dalua-menu-mount.et_pb_text {
	color: inherit;
	line-height: inherit;
}