/**
 * Front page sections.
 *
 * The sections themselves are Spectra containers on page 50, edited in the
 * block editor. Spectra handles the structural work - full-bleed width,
 * background images, min-heights, padding, the buttons - and this file covers
 * what its controls cannot express:
 *
 *   - scrim gradients weighted to one side, so the copy always has a dark field
 *     to sit on while the product in the photograph stays visible
 *   - the serif italic accent on one word of the hero
 *   - the four "shop by category" cards and their product stage
 *   - the card treatment on the three "Unique by nature" points
 *   - the blockquote styling
 *
 * Everything hangs off the className set on each container in the editor
 * (.sd-hero, .sd-cats / .sd-cat-card, .sd-band, .sd-why, .sd-quote,
 * .sd-closer). Rename one there and its styling here stops applying.
 *
 * Colours come from the child theme's tokens in style.css, which map onto
 * Astra's dark palette (#111A28 page, #EDF6F3 text, #21B4A6 accent).
 */

/* Spectra's root containers are exempt from Astra's content-width rules, so
   the sections are already full-bleed edge to edge - which is the point of
   building them as containers.

   The inner wrap is what carries the readable measure. Spectra's own
   "content width" control did not emit anything for these blocks, so the
   measure and the stacking are set here rather than via block attributes:
   one rule, and it cannot be knocked out by an attribute name changing
   between plugin versions. */
.sd-hero > .uagb-container-inner-blocks-wrap,
.sd-band > .uagb-container-inner-blocks-wrap,
.sd-why > .uagb-container-inner-blocks-wrap,
.sd-quote > .uagb-container-inner-blocks-wrap,
.sd-closer > .uagb-container-inner-blocks-wrap {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: min(100%, 1200px);
	margin-inline: auto;
}

/* The centred sections centre their own content; the hero and the bands stay
   left-aligned against their scrim. */
.sd-why > .uagb-container-inner-blocks-wrap,
.sd-quote > .uagb-container-inner-blocks-wrap,
.sd-closer > .uagb-container-inner-blocks-wrap {
	align-items: center;
	text-align: center;
}

/* Spectra sets every direct child of a container to `width: 100%`. That is
   right for the headings and wrong for a buttons block, which would otherwise
   stretch the full measure and drag its button away from the text above it. */
