/**
 * Feature Cards 1 Component Styles
 * Figma reference: Home - Desktop Feature cards 1 (1:213) and Mobile (2:1205)
 * Layout: 2 columns desktop (1 tall + 2 stacked), single column mobile
 */

/* ========================================
   BASE SECTION
   ======================================== */
.section-explore-products {
	background: var(--color-bg-purple); /* Purple background from Figma */
	width: 100%;
	padding: 4rem 2rem;
	margin: 0;
}

.section-explore-products__container {
	max-width: 1280px;
	margin: 0 auto;
	position: relative;
}

/* Header */
.section-explore-products__header {
	text-align: center;
	margin-bottom: 3rem;
}

.section-explore-products__title.typog-h2 {
	/* Typography handled by .typog-h2 */
	color: var(--color-white);
	margin: 0;
}

/* ========================================
   DESKTOP VERSION (1024px+)
   ======================================== */
@media (min-width: 1024px) {
	.section-explore-products__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
		margin-bottom: 3rem;
	}

	/* Left Column: Tall Card (Word Swag Pro) */
	.feature-card--large {
		grid-column: 1;
		background: linear-gradient(145deg, var(--color-white-rgba) 71%, var(--color-teal-rgba) 100%);
		border-radius: 30px;
		padding: 2rem 3rem 0 3rem; /* Remove bottom padding */
		display: flex;
		flex-direction: column;
		box-shadow: 0 12px 32px var(--color-shadow-darker);
		height: 100%; /* Match right column height */
		overflow: hidden; /* Ensure image can extend to bottom */
	}

	.feature-card--large .feature-card__content {
		flex: 1;
	}

	.feature-card--large .feature-card__image-wrapper {
		flex: 0 0 auto;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		margin-top: 1rem;
		margin-bottom: 0; /* Remove any bottom margin */
		aspect-ratio: 6/5; /* ~600×500 at typical width; scales down when narrow */
		min-height: 300px;
		overflow: hidden;
	}

	.feature-card--large .feature-card__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top center;
		border-radius: 22px 22px 0 0;
		transition: transform 0.3s ease-out;
	}

	/* Right Column: Stacked Cards */
	.section-explore-products__column {
		grid-column: 2;
		display: flex;
		flex-direction: column;
		gap: 2rem;
		height: 100%; /* Match left column */
	}

	/* Card 1 (RealFonts) - Flex to fill available space */
	.feature-card--realfonts {
		background: linear-gradient(154deg, var(--color-white-rgba) 61%, var(--color-teal-rgba) 100%);
		border-radius: 30px;
		padding: 2rem 3rem 0 3rem; /* Remove bottom padding */
		display: flex;
		flex-direction: column;
		box-shadow: 0 12px 32px var(--color-shadow-darker);
		flex: 1; /* Equal distribution */
		overflow: hidden; /* Ensure image can extend to bottom */
	}

	.feature-card--realfonts .feature-card__content {
		flex: 1;
	}

	.feature-card--realfonts .feature-card__image-wrapper {
		flex: 0 0 auto;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		margin-bottom: 0; /* Remove any bottom margin */
		overflow: hidden;
	}

	.feature-card--realfonts .feature-card__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top center;
		border-radius: 20px 20px 0 0;
		transition: transform 0.3s ease-out;
	}

	/* Card 2 (Genie) - Flex to fill available space */
	.feature-card--genie {
		background: linear-gradient(155deg, var(--color-white-rgba) 61%, var(--color-teal-rgba) 100%);
		border-radius: 30px;
		padding: 2rem 3rem 0 3rem; /* Remove bottom padding */
		display: flex;
		flex-direction: column;
		box-shadow: 0 12px 32px var(--color-shadow-darker);
		flex: 1; /* Equal distribution */
		overflow: hidden; /* Ensure image can extend to bottom */
	}

	.feature-card--genie .feature-card__content {
		flex: 1;
	}

	.feature-card--genie .feature-card__image-wrapper {
		flex: 0 0 auto;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		margin-bottom: 0; /* Remove any bottom margin */
		height: 250px;
		overflow: hidden;
	}

	.feature-card--genie .feature-card__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top center;
		border-radius: 20px 20px 0 0;
		transition: transform 0.3s ease-out;
	}

	/* Card Typography */
	.feature-card__title {
		/* Typography handled by .text-card-title or .text-card-title-md */
		margin: 0 0 1.125rem 0; /* 0.5rem + 10px for spacing below title */
	}

	.feature-card__subtitle {
		/* Typography handled by .text-subtitle-bold-md */
		margin: 0 0 1rem 0;
	}

	.feature-card__description {
		/* Typography handled by .text-body */
		color: var(--color-secondary-text);
		margin: 0 0 1rem 0;
	}

	.feature-card__list {
		/* Typography handled by .text-body-md */
		color: var(--color-secondary-text);
		margin: 0;
		padding-left: 1.5rem;
	}

	.feature-card__list li {
		margin-bottom: 0.5rem;
	}

	/* Download Section (below cards) */
	.section-explore-products__download {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
		margin-top: 2rem;
	}

	.section-explore-products__download-text {
		/* Typography handled by .text-download */
		margin: 0;
	}

	/* Decorative Graphics */
	.section-explore-products__decoration {
		position: absolute;
		bottom: 1rem;
		right: 1rem;
		width: 308px;
		height: 62px;
		opacity: 0.6;
		pointer-events: none;
	}

	.section-explore-products__decoration-image {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}

