/**
 * emora.gr, homepage only.
 *
 * Loaded just on the front page. The page alternates dark and light
 * full-bleed bands and varies alignment between them, so sections read as
 * composed rather than as one centred column repeated down the page.
 */

/* ---------------------------------------------------------------------------
   Shared section rhythm
   --------------------------------------------------------------------------- */

.emora-features,
.emora-products,
.emora-collections,
.emora-process,
.emora-milestone-teaser,
.emora-amulet,
.emora-privilege,
.emora-testimonials {
	padding: clamp(3rem, 6vw, 5.5rem) 0;
}

.emora-features__inner,
.emora-products__head,
.emora-products__grid,
.emora-collections__head,
.emora-collections__grid,
.emora-process__inner,
.emora-milestone-teaser__inner,
.emora-amulet__inner,
.emora-privilege__inner,
.emora-testimonials__inner {
	max-width: var(--emora-max-width);
	margin: 0 auto;
	padding-left: var(--emora-space-sm);
	padding-right: var(--emora-space-sm);
}

/* ---------------------------------------------------------------------------
   Hero. Copy left, the two hands from the client's logo right
   (assets/images/emora-mark.svg, inlined by front-page.php). The "Χειροποίητο,
   ένα κι ένα" eyebrow and the row of wood panels under the CTA were removed
   on her instruction (email 2026-09-16). Dark surfaces stay reserved for the
   header strip and the footer.
   --------------------------------------------------------------------------- */

.emora-hero {
	position: relative;
	background: var(--emora-bone);
	color: var(--emora-char);
	overflow: hidden;
	padding: clamp(2.5rem, 6vw, 5.25rem) var(--emora-space-sm) clamp(2.5rem, 5vw, 4.5rem);
}

.emora-hero__top {
	position: relative;
	max-width: var(--emora-max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 460px);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}

.emora-hero__copy {
	max-width: 36rem;
}

.emora-hero__title {
	font-family: var(--emora-font-display);
	color: var(--emora-char);
	font-size: clamp(2.25rem, 5.2vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 1.25rem;
}

.emora-hero__subtitle {
	font-size: clamp(1rem, 1.4vw, 1.1875rem);
	line-height: 1.6;
	color: var(--emora-walnut);
	margin: 0 0 2.25rem;
	max-width: 46ch;
	text-wrap: pretty;
}

.emora-hero__cta {
	display: inline-block;
	padding: 1rem 2.25rem;
	border-radius: 999px;
	background: var(--emora-ember);
	color: var(--emora-linen) !important;
	text-decoration: none;
	font-weight: 600;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.emora-hero__cta:hover,
.emora-hero__cta:focus-visible {
	background: var(--emora-ember-dark);
	transform: translateY(-2px);
}

/* The drawing is line art in one colour; walnut keeps it a shade lighter
   than the headline so the words stay in front. It fades in rather than
   burns in: the engraving animation belonged to the tree rings it replaced. */
.emora-hero__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	color: var(--emora-walnut);
}

.emora-hero__mark-svg {
	width: 100%;
	height: auto;
	animation: emora-appear 0.9s ease-out both;
}

@keyframes emora-appear {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.emora-hero__mark-svg {
		animation: none;
	}
}

@media (max-width: 860px) {
	.emora-hero__top {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.emora-hero__copy {
		max-width: none;
		margin: 0 auto;
	}

	.emora-hero__mark {
		max-width: 320px;
		margin: 0 auto;
	}
}

/* ---------------------------------------------------------------------------
   Feature row
   --------------------------------------------------------------------------- */

.emora-features {
	background: var(--emora-bone);
}

.emora-features__title,
.emora-testimonials__title {
	text-align: center;
	font-size: clamp(1.5rem, 3vw, 2.125rem);
	margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.emora-features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

.emora-feature {
	text-align: center;
}

.emora-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1.1rem;
	border-radius: 999px;
	background: var(--emora-sand);
}

.emora-feature__icon svg {
	width: 1.4rem;
	height: 1.4rem;
	fill: none;
	stroke: var(--emora-walnut);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.emora-feature__name {
	font-size: 1.0625rem;
	margin: 0 0 0.5rem;
}

.emora-feature__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--emora-walnut);
}

@media (max-width: 760px) {
	.emora-features__grid {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
}

/* ---------------------------------------------------------------------------
   Products. The card itself (.emora-product, .emora-products__grid) moved
   to site.css: taxonomy-product_cat.php needs it too now, and home.css only
   loads on the front page (functions.php).
   --------------------------------------------------------------------------- */

.emora-products {
	background: var(--emora-bone);
}

.emora-products__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--emora-space-sm);
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.emora-products__title {
	font-size: clamp(1.5rem, 3vw, 2.125rem);
	margin: 0;
}

.emora-products__all {
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	color: var(--emora-ember) !important;
	white-space: nowrap;
}


/* ---------------------------------------------------------------------------
   Collections. Redesign: the dark teaser band and the horizontally-scrolling
   carousel are gone (front-page.php); all 7 cards live in one sand-toned
   zone, the one deliberate step away from the paper background elsewhere
   on the page, shown all at once in a grid, closed by a dark nudge tile
   instead of a second scattered CTA band.
   --------------------------------------------------------------------------- */

.emora-collections {
	background: var(--emora-sand);
}

.emora-collections__head {
	max-width: 640px;
	margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
	text-align: center;
}

.emora-collections__eyebrow {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--emora-ember);
	margin-bottom: 1rem;
}