.sd-hero .wp-block-uagb-buttons,
.sd-band .wp-block-uagb-buttons,
.sd-why .wp-block-uagb-buttons,
.sd-closer .wp-block-uagb-buttons {
	width: auto !important;
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   Buttons

   The Spectra blocks carry only a label, a link and a style class; the palette
   and shape live here so there is one place to change a button, and so the
   block markup does not have to pin a dozen padding and typography attributes
   to look right.
   --------------------------------------------------------------------------- */

.sd-hero .uagb-buttons-repeater,
.sd-band .uagb-buttons-repeater,
.sd-cats .uagb-buttons-repeater,
.sd-why .uagb-buttons-repeater,
.sd-closer .uagb-buttons-repeater {
	display: inline-flex;
	align-items: center;
	padding: .9rem 2.1rem;
	border-radius: 999px;
	font-family: 'Quicksand', sans-serif;
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

/* Primary: solid teal. */
.is-style-sd-primary .uagb-buttons-repeater,
.uagb-buttons-child.is-style-sd-primary .uagb-buttons-repeater {
	background: var(--ast-global-color-0, #21B4A6);
	border: 1px solid var(--ast-global-color-0, #21B4A6);
	color: var(--ast-global-color-5, #111A28);
}

.is-style-sd-primary .uagb-buttons-repeater:hover,
.is-style-sd-primary .uagb-buttons-repeater:focus-visible {
	background: #2fd3c3;
	border-color: #2fd3c3;
	color: var(--ast-global-color-5, #111A28);
	transform: translateY(-2px);
}

/* Secondary: teal outline on the photographic bands. */
.is-style-sd-outline .uagb-buttons-repeater,
.uagb-buttons-child.is-style-sd-outline .uagb-buttons-repeater {
	background: transparent;
	border: 1px solid var(--ast-global-color-0, #21B4A6);
	color: var(--ast-global-color-0, #21B4A6);
}

.is-style-sd-outline .uagb-buttons-repeater:hover,
.is-style-sd-outline .uagb-buttons-repeater:focus-visible {
	background: var(--ast-global-color-0, #21B4A6);
	color: var(--ast-global-color-5, #111A28);
}

@media (prefers-reduced-motion: reduce) {
	.sd-hero .uagb-buttons-repeater,
	.sd-band .uagb-buttons-repeater,
	.sd-closer .uagb-buttons-repeater {
		transition: none;
	}

	.is-style-sd-primary .uagb-buttons-repeater:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

.sd-hero {
	position: relative;
	overflow: hidden;
}

/* The product sits right of centre in the photograph, so the scrim is weighted
   to the left: the headline gets a dark field while the wallet stays clear.
   Spectra's own overlay is a flat wash and cannot do this. */
.sd-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(6, 19, 20, .9) 0%, rgba(6, 19, 20, .72) 38%, rgba(6, 19, 20, .18) 68%, rgba(6, 19, 20, .05) 100%),
		linear-gradient(0deg, rgba(17, 26, 40, .92) 0%, rgba(17, 26, 40, 0) 45%);
}

.sd-hero .uagb-heading-text {
	max-width: 18ch;
	font-size: clamp(2.4rem, 6vw, 4.25rem);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -.02em;
	text-transform: none;
}

/* The serif italic on one word is the only decorative move in the hero; it
   marks "stone" as the thing that makes the product unusual. */
.sd-hero .uagb-heading-text em {
	font-family: 'Source Serif 4', Georgia, serif;
	font-style: italic;
	font-weight: 400;
	color: var(--ast-global-color-0, #21B4A6);
}

/* Spectra's "above heading" text is the eyebrow. */
.sd-hero .uagb-desc-text:not(.uagb-heading-sub-text) {
	margin-bottom: .9rem;
	color: var(--ast-global-color-0, #21B4A6);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.sd-hero .uagb-heading-sub-text {
	max-width: 32rem;
	margin-top: 1rem;
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	line-height: 1.6;
}

.sd-hero .uagb-buttons__outer-wrap {
	margin-top: 2rem;
}

/* ---------------------------------------------------------------------------
   Shop by category - four cards under the hero

   Built in the editor as a Spectra row of four 25% columns, each holding a
   heading (with a one-line description), a product image and a button. The
   row is laid out as a grid here so it can reflow to two columns and then
   one; Spectra's per-column width would otherwise keep all four side by side
   on a phone.
   --------------------------------------------------------------------------- */

/* !important on the gap: Spectra prints `column-gap: 0` for the row keyed to
   its block ID, which outranks a class selector. */
.sd-cats > .uagb-container-inner-blocks-wrap {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem !important;
	/* Equal-height cards; Spectra centres row items by default. */
	align-items: stretch !important;
	width: min(100%, 1200px);
	margin-inline: auto;
}

.sd-cats .wp-block-uagb-container.sd-cat-card {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 1.5rem 1.5rem 1.75rem !important;
	border: 1px solid var(--sd-border, rgba(237, 246, 243, .14));
	border-radius: 10px;
	background: var(--sd-surface, #1C2A3C);
	transition: border-color .2s ease, transform .2s ease;
}

.sd-cats .sd-cat-card:hover,
.sd-cats .sd-cat-card:focus-within {
	border-color: var(--ast-global-color-0, #21B4A6);
	transform: translateY(-3px);
}

.sd-cat-card .wp-block-uagb-advanced-heading {
	width: 100% !important;
	text-align: left;
}

.sd-cat-card .uagb-heading-text {
	margin: 0;
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	text-transform: none;
}

/* Room for two lines, so a description that wraps does not push its image
   out of line with the other cards. */
.sd-cat-card .uagb-desc-text {
	min-height: 3em;
	margin: .35rem 0 0;
	color: var(--sd-text-muted, rgba(237, 246, 243, .72));
	font-size: .95rem;
	line-height: 1.5;
}

/* The product stage. The photographs are a mix of transparent cut-outs
   (wallets, phone cases) and shots on white (earrings); multiplying them onto
   one soft light panel makes both read as the same studio backdrop. */
.sd-cat-card .wp-block-uagb-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	aspect-ratio: 1 / 1;
	margin: 1.25rem 0 !important;
	padding: 14%;
	border-radius: 8px;
	background: radial-gradient(circle at 50% 42%, #f6f8f7 0%, #e3eae7 100%);
	overflow: hidden;
}

.sd-cat-card .wp-block-uagb-image__figure {
	width: 100%;
	height: 100%;
	margin: 0;
}

.sd-cat-card .wp-block-uagb-image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .35s ease;
}

.sd-cat-card:hover .wp-block-uagb-image img {
	transform: scale(1.05);
}

/* Buttons sit on a common baseline whatever the description length. */
.sd-cat-card .wp-block-uagb-buttons {
	width: auto !important;
	margin-top: auto;
}

.sd-cat-card .uagb-buttons__wrap {
	justify-content: flex-start !important;
}

.sd-cat-card .uagb-buttons-repeater {
	padding: .7rem 1.5rem;
	font-size: .88rem;
}

@media (max-width: 1024px) {
	.sd-cats > .uagb-container-inner-blocks-wrap {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Phones: keep two cards per row with a shorter stage rather than one huge
   product per screen - four categories stay within about one scroll. */
@media (max-width: 544px) {
	.sd-cats > .uagb-container-inner-blocks-wrap {
		gap: .75rem !important;
	}

	.sd-cats .wp-block-uagb-container.sd-cat-card {
		padding: 1rem 1rem 1.1rem !important;
	}

	.sd-cat-card .uagb-heading-text {
		font-size: 1.02rem;
	}

	.sd-cat-card .uagb-desc-text {
		min-height: 4.2em;
		font-size: .82rem;
		line-height: 1.4;
	}

	.sd-cat-card .wp-block-uagb-image {
		margin: .85rem 0 !important;
		padding: 10%;
	}

	.sd-cat-card .uagb-buttons-repeater {
		padding: .55rem 1rem;
		font-size: .78rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sd-cats .sd-cat-card,
	.sd-cat-card .wp-block-uagb-image img {
		transition: none;
	}

	.sd-cats .sd-cat-card:hover,
	.sd-cat-card:hover .wp-block-uagb-image img {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Category promo bands
   --------------------------------------------------------------------------- */

.sd-band {
	position: relative;
	overflow: hidden;
}

.sd-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* Panel left, so the scrim is heaviest on the left. */
.sd-band--left::before {
	background: linear-gradient(90deg, rgba(6, 19, 20, .92) 0%, rgba(6, 19, 20, .72) 42%, rgba(6, 19, 20, .12) 78%, rgba(6, 19, 20, 0) 100%);
}

.sd-band--right::before {
	background: linear-gradient(270deg, rgba(6, 19, 20, .92) 0%, rgba(6, 19, 20, .72) 42%, rgba(6, 19, 20, .12) 78%, rgba(6, 19, 20, 0) 100%);
}

/* The copy occupies half the band, on the side away from the product. The
   heading takes the measure; the button keeps its own width (set above) and is
   only pushed across. */
.sd-band .wp-block-uagb-advanced-heading {
	width: min(100%, 32rem);
}

.sd-band--right .wp-block-uagb-advanced-heading {
	margin-left: auto;
}

/* A right-aligned variant is kept for a future band whose photograph is framed
   the other way; both current bands use --left and pan the photo instead. */
.sd-band--right > .uagb-container-inner-blocks-wrap {
	align-items: flex-end;
	text-align: left;
}

.sd-band .uagb-heading-text {
	font-size: clamp(1.9rem, 3.6vw, 2.9rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.015em;
	text-transform: none;
}

.sd-band .uagb-desc-text:not(.uagb-heading-sub-text) {
	margin-bottom: .8rem;
	color: var(--ast-global-color-0, #21B4A6);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.sd-band .uagb-heading-sub-text {
	margin-top: .9rem;
	font-size: 1.05rem;
	line-height: 1.6;
}

.sd-band .uagb-buttons__outer-wrap {
	margin-top: 1.6rem;
}

/* ---------------------------------------------------------------------------
   Why Seif - three info boxes laid out as cards
   --------------------------------------------------------------------------- */

/* The container is a Spectra flex column, so the three info boxes are laid out
   with a grid on the wrap and the heading is pulled across the full row. */
.sd-why > .uagb-container-inner-blocks-wrap {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	align-items: stretch;
	text-align: center;
}

/* The heading spans the row above the three cards. */
.sd-why .wp-block-uagb-advanced-heading {
	grid-column: 1 / -1;
	margin-bottom: 1rem;
}

.sd-why .wp-block-uagb-info-box {
	text-align: left;
}

.sd-why .uagb-heading-text {
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -.015em;
	text-transform: none;
}

.sd-why .wp-block-uagb-info-box {
	height: 100%;
	padding: 1.9rem 1.75rem;
	border: 1px solid var(--sd-border, rgba(237, 246, 243, .14));
	border-radius: 8px;
	background: var(--sd-surface, #1C2A3C);
}

.sd-why .uagb-ifb-title {
	margin-bottom: .6rem;
	font-size: 1.15rem;
	font-weight: 600;
	text-transform: none;
}

.sd-why .uagb-ifb-desc {
	margin: 0;
	font-size: .98rem;
	line-height: 1.6;
}

@media (max-width: 921px) {
	.sd-why > .uagb-container-inner-blocks-wrap {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

/* ---------------------------------------------------------------------------
   Testimonial
   --------------------------------------------------------------------------- */

.sd-quote > .uagb-container-inner-blocks-wrap {
	width: min(100%, 52rem);
}

.sd-quote .uagb-heading-text {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: clamp(1.25rem, 2.6vw, 1.85rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
}

/* The attribution line. */
.sd-quote .uagb-heading-sub-text {
	margin-top: 1.5rem;
	color: var(--ast-global-color-0, #21B4A6);
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .02em;
}

/* ---------------------------------------------------------------------------
   Closing call to action
   --------------------------------------------------------------------------- */

.sd-closer {
	border-top: 1px solid var(--sd-border, rgba(237, 246, 243, .14));
}

.sd-closer .uagb-heading-text {
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -.015em;
	text-transform: none;
}

.sd-closer .uagb-heading-sub-text {
	margin-top: .7rem;
	color: var(--sd-text-muted, rgba(237, 246, 243, .72));
	font-size: 1.05rem;
}

/* Spectra aligns a buttons block by its own control; centring the wrap is the
   reliable way to centre a single button under centred text. */
.sd-closer .uagb-buttons__wrap {
	justify-content: center;
}

.sd-closer .uagb-buttons__outer-wrap {
	margin-top: 1.9rem;
}

/* ---------------------------------------------------------------------------
   Small screens
   --------------------------------------------------------------------------- */

@media (max-width: 782px) {
	/* One scrim direction on mobile: the panel spans the full width, so a
	   side-weighted gradient would leave half the text unlit. */
	.sd-band--left::before,
	.sd-band--right::before {
		background: linear-gradient(0deg, rgba(6, 19, 20, .94) 0%, rgba(6, 19, 20, .78) 55%, rgba(6, 19, 20, .45) 100%);
	}

	.sd-band--right .wp-block-uagb-advanced-heading,
	.sd-band--right .wp-block-uagb-buttons {
		margin-left: 0;
	}

	.sd-hero .uagb-heading-text {
		max-width: none;
	}
}