/**
 * bambus.css — Estelia Norway AS
 * Location: estelia-child/assets/css/bambus.css
 * Loads:    pages carrying [est_bambus] or [est_bambus_teaser]
 *           (inc/assets.php, priority 100 — after overflow-guard.css)
 * Markup:   inc/launch-bambus.php · Script: assets/js/bambus.js
 *
 * Order: 1 frame · 2 hero · 3 stamp · 4 countdown · 5 intro
 *        6 collection lines · 7 why bambusviskose · 8 closing call
 *        9 front-page teaser · 10 motion
 *
 * Tokens only (see the rule at the top of global.css). Mobile-first,
 * breakpoints 48em · 64em.
 *
 * The one loud element is the hero — display headline and the turning date
 * stamp. Everything after it stays quiet; the only other motion is the
 * training mosaic settling in once.
 */

/* ========================================================================
   1. FRAME
   Everything sits inside the same frame as the header and the front page's
   own blocks: each section pads itself by the gutter, and its __inner is the
   container less that gutter — the formula the front page's trust bar uses.

   Only __inner (and __track) may carry a max-width here. overflow-guard.css
   forces max-width: 100% onto every other est-* element with a (0,6,0)
   selector no single class can beat, so a width cap on anything else is
   silently dropped — and the block runs the full width of a wide screen.
   ======================================================================== */

/* GeneratePress puts 2em between the breadcrumb and .entry-content; the
   hero brings its own top spacing, same fix as the About hero in global.css. */
.entry-content:has(> .est-bambus:first-child) {
	margin-top: 0;
}

.est-bambus {
	color: var(--est-ink);
}

.est-bambus > section,
.est-bambus-teaser {
	padding-inline: var(--est-gutter);
}

.est-bambus-hero__inner,
.est-bambus-line__inner,
.est-bambus-why__inner,
.est-bambus-cta__inner,
.est-bambus-teaser__inner {
	max-width: calc(var(--est-container) - 2 * var(--est-gutter));
	margin-inline: auto;
}

/* Coloured blocks are panels inside the frame with the front page's card
   corners, never full-bleed bands. */
.est-bambus-line--panel .est-bambus-line__inner,
.est-bambus-cta__inner,
.est-bambus-teaser__inner {
	padding: var(--est-section-block) var(--est-gutter);
	border-radius: var(--est-radius-card);
}

/* global.css spaces prose list items with `.entry-content li + li`; in these
   grids that shifted every tile but the first down by a few pixels. Same
   override as the newsletter's perks row there. */
.entry-content .est-bambus li + li,
.entry-content .est-bambus-teaser li + li {
	margin-block-start: 0;
}

.est-bambus-figure {
	margin: 0;
}

.est-bambus-figure img,
.est-bambus-teaser__media img {
	width: 100%;
	height: auto;
	background-color: var(--est-surface);
}

.est-bambus-figure__caption {
	display: flex;
	align-items: center;
	gap: var(--est-space-xs);
	margin-block-start: var(--est-space-s);
	font-size: var(--est-step--1);
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* ========================================================================
   2. HERO
   Text first on a phone so the headline and date lead; side by side from
   64em. The headline is set at display size and breaks at its soft hyphen
   as "Bambus-/kolleksjonen" — the type is the hero's first image.
   ======================================================================== */

.est-bambus-hero {
	padding-block-start: var(--est-space-l);
}

.est-bambus-hero__inner {
	display: grid;
	gap: var(--est-space-2xl);
}

@media (min-width: 64em) {
	.est-bambus-hero__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		gap: var(--est-space-xl);
	}
}

.est-bambus-hero__title {
	margin-block-start: var(--est-space-s);
	font-size: var(--est-step-4);
	line-height: 0.95;
	overflow-wrap: break-word;
	hyphens: manual;
}

.est-bambus-hero__tagline {
	margin-block-start: var(--est-space-m);
	font-family: var(--est-font-display);
	font-size: var(--est-step-2);
	font-style: italic;
	line-height: 1.2;
}

.est-bambus-hero__lead {
	margin-block-start: var(--est-space-s);
	color: var(--est-ink-muted);
}

.est-bambus-hero__text .est-btn {
	margin-block-start: var(--est-space-l);
}

/* The stamp hangs off the photo's corner, so the photo's box must not clip. */
.est-bambus-hero__visual {
	position: relative;
}

.est-bambus-hero__media {
	margin: 0;
	overflow: hidden;
	background-color: var(--est-surface);
}

.est-bambus-hero__media img {
	width: 100%;
	height: auto;
}