.emora-collections__title {
	font-size: clamp(1.5rem, 3vw, 2.125rem);
	line-height: 1.25;
	margin: 0;
}

.emora-collections__subtitle {
	margin: 0.85rem 0 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--emora-walnut);
}

.emora-collections__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

@media (max-width: 860px) {
	.emora-collections__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.emora-collections__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Process. The client's own design for this section (the graphic she sent
   on 2026-09-16), rebuilt as live text: one warm card, the title in the
   display face with a small ornament under it, three numbered steps, each
   a ringed number, a line icon and the step, ruled apart, and her tagline
   at the foot. The marbled paper of her graphic is suggested with two soft
   radial washes rather than a texture file.
   --------------------------------------------------------------------------- */

.emora-process {
	background: var(--emora-linen);
	border-top: 1px solid var(--emora-rule);
}

.emora-process__card {
	position: relative;
	max-width: 46rem;
	margin: 0 auto;
	padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem);
	border-radius: 22px;
	background:
		radial-gradient(60% 45% at 18% 12%, rgba(255, 255, 255, 0.55), transparent 70%),
		radial-gradient(55% 40% at 85% 88%, rgba(201, 189, 169, 0.28), transparent 70%),
		#f4ebdf;
	box-shadow: 0 24px 50px -30px rgba(43, 33, 26, 0.45);
	text-align: center;
}

.emora-process__title {
	font-family: var(--emora-font-display);
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.05;
	color: #5a3d27;
	margin: 0;
}

/* Her ornament: a dot with a hairline either side. */
.emora-process__ornament {
	position: relative;
	display: block;
	width: 5px;
	height: 5px;
	margin: 1.1rem auto clamp(1.75rem, 4vw, 2.75rem);
	border-radius: 50%;
	background: var(--emora-ember);
}

.emora-process__ornament::before,
.emora-process__ornament::after {
	content: '';
	position: absolute;
	top: 2px;
	width: 1.6rem;
	height: 1px;
	background: var(--emora-ember);
	opacity: 0.8;
}

.emora-process__ornament::before { right: 0.6rem; }
.emora-process__ornament::after  { left: 0.6rem; }

.emora-process__list {
	padding: 0;
	list-style: none;
	margin: 0;
	text-align: left;
}

