/*
 * Cards (Phase 3A — docs/COMPONENT-LIBRARY.md): category, brand, feature,
 * information cards. The product card is deliberately its own file
 * (components/product-card.css) — it carries far more state than these.
 * All cards share the same base surface/elevation/radius pattern from
 * docs/DESIGN-SYSTEM.md §5 ("base → elevated" layering).
 */

.bholats-card {
	background: var(--color-surface);
	border: var(--border-width-sm) solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-out);
}

a.bholats-card,
.bholats-card--interactive {
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

a.bholats-card:hover,
.bholats-card--interactive:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

a.bholats-card:focus-visible,
.bholats-card--interactive:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus), var(--shadow-md);
}

/* --- Category card ---
   Image/icon tile + label. The signature "trace" corner-mark appears only on
   hover/focus (docs/DESIGN-SYSTEM.md §6) — markup for the mark itself lives
   with the SVG partial, this only positions/reveals it. */

.bholats-category-card {
	position: relative;
	padding: var(--space-4);
	text-align: center;
}

.bholats-category-card__media {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-surface-sunken);
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-3);
	overflow: hidden;
}

/* Sized as a percentage of the container, not a fixed pixel padding —
   a fixed padding (e.g. 12px) eats a much larger share of a small card
   (dense desktop grid) than a large one (mobile), so it doesn't scale.
   82% keeps comfortable, proportional whitespace at every card size while
   making the artwork itself as large as possible without cropping or
   distorting it — max-width/max-height are a safety cap, not the driver. */
.bholats-category-card__media img {
	width: 82%;
	height: 82%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
}

/* Fallback icon (no category thumbnail set) — sized down from the box's
   full dimensions rather than stretched to fill it, and dimmed slightly so
   it reads as a placeholder glyph, not a real product photo (Phase 3C —
   docs/HOMEPAGE-IMPLEMENTATION.md). */
.bholats-category-card__media svg { width: 40%; height: 40%; color: var(--color-text-muted); }

.bholats-category-card__label {
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
}

.bholats-category-card__trace {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	width: 24px;
	height: 24px;
	opacity: 0;
	transform: translate(-2px, -2px);
	transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
	pointer-events: none;
}

a.bholats-category-card:hover .bholats-category-card__trace,
a.bholats-category-card:focus-visible .bholats-category-card__trace {
	opacity: 1;
	transform: translate(0, 0);
}

/* --- Brand card ---
   Logo-forward, minimal chrome — used in the Featured Brands rail and brand
   archive listings (docs/PRODUCT-DATA-MODEL.md §3). */

.bholats-brand-card {
	padding: var(--space-5);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 88px;
}

.bholats-brand-card__logo { max-height: 40px; width: auto; filter: grayscale(1); opacity: 0.75; transition: filter var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard); }

a.bholats-brand-card:hover .bholats-brand-card__logo,
a.bholats-brand-card:focus-visible .bholats-brand-card__logo { filter: grayscale(0); opacity: 1; }

/* --- Feature card ---
   Icon + heading + short copy — used for the delivery/warranty/payment/
   support reassurance strip (wireframes/homepage.html §15). Not a link. */

.bholats-feature-card {
	padding: var(--space-6);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
}

.bholats-feature-card__icon {
	width: var(--icon-xl);
	height: var(--icon-xl);
	color: var(--color-brand-blue);
	margin-bottom: var(--space-2);
}

.bholats-feature-card__title {
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
}

.bholats-feature-card__text {
	font-size: var(--text-xs);
	color: var(--color-text-secondary);
	line-height: var(--leading-relaxed);
}

/* --- Information card ---
   Generic content card for static pages, FAQ groups, account dashboard
   panels, etc. Just a padded surface with optional heading. */

.bholats-info-card {
	padding: var(--space-6);
}

.bholats-info-card__title {
	font-size: var(--text-h4);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	margin-bottom: var(--space-3);
}

.bholats-info-card--sunken {
	background: var(--color-surface-sunken);
	border-color: transparent;
	box-shadow: none;
}