/* ========================================================================
   3. STAMP — the turning date on the hero photo
   Plum, the site's one brand hue, so it reads as Estelia's mark rather than
   a sticker. Top right on a phone, overlapping the photo's top edge; from
   64em it hangs off the top-left corner into the gap beside the text.
   Sizes inside the SVG are in its own 200-unit box, not page units.
   ======================================================================== */

.est-bambus-badge {
	position: absolute;
	inset-block-start: calc(-1 * var(--est-space-xl));
	inset-inline-end: var(--est-space-m);
	inline-size: var(--est-space-3xl);
}

/* Pushed half its width out over the gap, so on the photo it covers wall,
   not the first model's face. */
@media (min-width: 64em) {
	.est-bambus-badge {
		inset-block-start: var(--est-space-2xl);
		inset-inline-start: calc(-1 * var(--est-space-2xl));
		inset-inline-end: auto;
		inline-size: calc(var(--est-space-3xl) + var(--est-space-xl));
	}
}

.est-bambus-badge svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.est-bambus-badge__disc {
	fill: var(--est-accent);
}

.est-bambus-badge__ring text {
	fill: var(--est-bg);
	font-family: var(--est-font-body);
	font-size: 14px;
	font-weight: 500;
}

/* "1." over "oktober" in the centre ("Ny" alone after the launch). */
.est-bambus-badge__day,
.est-bambus-badge__month {
	fill: var(--est-bg);
	font-family: var(--est-font-display);
}

.est-bambus-badge__day {
	font-size: 60px;
}

.est-bambus-badge__month {
	font-size: 25px;
	font-style: italic;
}

/* ========================================================================
   4. COUNTDOWN
   Invisible — not display:none, so it keeps its box and nothing jumps —
   until bambus.js has recomputed it (.is-ready). A cached copy's
   server-rendered numbers can be up to a day old.
   ======================================================================== */

.est-bambus-countdown {
	visibility: hidden;
	margin-block-start: var(--est-space-l);
	padding-block: var(--est-space-m);
	border-block: 1px solid var(--est-line);
}

.est-bambus-countdown.is-ready {
	visibility: visible;
}

.est-bambus-countdown__label {
	display: block;
	font-size: var(--est-step--1);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--est-tracking-eyebrow);
	color: var(--est-ink-muted);
}

.est-bambus-countdown__units {
	display: flex;
	flex-wrap: wrap;
	gap: var(--est-space-xs) var(--est-space-l);
	margin-block-start: var(--est-space-xs);
}

.est-bambus-countdown__unit {
	display: inline-flex;
	align-items: baseline;
	gap: var(--est-space-2xs);
}

.est-bambus-countdown__num {
	font-family: var(--est-font-display);
	font-size: var(--est-step-3);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.est-bambus-countdown__word {
	font-size: var(--est-step--1);
	color: var(--est-ink-muted);
}

/* ========================================================================
   5. INTRO — one line said, then explained
   ======================================================================== */

.est-bambus-intro {
	padding-block: var(--est-section-block);
}

.est-bambus-intro__inner {
	max-width: var(--est-container-narrow);
	margin-inline: auto;
	text-align: center;
}

.est-bambus-intro__lead {
	font-family: var(--est-font-display);
	font-size: var(--est-step-3);
	font-style: italic;
	line-height: 1.1;
	text-wrap: balance;
}

.est-bambus-intro__text {
	margin-block-start: var(--est-space-m);
	margin-inline: auto;
	font-size: var(--est-step-1);
	line-height: 1.5;
	color: var(--est-ink-muted);
	text-wrap: balance;
}

/* ========================================================================
   6. COLLECTION LINES — loungewear, then training on a surface panel
   ======================================================================== */

.est-bambus-line {
	padding-block-end: var(--est-section-block);
}

/* The panel carries its own padding; the section after it (why) opens with
   a full section-block, so a second one here would double the gap. */
.est-bambus-line--panel {
	padding-block-end: 0;
}

.est-bambus-line--panel .est-bambus-line__inner {
	background-color: var(--est-surface);
}

.est-bambus-line__head {
	margin-block-end: var(--est-space-xl);
}

.est-bambus-line__title {
	margin-block-start: var(--est-space-s);
}

.est-bambus-line__text {
	margin-block-start: var(--est-space-s);
	color: var(--est-ink-muted);
}

/* Loungewear — three colours. A swipe row on a phone, where three portraits
   side by side would be too small to tell apart: it steps out over the
   section's gutter so the next tile peeks in from the screen edge, the way
   the product carousels do. A plain row of three, inside the frame, from 48em.
   Qualified with `.est-bambus ul`: global.css resets `ul[class]` margin and
   padding at (0,1,1), which would beat a lone class. */
.est-bambus ul.est-bambus-lounge__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 72%;
	gap: var(--est-space-m);
	margin-inline: calc(-1 * var(--est-gutter));
	padding-inline: var(--est-gutter);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--est-gutter);
	scrollbar-width: none;
}

