/**
 * UNEI — Service module (banner + bullet list).
 *
 * Design reference: Figma, 1440px frame, taking the instance whose headline
 * sits at 4225. Everything is expressed against the banner, not against the
 * page, because this module repeats down the page with different content.
 *
 * Banner: 757px tall, read from the Figma API (the photo band runs 3644 to
 * 4401). The watermark is 579 tall and centred, which lands it at 3733 — the
 * 89px margin it has above and below in the design.
 */

.unei-ssmod {
	--unei-yellow: #fcba24;
	--unei-dark: #474949;
	--unei-ink: #474949;
	--unei-white: #ffffff;

	--unei-ssmod-gutter: clamp(24px, 8.3333vw, 120px); /* 120px @1440 */
	--unei-ssmod-rail: max(var(--unei-ssmod-gutter), (100cqw - 1200px) / 2);
	--unei-ssmod-banner: 757px;
	--unei-ssmod-tint: #fc887b;
	--unei-ssmod-tint-o: 0.86;
	--unei-ssmod-scrim-o: 0.3;
	--unei-ssmod-mark-size: 307px;
	--unei-ssmod-mark-left: 10px;
	--unei-ssmod-mark-max: 1181px; /* la caja: fuerza el corte de «SMART SUppLY» en dos */
	--unei-ssmod-mark-c: #e8e3d9;
	--unei-ssmod-mark-o: 0.24;
	/*
	 * Smart Supply writes the mark in stone over salmon and needs soft-light to
	 * read; Servicios writes it in black at 7% and Figma leaves it in normal,
	 * where soft-light would turn the ghost lighter than the banner instead of
	 * darker.
	 */
	--unei-ssmod-mark-blend: soft-light;
	--unei-ssmod-pad-b: 128px;
	/*
	 * Width of the text column, not counting the 50px indent. The Smart Supply
	 * modules are drawn at 625 and 650 depending on the instance, and Servicios
	 * at 650 — a list one line taller than the design is almost always this.
	 */
	--unei-ssmod-list-w: 625px;

	box-sizing: border-box;
	background: var(--unei-white);
}

.unei-ssmod.unei-ssmod.alignfull {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	max-width: 100%;
}

/* Banner ----------------------------------------------------------------- */

.unei-ssmod__banner {
	position: relative;
	height: var(--unei-ssmod-banner);
	overflow: hidden;
	isolation: isolate;
}

.unei-ssmod .unei-ssmod__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none; /* Astra sets img { max-width: 100% }. */
	object-fit: cover;
}

/*
 * Solved from the mock rather than guessed: the top of the banner reads
 * (247,147,136) and the salmon is (252,136,123), which only fits a flat tint
 * at 86%. That alone cannot explain the darker bottom, so a scrim carries the
 * rest and keeps the headline readable.
 */
.unei-ssmod__tint {
	position: absolute;
	inset: 0;
	background: var(--unei-ssmod-tint);
	opacity: var(--unei-ssmod-tint-o);
}

.unei-ssmod__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, transparent 40%, rgba( 71, 73, 73, var(--unei-ssmod-scrim-o) ) 100% );
}

/* Watermark -------------------------------------------------------------- */

.unei-ssmod .unei-ssmod__mark {
	position: absolute;
	left: calc(var(--unei-ssmod-rail) + var(--unei-ssmod-mark-left));
	top: 50%;
	max-width: var(--unei-ssmod-mark-max);
	color: var(--unei-ssmod-mark-c);
	font-family: "UNEI Namu", sans-serif;
	font-size: var(--unei-ssmod-mark-size); /* per page: 307 makes "SUppLY" the 1181 of the design */
	font-weight: 700;
	line-height: 0.943; /* 289.5 over 307 */
	/*
	 * Astra sets overflow-wrap: break-word globally. At this size a single
	 * word is about as wide as the box, so that rule chops the word mid-way
	 * and the two lines of the design become four.
	 */
	overflow-wrap: normal;
	opacity: var(--unei-ssmod-mark-o);
	mix-blend-mode: var(--unei-ssmod-mark-blend);
	transform: translateY(-50%);
	pointer-events: none;
}

/* Headline --------------------------------------------------------------- */

.unei-ssmod .unei-ssmod__title {
	position: absolute;
	left: var(--unei-ssmod-rail);
	bottom: 48px; /* Figma: headline ends at 4353, banner at 4401 */
	margin: 0;
	max-width: min(868px, 100% - 2 * var(--unei-ssmod-rail));
	color: var(--unei-white);
	font-family: "UNEI Namu", sans-serif;
	font-size: clamp(24px, 3.3333vw, 48px); /* 48px @1440 */
	font-weight: 700;
	line-height: 1.3333; /* 64/48 */
	letter-spacing: -0.01em; /* Astra sets letter-spacing: 100px on headings. */
	/*
	 * Each variant breaks its headline at a different word, so the break is
	 * content, not layout: a line break typed in the editor is honoured.
	 */
	white-space: pre-line;
}

/* Body ------------------------------------------------------------------- */

/* Figma: the copy starts 40px under the banner and the section ends 128 after
   the last line — 4441 against a banner ending at 4401, and 5049 against the
   next banner at 5177. Servicios closes on a colour band instead and leaves
   120, hence the knob. */
.unei-ssmod__body {
	box-sizing: border-box;
	padding: 40px var(--unei-ssmod-rail) var(--unei-ssmod-pad-b);
}

