/**
 * Features page (pattern pdfflipbook/features-main).
 * Values from the Figma "Features" frame (1920px wide, 1260px content).
 */

/* Grid background over white for the first 900px, fading into the light page colour */
.pf-fpage {
	background-color: #f8fafc;
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #f8fafc 100%),
		url("../../images/grid-hero.svg"),
		linear-gradient(#fff, #fff);
	background-size: 100% 900px, 1920px 900px, 100% 900px;
	background-repeat: no-repeat, repeat-x, no-repeat;
	background-position: center top, center top, center top;
}

/* Intro */
.pf-fpage .pf-fpage__head { max-width: 897px; text-align: center; }
.pf-fpage__head > * { margin-top: 0; margin-bottom: 0; }
.pf-fpage__head > h1 { margin-top: 12px; font-size: clamp(32px, 1.6vw + 18px, 48px); letter-spacing: -0.02em; }
.pf-fpage__head > .pf-fpage__lead { max-width: 691px; margin: 8px auto 0; color: var(--wp--preset--color--paragraph); }
.pf-tag-lg { line-height: 24px; letter-spacing: -0.28px; }

/* Tabs */
.pf-fpage .pf-ftabs-wrap { position: relative; max-width: 860px; margin-top: 46px; }
.pf-ftabs.wp-block-buttons {
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 0;
	margin: 0;
	padding: 20px 24px;
	border-radius: 10px;
	background: var(--wp--preset--color--secondary);
}
.pf-ftab { margin: 0; }
.pf-ftab .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	box-shadow: none;
	color: #fff;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
	white-space: nowrap;
	transition: background-color 0.25s ease;
}
.pf-ftab .wp-block-button__link::before {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--pf-tab-icon) center / 20px no-repeat;
	mask: var(--pf-tab-icon) center / 20px no-repeat;
}
.pf-ftab--core { --pf-tab-icon: url("../../images/features/tab-core.svg"); }
.pf-ftab--pdf { --pf-tab-icon: url("../../images/features/tab-book.svg"); }
.pf-ftab--lock { --pf-tab-icon: url("../../images/features/tab-lock.svg"); }
.pf-ftab--doc { --pf-tab-icon: url("../../images/features/tab-doc.svg"); }
.pf-ftab .wp-block-button__link:hover,
.pf-ftab .wp-block-button__link:focus { background: rgba(9, 99, 126, 0.45); color: #fff; }
.pf-ftab.is-active .wp-block-button__link { background: var(--wp--preset--color--brand); }
.pf-ftab .wp-block-button__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* "90+ Features" note next to the tabs */
.pf-fpage .pf-ftabs-note { position: absolute; top: 42px; left: calc(100% + 23px); width: 130px; margin: 0; pointer-events: none; }
.pf-ftabs-note > * { margin: 0; }
.pf-ftabs-note__arrow img { display: block; }
.pf-ftabs-note .pf-ftabs-note__text { margin: 6px 0 0 14px; color: #0f2d35; font-size: 16px; line-height: 26px; letter-spacing: -0.32px; white-space: nowrap; }

/* Panels */
.pf-fpage .pf-fpanels { margin-top: 80px; }
.pf-fpanels > .pf-fpanel { margin: 0; }
.pf-fpanel[hidden] { display: none !important; }
.pf-fpanel:focus { outline: none; }
.pf-fpanel:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 8px; border-radius: 8px; }
.pf-fgrid.pf-fgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 20px; }

/* Feature card */
.pf-fcard.pf-fcard {
	display: flex;
	flex-direction: column;
	min-height: 320px;
	margin: 0;
	padding: 40px 32px; /* same space top and bottom, so longer text never touches the edge */
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: #fff;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.35s var(--pf-ease);
}
.pf-fcard:hover { border-color: #d2dae6; box-shadow: 0 18px 40px rgba(10, 26, 47, 0.06); transform: translateY(-4px); }
.pf-fcard .pf-fcard__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	margin: 0;
	border-radius: 100px;
	background: #f8fafc;
}
.pf-fcard__icon img { display: block; width: 24px !important; height: 24px !important; }
.pf-fcard .pf-fcard__title {
	margin: 36px 0 0;
	color: #0f2d35;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.4px;
	text-wrap: balance;
}
.pf-fcard .pf-fcard__text {
	margin: 12px 0 0;
	color: var(--wp--preset--color--paragraph);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-wrap: pretty;
}

/* Responsive */
@media (max-width: 1239px) {
	.pf-fpage .pf-ftabs-note { display: none; }
}
@media (max-width: 1100px) {
	.pf-fgrid.pf-fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 939px) {
	.pf-fpage .pf-ftabs-wrap { margin-top: 32px; }
	.pf-ftabs.wp-block-buttons { flex-wrap: wrap; justify-content: center; gap: 6px; padding: 12px; }
	.pf-fpage .pf-fpanels { margin-top: 48px; }
}
@media (max-width: 820px) {
	.pf-fgrid.pf-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.pf-fcard.pf-fcard { min-height: 0; padding: 32px 24px; }
	.pf-fcard .pf-fcard__title { margin-top: 28px; }
}
@media (max-width: 600px) {
	/* One row of tabs that scrolls sideways */
	.pf-ftabs.wp-block-buttons {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 4px;
		padding: 10px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scroll-padding-inline: 10px;
		scrollbar-width: none;
	}
	.pf-ftabs.wp-block-buttons::-webkit-scrollbar { display: none; }
	.pf-ftab { flex-shrink: 0; scroll-snap-align: start; }
	.pf-ftab .wp-block-button__link { padding: 8px 12px; font-size: 15px; }
}
@media (max-width: 560px) {
	.pf-fgrid.pf-fgrid { grid-template-columns: minmax(0, 1fr); }
	.pf-fcard.pf-fcard { padding: 28px 22px; }
	.pf-fcard .pf-fcard__title { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.pf-fcard:hover { transform: none; }
}