/**
 * Free Style 3 — Page Templates
 * Page hero band + per-template sections (banner comments per slug).
 */

/* ---- Shared page hero ---- */
.fsp-page-hero {
	background:
		linear-gradient(180deg, var(--fsp-blue-50), transparent),
		var(--fsp-surface);
	border-block-end: 1px solid var(--fsp-border);
	padding-block: var(--fsp-space-12);
}

.fsp-page-hero__title {
	margin-block-end: var(--fsp-space-2);
}

.fsp-page-hero__subtitle {
	margin: 0;
	color: var(--fsp-text-soft);
	font-size: var(--fsp-text-lg);
	max-width: 60ch;
}

.fsp-page__body {
	padding-block: var(--fsp-space-8);
}

/*
 * Keep the content canvas full-width so block layouts, forms, and commerce
 * interfaces can use the container. Limit only direct long-form copy to a
 * readable line length.
 */
.fsp-page__body .entry-content > :where(p, ul, ol, blockquote, pre) {
	max-width: 72ch;
}

/*
 * Section shortcodes include their own container so they also work outside a
 * page body. When one is used in page content, reuse the page container rather
 * than subtracting a second pair of gutters.
 */
.fsp-page__body .entry-content > .fsp-section > .fsp-container:not(.fsp-container--narrow) {
	width: 100%;
}

/* ---- about-us ---- */
.fsp-about-story {
	padding-block-start: var(--fsp-space-8);
}

.fsp-about-story__timeline {
	display: grid;
	gap: var(--fsp-space-12);
}

.fsp-about-story__chapter {
	display: grid;
	gap: var(--fsp-space-6);
	align-items: center;
}

.fsp-about-story__copy {
	max-width: 62ch;
}

.fsp-about-story__title {
	margin-block-end: var(--fsp-space-4);
	font-size: var(--fsp-text-2xl);
}

.fsp-about-story__copy > :last-child {
	margin-block-end: 0;
}

.fsp-about-story__media {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--fsp-border);
	border-radius: var(--fsp-radius-lg);
	background: var(--fsp-surface);
	box-shadow: var(--fsp-shadow-md);
}

.fsp-about-story__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.fsp-about-story__media figcaption {
	padding: var(--fsp-space-3) var(--fsp-space-4);
	color: var(--fsp-text-soft);
	font-size: var(--fsp-text-sm);
}

/* desktop ≥64rem */
@media (min-width: 64rem) {
	.fsp-about-story__chapter {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--fsp-space-12);
	}

	.fsp-about-story__copy {
		padding-inline: var(--fsp-space-8);
	}

	.fsp-about-story__chapter--reverse .fsp-about-story__media {
		grid-column: 1;
		grid-row: 1;
	}

	.fsp-about-story__chapter--reverse .fsp-about-story__copy {
		grid-column: 2;
		grid-row: 1;
	}
}

/* ---- contact-us ---- */
.fsp-contact-grid {
	display: grid;
	gap: var(--fsp-space-8);
}

/* desktop ≥64rem */
@media (min-width: 64rem) {
	.fsp-contact-grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

.fsp-contact-grid__aside {
	display: flex;
	flex-direction: column;
	gap: var(--fsp-space-4);
}

.fsp-contact-line {
	margin-block-end: var(--fsp-space-2);
}

/* ---- shared disclosures and form fallbacks ---- */
.fsp-disclosures {
	display: grid;
	gap: var(--fsp-space-3);
}

.fsp-disclosure {
	border: 1px solid var(--fsp-border);
	border-radius: var(--fsp-radius-md);
	background: var(--fsp-surface);
	overflow: clip;
}

.fsp-disclosure__summary {
	padding: var(--fsp-space-4) var(--fsp-space-6);
	color: var(--fsp-heading);
	font-weight: 700;
	cursor: pointer;
}

.fsp-disclosure__summary:hover {
	background: var(--fsp-blue-50);
}

.fsp-disclosure__content {
	padding: 0 var(--fsp-space-6) var(--fsp-space-6);
	color: var(--fsp-text);
}

.fsp-disclosure__content > :last-child,
.fsp-form-fallback > :last-child {
	margin-block-end: 0;
}

.fsp-form-fallback .fsp-btn {
	margin-block-start: var(--fsp-space-2);
}

.fsp-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fsp-space-2);
	margin-block-start: var(--fsp-space-4);
}

