/**
 * Section: Font Apps Component Styles
 * Figma reference: Frame 413 Desktop and Frame 414 Mobile
 */

.section-font-apps {
	width: 100%;
	background-color: #BB8CF8; /* Purple background from Figma */
	padding: 0;
	margin: 0;
}

.section-font-apps__container {
	max-width: 1280px;
	margin: 0 auto;
	width: 100%;
	padding: 0;
}

.section-font-apps__header {
	text-align: center;
	padding: 101.89px 200px 0 200px; /* Top padding from Figma */
	margin-bottom: 58px; /* Gap between header and cards */
	display: flex;
	justify-content: center;
	align-items: center;
}

.section-font-apps__title.typog-h2 {
	/* Typography handled by .typog-h2 */
	color: var(--color-white);
	margin: 0 auto;
	max-width: 880px;
	width: 100%;
	height: auto;
	min-height: 52px;
}

/* ========================================
   DESKTOP VERSION (1024px+)
   ======================================== */
@media (min-width: 1024px) {
	.section-font-apps__header {
		padding-left: max(200px, calc((100% - 880px) / 2));
		padding-right: max(200px, calc((100% - 880px) / 2));
	}

	.section-font-apps__grid {
		display: grid;
		grid-template-columns: repeat(3, 344px); /* Fixed width columns to prevent spreading */
		justify-content: center; /* Center the entire grid */
		gap: 32px; /* Match blog carousel gap */
		padding: 0 0 101.89px 0; /* Remove horizontal padding, keep bottom padding */
		margin-bottom: 0;
	}

	.section-font-apps__card {
		width: 100%;
		max-width: 344px; /* Exact width from Figma */
		height: 464px; /* Exact height from Figma */
		background-color: var(--color-white);
		border: 1px solid rgba(0, 0, 0, 0.1); /* Border from Figma */
		border-radius: 30px; /* Border radius from Figma */
		overflow: visible; /* Changed to visible so image isn't cropped */
		box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.03), 0px 4px 8px 0px rgba(0, 0, 0, 0.02); /* Box shadow from Figma */
		display: flex;
		flex-direction: column;
	}

	.section-font-apps__card-image {
		width: 100%;
		height: 273px; /* Exact image height from Figma */
		display: flex;
		align-items: flex-start; /* Changed to flex-start to show top of image */
		justify-content: center;
		overflow: hidden;
		background: linear-gradient(162deg, rgba(255, 255, 255, 1) 48%, rgba(170, 232, 232, 1) 100%); /* Gradient background from Figma */
		margin-top: 38px; /* Space above image */
		border-radius: 0 0 0 0; /* Keep top corners square to match card */
	}

	.section-font-apps__image {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
		object-position: top center; /* Ensure top of image is visible */
	}

	.section-font-apps__card-body {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 24px; /* Padding from Figma */
		height: 190px; /* Body height from Figma */
	}

	.section-font-apps__card-text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 8px; /* Gap between title and description from Figma */
		height: 150px; /* Text frame height from Figma */
	}

	.section-font-apps__card-title {
		/* Typography handled by .text-card-title */
		color: var(--color-primary-text);
		margin: 0;
	}

	.section-font-apps__card-description {
		/* Typography handled by .text-body-md */
		color: var(--color-secondary-text);
		margin: 0;
	}
}

/* ========================================
   MOBILE VERSION (below 1024px)
   ======================================== */
@media (max-width: 1023px) {
	.section-font-apps__container {
		padding: 0;
	}

	.section-font-apps__header {
		padding: 3rem 1.5rem 2rem 1.5rem;
		margin-bottom: 2rem;
	}

	.section-font-apps__title {
		width: 100%;
		height: auto;
	}

	.section-font-apps__grid {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
		padding: 0 1.5rem 3rem 1.5rem;
	}

	.section-font-apps__card {
		width: 100%;
		max-width: 344px;
		height: auto;
		background-color: var(--color-white);
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 30px;
		overflow: visible; /* Changed to visible so image isn't cropped */
		box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.03), 0px 4px 8px 0px rgba(0, 0, 0, 0.02);
		display: flex;
		flex-direction: column;
	}

	.section-font-apps__card-image {
		width: 100%;
		/* Figma ~273px band as a midpoint; scale with width, stay within bounds */
		min-height: clamp(11rem, 38vw, 17.5rem);
		max-height: clamp(15rem, 58vw, 24rem);
		display: flex;
		/* contain can make the img shorter than min-height; pin to bottom so no gap above card body */
		align-items: flex-end;
		justify-content: center;
		/* cover + wide box was cropping left/right of mockups (drop shadows in asset) */
		overflow: visible;
		padding-left: clamp(10px, 3vw, 20px);
		padding-right: clamp(10px, 3vw, 20px);
		box-sizing: border-box;
		background: linear-gradient(162deg, rgba(255, 255, 255, 1) 48%, rgba(170, 232, 232, 1) 100%);
		margin-top: 18px; /* Space above image */
		border-radius: 0 0 0 0; /* Keep top corners square to match card */
	}

	.section-font-apps__image {
		width: auto;
		max-width: 100%;
		height: auto;
		min-height: 0;
		max-height: clamp(10.5rem, 52vw, 21rem);
		display: block;
		object-fit: contain;
		object-position: top center;
		margin: 0 auto;
	}

	.section-font-apps__card-body {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 24px;
	}

	.section-font-apps__card-text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 8px;
	}

	.section-font-apps__card-title {
		/* Typography handled by .text-card-title */
		color: var(--color-primary-text);
		margin: 0;
	}

	.section-font-apps__card-description {
		/* Typography handled by .text-body-md */
		color: var(--color-secondary-text);
		margin: 0;
	}
}