/*
 * Toga homepage, store directory and seller status screen.
 *
 * Loaded only where these surfaces render (see toga_child_enqueue_assets()).
 * Restrained by intent: a single Paper page, Terracotta reserved for the
 * primary action. The hero image is placeholder photography pending real
 * studio photography (see Toga_Home::render_hero() and
 * docs/DESIGN_SYSTEM.md) — no other decorative imagery is invented.
 */

.toga-home-layout,
.toga-page-shell {
	box-sizing: border-box;
	width: min(100%, var(--toga-wide-width));
	max-width: var(--toga-wide-width) !important;
	margin-inline: auto !important;
}

.toga-home-layout {
	padding-inline: var(--toga-gutter);
}

.toga-home-layout > .wp-block-shortcode,
.toga-home-layout > section,
.toga-page-shell > .wp-block-shortcode,
.toga-page-shell > section,
.toga-page-shell > main {
	box-sizing: border-box;
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
}

.toga-page-shell--stores {
	padding-inline: var(--toga-gutter);
}

/* -------------------------------------------------------------------- */
/* Hero — image-led, mobile-first                                       */
/*                                                                       */
/* The image itself carries the visual weight (a fixed aspect-ratio box, */
/* not padding, controls the hero's height), so text sits in a compact   */
/* band overlaid on the image rather than stacked below it in a tall     */
/* padded panel — the previous design's main source of empty space.      */
/* The scrim gradient behind the text is a legibility mechanism (WCAG    */
/* contrast for Paper-colored text over a photo of unknown tone), not     */
/* decorative chrome.                                                    */
/* -------------------------------------------------------------------- */

.toga-hero {
	position: relative;
	overflow: hidden;
	margin: 0 0 var(--toga-space-8);
	border-radius: var(--toga-radius-lg);
	background-color: var(--toga-ink);
}

.toga-hero__media {
	display: block;
	margin: 0;
	aspect-ratio: var(--toga-ratio-hero-mobile);
	max-height: 640px;
}

@media (min-width: 768px) {
	.toga-hero__media {
		aspect-ratio: var(--toga-ratio-hero-desktop);
		max-height: 560px;
	}
}

.toga-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.toga-hero__content {
	position: absolute;
	inset: auto 0 0 0;
	padding: var(--toga-space-6) var(--toga-space-4) var(--toga-space-5);
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--toga-ink) 78%, transparent) 0%,
		color-mix(in srgb, var(--toga-ink) 40%, transparent) 60%,
		transparent 100%
	);
	color: var(--toga-paper);
	text-align: left;
}

@media (min-width: 768px) {
	.toga-hero__content {
		padding: var(--toga-space-8);
	}
}

.toga-hero__tagline {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2.5rem);
	line-height: 1.15;
	margin: 0 0 var(--toga-space-2);
	color: var(--toga-paper);
	max-width: 16ch;
}

.toga-hero__lede {
	font-family: var(--wp--preset--font-family--inter);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1rem);
	color: color-mix(in srgb, var(--toga-paper) 90%, transparent);
	max-width: 34ch;
	margin: 0 0 var(--toga-space-4);
}

.toga-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--toga-space-2) var(--toga-space-3);
}