/* ---- faq ---- */
.fsp-faq-group + .fsp-faq-group {
	margin-block-start: var(--fsp-space-12);
}

.fsp-faq-group__title {
	margin-block-end: var(--fsp-space-4);
}

.fsp-faq-more {
	margin-block-start: var(--fsp-space-12);
}

/* ---- how-to-order ---- */
.fsp-order-guide .fsp-card__body {
	height: 100%;
}

/* ---- service directory and detail pages ---- */
.fsp-card__media--icon {
	display: grid;
	place-items: center;
	min-height: 180px;
	padding: var(--fsp-space-6);
	background: var(--fsp-blue-50);
}

.fsp-card__media.fsp-card__media--icon img {
	width: 112px;
	height: 112px;
	aspect-ratio: auto;
	object-fit: contain;
}

.fsp-service-detail__intro {
	display: grid;
	gap: var(--fsp-space-8);
	align-items: center;
}

.fsp-service-detail__media {
	display: grid;
	place-items: center;
	min-height: 260px;
	border: 1px solid var(--fsp-border);
	border-radius: var(--fsp-radius-lg);
	background: var(--fsp-blue-50);
}

.fsp-service-detail__media img {
	width: min(180px, 50%);
	height: auto;
}

.fsp-service-detail__copy {
	max-width: 62ch;
}

.fsp-service-detail__copy p,
.fsp-service-detail__benefits p {
	color: var(--fsp-text-soft);
	font-size: var(--fsp-text-lg);
}

.fsp-service-detail__benefits {
	max-width: 72ch;
	margin-block-start: var(--fsp-space-12);
	padding: var(--fsp-space-8);
	border-inline-start: 4px solid var(--fsp-blue-500);
	border-radius: var(--fsp-radius-md);
	background: var(--fsp-surface);
	box-shadow: var(--fsp-shadow-sm);
}

@media (min-width: 48rem) {
	.fsp-service-detail__intro {
		grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr);
	}
}

/* ---- brand directory ---- */
.fsp-brand-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fsp-space-4);
}

.fsp-brand-grid__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--fsp-space-3);
	padding: var(--fsp-space-4);
	border: 1px solid var(--fsp-border);
	border-radius: var(--fsp-radius-md);
	background: var(--fsp-surface);
	color: var(--fsp-heading);
	text-align: center;
	box-shadow: var(--fsp-shadow-sm);
	transition: border-color var(--fsp-dur-fast) var(--fsp-ease),
		box-shadow var(--fsp-dur-fast) var(--fsp-ease),
		transform var(--fsp-dur-fast) var(--fsp-ease);
}

.fsp-brand-grid__item:hover {
	border-color: var(--fsp-blue-300);
	box-shadow: var(--fsp-shadow-md);
	transform: translateY(-2px);
	text-decoration: none;
}

.fsp-brand-grid__media {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1;
}

.fsp-brand-grid__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fsp-brand-grid__name {
	font-weight: 700;
}

