/**
 * FIND N FORM editorial blocks — shared editor + front-end styles.
 * Design tokens (colors, spacing, radii, type) come from the theme's
 * theme.json custom properties so these blocks always match the active
 * FIND N FORM design system rather than hard-coding values here.
 */

.fnf-block-placeholder {
	padding: var( --fnf-space-4, 1rem );
	border: 1px dashed var( --wp--preset--color--ink, #07152f );
	border-radius: var( --fnf-radius-md, 8px );
	opacity: 0.6;
	text-align: center;
}

/* Badges ------------------------------------------------------------- */
.fnf-badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 0.25em 0.75em;
	border-radius: 999px;
	background: var( --wp--preset--color--canvas, #faf9f6 );
	border: 1px solid currentColor;
}
.fnf-badge--evidence { color: var( --wp--preset--color--blue, #245bff ); }
.fnf-badge--status-recommended { color: #1a7f37; }
.fnf-badge--status-recommended_with_reservations { color: #b26b00; }
.fnf-badge--status-better_alternative { color: #b26b00; }
.fnf-badge--status-not_recommended,
.fnf-badge--status-skip_if { color: #b32d2e; }

/* Product card --------------------------------------------------------- */
.fnf-product-card {
	display: grid;
	gap: var( --fnf-space-4, 1rem );
	background: var( --wp--preset--color--canvas, #faf9f6 );
	border-radius: var( --fnf-radius-lg, 16px );
	overflow: hidden;
	box-shadow: 0 1px 2px rgba( 22, 21, 26, 0.06 );
}
@media ( min-width: 640px ) {
	.fnf-product-card { grid-template-columns: 240px 1fr; }
}
.fnf-product-card__image { width: 100%; height: auto; display: block; aspect-ratio: 4 / 5; object-fit: cover; }
.fnf-product-card__image-caption { font-size: 0.72rem; opacity: 0.6; padding: 0.5em 1em; margin: 0; min-height: 2.6em; display: flex; align-items: center; }
.fnf-product-card__body { padding: var( --fnf-space-5, 1.5rem ); display: flex; flex-direction: column; gap: 0.6em; height: 100%; }
.fnf-product-card__title { margin: 0.2em 0 0; font-family: var( --wp--preset--font-family--display, inherit ); font-size: 1.25rem; }
.fnf-product-card__brand { margin: 0; opacity: 0.65; font-size: 0.85rem; }
.fnf-product-card__why { margin: 0; }
.fnf-product-card__facts { display: grid; gap: 0.4em; margin: 0.4em 0; }
.fnf-product-card__facts > div { display: flex; gap: 0.5em; font-size: 0.9rem; }
.fnf-product-card__facts dt { font-weight: 600; min-width: 7.5em; }
.fnf-product-card__facts dd { margin: 0; }
.fnf-product-card__meta-row { display: flex; align-items: center; gap: 0.75em; flex-wrap: wrap; margin: 0.4em 0; }
.fnf-product-card__price { font-weight: 700; }
.fnf-product-card__price--fallback { font-weight: 500; font-size: 0.85rem; opacity: 0.75; }
.fnf-product-card__rating { font-size: 0.85rem; }
.fnf-product-card__unavailable { font-size: 0.85rem; opacity: 0.7; margin-top: auto; }

/* CTA button ------------------------------------------------------------ */
.fnf-button {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	justify-content: center;
	padding: 0.75em 1.5em;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	width: fit-content;
}
.fnf-button--cta {
	background: var( --wp--preset--color--violet, #7b2cff );
	color: #fff;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
.fnf-button--cta:hover,
.fnf-button--cta:focus-visible {
	background: var( --wp--preset--color--ink, #07152f );
	transform: translateY( -1px );
	color: #fff;
}
/* Inside a product card, the CTA always sits flush at the bottom, however
   much "why we like it" text sits above it — keeps a row of cards with
   uneven copy length lined up instead of each button floating at a
   different height. */
.fnf-product-card__cta { margin-top: auto; align-self: flex-start; }

/* Content section (homepage/hub live article sections) ----------------- */
.fnf-content-section__subheading { margin: 0.2em 0 0; opacity: 0.7; max-width: 60ch; }

/* Grid -------------------------------------------------------------- */
.fnf-product-grid { display: block; }
.fnf-product-grid__heading { margin-bottom: var( --fnf-space-4, 1rem ); }
.fnf-product-grid__items {
	display: grid;
	gap: var( --fnf-space-5, 1.5rem );
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
}
.fnf-product-grid__items .fnf-product-card { grid-template-columns: 1fr; }

/* Comparison table ----------------------------------------------------- */
.fnf-comparison__heading { margin-bottom: var( --fnf-space-4, 1rem ); }
.fnf-comparison__table-wrap { overflow-x: auto; }
.fnf-comparison__table { width: 100%; border-collapse: collapse; min-width: 640px; }
.fnf-comparison__table th,
.fnf-comparison__table td { text-align: left; padding: 0.85em 1em; border-bottom: 1px solid rgba( 22, 21, 26, 0.1 ); vertical-align: top; }
.fnf-comparison__thumb { width: 48px; height: 48px; object-fit: cover; border-radius: var( --fnf-radius-sm, 6px ); display: block; margin-bottom: 0.4em; }
.fnf-comparison__product-name { display: block; font-weight: 600; margin-bottom: 0.3em; }
.fnf-comparison__note { font-size: 0.85rem; opacity: 0.7; margin-top: 0.75em; }
.fnf-comparison__cta { font-size: 0.85rem; padding: 0.6em 1.2em; white-space: nowrap; }
.fnf-comparison__unavailable { font-size: 0.8rem; opacity: 0.6; }

/* Newsletter form ----------------------------------------------------- */
.fnf-newsletter {
	display: grid;
	gap: var( --fnf-space-4, 1rem );
	padding: var( --fnf-space-6, 2rem );
	border-radius: var( --fnf-radius-lg, 16px );
	background: var( --wp--preset--color--ink, #07152f );
	color: #fff;
}
@media ( min-width: 780px ) {
	.fnf-newsletter { grid-template-columns: 1fr auto; align-items: center; }
}
.fnf-newsletter__heading { margin: 0 0 0.25em; color: #fff; }
.fnf-newsletter__subheading { margin: 0; opacity: 0.8; }
.fnf-newsletter__form { display: flex; gap: 0.5em; flex-wrap: wrap; }
.fnf-newsletter__input {
	padding: 0.75em 1em;
	border-radius: 999px;
	border: 1px solid rgba( 255, 255, 255, 0.3 );
	background: rgba( 255, 255, 255, 0.08 );
	color: #fff;
	min-width: 220px;
}
.fnf-newsletter__input::placeholder { color: rgba( 255, 255, 255, 0.6 ); }
.fnf-newsletter .fnf-button--cta { background: var( --wp--preset--color--lime, #8fea45 ); color: var( --wp--preset--color--ink, #07152f ); }
.fnf-newsletter .fnf-button--cta:hover,
.fnf-newsletter .fnf-button--cta:focus-visible { background: #fff; color: var( --wp--preset--color--ink, #07152f ); }
.fnf-newsletter__notice { grid-column: 1 / -1; margin: 0; font-size: 0.9rem; }
.fnf-newsletter__notice--success { color: var( --wp--preset--color--lime, #8fea45 ); }
.fnf-newsletter__notice--error { color: #ff8080; }

/* Editor-only picker UI ------------------------------------------------ */
.fnf-editor-product-search__results { list-style: none; margin: 0.5em 0 0; padding: 0; display: grid; gap: 0.25em; }
.fnf-editor-product-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5em; padding: 0.3em 0; border-bottom: 1px solid rgba( 0, 0, 0, 0.08 ); font-size: 0.85rem; }