.est-bambus-lounge__track::-webkit-scrollbar {
	display: none;
}

.est-bambus-lounge__item {
	scroll-snap-align: start;
}

@media (min-width: 48em) {
	.est-bambus ul.est-bambus-lounge__track {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--est-space-l);
		margin-inline: 0;
		padding-inline: 0;
		overflow-x: visible;
	}
}

/* Colour dot beside each name — the same treatment as .est-swatch on the
   product cards (sections.css), fed from the same colour map. */
.est-bambus-swatch {
	flex: none;
	inline-size: var(--est-space-s);
	block-size: var(--est-space-s);
	border-radius: 50%;
	background-color: var(--est-swatch-color, var(--est-line));
	box-shadow: inset 0 0 0 1px var(--est-line);
}

/* Training — a mosaic led by one full look.
   Phone:   the feature across both columns, then two by two, and the last
            tile (shorts, a close crop that takes a wide frame well) across
            the full width so no cell is left empty.
   ≥48em:   the feature spans two columns and two rows, two tiles stack
            beside it, three run underneath.
   Every tile gets its shape from aspect-ratio on the figure, with the photo
   laid over it — so the feature adds nothing to the rows' height and they
   are sized by the small tiles alone. */
.est-bambus-training {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--est-space-m);
}

.est-bambus-training__item--feature,
.est-bambus-training__item:last-child {
	grid-column: 1 / -1;
}

.est-bambus-tile {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background-color: var(--est-bg);
}

.est-bambus-training__item:last-child .est-bambus-tile {
	aspect-ratio: 16 / 10;
}

.est-bambus-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 48em) {
	.est-bambus-training {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--est-space-l);
	}

	.est-bambus-training__item--feature {
		grid-column: 1 / span 2;
		grid-row: 1 / span 2;
	}

	.est-bambus-training__item:last-child {
		grid-column: auto;
	}

	.est-bambus-training__item:last-child .est-bambus-tile {
		aspect-ratio: 4 / 5;
	}

	.est-bambus-training__item--feature .est-bambus-tile {
		aspect-ratio: auto;
		height: 100%;
	}
}

/* Name tag on the photo, sentence case, in the page's white. */
.est-bambus-tile__label {
	position: absolute;
	inset-inline-start: var(--est-space-s);
	inset-block-end: var(--est-space-s);
	padding: var(--est-space-2xs) var(--est-space-s);
	border-radius: calc(var(--est-radius-card) / 2);
	background-color: var(--est-bg);
	font-size: var(--est-step--1);
	font-weight: 500;
	line-height: 1.4;
}

/* ========================================================================
   7. WHY BAMBUSVISKOSE
   A square photo of the garment beside the six qualities from 64em; below
   that the photo is left out and the list stands alone.
   ======================================================================== */

.est-bambus-why {
	padding-block: var(--est-section-block);
}

.est-bambus-why__inner {
	display: grid;
	gap: var(--est-space-2xl);
	align-items: center;
}

.est-bambus-why__media {
	display: none;
	margin: 0;
}

.est-bambus-why__media img {
	width: 100%;
	height: auto;
	background-color: var(--est-surface);
}

@media (min-width: 64em) {
	.est-bambus-why__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.est-bambus-why__media {
		display: block;
	}
}

.est-bambus ul.est-bambus-why__list {
	display: grid;
	gap: var(--est-space-xl) var(--est-space-l);
	margin-block-start: var(--est-space-xl);
}

