/* =============================================================
   SPAR Stores – Frontend Styles v1.2
   ============================================================= */

:root {
	--spar-red:          #E4002B;
	--spar-green:        #007A33;
	--spar-card-bg:      #ffffff;
	--spar-border:       #e8e8e8;
	--spar-text-muted:   #6b7280;
	--spar-radius:       10px;
	--spar-img-h:        200px;
	--spar-shadow:       0 2px 12px rgba(0,0,0,.08);
	--spar-shadow-hover: 0 8px 28px rgba(0,0,0,.15);
	--spar-gap:          20px;
	--spar-cols:         4;
}

/* ---- Grid ---- */
.spar-stores-grid {
	display: grid;
	grid-template-columns: repeat( var(--spar-cols), minmax(0, 1fr) );
	gap: var(--spar-gap);
	margin: 2em 0;
}
@media (max-width: 1100px) { .spar-stores-grid { --spar-cols: 3 !important; } }
@media (max-width: 780px)  { .spar-stores-grid { --spar-cols: 2 !important; } }
@media (max-width: 480px)  { .spar-stores-grid { --spar-cols: 1 !important; } }

/* ---- Card (er <a> hlekkur) ---- */
.spar-store-card {
	background: var(--spar-card-bg);
	border: 1px solid var(--spar-border);
	border-radius: var(--spar-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--spar-shadow);
	transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
.spar-store-card:hover {
	box-shadow: var(--spar-shadow-hover);
	transform: translateY(-4px);
	border-color: #d1d5db;
	text-decoration: none;
	color: inherit;
}

/* ---- Image ---- */
.spar-store-img {
	height: var(--spar-img-h);
	background-size: cover;
	background-position: center;
	background-color: #f3f4f6;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #d1d5db;
	overflow: hidden;
}
.spar-store-img::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,.08));
	transition: opacity .25s;
}
.spar-store-card:hover .spar-store-img::after {
	opacity: 0;
}

/* ---- Badge ---- */
.spar-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 20px;
	z-index: 1;
}
.spar-badge--open   { background: var(--spar-green); color: #fff; }
.spar-badge--closed { background: var(--spar-red);   color: #fff; }

/* ---- Body ---- */
.spar-store-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1;
	position: relative;
}

.spar-store-name {
	font-size: 1.05em;
	font-weight: 700;
	margin: 0 0 4px;
	padding: 0;
	border: none;
	line-height: 1.2;
}

.spar-store-address,
.spar-store-phone,
.spar-store-today,
.spar-store-notice {
	margin: 0;
	font-size: .875em;
	color: var(--spar-text-muted);
	display: flex;
	align-items: flex-start;
	gap: 6px;
	line-height: 1.4;
}
.spar-store-today  { font-weight: 500; color: inherit; }
.spar-store-notice { color: var(--spar-red); font-weight: 500; }

.spar-icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	margin-top: 2px;
	stroke: currentColor;
}

/* ---- Arrow indicator ---- */
.spar-card-arrow {
	position: absolute;
	bottom: 16px;
	right: 16px;
	width: 28px;
	height: 28px;
	background: #f3f4f6;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s, transform .2s;
}
.spar-card-arrow svg {
	width: 14px;
	height: 14px;
	stroke: var(--spar-text-muted);
	transition: stroke .2s;
}
.spar-store-card:hover .spar-card-arrow {
	background: var(--spar-red);
	transform: translateX(2px);
}
.spar-store-card:hover .spar-card-arrow svg {
	stroke: #fff;
}

.spar-no-stores { color: var(--spar-text-muted); font-style: italic; }