.emora-process__step {
	display: grid;
	grid-template-columns: auto auto 1fr;
	gap: clamp(1rem, 3vw, 1.75rem);
	align-items: center;
	padding: clamp(1.1rem, 2.5vw, 1.6rem) 0;
	border-top: 1px solid rgba(90, 61, 39, 0.16);
}

.emora-process__step:first-child {
	border-top: 0;
}

.emora-process__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border: 1.5px solid var(--emora-ember);
	border-radius: 999px;
	font-family: var(--emora-font-display);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
	color: var(--emora-ember);
	font-variant-numeric: tabular-nums;
}

.emora-process__icon {
	display: inline-flex;
	width: 2.25rem;
	height: 2.25rem;
}

.emora-process__icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: #7a4a2b;
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.emora-process__step p {
	margin: 0;
	font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
	line-height: 1.6;
	color: var(--emora-char);
	text-wrap: pretty;
}

.emora-process__tagline {
	margin: clamp(1.75rem, 4vw, 2.5rem) 0 0.75rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: #7a4a2b;
}

.emora-process__leaf {
	display: inline-flex;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--emora-ember);
}

.emora-process__leaf svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 560px) {
	.emora-process__step {
		grid-template-columns: auto 1fr;
	}

	.emora-process__icon {
		display: none;
	}

	.emora-process__num {
		width: 2.75rem;
		height: 2.75rem;
		font-size: 1.05rem;
	}
}

/* ---------------------------------------------------------------------------
   Testimonials, visibly empty until real reviews exist.
   --------------------------------------------------------------------------- */

.emora-testimonials {
	background: var(--emora-bone);
}

.emora-testimonials__pending {
	max-width: 560px;
	margin: 0 auto;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	text-align: center;
	border: 1px dashed var(--emora-walnut-light);
	border-radius: var(--emora-radius);
	background: var(--emora-linen);
}

.emora-testimonials__pending p {
	margin: 0;
	color: var(--emora-walnut);
	line-height: 1.65;
}

/* ---------------------------------------------------------------------------
   Eyebrow shared by the three new sections (Milestone, Μενταγιόν, Το Δικό
   σου Προνόμιο): the section's name as the client wrote it in her list,
   set the way the collections eyebrow already is.
   --------------------------------------------------------------------------- */

.emora-section-eyebrow {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--emora-ember);
	margin-bottom: 1rem;
}

/* ---------------------------------------------------------------------------
   Milestone teaser: photo left (pending, see emora_photo_slot()), copy
   right, one link to the landing page. Linen, between the sand of the
   collections and the bone of the Μενταγιόν, so the three new sections
   alternate surfaces instead of stacking on one.
   --------------------------------------------------------------------------- */

.emora-milestone-teaser {
	background: var(--emora-linen);
	border-top: 1px solid var(--emora-rule);
}

.emora-milestone-teaser__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: center;
}

.emora-milestone-teaser__img {
	display: block;
	width: 100%;
	border-radius: 18px;
	object-fit: cover;
	box-shadow: 0 18px 40px -24px rgba(43, 33, 26, 0.45);
}

.emora-milestone-teaser__title,
.emora-amulet__title,
.emora-privilege__title {
	font-size: clamp(1.5rem, 3vw, 2.125rem);
	line-height: 1.2;
	margin: 0 0 0.75rem;
	text-wrap: balance;
}

.emora-milestone-teaser__lead {
	margin: 0 0 1.25rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--emora-char);
}

.emora-milestone-teaser__text {
	margin: 0 0 2rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--emora-walnut);
	max-width: 52ch;
}

.emora-milestone-teaser__cta,
.emora-amulet__cta {
	display: inline-block;
	padding: 0.9rem 2rem;
	border-radius: 999px;
	background: var(--emora-char);
	color: var(--emora-bone) !important;
	text-decoration: none;
	font-weight: 600;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.emora-milestone-teaser__cta:hover,
.emora-milestone-teaser__cta:focus-visible,
.emora-amulet__cta:hover,
.emora-amulet__cta:focus-visible {
	background: var(--emora-ember);
	transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   Μενταγιόν: copy left, her photo right, the two prices side by side with
   the bundle price weighted heavier, the client's one explicit ask for this
   section ("να φαίνεται καθαρά ... η ειδική/μειωμένη τιμή").
   --------------------------------------------------------------------------- */

.emora-amulet {
	background: var(--emora-bone);
}

.emora-amulet__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: center;
}

.emora-amulet__text {
	margin: 0 0 1.75rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--emora-walnut);
	max-width: 56ch;
}