/* Category gateways use real WooCommerce term images and links. */
.toga-category-gateways {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--toga-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.toga-category-gateway__link {
	position: relative;
	display: block;
	overflow: hidden;
	min-height: 18rem;
	border-radius: var(--toga-radius-md);
	background: var(--toga-paper);
	color: var(--toga-paper);
	text-decoration: none;
}

.toga-category-gateway__media,
.toga-category-gateway__media img {
	display: block;
	width: 100%;
	height: 100%;
}

.toga-category-gateway__media {
	position: absolute;
	inset: 0;
}

.toga-category-gateway__media img {
	object-fit: cover;
	transition: transform var(--toga-duration-base) var(--toga-ease);
}

.toga-category-gateway__media--fallback {
	background: linear-gradient(145deg, var(--toga-border), var(--toga-ink));
}

.toga-category-gateway__name {
	position: absolute;
	inset: auto var(--toga-space-4) var(--toga-space-4);
	z-index: 1;
	font: 500 clamp(1.5rem, 3vw, 2.25rem)/1.1 var(--toga-font-editorial);
	text-shadow: 0 1px 1.5rem rgb(0 0 0 / 0.8);
}

.toga-category-gateway__link::after {
	position: absolute;
	inset: 45% 0 0;
	content: "";
	background: linear-gradient(transparent, rgb(0 0 0 / 0.68));
}

.toga-category-gateway__link:hover .toga-category-gateway__media img,
.toga-category-gateway__link:focus-visible .toga-category-gateway__media img {
	transform: scale(1.025);
}

@media (min-width: 680px) {
	.toga-category-gateways {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.toga-category-gateway__media img {
		transition: none;
	}
}

/* -------------------------------------------------------------------- */
/* Store directory — homepage section and the Stores page                */
/* -------------------------------------------------------------------- */

/*
 * A vertical fashion-brand preview card — cover image, a logo/monogram
 * overlapping its bottom edge, name, city — replacing the previous
 * horizontal contact-directory row (small circular logo + name in a
 * single line), which read as an administrative list rather than a
 * storefront.
 */
.toga-store-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--toga-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.toga-store-card {
	margin: 0;
}

.toga-store-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--toga-border);
	border-radius: var(--toga-radius-md);
	overflow: hidden;
	background-color: var(--toga-surface);
	text-decoration: none;
	color: var(--toga-ink);
	transition:
		border-color var(--toga-duration-base) var(--toga-ease),
		box-shadow var(--toga-duration-base) var(--toga-ease),
		background-color var(--toga-duration-base) var(--toga-ease);
}

.toga-store-card__link:hover,
.toga-store-card__link:focus-visible {
	border-color: var(--toga-terracotta);
	color: var(--toga-ink);
	box-shadow: var(--toga-shadow-sm);
}

.toga-store-card__cover-wrap {
	position: relative;
	display: block;
}

.toga-store-card__cover {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	background-color: var(--toga-paper);
}

.toga-store-card__cover--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(circle at 80% 15%, color-mix(in srgb, var(--toga-terracotta) 20%, transparent), transparent 55%),
		radial-gradient(circle at 15% 90%, color-mix(in srgb, var(--toga-ink) 9%, transparent), transparent 55%),
		var(--toga-paper);
}

/*
 * The store's own initial, large and quiet, filling the fallback banner.
 * Decorative only (the monogram chip below and the store name already carry
 * this as real, accessible text) — muted so it reads as a texture behind the
 * chip and name, not a second competing label.
 */
.toga-store-card__fallback-mark {
	padding: 0.45rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--toga-ink) 14%, transparent);
	color: color-mix(in srgb, var(--toga-ink) 42%, transparent);
	font: 500 1rem/1 var(--toga-font-editorial);
	letter-spacing: 0.08em;
	user-select: none;
}

.toga-store-card__media {
	position: absolute;
	left: var(--toga-space-3);
	bottom: calc(-1 * var(--toga-space-4));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--toga-paper);
	border: 3px solid var(--toga-surface);
	box-shadow: var(--toga-shadow-sm);
}

.toga-store-card .toga-store-card__logo {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/*
 * A store with no logo gets initials from its own name — a stand-in derived
 * from real data rather than a stock photograph of someone else's shop.
 */
.toga-store-card__monogram {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 1.1rem;
	letter-spacing: 0.02em;
	color: color-mix(in srgb, var(--toga-ink) 70%, transparent);
}

.toga-store-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	flex: 1;
	min-width: 0;
	padding: var(--toga-space-5) var(--toga-space-3) var(--toga-space-3);
}

