/* ==========================================================================
   Babam Signature — homepage / curated-pattern sections (M2)
   --------------------------------------------------------------------------
   Mobile-first. Consumes the design tokens from babam-signature.css.
   All section components are namespaced under babam-* classes.

   IMAGE FALLBACK STRATEGY
   Each image-backed section layers the image ON TOP of a tasteful brand
   gradient:  background-image: url(...), <gradient>;
   If the image file is missing (e.g. assets/img/home-hero.jpg not added yet),
   the url() layer simply doesn't paint and the gradient shows — so the demo
   always looks premium. Drop real/AI/stock images into assets/img/ later using
   the exact filenames below; no code change needed. See assets/img/README.md.
   ========================================================================== */

/* --- Shared section rhythm ---------------------------------------------- */
.babam-section {
	padding-block: var(--babam-space-5);
	padding-inline: var(--babam-gutter);
}
.babam-section__title {
	font-size: var(--babam-text-xl);
	letter-spacing: var(--babam-tracking-tight);
	margin: 0 0 var(--babam-space-4);
}
.babam-eyebrow {
	font-size: var(--babam-text-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--babam-graphite);
	margin: 0 0 var(--babam-space-2);
}
.babam-eyebrow--light { color: rgba(255, 255, 255, 0.72); }

/* --- Buttons (extends theme.json button) -------------------------------- */
.babam-btn .wp-block-button__link {
	border-radius: var(--babam-radius-pill);
	padding: 0.9rem 1.75rem;
	font-size: var(--babam-text-sm);
	font-weight: 600;
	transition: transform var(--babam-dur) var(--babam-ease), background-color var(--babam-dur) var(--babam-ease);
}
.babam-btn .wp-block-button__link:hover { transform: translateY(-1px); }
.babam-btn--invert .wp-block-button__link {
	background: var(--babam-white);
	color: var(--babam-ink);
}
.babam-btn--ghost .wp-block-button__link {
	background: transparent;
	color: var(--babam-white);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* --- Hero --------------------------------------------------------------- */
.babam-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 88svh;
	padding: var(--babam-gutter);
	padding-block-end: var(--babam-space-5);
	color: var(--babam-white);
	background-color: var(--babam-ink);
	background-image:
		url("../img/home-hero.jpg"),
		linear-gradient(160deg, #1b1b20 0%, #2a2a2e 45%, #3a3a40 100%);
	background-size: cover;
	background-position: center;
}
.babam-hero::after { /* legibility scrim */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 11, 0.65) 0%, rgba(10, 10, 11, 0.15) 45%, rgba(10, 10, 11, 0) 75%);
	pointer-events: none;
}
.babam-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--babam-wide);
	margin-inline: auto;
}
.babam-hero .babam-eyebrow { color: rgba(255, 255, 255, 0.8); }
.babam-hero__title {
	font-size: var(--babam-text-2xl);
	line-height: var(--babam-leading-tight);
	letter-spacing: var(--babam-tracking-tight);
	color: var(--babam-white);
	max-width: 16ch;
	margin: 0 0 var(--babam-space-2);
}
.babam-hero__lead {
	font-size: var(--babam-text-md);
	color: rgba(255, 255, 255, 0.86);
	max-width: 40ch;
	margin: 0 0 var(--babam-space-3);
}
.babam-hero__actions { gap: 0.75rem; }