.emora-amulet__offer {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 0 0 1.75rem;
	max-width: 30rem;
}

.emora-amulet__price {
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--emora-rule);
	border-radius: 14px;
	background: var(--emora-linen);
}

.emora-amulet__price--bundle {
	border-color: var(--emora-ember);
	background: #fbeee6;
}

.emora-amulet__amount {
	display: block;
	font-family: var(--emora-font-display);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1;
	color: var(--emora-char);
	margin-bottom: 0.4rem;
}

.emora-amulet__price--bundle .emora-amulet__amount {
	color: var(--emora-ember);
}

.emora-amulet__for {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--emora-walnut);
}

.emora-amulet__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
	box-shadow: 0 18px 40px -24px rgba(43, 33, 26, 0.45);
}

/* ---------------------------------------------------------------------------
   Το Δικό σου Προνόμιο: the three discounts as a list next to the pending
   photo of the engraved code. Sand, like the collections, so the page ends
   on the same alternation it began with.
   --------------------------------------------------------------------------- */

.emora-privilege {
	background: var(--emora-sand);
}

/* The engraved code is a wide, shallow strip, less than half the height of
   the copy beside it. Centred it floated in the middle of its column with a
   gap above and below; pinned to the top it sits beside the heading it
   illustrates, and the tiers run on underneath. */
.emora-privilege__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: start;
}

/* Drops the photo's top edge to about the title's baseline, rather than
   level with the eyebrow. */
.emora-privilege__photo {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* Her subtitle, set between the title and the body (email 2026-09-28). */
.emora-privilege__subtitle {
	margin: 0 0 1.25rem;
	font-family: var(--emora-font-display);
	font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
	line-height: 1.4;
	color: var(--emora-walnut);
}

.emora-privilege__lead {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--emora-walnut);
	max-width: 56ch;
}

.emora-privilege__lead:last-of-type {
	margin-bottom: 1.75rem;
}

.emora-privilege__tiers {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 30rem;
}

.emora-privilege__tier {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: 0.75rem 0;
	border-top: 1px solid rgba(43, 33, 26, 0.12);
}

.emora-privilege__tier:last-child {
	border-bottom: 1px solid rgba(43, 33, 26, 0.12);
}

.emora-privilege__amount {
	flex: 0 0 5.5ch;
	font-family: var(--emora-font-display);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--emora-ember);
	font-variant-numeric: tabular-nums;
}

.emora-privilege__for {
	line-height: 1.5;
	color: var(--emora-char);
}

.emora-privilege__img {
	display: block;
	width: 100%;
	border-radius: 12px;
	object-fit: cover;
	box-shadow: 0 14px 32px -20px rgba(43, 33, 26, 0.5);
}

/* While the photo is missing the slot is the labelled placeholder from
   site.css, which centres its text with flex; the display:block above
   (for the <img>) must not win over it. */
.emora-milestone-teaser__img.emora-photo-slot--pending,
.emora-privilege__img.emora-photo-slot--pending {
	display: flex;
}

@media (max-width: 760px) {
	.emora-milestone-teaser__inner,
	.emora-amulet__inner,
	.emora-privilege__inner {
		grid-template-columns: 1fr;
	}

	/* Photo under the copy on a phone, so the heading is the first thing
	   seen on scrolling in, except Milestone, whose photo introduces it. */
	.emora-amulet__photo,
	.emora-privilege__photo {
		order: 2;
	}

	.emora-amulet__offer {
		grid-template-columns: 1fr;
	}
}