/*
 * Always full-bleed, regardless of any core alignment class — consistent
 * with the other section blocks. Defaults to white; editable via the
 * block's own "Background color" panel (supports.color.background in
 * block.json) — picking any theme.json palette color there overrides this
 * via WordPress's own inline style, which always wins over this external
 * stylesheet rule. (This section's background has gone back and forth
 * before: explicit white → removed to sit on the ambient page background →
 * now a white default again, but overridable this time.)
 *
 * Heading color (#002547) is the design's ink/navy "text-primary" — not yet
 * part of theme.json's palette (see square-card/style.css). Hardcoded here
 * for this first version.
 */
.wp-block-andrei-saguna-faq-section {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--4);
	background-color: var(--wp--preset--color--base-white);
}

.wp-block-andrei-saguna-faq-section__row {
	display: flex;
	align-items: stretch;
	gap: var(--wp--preset--spacing--6);
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

/*
 * Mirrors the Figma frame's own auto-layout exactly: a flex column with
 * justify-content: space-between, pinning "__header" to the top and
 * "__info" to the bottom, stretched (by "__row"'s "align-items: stretch")
 * to the height of "__content" - the accordion, the taller of the two
 * columns. On mobile this wrapper switches to `display: contents` so
 * "__header"/"__info" become direct flex items of "__row" again and can be
 * put back in reading order (header, content, info) via the `order`
 * property below, without duplicating markup for the two layouts.
 */
.wp-block-andrei-saguna-faq-section__column {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1 0 0;
	min-width: 0;
}

.wp-block-andrei-saguna-faq-section__header {
	min-width: 0;
}

.wp-block-andrei-saguna-faq-section__content {
	flex: 1 0 0;
	min-width: 0;
}

.wp-block-andrei-saguna-faq-section__info {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	min-width: 0;
}

h2.wp-block-andrei-saguna-faq-section__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: var(--wp--preset--font-size--h-1);
	line-height: 1.1;
	color: #002547;
}

/*
 * Ink text-secondary tone specific to this component's own Figma instance
 * (#42484d) - close to, but not quite, the #3f4a5a "text-secondary" hardcoded
 * elsewhere in this plugin (see square-card/style.css for why these tones
 * aren't yet real theme.json tokens). Kept as its own literal value rather
 * than rounded to the other one, matching the design exactly.
 */
.wp-block-andrei-saguna-faq-section__description {
	margin: 0;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-base);
	line-height: 1.62;
	letter-spacing: 0.32px;
	color: #42484d;
}

.wp-block-andrei-saguna-faq-section__info-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
}

/*
 * "Big Primary" - same treatment as steps-section's own CTA button (see
 * that block's style.css for why this is hand-written CSS rather than a
 * reused core/button instance: theme.json's big-primary variation only
 * targets the auto-generated per-instance class WordPress emits for real
 * button blocks, e.g. ".is-style-big-primary--7", which a hand-written
 * element never gets). Values matched 1:1 to theme.json's
 * styles.blocks.core/button.variations.big-primary plus the base
 * elements.button typography - including font-weight: inherit (regular,
 * not 500) so this doesn't render heavier than every other big-primary
 * button on the site.
 */
.wp-block-andrei-saguna-faq-section__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--accent-500);
	color: var(--wp--preset--color--base-white);
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--ui-interactive);
	letter-spacing: 0.56px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

a.wp-block-andrei-saguna-faq-section__cta:hover {
	background-color: var(--wp--preset--color--accent-600);
}

.wp-block-andrei-saguna-faq-section__cta-icon {
	display: flex;
	width: 20px;
	height: 20px;
}

.wp-block-andrei-saguna-faq-section__cta-icon svg {
	width: 100%;
	height: 100%;
}

/*
 * The rounded "pill" tag next to the CTA - semi-transparent light gray, per
 * the Figma source's own literal rgba() (not yet a theme.json token).
 */
.wp-block-andrei-saguna-faq-section__avatar-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3) var(--wp--preset--spacing--2) var(--wp--preset--spacing--2);
	border-radius: var(--wp--custom--radius--full);
	background-color: rgba(227, 229, 231, 0.5);
}

/*
 * Sized up from the single-avatar 32px default to a more prominent 80px
 * max, centered against the CTA button via "__info-row"'s own
 * "align-items: center" below.
 */
.wp-block-andrei-saguna-faq-section__avatar {
	flex: 0 1 auto;
	width: 80px;
	max-width: 80px;
	max-height: 80px;
	object-fit: cover;
}

.wp-block-andrei-saguna-faq-section__avatar-text {
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: 12px;
	letter-spacing: 0.48px;
	color: #002547;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.wp-block-andrei-saguna-faq-section__row {
		flex-direction: column;
		gap: var(--wp--preset--spacing--8);
	}

	.wp-block-andrei-saguna-faq-section__column {
		display: contents;
	}

	.wp-block-andrei-saguna-faq-section__header {
		order: 1;
	}

	.wp-block-andrei-saguna-faq-section__content {
		order: 2;
	}

	.wp-block-andrei-saguna-faq-section__info {
		order: 3;
	}
}