/* ========================================
   MOBILE VERSION (below 1024px)
   ======================================== */
@media (max-width: 1023px) {
	.section-explore-products {
		padding: 3rem 1.5rem;
	}

	.section-explore-products__header {
		margin-bottom: 2rem;
	}

	.section-explore-products__grid {
		display: flex;
		flex-direction: column;
		gap: 1.5rem; /* 24px consistent gap for all cards */
		margin-bottom: 2rem;
	}

	/* Right column wrapper - ensure it participates in gap */
	.section-explore-products__column {
		display: flex;
		flex-direction: column;
		gap: 1.5rem; /* 24px gap between cards inside column */
	}

	/* All cards stack vertically with consistent gap */
	.feature-card {
		border-radius: 20px;
		padding: 1.5rem 1.5rem 0 1.5rem; /* Remove bottom padding */
		box-shadow: 0 12px 32px var(--color-shadow-darker);
		display: flex;
		flex-direction: column;
		gap: 1rem;
		overflow: hidden; /* Ensure image can extend to bottom */
	}

	/* Card 1 (Word Swag Pro) */
	.feature-card--word-swag {
		background: linear-gradient(145deg, var(--color-white-rgba) 71%, var(--color-teal-rgba) 100%);
	}

	.feature-card--word-swag .feature-card__content {
		order: 1;
	}

	.feature-card--word-swag .feature-card__image-wrapper {
		order: 2;
		height: 255px; /* 85% of 300px */
		overflow: hidden;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		margin-bottom: 0; /* Remove any bottom margin */
	}

	.feature-card--word-swag .feature-card__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top center;
		border-radius: 22px 22px 0 0; /* Remove bottom border-radius */
	}

	/* Card 2 (RealFonts) - Shows more image on mobile */
	.feature-card--realfonts {
		background: linear-gradient(154deg, var(--color-white-rgba) 61%, var(--color-teal-rgba) 100%);
	}

	.feature-card--realfonts .feature-card__content {
		order: 1;
	}

	.feature-card--realfonts .feature-card__image-wrapper {
		order: 2;
		/* Fixed height + cover crops more on wide tablets; keep min for phones */
		height: clamp(238px, 32vw, 320px);
		overflow: hidden;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		margin-bottom: 0; /* Remove any bottom margin */
	}

	.feature-card--realfonts .feature-card__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* Top has drop shadow / rounded chrome; never crop from the top on wide viewports */
		object-position: top center;
		border-radius: 20px 20px 0 0; /* Remove bottom border-radius */
	}

	/* Card 3 (Genie) */
	.feature-card--genie {
		background: linear-gradient(155deg, var(--color-white-rgba) 61%, var(--color-teal-rgba) 100%);
	}

	.feature-card--genie .feature-card__content {
		order: 1;
	}

	.feature-card--genie .feature-card__image-wrapper {
		order: 2;
		height: 213px; /* 85% of 250px */
		overflow: hidden;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		margin-bottom: 0; /* Remove any bottom margin */
	}

	.feature-card--genie .feature-card__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top center;
		border-radius: 20px 20px 0 0; /* Remove bottom border-radius */
	}

	/* Mobile Typography */
	.feature-card__title {
		/* Typography handled by .text-card-title-md */
		margin: 0 0 1rem 0; /* 0.5rem + 8px for spacing below title */
	}

	.feature-card__subtitle {
		/* Typography handled by .text-subtitle-bold-md */
		margin: 0 0 0.75rem 0;
	}

	.feature-card__description {
		/* Typography handled by .text-body */
		color: var(--color-secondary-text);
		margin: 0;
	}

	.feature-card__list {
		display: none; /* Hide bullet list on mobile for cleaner look */
	}

	/* Download Section */
	.section-explore-products__download {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
		margin-top: 2rem;
	}

	.section-explore-products__download-text {
		/* Typography handled by .text-download */
		margin: 0;
		text-align: center;
	}

	/* Hide decoration on mobile */
	.section-explore-products__decoration {
		display: none;
	}
}