/**
 * Text + Image Block - Frontend Styles
 *
 * @package groupBK
 * @version 1.0.0
 *
 * Uses design tokens from design-tokens.css
 */

/* ===========================================
 * Block Container
 * =========================================== */
.wp-block-groupbk-text-image {
	position: relative;
	width: 100%;
	padding: var(--space-48) var(--space-16);
}

.groupbk-text-image__container {
	display: flex;
	flex-direction: column;
	gap: var(--space-32);
	max-width: var(--grid-max-width-desktop);
	margin: 0 auto;
	padding: 0 var(--space-16);
}

/* ===========================================
 * Desktop Layout (Horizontal)
 * =========================================== */
@media (min-width: 768px) {
	.groupbk-text-image__container {
		flex-direction: row;
		gap: 128px;
		padding: 0 var(--grid-margin-desktop);
	}

	/* Image on right - reverse order */
	.groupbk-text-image--image-right .groupbk-text-image__container {
		flex-direction: row-reverse;
	}
}

/* ===========================================
 * Image
 * =========================================== */
.groupbk-text-image__image {
	flex-shrink: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.groupbk-text-image__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

/* Image Sizes */
@media (min-width: 768px) {
	/* Small image */
	.groupbk-text-image--size-small .groupbk-text-image__image {
		width: 288px;
	}

	.groupbk-text-image--size-small .groupbk-text-image__img {
		height: 400px;
	}

	/* Medium image */
	.groupbk-text-image--size-medium .groupbk-text-image__image {
		width: 340px;
	}

	.groupbk-text-image--size-medium .groupbk-text-image__img {
		height: 460px;
	}

	/* Large image */
	.groupbk-text-image--size-large .groupbk-text-image__image {
		width: 392px;
	}

	.groupbk-text-image--size-large .groupbk-text-image__img {
		height: 543px;
	}
}

/* ===========================================
 * Content
 * =========================================== */
.groupbk-text-image__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
	flex: 1;
	min-width: 0;
}

/* Vertical Alignment */
@media (min-width: 768px) {
	.groupbk-text-image--align-top .groupbk-text-image__content {
		justify-content: flex-start;
	}

	.groupbk-text-image--align-center .groupbk-text-image__content {
		justify-content: center;
	}

	.groupbk-text-image--align-bottom .groupbk-text-image__content {
		justify-content: flex-end;
	}
}

/* ===========================================
 * Typography
 * =========================================== */
.groupbk-text-image__heading {
	font-family: var(--font-family-primary);
	font-size: clamp(1.5rem, 3vw, var(--font-size-h4));
	font-weight: var(--font-weight-semibold);
	line-height: 1.1;
	color: var(--color-brand-primary);
	margin: 0;
}

.groupbk-text-image__text {
	font-family: var(--font-family-primary);
	font-size: clamp(1rem, 2vw, 1.25rem);
	font-weight: var(--font-weight-regular);
	line-height: 1.75;
	color: var(--color-text-primary);
	opacity: 0.66;
	margin: 0;
}

/* Text wrapper for heading + text together */
.groupbk-text-image__heading + .groupbk-text-image__text {
	margin-top: calc(var(--space-20) - var(--space-40));
}

/* ===========================================
 * CTA Link (Tertiary Button Style)
 * =========================================== */
.groupbk-text-image__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-8) 0;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-button-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--color-brand-primary);
	text-decoration: none;
	transition: var(--transition-fast);
}

.groupbk-text-image__cta:hover,
.groupbk-text-image__cta:focus {
	color: var(--color-brand-primary-700);
}

.groupbk-text-image__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: rotate(-90deg);
}

.groupbk-text-image__cta-icon svg {
	width: 10px;
	height: 10px;
}

/* ===========================================
 * Responsive Stacking (Mobile)
 * =========================================== */
@media (max-width: 767px) {
	.groupbk-text-image__image {
		width: 100%;
	}

	.groupbk-text-image__img {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.groupbk-text-image__content {
		gap: var(--space-24);
	}
}

/* ===========================================
 * Wide/Full Alignment
 * =========================================== */
.wp-block-groupbk-text-image.alignwide,
.wp-block-groupbk-text-image.alignfull {
	padding-left: 0;
	padding-right: 0;
}

.wp-block-groupbk-text-image.alignfull {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	width: 100vw;
	max-width: 100vw;
}

/* ===========================================
 * Accessibility
 * =========================================== */
.groupbk-text-image__cta:focus-visible {
	outline: 2px solid var(--color-brand-primary);
	outline-offset: 2px;
}

/* ===========================================
 * Text Truncation (4-row line-clamp)
 * =========================================== */
.groupbk-text-image__text {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ===========================================
 * Image Orientation
 * Portrait is the default — covered by the unqualified
 * .groupbk-text-image--size-* rules. Only landscape overrides needed.
 * =========================================== */
@media (min-width: 768px) {
	/* Landscape — wider than tall (3:2 via aspect-ratio) */
	.groupbk-text-image--orientation-landscape .groupbk-text-image__img {
		aspect-ratio: 3 / 2;
		height: auto;
	}

	.groupbk-text-image--orientation-landscape.groupbk-text-image--size-small .groupbk-text-image__image {
		width: 400px;
	}

	.groupbk-text-image--orientation-landscape.groupbk-text-image--size-medium .groupbk-text-image__image {
		width: 460px;
	}

	.groupbk-text-image--orientation-landscape.groupbk-text-image--size-large .groupbk-text-image__image {
		width: 543px;
	}
}

/* ===========================================
 * Text Position (mobile stacking order only)
 * =========================================== */
@media (max-width: 767px) {
	.groupbk-text-image--text-below .groupbk-text-image__image {
		order: 2;
	}

	.groupbk-text-image--text-below .groupbk-text-image__content {
		order: 1;
	}
}

/* ===========================================
 * Above/Below Layout (single-column, full-width image at all sizes)
 * =========================================== */

/* column-reverse for below — applies at all screen sizes */
.groupbk-text-image--image-below .groupbk-text-image__container {
	flex-direction: column-reverse;
}

/* Override desktop row layout → stay column for above/below */
@media (min-width: 768px) {
	.groupbk-text-image--image-above .groupbk-text-image__container {
		flex-direction: column;
		gap: var(--space-32);
	}

	.groupbk-text-image--image-below .groupbk-text-image__container {
		flex-direction: column-reverse;
		gap: var(--space-32);
	}

	/* Full-width image — overrides size-small/medium/large pixel widths */
	.groupbk-text-image--image-above .groupbk-text-image__image,
	.groupbk-text-image--image-below .groupbk-text-image__image {
		width: 100%;
	}

	/* 16:9 aspect ratio — overrides size-* fixed heights */
	.groupbk-text-image--image-above .groupbk-text-image__img,
	.groupbk-text-image--image-below .groupbk-text-image__img {
		aspect-ratio: 16 / 9;
		height: auto;
	}
}

/* 16:9 aspect ratio on mobile for above/below — overrides 4:3 default */
@media (max-width: 767px) {
	.groupbk-text-image--image-above .groupbk-text-image__img,
	.groupbk-text-image--image-below .groupbk-text-image__img {
		aspect-ratio: 16 / 9;
	}
}