/*
 * Text Box with Icons block (template-parts/blocks/section_text-with-icons.php).
 * Loaded by abefactors_acf_block_enqueue_assets() only on pages that contain the block (and in the editor).
 * No JavaScript is needed for this block. Columns use the theme grid (.grid[data-display-item…], css/theme.css).
 *
 * Design (Figma "Homel", "Technical depth. Real-world implementation"), at 1728px:
 *   section   Light grey, 90px above the title, 94px under the cards
 *   title     Red Hat Display Bold 32px, centred, 64px above the cards
 *   cards     444 x 550, 22px apart, white, top-right corner cut 77px
 *             padding 48 / 39 / 44; gold icon (45px row, bottom-aligned), 11px to the text
 *             text 18/30: title Black (900) running into the description SemiBold (600)
 *             button at the bottom of the card
 */

/* ------------------------------------------------------------------
 * Section
 * ------------------------------------------------------------------ */
.section_text_with_icons {
	position: relative;
}

/* Light grey unless a background colour is chosen in the block toolbar. */
.section_text_with_icons:not(.has_bg_color) {
	background-color: var(--wp--preset--color--lightgrey);
}

.section_text_with_icons.global-block-ptb {
	padding-top: clamp(56px, 5.2vw, 90px);
	padding-bottom: clamp(56px, 5.45vw, 94px);
}

/* Background Image (Settings): a 70% Charcoal overlay keeps text readable; set the text colour to White. */
.section_text_with_icons.has_bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--secondary);
	opacity: 0.7;
	pointer-events: none; /* decorative */
}

.section_text_with_icons.has_bg > .container {
	position: relative;
}

/* ------------------------------------------------------------------
 * Head
 * ------------------------------------------------------------------ */
.text_with_icons_head {
	max-width: 900px;
	margin: 0 auto clamp(32px, 3.7vw, 64px);
	text-align: center;
}

.text-align-left .text_with_icons_head {
	margin-left: 0;
	text-align: left;
}

.text-align-right .text_with_icons_head {
	margin-right: 0;
	text-align: right;
}

.text_with_icons_head .section_title_above {
	margin: 0 0 12px;
}

.text_with_icons_title {
	margin: 0;
	font-weight: 700;
	letter-spacing: 0;
	text-wrap: balance;
}

/* Default size; a size chosen in "Title Font Size" (.fontsize-*) is used instead. */
.text_with_icons_title:not([class*="fontsize-"]) {
	font-size: var(--wp--preset--font-size--medium-32);
	line-height: 1.3;
}

.text_with_icons_description {
	margin-top: 20px;
}

.text_with_icons_description p {
	margin: 0 0 15px;
}

.text_with_icons_description > :last-child {
	margin-bottom: 0;
}

.text_with_icons_head_button {
	margin-top: 32px;
}

/* ------------------------------------------------------------------
 * Boxes
 * ------------------------------------------------------------------ */
.section_text_with_icons .box_text_items {
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.section_text_with_icons .box_text_item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 0;
	text-align: left;
}

.section_text_with_icons .box_text_item::before {
	content: none; /* no theme list marker */
}

/* Card style "Cut corner" (default): white card, top-right corner cut. */
.card-style-cut-corner .box_text_item {
	padding: 48px 39px 44px;
	background-color: var(--wp--preset--color--white);
	clip-path: polygon(0 0, calc(100% - 77px) 0, 100% 77px, 100% 100%, 0 100%);
}

/* Windows high contrast: backgrounds are removed, so draw the card edge. */
@media (forced-colors: active) {
	.card-style-cut-corner .box_text_item {
		border: 1px solid CanvasText;
		clip-path: none;
	}
}

/* Icon: decorative, gold, bottom-aligned in one 45px row so all texts start at the same height. */
.section_text_with_icons .icon_box {
	display: flex;
	align-items: flex-end;
	height: 45px;
	margin-bottom: 11px;
	color: var(--wp--preset--color--gold);
}

/* Theme icon font (abe-icons): glyphs are drawn on a 1em box, so 45px fills the icon row. */
.section_text_with_icons .icon_box .abe-icon {
	display: block;
	font-size: 45px;
	line-height: 1;
}

.section_text_with_icons .icon_box .abe-icon::before {
	display: block;
	margin: 0;
}

.section_text_with_icons .icon_box svg {
	display: block;
	max-height: 45px;
	width: auto;
}

.section_text_with_icons .icon_box img {
	display: block;
	width: auto;
	max-width: 60px;
	height: 45px;
	object-fit: contain;
}

.section_text_with_icons .box_text_inner {
	max-width: 310px;
	font-size: var(--wp--preset--font-size--body);
	line-height: 30px;
}

.section_text_with_icons .box_title {
	margin: 0;
	font-size: inherit;
	font-weight: 900;
	line-height: inherit;
	letter-spacing: 0;
}

.section_text_with_icons .box_description {
	font-weight: 600;
}

.section_text_with_icons .box_description p {
	margin: 0 0 15px;
}

.section_text_with_icons .box_description > :last-child {
	margin-bottom: 0;
}

.section_text_with_icons .box_description a:not(.button) {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Button at the bottom of the card. */
.section_text_with_icons .box_button {
	margin-top: auto;
	padding-top: 32px;
}

/* Card height from the design (550px at 1728px) on wide screens. */
@media screen and (min-width: 1025px) {
	.card-style-cut-corner .box_text_item {
		min-height: clamp(420px, 31.85vw, 550px);
	}
}

@media screen and (max-width: 767px) {
	.card-style-cut-corner .box_text_item {
		padding: 40px 28px 32px;
		clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 0 100%);
	}

	.section_text_with_icons .box_text_inner {
		max-width: none;
	}
}

/* Empty block in the editor. */
.text_with_icons_empty {
	margin: 0;
	padding: 40px 20px;
	border: 1px dashed var(--wp--preset--color--mediumgrey);
	border-radius: 24px;
	text-align: center;
}