.unei-ssmod .unei-ssmod__lead {
	margin: 0 0 40px; /* Astra sets margin-bottom: 1.6em on entry-content p. */
	max-width: 893px;
	color: var(--unei-dark);
	font-family: "Open Sans", sans-serif;
	font-size: clamp(18px, 1.6667vw, 24px); /* 24px @1440 */
	font-weight: 500;
	line-height: 1.3333; /* 32/24 */
	white-space: pre-line; /* the variants write it over two lines */
}

/*
 * Most variants set the lead in 16/32 instead of 24/32 — measured off the
 * mocks: "Ofrecemos servicios de almacenamiento..." runs 715px there, which is
 * what that string measures at 16px, not the 1032px it would take at 24px.
 */
.unei-ssmod--lead-sm .unei-ssmod__lead {
	font-size: 16px;
	line-height: 2; /* 32/16 */
}

/* Groups ------------------------------------------------------------------
 * Servicios splits its points under four headings. The first one keeps the
 * lead's own 40; the ones that follow a list get the 64 the design leaves.
 */
.unei-ssmod .unei-ssmod__grupo {
	margin: 0 0 24px; /* Figma: heading ends at 2714, its first point at 2738 */
	color: var(--unei-ink);
	font-family: "Open Sans", sans-serif;
	font-size: clamp(24px, 2.2222vw, 32px); /* 32px @1440 */
	font-weight: 700;
	line-height: 1; /* 32/32 */
	letter-spacing: normal; /* Astra sets letter-spacing: 100px on headings. */
}

.unei-ssmod .unei-ssmod__list + .unei-ssmod__grupo {
	margin-top: 64px; /* Figma: list ends at 3162, next heading at 3226 */
}

/* List ------------------------------------------------------------------- */

/*
 * Selectors are doubled up: Astra styles .entry-content ul with its own
 * padding and margins at (0,1,1), which beats a single class.
 */
.unei-ssmod .unei-ssmod__list.unei-ssmod__list {
	margin: 0;
	padding: 0 0 0 50px; /* Figma: text at 170 against a 120 rail */
	max-width: calc(50px + var(--unei-ssmod-list-w)); /* the text box plus its indent */
	list-style: none;
}

.unei-ssmod .unei-ssmod__list li {
	position: relative;
	margin: 0;
	color: var(--unei-ink);
	font-family: "Open Sans", sans-serif;
	font-size: clamp(18px, 1.6667vw, 24px); /* 24px @1440 */
	font-weight: 700;
	line-height: 1.3333; /* 32/24 */
}

.unei-ssmod .unei-ssmod__list li + li {
	margin-top: 24px;
}

/* Centred on the first line: (32 - 16) / 2. */
.unei-ssmod .unei-ssmod__check {
	position: absolute;
	left: -34px;
	top: 8px;
	width: 16px;
	height: 16px;
	color: var(--unei-yellow);
}

/*
 * Note and button share a row. The design puts the button at x 1018, which is
 * where it lands right after the note's own 893px box — not against the right
 * edge of the rail.
 */
.unei-ssmod__foot {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 40px;
}

.unei-ssmod .unei-ssmod__note {
	flex: 0 1 893px;
	margin: 0;
	color: var(--unei-dark);
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 2; /* 32/16 */
	white-space: pre-line;
}

.unei-ssmod .unei-ssmod__btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 8px;
	padding: 16px 24px;
	border-radius: 8px;
	background: var(--unei-yellow);
	color: var(--unei-dark);
	font-family: "Open Sans", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px; /* 16 + 24 + 16 = 56px tall */
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.unei-ssmod .unei-ssmod__btn:hover,
.unei-ssmod .unei-ssmod__btn:focus-visible {
	background: var(--unei-dark);
	color: var(--unei-white);
}

.unei-ssmod__arrow {
	flex: none;
	width: 24px;
	height: 24px;
}

@media ( prefers-reduced-motion: reduce ) {
	.unei-ssmod .unei-ssmod__btn {
		transition: none;
	}
}

/* Móvil ------------------------------------------------------------------ */

/* The banner and its watermark are sized for the rail; both give way. */
@media ( max-width: 900px ) {
	.unei-ssmod {
		--unei-ssmod-banner: 300px;
		--unei-ssmod-mark-left: 0px;
		/*
		 * The watermark is 307 of type — taller than the whole banner on a
		 * phone, so the overflow ate it and the banner looked plain. It scales
		 * with the screen instead, keeping the two-line break it is drawn with.
		 */
		--unei-ssmod-mark-size: clamp(64px, 26vw, 307px);
	}

	.unei-ssmod .unei-ssmod__mark {
		max-width: calc(100% - 2 * var(--unei-ssmod-rail));
	}
}

/* Editor only -------------------------------------------------------------
 * The pickers and the list buttons the canvas adds. They never reach the front
 * end — the extra --edit class is written only by index.js — so they only need
 * to stay out of the design's way.
 */

/*
 * The watermark turns off pointer events so it never swallows a click on the
 * page. In the canvas it is something to type into, so it gets them back.
 */
.unei-ssmod .unei-ssmod__mark--edit {
	pointer-events: auto;
}

.unei-ssmod__foto-edit {
	position: absolute;
	z-index: 3;
	left: 24px;
	top: 24px;
	box-sizing: border-box;
	max-width: calc(100% - 48px);
}

.unei-ssmod__foto-hueco {
	width: 420px;
}

.unei-ssmod__foto-hueco .components-placeholder {
	width: 100%;
}

.unei-ssmod__borrar.unei-ssmod__borrar {
	display: block;
	margin-top: 4px;
	height: auto;
	font-size: 12px;
}

.unei-ssmod__lista-edit {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 24px;
}