@media (min-width: 48em) {
	.est-bambus-why__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Icon beside the name, text under the name. The icon spans both rows and
   is taller than a one-line name; the 1fr row takes that extra height, so
   the text still sits right under its name instead of drifting down. */
.est-bambus-why__item {
	display: grid;
	grid-template-columns: var(--est-space-xl) minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: var(--est-space-m);
	align-items: start;
}

.est-bambus-why__icon {
	grid-row: 1 / span 2;
	color: var(--est-accent);
}

.est-bambus-why__icon svg {
	width: 100%;
	height: auto;
}

.est-bambus-why__text {
	margin-block-start: var(--est-space-2xs);
	color: var(--est-ink-muted);
}

/* ========================================================================
   8. CLOSING CALL — Instagram before the launch; the fallback when the
   collection has no products yet after it. Before the launch the date is
   the image — "1. oktober", spelled out, as large as the page sets
   anything, under a small "Lanseres" that says what the date is.
   ======================================================================== */

.est-bambus-cta {
	padding-block-end: var(--est-section-block);
}

.est-bambus-cta__inner {
	display: grid;
	justify-items: center;
	gap: var(--est-space-m);
	background-color: var(--est-lavender);
	text-align: center;
}

.est-bambus-cta__when {
	display: grid;
	justify-items: center;
	gap: var(--est-space-s);
	max-width: none;
}

/* Two words now, not a figure. "1. oktober" sets about 3.5em wide, so 18vw
   fills roughly two thirds of a phone's panel and stays well clear of the
   headline below; from ~768px the display size caps it. */
.est-bambus-cta__date {
	display: block;
	font-family: var(--est-font-display);
	font-size: clamp(var(--est-step-4), 18vw, var(--est-step-5));
	line-height: 0.95;
	letter-spacing: var(--est-tracking-display);
	color: var(--est-accent);
}

.est-bambus-cta__title {
	font-size: var(--est-step-3);
}

.est-bambus-cta__text {
	color: var(--est-ink-muted);
}

.est-bambus-cta .est-btn {
	margin-block-start: var(--est-space-s);
}

/* ========================================================================
   9. FRONT-PAGE TEASER — [est_bambus_teaser]
   A panel the width of the trust bar right above it. Two columns only from
   64em, where the long headline has the room.
   ======================================================================== */

.est-bambus-teaser {
	padding-block-start: var(--est-space-l);
}

.est-bambus-teaser__inner {
	display: grid;
	gap: var(--est-space-xl);
	background-color: var(--est-lavender);
}

@media (min-width: 64em) {
	.est-bambus-teaser__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		gap: var(--est-space-2xl);
	}
}

.est-bambus-teaser__media {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--est-space-xs);
}

.est-bambus-teaser__title {
	margin-block-start: var(--est-space-s);
	font-size: var(--est-step-3);
	overflow-wrap: break-word;
	hyphens: manual;
}

.est-bambus-teaser__text {
	margin-block-start: var(--est-space-m);
	color: var(--est-ink-muted);
}

.est-bambus-teaser .est-btn {
	margin-block-start: var(--est-space-l);
}

/* ========================================================================
   10. MOTION
   One arrival and one reveal, nothing else moves on its own:
   — on load the hero copy rises line by line, the photo settles from a
     slight zoom (opacity untouched, so it still counts as the LCP image at
     once) and the stamp is pressed on, then turns for as long as the page
     is open;
   — the training mosaic rises once, tile by tile, when it scrolls into view
     (bambus.js adds .is-pending, then .is-in).
   All of it only when the visitor has not asked for reduced motion.
   ======================================================================== */

@media (prefers-reduced-motion: no-preference) {

	.est-bambus-hero__text > * {
		animation: est-bambus-rise 900ms var(--est-ease) both;
	}

	.est-bambus-hero__text > :nth-child(2) { animation-delay: 80ms; }
	.est-bambus-hero__text > :nth-child(3) { animation-delay: 180ms; }
	.est-bambus-hero__text > :nth-child(4) { animation-delay: 260ms; }
	.est-bambus-hero__text > :nth-child(5) { animation-delay: 340ms; }
	.est-bambus-hero__text > :nth-child(6) { animation-delay: 420ms; }

	.est-bambus-hero__media img {
		animation: est-bambus-settle 1600ms var(--est-ease) both;
	}

	.est-bambus-badge svg {
		animation: est-bambus-press 900ms var(--est-ease) 500ms both;
	}

	.est-bambus-badge__ring {
		transform-box: view-box;
		transform-origin: center;
		animation: est-bambus-turn 40s linear infinite;
	}

	.est-bambus-training.is-pending .est-bambus-training__item {
		opacity: 0;
		transform: translateY(var(--est-space-xl));
	}

	.est-bambus-training.is-in .est-bambus-training__item {
		opacity: 1;
		transform: none;
		transition:
			opacity 800ms var(--est-ease),
			transform 800ms var(--est-ease);
		transition-delay: calc(var(--est-i, 0) * 90ms);
	}
}

@keyframes est-bambus-rise {
	from {
		opacity: 0;
		transform: translateY(0.6em);
	}
}

@keyframes est-bambus-settle {
	from {
		transform: scale(1.06);
	}
}

@keyframes est-bambus-press {
	from {
		opacity: 0;
		transform: scale(0.6) rotate(-40deg);
	}
}

@keyframes est-bambus-turn {
	to {
		transform: rotate(360deg);
	}
}