/**
 * Section: Font List Component Styles
 * Figma reference: Desktop (1:1484) and Mobile (1:1320)
 */

.section-font-list {
	width: 100%;
	background-color: #FFFFFF;
	padding: 0;
	margin: 0;
}

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

/* ========================================
   CATEGORIES SECTION
   ======================================== */
.section-font-list__categories {
	padding: 49.87px 87px 0 87px; /* Top padding from Figma */
	margin-bottom: 0; /* No margin - divider and header handle spacing */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/* Divider line between categories and heading - removed, now using ::before on first font item */

.section-font-list__categories-label {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.61em;
	letter-spacing: -0.5%;
	color: #2B2B2B;
	white-space: nowrap;
}

/* Desktop: Category buttons */
.section-font-list__categories-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: center;
	justify-content: center;
	flex: 1;
}

.section-font-list__category-button {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.45em;
	letter-spacing: -0.5%;
	color: #2B2B2B;
	text-decoration: none;
	padding: 0 8px;
	background-color: #FFFFFF;
	border: 1px solid #D9D9D9;
	border-radius: 50px;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
	text-align: center;
	display: inline-block;
}

.section-font-list__category-button:hover,
.section-font-list__category-button:focus {
	background-color: #F5F5F5;
	border-color: #2B2B2B;
}

/* Mobile: Category dropdown */
.section-font-list__categories-dropdown {
	display: none;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.45em;
	color: #2B2B2B;
	padding: 10px 12px;
	border: 1px solid var(--color-border-light);
	border-radius: 8px;
	background-color: #FFFFFF;
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4 4L7 1' stroke='%232B2B2B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 32px;
}

/* ========================================
   FONTS SECTION
   ======================================== */
.section-font-list__header {
	padding: 0 87px; /* Side padding from Figma */
	margin-top: 84px; /* Space above heading */
	margin-bottom: 41px; /* Space below heading to green line */
}

.section-font-list__title {
	/* H2 smaller from Figma: 42px, not typog-h2 (52px) */
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 400;
	font-size: 42px;
	line-height: 1.095em; /* 46px / 42px */
	letter-spacing: -0.03em; /* -3% */
	color: #2B2B2B;
	margin: 0;
	text-align: left; /* LEFT alignment from Figma */
}

.section-font-list__fonts {
	padding: 0 87px 90px 87px; /* Side padding from Figma, 90px bottom */
}

.section-font-list__fonts-grid {
	display: flex;
	flex-direction: column;
	gap: 0; /* No gap - dividers handle spacing */
}

.section-font-list__font-item {
	display: flex;
	flex-direction: row;
	align-items: center; /* Vertically center button and text */
	justify-content: space-between;
	gap: 0;
	position: relative;
	padding: 40px 0; /* Top/bottom padding: 40px desktop */
	margin: 0;
}

/* Horizontal teal divider lines between items (from Figma Group 434) */
.section-font-list__font-item:first-child::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 3px;
	background-color: #AAE8E8; /* Teal from Figma */
}

.section-font-list__font-item::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 3px;
	background-color: #AAE8E8; /* Teal from Figma */
}

.section-font-list__font-display {
	width: 298px; /* Fixed width from Figma */
	flex-shrink: 0;
	color: #2B2B2B;
	display: flex;
	align-items: center;
	justify-content: flex-start; /* Left alignment */
	text-align: left; /* Left text alignment */
	word-break: break-word;
	margin: 0;
	padding: 0;
}

.section-font-list__font-image {
	max-width: 100%;
	height: auto;
	display: block;
}

.section-font-list__font-image--desktop {
	display: block;
}

.section-font-list__font-image--mobile {
	display: none;
}

.section-font-list__font-button {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.45em;
	letter-spacing: 0.02em; /* 2% */
	color: #2B2B2B;
	text-decoration: none;
	background-color: #AAE8E8; /* Teal background from Figma */
	padding: 13px 19px;
	border-radius: 10px;
	white-space: nowrap;
	transition: background-color 0.2s ease;
	flex-shrink: 0;
	width: 219px; /* Width from Figma */
	text-align: center;
}

.section-font-list__font-button:hover,
.section-font-list__font-button:focus {
	background-color: var(--color-teal-hover);
}

/* ========================================
   MOBILE VERSION (below 1024px)
   ======================================== */
@media (max-width: 1023px) {
	.section-font-list__categories {
		padding: 31px 24px 0 24px;
		margin-bottom: 47px; /* Gap before fonts section: 78 - 31 = 47px */
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	.section-font-list__categories-label {
		font-size: 14px;
		font-weight: 600;
		flex-shrink: 0;
	}

	/* Hide desktop buttons on mobile */
	.section-font-list__categories-buttons {
		display: none;
	}

	/* Show dropdown on mobile */
	.section-font-list__categories-dropdown {
		display: block;
		width: auto;
		flex-shrink: 1;
		min-width: 0;
	}
	
	.section-font-list__category-button {
		padding: 8px 12px; /* Reduce horizontal padding on mobile */
	}

	.section-font-list__header {
		padding: 0 24px;
		margin-bottom: 38px; /* Gap from heading to fonts: 38px from Figma */
	}

	.section-font-list__title {
		font-size: 28px;
		line-height: 1.071em; /* 30px / 28px */
		max-width: 327px; /* Mobile width from Figma */
	}

	.section-font-list__fonts {
		padding: 0 24px 45px 24px;
	}

	.section-font-list__fonts-grid {
		gap: 0; /* No gap - dividers handle spacing */
	}

	.section-font-list__font-item {
		flex-direction: row; /* Keep row layout on mobile - font display on left, button on right */
		align-items: center; /* Vertically center button and text */
		justify-content: space-between;
		gap: 0;
		padding: 20px 0; /* Top/bottom padding: 20px mobile */
	}


	/* Horizontal teal divider lines on mobile */
	.section-font-list__font-item:first-child::before {
		top: 0;
		height: 2px; /* Mobile height from Figma */
	}

	.section-font-list__font-item::after {
		bottom: 0;
		height: 2px; /* Mobile height from Figma */
	}

	.section-font-list__font-display {
		width: 113px; /* Fixed width from Figma mobile */
	}

	.section-font-list__font-image--desktop {
		display: none;
	}

	.section-font-list__font-image--mobile {
		display: block;
	}
	
	/* Mobile font size overrides using CSS custom properties - legacy support */
	.section-font-list__font-display[style*="--mobile-font-size"] {
		font-size: var(--mobile-font-size) !important;
	}
	
	.section-font-list__font-display[style*="--mobile-line-height"] {
		line-height: var(--mobile-line-height) !important;
	}

	.section-font-list__font-button {
		width: 147px; /* Mobile button width from Figma */
		padding: 13px 8px; /* Reduce horizontal padding to fit text */
		font-size: 12px;
		text-align: center;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}