/* ============================================================
   Card System v2 — one premium, fully clickable card language.
   Loaded after polish.css so it is the final word on card looks.
   Legacy class names are preserved; this layer only refines them.
   ============================================================ */

:root {
	--seraj-card-bg: var(--seraj-surface, #fff);
	--seraj-card-border: var(--seraj-border, rgba(20, 24, 20, .1));
	--seraj-card-radius: 18px;
	--seraj-card-pad: clamp(1rem, 1.6vw, 1.35rem);
	--seraj-card-gap: .45rem;
	--seraj-card-shadow: 0 1px 2px rgba(16, 24, 20, .04), 0 8px 24px -18px rgba(16, 24, 20, .35);
	--seraj-card-shadow-hover: 0 2px 6px rgba(16, 24, 20, .06), 0 22px 48px -22px rgba(16, 24, 20, .45);
	--seraj-card-ink: var(--seraj-ink, #16211a);
	--seraj-card-muted: var(--seraj-muted, #5d6b63);
	--seraj-card-accent: var(--seraj-primary, #2f5d3a);
	--seraj-card-ease: cubic-bezier(.22, .61, .36, 1);
	--seraj-card-speed: .18s;
}

/* ---------- Shell -------------------------------------------------- */

.seraj-card,
.seraj-event-card,
.seraj-offer-card,
.seraj-pkg-card,
.seraj-photo-card,
.seraj-review-card,
.seraj-dest-card,
.seraj-exp-card {
	position: relative;
	background: var(--seraj-card-bg);
	border: 1px solid var(--seraj-card-border);
	border-radius: var(--seraj-card-radius);
	box-shadow: var(--seraj-card-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	isolation: isolate;
	transition:
		transform var(--seraj-card-speed) var(--seraj-card-ease),
		box-shadow var(--seraj-card-speed) var(--seraj-card-ease),
		border-color var(--seraj-card-speed) var(--seraj-card-ease);
}

.seraj-card:hover,
.seraj-event-card:hover,
.seraj-offer-card:hover,
.seraj-pkg-card:hover,
.seraj-photo-card:hover,
.seraj-review-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--seraj-card-shadow-hover);
	border-color: color-mix(in srgb, var(--seraj-card-accent) 28%, var(--seraj-card-border));
}

/* Media */
.seraj-card__media,
.seraj-event-card__media,
.seraj-offer-card__media,
.seraj-pkg-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .03));
}

.seraj-card__media img,
.seraj-event-card__media img,
.seraj-offer-card__media img,
.seraj-pkg-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s var(--seraj-card-ease), filter .3s ease;
}

.seraj-card:hover .seraj-card__media img,
.seraj-event-card:hover .seraj-event-card__media img,
.seraj-offer-card:hover .seraj-offer-card__media img,
.seraj-pkg-card:hover .seraj-pkg-card__media img { transform: scale(1.05); }

/* Bottom scrim so badges/overlay text always read */
.seraj-card__media::after,
.seraj-event-card__media::after,
.seraj-offer-card__media::after,
.seraj-pkg-card__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 46%;
	background: linear-gradient(to top, rgba(10, 16, 12, .42), transparent);
	opacity: .85;
	pointer-events: none;
	transition: opacity var(--seraj-card-speed) ease;
}
.seraj-card:hover .seraj-card__media::after { opacity: 1; }

/* Body */
.seraj-card__body,
.seraj-event-card__body,
.seraj-offer-card__body,
.seraj-pkg-card__body {
	padding: var(--seraj-card-pad);
	display: flex;
	flex-direction: column;
	gap: var(--seraj-card-gap);
	flex: 1 1 auto;
}

/* Typography */
.seraj-card__eyebrow,
.seraj-event-card__type,
.seraj-offer-card__type {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--seraj-card-accent);
	margin: 0;
}