@media (min-width: 48rem) {
	.fsp-brand-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.fsp-brand-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* ---- careers and custom stores ---- */
.fsp-careers__empty {
	text-align: center;
}

.fsp-careers__logo {
	display: block;
	width: min(240px, 80%);
	height: auto;
	margin: 0 auto var(--fsp-space-6);
}

.fsp-store-paths {
	align-items: stretch;
}

.fsp-store-path,
.fsp-store-path .fsp-card__body {
	height: 100%;
}

/* ---- rewards program ---- */
.fsp-rewards-intro {
	display: grid;
	gap: var(--fsp-space-6);
	align-items: center;
	max-width: var(--fsp-container-narrow);
	margin-inline: auto;
}

.fsp-rewards-intro__media {
	display: grid;
	place-items: center;
}

.fsp-rewards-intro__media img {
	width: min(160px, 60vw);
	height: auto;
}

.fsp-rewards-intro__copy p {
	color: var(--fsp-text-soft);
	font-size: var(--fsp-text-lg);
}

@media (min-width: 48rem) {
	.fsp-rewards-intro {
		grid-template-columns: minmax(160px, 3fr) minmax(0, 9fr);
	}

	.fsp-steps--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---- policies ---- */
.fsp-policy {
	display: grid;
	gap: var(--fsp-space-8);
}

.fsp-policy__section {
	padding-block-end: var(--fsp-space-8);
	border-block-end: 1px solid var(--fsp-border);
}

.fsp-policy__section:last-child {
	border-block-end: 0;
}

.fsp-policy__title {
	font-size: var(--fsp-text-xl);
}

.fsp-policy__content {
	max-width: 72ch;
}

/* ---- submit artwork ---- */
.fsp-placement-guides {
	display: grid;
	gap: var(--fsp-space-4);
}

.fsp-placement-guide__images {
	display: grid;
	gap: var(--fsp-space-4);
}

.fsp-placement-guide__figure {
	margin: 0;
	border: 1px solid var(--fsp-border);
	border-radius: var(--fsp-radius-md);
	overflow: hidden;
	background: var(--fsp-surface);
}

.fsp-placement-guide__figure img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- promo package collections ---- */
.fsp-promo-packages__featured,
.fsp-promo-packages__favorites {
	margin-block-end: var(--fsp-space-12);
}

.fsp-promo-packages__tabs {
	display: none;
}

.fsp-promo-packages.is-enhanced .fsp-promo-packages__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fsp-space-2);
	margin-block: var(--fsp-space-4) var(--fsp-space-6);
}

.fsp-promo-packages__tab {
	padding: var(--fsp-space-3) var(--fsp-space-5);
	border: 1px solid var(--fsp-blue-300);
	border-radius: var(--fsp-radius-md);
	background: var(--fsp-surface);
	color: var(--fsp-blue-700);
	font-weight: 700;
	cursor: pointer;
}

.fsp-promo-packages__tab:hover,
.fsp-promo-packages__tab.is-active {
	border-color: var(--fsp-blue-700);
	background: var(--fsp-blue-700);
	color: var(--fsp-surface);
}

.fsp-promo-packages__panel + .fsp-promo-packages__panel {
	margin-block-start: var(--fsp-space-8);
}

.fsp-promo-packages__panel-title {
	margin-block-end: var(--fsp-space-4);
	font-size: var(--fsp-text-lg);
}

.fsp-promo-packages.is-enhanced .fsp-promo-packages__panel-title {
	display: none;
}

.fsp-promo-packages.is-enhanced .fsp-promo-packages__panel + .fsp-promo-packages__panel {
	margin-block-start: 0;
}

.fsp-product-collection {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fsp-space-6);
}

.fsp-promo-packages__action {
	display: flex;
	justify-content: center;
}

.fsp-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--fsp-space-2);
	padding: 0;
	list-style: none;
}

.fsp-pagination a,
.fsp-pagination .current {
	display: grid;
	place-items: center;
	min-width: 40px;
	min-height: 40px;
	padding: var(--fsp-space-2);
	border: 1px solid var(--fsp-border);
	border-radius: var(--fsp-radius-sm);
	background: var(--fsp-surface);
}

.fsp-pagination .current {
	border-color: var(--fsp-blue-700);
	background: var(--fsp-blue-700);
	color: var(--fsp-surface);
}

@media (min-width: 48rem) {
	.fsp-product-collection {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---- thank-you ---- */
.fsp-thanks {
	padding-block: var(--fsp-space-20);
	text-align: center;
}

.fsp-thanks__inner {
	max-width: 560px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--fsp-space-4);
}

.fsp-thanks__mark {
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	border-radius: var(--fsp-radius-pill);
	background: var(--fsp-blue-100);
	color: var(--fsp-blue-700);
}

.fsp-thanks__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--fsp-space-3);
}

.fsp-thanks__help {
	color: var(--fsp-text-soft);
}

/* ---- 404 ---- */
.fsp-404 {
	padding-block: var(--fsp-space-20);
	text-align: center;
}

.fsp-404__inner {
	max-width: 560px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--fsp-space-4);
}

.fsp-404__code {
	margin: 0;
	font-size: clamp(4rem, 14vw, 7rem);
	font-weight: 800;
	line-height: 1;
	color: var(--fsp-blue-100);
	-webkit-text-stroke: 2px var(--fsp-blue-500);
}

.fsp-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--fsp-space-3);
}