/*
 * Iper Shop -- component styles for block patterns and templates.
 * Everything expressible through theme.json lives there; this file only
 * covers structural/component details (grids, cards, badges, placeholders)
 * that native block supports do not reach.
 */

/* ---- Layout utilities ---- */

.ipershop-section {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.ipershop-section.is-tight {
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
}

.ipershop-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

.ipershop-grid {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.ipershop-grid.is-4-col {
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.ipershop-grid.is-2-col {
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

/* ---- Header ---- */

.ipershop-site-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.ipershop-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
}

.ipershop-announcement-bar {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
	padding-top: var(--wp--preset--spacing--10);
	padding-bottom: var(--wp--preset--spacing--10);
	text-align: center;
}

.ipershop-announcement-bar p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--surface);
}

/* ---- Footer ---- */

.ipershop-site-footer {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--40);
}

.ipershop-site-footer,
.ipershop-site-footer a {
	color: var(--wp--preset--color--surface);
}

.ipershop-site-footer a {
	text-decoration: none;
}

.ipershop-site-footer a:hover {
	color: var(--wp--preset--color--accent-tint);
	text-decoration: underline;
}

.ipershop-footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.15);
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* ---- Badges ---- */

.ipershop-badge {
	display: inline-flex;
	align-items: center;
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--pill);
	line-height: 1;
}

.ipershop-badge.is-dark {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
}

/* ---- Cards ---- */

.ipershop-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--card);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	overflow: hidden;
	height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.ipershop-card:hover {
		box-shadow: var(--wp--preset--shadow--card-hover);
		transform: translateY(-2px);
	}
}

.ipershop-card__body {
	padding: var(--wp--preset--spacing--30);
}

.ipershop-card__badge-row {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* ---- Media placeholders (no real photography yet) ---- */

.ipershop-media-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, var(--wp--preset--color--base) 0%, var(--wp--preset--color--accent-tint) 100%);
	border-bottom: 1px solid var(--wp--preset--color--line);
	aspect-ratio: 4 / 3;
	color: var(--wp--preset--color--muted);
}

.ipershop-media-placeholder.is-square {
	aspect-ratio: 1 / 1;
}

/* ---- Icons ---- */

.ipershop-icon {
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ipershop-icon.is-large {
	width: 2.25rem;
	height: 2.25rem;
}

/* ---- Store location card ---- */

.ipershop-store-card__meta {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--20);
}

.ipershop-store-card__meta .ipershop-icon {
	color: var(--wp--preset--color--accent);
	margin-top: 0.15em;
}

.ipershop-store-card__meta p {
	margin: 0;
}

/* ---- Store status badge ---- */

.ipershop-status {
	display: inline-flex;
	align-items: center;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--pill);
	margin-bottom: var(--wp--preset--spacing--10);
}

.ipershop-status.is-da-confermare { background: var(--wp--preset--color--line); color: var(--wp--preset--color--muted); }
.ipershop-status.is-aperto { background: var(--wp--preset--color--success-tint); color: var(--wp--preset--color--success); }
.ipershop-status.is-prossima-apertura { background: var(--wp--preset--color--accent-tint); color: var(--wp--preset--color--accent-dark); }
.ipershop-status.is-chiuso-temporaneamente { background: var(--wp--preset--color--line); color: var(--wp--preset--color--contrast); }

.ipershop-store-card__meta.is-placeholder p { color: var(--wp--preset--color--muted); font-style: italic; }

.ipershop-store-actions { margin-top: var(--wp--preset--spacing--20); }

/* ---- 404 ---- */

.ipershop-404 {
	text-align: center;
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}