.seraj-card__title,
.seraj-event-card__title,
.seraj-offer-card__title,
.seraj-pkg-card__title {
	margin: 0;
	font-size: clamp(1.05rem, 1.35vw, 1.22rem);
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -.01em;
	color: var(--seraj-card-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.seraj-card__title a,
.seraj-event-card__title a,
.seraj-offer-card__title a,
.seraj-pkg-card__title a { color: inherit; text-decoration: none; }
.seraj-card--clickable:hover .seraj-card__title a,
.seraj-card--clickable:hover .seraj-event-card__title a,
.seraj-card--clickable:hover .seraj-offer-card__title a,
.seraj-card--clickable:hover .seraj-pkg-card__title a { color: var(--seraj-card-accent); }

.seraj-card__excerpt,
.seraj-event-card__sub,
.seraj-offer-card__sub,
.seraj-pkg-card__sub {
	margin: 0;
	color: var(--seraj-card-muted);
	font-size: .93rem;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Meta rows */
.seraj-card__meta,
.seraj-card__amenities,
.seraj-dest-card__meta,
.seraj-exp-card__meta,
.seraj-event-card__meta,
.seraj-card__location {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem .85rem;
	margin: .1rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .82rem;
	color: var(--seraj-card-muted);
}

.seraj-card__meta li,
.seraj-dest-card__meta li,
.seraj-exp-card__meta li,
.seraj-event-card__meta li,
.seraj-card__amenities li {
	display: inline-flex;
	align-items: center;
	gap: .32rem;
	white-space: nowrap;
}

.seraj-card-ico { flex: 0 0 auto; opacity: .75; }

.seraj-card__amenities li {
	background: color-mix(in srgb, var(--seraj-card-accent) 8%, transparent);
	border-radius: 999px;
	padding: .16rem .55rem;
	font-size: .74rem;
}

/* Badges over media */
.seraj-card__eyebrow-badge,
.seraj-exp-card__badge,
.seraj-offer-card__discount,
.seraj-pkg-card__badge,
.seraj-dest-card__location,
.seraj-photo-card__count,
.seraj-photo-card__tag {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .3rem .6rem;
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .04em;
	background: rgba(255, 255, 255, .93);
	color: var(--seraj-card-ink);
	backdrop-filter: saturate(1.4) blur(6px);
	box-shadow: 0 2px 10px rgba(10, 16, 12, .16);
	z-index: 2;
}
.seraj-card__eyebrow-badge,
.seraj-exp-card__badge { top: .7rem; left: .7rem; }
.seraj-dest-card__location { bottom: .7rem; left: .7rem; }
.seraj-card__partner-badge {
	position: absolute; top: .7rem; right: .7rem; z-index: 2;
	background: var(--seraj-card-accent); color: #fff;
	padding: .28rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 600;
}
.seraj-offer-card__discount {
	top: .7rem; left: .7rem;
	background: #b3321f; color: #fff;
}

/* Status pills */
.seraj-card__status,
.seraj-event-card__state,
.seraj-offer-card__state {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .16rem .55rem;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 600;
	background: color-mix(in srgb, var(--seraj-card-accent) 12%, transparent);
	color: var(--seraj-card-accent);
}
.seraj-card__status--closed,
.seraj-event-card--cancelled .seraj-event-card__state,
.seraj-offer-card--expired .seraj-offer-card__state {
	background: rgba(179, 50, 31, .12);
	color: #9c2b1a;
}

/* Footer */
.seraj-card__footer,
.seraj-pkg-card__foot {
	margin-top: auto;
	padding-top: .8rem;
	border-top: 1px solid color-mix(in srgb, var(--seraj-card-border) 70%, transparent);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	flex-wrap: wrap;
}

.seraj-card__price,
.seraj-pkg-card__price strong {
	font-weight: 700;
	font-size: 1rem;
	color: var(--seraj-card-ink);
}

/* CTA affordance — not a second link target, just a visual cue */
.seraj-card__cta,
.seraj-exp-card__cta,
.seraj-dest-card__cta,
.seraj-offer-card__cta {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--seraj-card-accent);
	text-decoration: none;
	transition: gap var(--seraj-card-speed) var(--seraj-card-ease);
}
.seraj-card--clickable:hover .seraj-card__cta,
.seraj-card--clickable:hover .seraj-exp-card__cta,
.seraj-card--clickable:hover .seraj-dest-card__cta { gap: .6rem; }

/* ---------- Fully clickable surface -------------------------------- */

/* One real link (the title) stretches across the whole card. */
.seraj-card--clickable .seraj-card__title > a::after,
.seraj-card--clickable .seraj-event-card__title > a::after,
.seraj-card--clickable .seraj-offer-card__title > a::after,
.seraj-card--clickable .seraj-pkg-card__title > a::after,
.seraj-card--clickable .seraj-review-card__title > a::after,
.seraj-card--clickable .seraj-photo-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

/* Anything genuinely interactive sits above the stretched link. */
.seraj-card--clickable a,
.seraj-card--clickable button,
.seraj-card--clickable input,
.seraj-card--clickable select,
.seraj-card--clickable [role="button"],
.seraj-card--clickable .seraj-card__actions,
.seraj-card--clickable .seraj-pkg-card__actions { position: relative; z-index: 2; }

/* Keep text selectable inside cards. */
.seraj-card--clickable { cursor: pointer; }
.seraj-card--clickable .seraj-card__title,
.seraj-card--clickable p { cursor: auto; }

/* Focus ring on the whole card when the inner link is focused. */
.seraj-card--clickable:focus-within {
	outline: 2px solid var(--seraj-card-accent);
	outline-offset: 3px;
}
.seraj-card--clickable a:focus-visible { outline: none; }

/* Media links are decorative duplicates — keep them out of the tab order
   visually consistent but harmless if present. */
.seraj-card__media[aria-hidden="true"] { cursor: pointer; }

/* ---------- Density variants --------------------------------------- */

.seraj-card--compact { --seraj-card-pad: .85rem; --seraj-card-gap: .3rem; }
.seraj-card--compact .seraj-card__title { font-size: 1rem; }
.seraj-card--compact .seraj-card__excerpt { display: none; }
.seraj-card--compact .seraj-card__media { aspect-ratio: 16 / 10; }

.seraj-card--wide { grid-column: span 2; }
.seraj-card--wide .seraj-card__media { aspect-ratio: 16 / 9; }
@media (max-width: 720px) { .seraj-card--wide { grid-column: auto; } }

.seraj-card--ratio-4x3 .seraj-card__media { aspect-ratio: 4 / 3; }
.seraj-card--ratio-3x2 .seraj-card__media { aspect-ratio: 3 / 2; }
.seraj-card--ratio-1x1 .seraj-card__media { aspect-ratio: 1 / 1; }
.seraj-card--ratio-16x9 .seraj-card__media { aspect-ratio: 16 / 9; }

/* ---------- Grid + rail layouts ------------------------------------ */

.seraj-card-grid { align-items: stretch; }
.seraj-card-grid > * { min-width: 0; }

.seraj-card-grid--rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(272px, 1fr);
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 1rem;
	padding-bottom: .6rem;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.seraj-card-grid--rail > * { scroll-snap-align: start; }
@media (min-width: 1024px) {
	.seraj-card-grid--rail { grid-auto-columns: minmax(320px, 1fr); }
}

.seraj-card-grid--list { grid-template-columns: 1fr; }
.seraj-card-grid--list .seraj-card {
	flex-direction: row;
	align-items: stretch;
}
.seraj-card-grid--list .seraj-card__media {
	flex: 0 0 clamp(120px, 28%, 260px);
	aspect-ratio: 1 / 1;
}
@media (max-width: 640px) {
	.seraj-card-grid--list .seraj-card { flex-direction: column; }
	.seraj-card-grid--list .seraj-card__media { flex: none; aspect-ratio: 16 / 9; }
}

/* ---------- Photo / overlay cards ---------------------------------- */

.seraj-photo-card__link { display: block; position: relative; }
.seraj-photo-card__overlay {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: .18rem;
	padding: 1rem;
	color: #fff;
	z-index: 2;
}
.seraj-photo-card__title { font-weight: 650; font-size: 1.05rem; line-height: 1.25; }
.seraj-photo-card__sub { font-size: .82rem; opacity: .85; }
.seraj-photo-card__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(8, 14, 10, .74) 0%, rgba(8, 14, 10, .18) 46%, transparent 72%);
	transition: opacity var(--seraj-card-speed) ease;
}
.seraj-photo-card:hover .seraj-photo-card__scrim { opacity: .92; }
.seraj-photo-card__count { top: .7rem; right: .7rem; }
.seraj-photo-card__tag { position: static; align-self: flex-start; background: rgba(255,255,255,.2); color: #fff; box-shadow: none; }

/* ---------- Review cards ------------------------------------------- */

.seraj-review-card { padding: var(--seraj-card-pad); gap: .5rem; }
.seraj-review-card__head { display: flex; align-items: center; gap: .5rem; }
.seraj-review-card__value { font-weight: 700; }
.seraj-review-card__title { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.seraj-review-card__title a { color: inherit; text-decoration: none; }
.seraj-review-card__excerpt { color: var(--seraj-card-muted); font-size: .92rem; margin: 0; }
.seraj-review-card__meta {
	margin-top: auto; padding-top: .7rem;
	border-top: 1px solid color-mix(in srgb, var(--seraj-card-border) 70%, transparent);
	display: flex; align-items: center; gap: .4rem;
	font-size: .82rem; color: var(--seraj-card-muted);
}

/* ---------- Skeletons ---------------------------------------------- */

.seraj-card.is-loading .seraj-card__media,
.seraj-kit-skeleton {
	background: linear-gradient(90deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.09) 37%, rgba(0,0,0,.05) 63%);
	background-size: 400% 100%;
	animation: seraj-card-shimmer 1.3s ease infinite;
}
@keyframes seraj-card-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- Motion & contrast preferences --------------------------- */

@media (prefers-reduced-motion: reduce) {
	.seraj-card,
	.seraj-card *,
	.seraj-event-card, .seraj-offer-card, .seraj-pkg-card, .seraj-photo-card {
		transition: none !important;
		animation: none !important;
	}
	.seraj-card:hover { transform: none; }
}

@media (prefers-contrast: more) {
	.seraj-card { border-color: currentColor; }
}

/* ---------- Shop + search cards join the clickable language --------- */
.shop-card.seraj-card--clickable { position: relative; cursor: pointer; }
.shop-card.seraj-card--clickable .shop-card__title > a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.shop-card.seraj-card--clickable .shop-card__save,
.shop-card.seraj-card--clickable .shop-card__add,
.shop-card.seraj-card--clickable .shop-card__addform,
.shop-card.seraj-card--clickable .shop-card__media { position: relative; z-index: 2; }
.shop-card.seraj-card--clickable:focus-within {
	outline: 2px solid var(--seraj-card-accent, currentColor);
	outline-offset: 3px;
}

.seraj-search-result-row.seraj-card--clickable { position: relative; }
.seraj-search-result-row .seraj-card__media img { width: 100%; height: 100%; object-fit: cover; }