/* --- Category grid ------------------------------------------------------ */
.babam-cat-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--babam-space-2);
}
.babam-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 220px;
	padding: var(--babam-space-3);
	border-radius: var(--babam-radius-md);
	overflow: hidden;
	color: var(--babam-white);
	background-size: cover;
	background-position: center;
	transition: transform var(--babam-dur) var(--babam-ease-out);
}
.babam-cat:hover { transform: translateY(-2px); }
.babam-cat::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 11, 0.55), rgba(10, 10, 11, 0) 70%);
}
.babam-cat__title,
.babam-cat__link { position: relative; z-index: 1; color: var(--babam-white); margin: 0; }
.babam-cat__title { font-size: var(--babam-text-lg); }
.babam-cat__link { font-size: var(--babam-text-sm); margin-top: 0.25rem; }
.babam-cat__link a { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
/* Per-tile image slot + distinct gradient fallback */
.babam-cat--rorelse      { background-image: url("../img/category-movement.jpg"), linear-gradient(150deg, #23323a, #3c5560); }
.babam-cat--hem          { background-image: url("../img/category-home.jpg"),     linear-gradient(150deg, #3a322a, #5c4f40); }
.babam-cat--valbefinnande{ background-image: url("../img/category-wellness.jpg"), linear-gradient(150deg, #2c3a32, #4a5f50); }
.babam-cat--vardag       { background-image: url("../img/category-everyday.jpg"), linear-gradient(150deg, #2e2c3a, #4c485f); }

/* --- Signature showcase ------------------------------------------------- */
.babam-showcase__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--babam-space-3);
}
.babam-showcase__head .babam-section__title { margin: 0; }
.babam-showcase__all { margin: 0; font-size: var(--babam-text-sm); }
.babam-showcase__all a { color: var(--babam-graphite); text-decoration: none; }
.babam-cards {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 72%;
	gap: var(--babam-space-2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	margin-inline: calc(-1 * var(--babam-gutter));
	padding-inline: var(--babam-gutter);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.babam-cards::-webkit-scrollbar { display: none; }
.babam-card { scroll-snap-align: start; }
.babam-card__media {
	aspect-ratio: 4 / 5;
	border-radius: var(--babam-radius-md);
	background: linear-gradient(160deg, var(--babam-fog), var(--babam-mist));
	margin-bottom: var(--babam-space-2);
}
.babam-card__media--1 { background: linear-gradient(160deg, #e9e7e2, #cdcac2); }
.babam-card__media--2 { background: linear-gradient(160deg, #e3e6ea, #c4cad2); }
.babam-card__media--3 { background: linear-gradient(160deg, #e8e5e2, #cfc7bd); }
.babam-card__media--4 { background: linear-gradient(160deg, #e4e8e4, #c5cdc3); }
.babam-card__title { font-size: var(--babam-text-base); margin: 0 0 0.25rem; }
.babam-card__price { font-size: var(--babam-text-sm); color: var(--babam-graphite); margin: 0; }

/* --- Editorial ---------------------------------------------------------- */
.babam-editorial__media {
	aspect-ratio: 4 / 5;
	border-radius: var(--babam-radius-lg);
	background-color: var(--babam-fog);
	background-image: url("../img/editorial.jpg"), linear-gradient(160deg, #e7e4df, #cbc7bf);
	background-size: cover;
	background-position: center;
}
.babam-editorial__title {
	font-size: var(--babam-text-xl);
	letter-spacing: var(--babam-tracking-tight);
	margin: 0 0 var(--babam-space-2);
}
.babam-editorial__lead {
	font-size: var(--babam-text-md);
	color: var(--babam-ink-soft);
	margin: 0 0 var(--babam-space-3);
	max-width: 46ch;
}

/* --- Campaign ----------------------------------------------------------- */
.babam-campaign {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 60svh;
	padding: var(--babam-space-5) var(--babam-gutter);
	color: var(--babam-white);
	background-color: var(--babam-ink);
	background-image: url("../img/campaign.jpg"), linear-gradient(135deg, #16161a, #2f2f36 60%, #45454d);
	background-size: cover;
	background-position: center;
}
.babam-campaign::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(10, 10, 11, 0.6), rgba(10, 10, 11, 0.1));
}
.babam-campaign__inner {
	position: relative;
	z-index: 1;
	max-width: var(--babam-wide);
	margin-inline: auto;
	width: 100%;
}
.babam-campaign__title {
	font-size: var(--babam-text-2xl);
	line-height: var(--babam-leading-tight);
	letter-spacing: var(--babam-tracking-tight);
	color: var(--babam-white);
	max-width: 18ch;
	margin: 0 0 var(--babam-space-2);
}
.babam-campaign__lead { font-size: var(--babam-text-md); color: rgba(255, 255, 255, 0.86); margin: 0 0 var(--babam-space-3); max-width: 42ch; }

/* --- Value band --------------------------------------------------------- */
.babam-values { background: var(--babam-white); }
.babam-value__title { font-size: var(--babam-text-base); margin: 0 0 0.4rem; }
.babam-value__text { font-size: var(--babam-text-sm); color: var(--babam-graphite); margin: 0; }

/* --- Club teaser -------------------------------------------------------- */
.babam-club { background: var(--babam-paper); text-align: center; }
.babam-club__inner { max-width: 640px; margin-inline: auto; }
.babam-club__title { font-size: var(--babam-text-xl); letter-spacing: var(--babam-tracking-tight); margin: 0 0 var(--babam-space-2); }
.babam-club__lead { font-size: var(--babam-text-md); color: var(--babam-ink-soft); margin: 0 0 var(--babam-space-3); }
.babam-club__actions { justify-content: center; }

/* --- Footer ------------------------------------------------------------- */
.babam-footer {
	background: var(--babam-ink);
	color: rgba(255, 255, 255, 0.78);
	padding: var(--babam-space-5) var(--babam-gutter) var(--babam-space-3);
}
.babam-footer__logo { color: var(--babam-white); font-size: var(--babam-text-lg); margin: 0 0 0.5rem; }
.babam-footer__tagline { color: rgba(255, 255, 255, 0.6); font-size: var(--babam-text-sm); margin: 0; max-width: 32ch; }
.babam-footer__heading { color: var(--babam-white); font-size: var(--babam-text-sm); text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 var(--babam-space-2); }
.babam-footer__links { list-style: none; margin: 0; padding: 0; }
.babam-footer__links li { margin-bottom: 0.5rem; }
.babam-footer__links a { color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: var(--babam-text-sm); }
.babam-footer__links a:hover { color: var(--babam-white); }
.babam-footer__legal { margin-top: var(--babam-space-4); font-size: var(--babam-text-xs); color: rgba(255, 255, 255, 0.45); }

/* ==========================================================================
   Breakpoints — tablet (>= 600px) and desktop (>= 1024px)
   ========================================================================== */
@media (min-width: 600px) {
	.babam-cat-grid { grid-template-columns: 1fr 1fr; }
	.babam-cards {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, 1fr);
		grid-auto-columns: auto;
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}
}

@media (min-width: 1024px) {
	.babam-section { padding-block: var(--babam-space-6); }
	.babam-hero__title { max-width: 18ch; }
	.babam-cat { min-height: 320px; }
}