.toga-store-card__name {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 500;
	font-size: 1.05rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.toga-store-card__location {
	margin: 0;
	font-size: 0.85rem;
	color: var(--toga-ink-60);
}

.toga-store-card__action {
	display: inline-flex;
	align-items: center;
	margin-block-start: auto;
	padding-block-start: var(--toga-space-4);
	color: var(--toga-ink);
	font-size: var(--toga-text-small);
	font-weight: 650;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.2em;
}

.toga-store-card__link:hover .toga-store-card__action,
.toga-store-card__link:focus-visible .toga-store-card__action {
	text-decoration-color: currentcolor;
}

.toga-stores-page__intro {
	max-width: 54rem;
	margin-block-end: var(--toga-space-7);
}

.toga-stores-page__eyebrow {
	margin: 0 0 var(--toga-space-2);
	color: var(--toga-terracotta-hover);
	font-size: var(--toga-text-small);
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.toga-stores-page__intro h2 {
	margin: 0 0 var(--toga-space-3);
	font: 500 clamp(2rem, 4vw, 3.5rem)/var(--toga-leading-tight) var(--toga-font-editorial);
}

.toga-stores-page__intro p:last-child {
	max-width: 60ch;
	margin: 0;
	color: var(--toga-muted);
}

@media (min-width: 560px) {
	.toga-store-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.toga-store-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.toga-store-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.toga-store-card__link {
		transition: none;
	}
}

/* -------------------------------------------------------------------- */
/* Seller application status screen                                      */
/* -------------------------------------------------------------------- */

.toga-seller-status {
	max-width: 38rem;
	margin: 0 auto;
	padding: clamp(1.75rem, 1.5rem + 2vw, 3rem);
	border: 1px solid color-mix(in srgb, var(--toga-ink) 14%, transparent);
	border-radius: 12px;
	background-color: #fff;
	text-align: center;
}

.toga-seller-status__badge {
	display: inline-block;
	margin: 0 0 1.25rem;
	padding: 0.3em 1em;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--toga-terracotta) 12%, transparent);
	color: var(--toga-terracotta);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.toga-seller-status--seller-disabled .toga-seller-status__badge {
	background-color: color-mix(in srgb, var(--toga-ink) 8%, transparent);
	color: color-mix(in srgb, var(--toga-ink) 70%, transparent);
}

.toga-seller-status__heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(1.35rem, 1.15rem + 1vw, 1.9rem);
	line-height: 1.25;
	margin: 0 0 1rem;
}

.toga-seller-status__body,
.toga-seller-status__note {
	font-family: var(--wp--preset--font-family--inter);
	margin: 0 0 1rem;
	color: color-mix(in srgb, var(--toga-ink) 78%, transparent);
}

.toga-seller-status__note {
	font-size: 0.925rem;
	color: color-mix(in srgb, var(--toga-ink) 62%, transparent);
}

.toga-seller-status__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 1rem;
	margin-top: 2rem;
}

.toga-seller-status__action {
	display: inline-block;
	padding: 0.7em 1.75em;
	border-radius: 999px;
	border: 1px solid var(--toga-ink);
	color: var(--toga-ink);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 500;
	text-decoration: none;
}

.toga-seller-status__action:hover,
.toga-seller-status__action:focus-visible {
	background-color: var(--toga-ink);
	color: var(--toga-paper);
}

.toga-seller-status__action--primary,
.toga-seller-status__action--primary:hover,
.toga-seller-status__action--primary:focus-visible {
	background-color: var(--toga-ink);
	border-color: var(--toga-ink);
	color: var(--toga-paper);
}

/* -------------------------------------------------------------------- */
/* Front page — suppress the redundant page-title heading                */
/*                                                                       */
/* The block template prints the page's own title ("Toga") as an <h1>    */
/* above the content; on the homepage the hero wordmark already is the   */
/* page's identity, so the text title is redundant and reads as a stray  */
/* label. It is hidden visually but left in the accessibility tree (not  */
/* display:none) so the document still has one H1. Scoped to the front   */
/* page and to <h1> only, so product-card titles (<h2>) and every other  */
/* page's title are untouched.                                           */
/* -------------------------------------------------------------------- */

body.home h1.wp-block-post-title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}