/**
 * Card Base Component — Almutaheda Pack
 *
 * Structural base only — no product data, no pricing.
 * Variants: default, flat, bordered, interactive
 * The product card is built on top of this in a later sprint.
 */

/* ─── Base ────────────────────────────────────────────────────────── */

.alm-card {
	display:          flex;
	flex-direction:   column;
	background-color: var(--alm-color-surface-raised);
	border:           var(--alm-border-standard);
	border-radius:    var(--alm-radius-lg);
	overflow:         hidden;
	position:         relative;
}

/* ─── Variants ────────────────────────────────────────────────────── */

.alm-card--default {
	box-shadow: var(--alm-shadow-sm);
}

.alm-card--flat {
	box-shadow: none;
}

.alm-card--bordered {
	border:     var(--alm-border-width-2) solid var(--alm-color-border);
	box-shadow: none;
}

/* Interactive card — for clickable product cards */
.alm-card--interactive {
	cursor:     pointer;
	box-shadow: var(--alm-shadow-sm);
	transition: box-shadow var(--alm-duration-base) var(--alm-easing-standard),
	            border-color var(--alm-duration-base) var(--alm-easing-standard),
	            transform var(--alm-duration-base) var(--alm-easing-standard);
}

.alm-card--interactive:hover {
	box-shadow:   var(--alm-shadow-md);
	border-color: var(--alm-color-sand);
	transform:    translateY(-2px);
}

.alm-card--interactive:focus-within {
	outline:        var(--alm-focus-ring-width) solid var(--alm-focus-ring-color);
	outline-offset: var(--alm-focus-ring-offset);
}

/* ─── Sections ────────────────────────────────────────────────────── */

.alm-card__media {
	position:   relative;
	overflow:   hidden;
	background: var(--alm-color-surface-subtle);
	/* Aspect ratio — override per card type */
	aspect-ratio: 4 / 3;
}

.alm-card__media img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

/* Media placeholder when no image is present */
.alm-card__media--placeholder {
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           var(--alm-color-text-muted);
}

.alm-card__body {
	display:        flex;
	flex-direction: column;
	gap:            var(--alm-space-3);
	padding:        var(--alm-space-5);
	flex:           1; /* push footer to bottom */
}

.alm-card__header {
	padding:          var(--alm-space-5);
	padding-block-end: 0;
}

.alm-card__footer {
	padding:           var(--alm-space-4) var(--alm-space-5);
	border-top:        var(--alm-border-standard);
	background-color:  var(--alm-color-surface-subtle);
	display:           flex;
	align-items:       center;
	justify-content:   space-between;
	gap:               var(--alm-space-3);
	flex-wrap:         wrap;
}

/* ─── Card title ──────────────────────────────────────────────────── */

.alm-card__title {
	font-size:   var(--alm-text-md);
	font-weight: var(--alm-weight-semibold);
	color:       var(--alm-color-text-primary);
	margin:      0;
	line-height: var(--alm-leading-snug);
}

.alm-card__title a {
	color:           inherit;
	text-decoration: none;
}

.alm-card__title a:hover {
	color:           var(--alm-color-navy-primary-90);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Stretch-link pattern: makes the whole card clickable
   while preserving independent inner link accessibility */
.alm-card__title a::after {
	content:  "";
	position: absolute;
	inset:    0;
}

/* Any secondary links inside the card must sit above the stretch overlay */
.alm-card a:not(.alm-card__title a) {
	position: relative;
	z-index:  var(--alm-z-raised);
}

.alm-card__subtitle {
	font-size:   var(--alm-text-sm);
	color:       var(--alm-color-text-secondary);
	margin:      0;
	line-height: var(--alm-leading-snug);
}

.alm-card__text {
	font-size:   var(--alm-text-sm);
	color:       var(--alm-color-text-secondary);
	margin:      0;
	line-height: var(--alm-leading-normal);
}

/* ─── Badge overlay on card media ─────────────────────────────────── */

.alm-card__badge-wrap {
	position:        absolute;
	inset-block-start: var(--alm-space-3);
	inset-inline-start:var(--alm-space-3);
	display:         flex;
	flex-direction:  column;
	gap:             var(--alm-space-1-5);
	z-index:         var(--alm-z-raised);
}

/* ─── Horizontal card layout ──────────────────────────────────────── */

.alm-card--horizontal {
	flex-direction: row;
}

.alm-card--horizontal .alm-card__media {
	width:        35%;
	flex-shrink:  0;
	aspect-ratio: auto;
}

.alm-card--horizontal .alm-card__body {
	flex: 1;
}

@media (max-width: 480px) {
	.alm-card--horizontal {
		flex-direction: column;
	}

	.alm-card--horizontal .alm-card__media {
		width:        100%;
		aspect-ratio: 4 / 3;
	}
}

/* ─── Ghost/skeleton state ────────────────────────────────────────── */

.alm-card--skeleton {
	pointer-events: none;
}

.alm-card--skeleton .alm-card__media,
.alm-card--skeleton .alm-card__title,
.alm-card--skeleton .alm-card__text {
	background:  linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
	background-size: 200% 100%;
	animation:   alm-shimmer 1.4s ease infinite;
	border-radius: var(--alm-radius-sm);
	color:       transparent;
}

@keyframes alm-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}


/* ═══════════════════════════════════════════════════════════════════
   BRAND FOUNDATION REFRESH — 2026
   ══════════════════════════════════════════════════════════════════ */

.alm-card {
	border-color: color-mix(in srgb, var(--alm-color-border) 88%, var(--alm-color-navy-primary));
	border-radius: var(--alm-radius-xl);
}

.alm-card--default,
.alm-card--interactive {
	box-shadow: var(--alm-shadow-xs);
}

.alm-card--interactive {
	will-change: transform;
}

.alm-card--interactive:hover {
	box-shadow: var(--alm-shadow-md);
	border-color: color-mix(in srgb, var(--alm-color-sand) 70%, var(--alm-color-border));
	transform: translateY(-4px);
}

.alm-card__media {
	background:
		linear-gradient(145deg, var(--alm-color-surface-warm), var(--alm-color-sand-light));
}

.alm-card__body {
	padding: clamp(1.125rem, 3vw, 1.5rem);
}

.alm-card__footer {
	background-color: color-mix(in srgb, var(--alm-color-surface-subtle) 72%, white);
}

.alm-card__title {
	letter-spacing: -0.012em;
}

@media (prefers-reduced-motion: reduce) {
	.alm-card--interactive:hover {
		transform: none;
	}
}