/* ==========================================================================
   Babam Signature — Kadence-pattern styling layer (M2 spike)
   --------------------------------------------------------------------------
   Styles for Babam patterns built on Kadence blocks. Principle: KADENCE OWNS
   STRUCTURE (Row Layout / Column / Advanced Heading), BABAM OWNS DESIGN via the
   tokens in babam-signature.css and a dedicated `babam-kcat-*` class namespace.

   The namespace is intentionally separate from the core-block `.babam-cat-*`
   classes so this spike cannot disturb existing patterns/CSS. Visual values
   (gradients, radius, spacing) mirror the original Category Grid so the FRONT
   END design is unchanged.

   Selectors combine the Babam hook class WITH the stable Kadence class
   (e.g. `.babam-kcat.wp-block-kadence-column`) to win specificity over
   Kadence's single-class generated rules. Image fallback strategy is identical
   to babam-home.css: image layered over a brand gradient.

   Editor note: this file is enqueued on the FRONT END only. In the editor,
   Kadence renders the row/column structure natively (the structural "editor
   feel" win). Full in-editor visual parity is deferred to M2.1.
   ========================================================================== */

/* --- Section wrapper (outer Kadence Row Layout) ------------------------- */
.babam-kcat-section {
	padding-block: var(--babam-space-5);
}

/* Spacing between the two tile rows (2×2 grid built from two rows). */
.babam-kcat-row + .babam-kcat-row {
	margin-top: var(--babam-space-2);
}

/* --- Tiles (Kadence Columns) ------------------------------------------- */
.babam-kcat.wp-block-kadence-column {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 220px;
	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-kcat.wp-block-kadence-column:hover {
	transform: translateY(-2px);
}

/* Legibility scrim over the image/gradient. */
.babam-kcat::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 11, 0.55), rgba(10, 10, 11, 0) 70%);
	pointer-events: none;
}

/* Content sits above the scrim; Kadence puts content in .kt-inside-inner-col. */
.babam-kcat .kt-inside-inner-col {
	position: relative;
	z-index: 1;
	padding: var(--babam-space-3);
}

/* Tile typography (Advanced Headings inside the tile). */
.babam-kcat .wp-block-kadence-advancedheading {
	color: var(--babam-white);
	margin: 0;
}
.babam-kcat h3.wp-block-kadence-advancedheading {
	font-size: var(--babam-text-lg);
	line-height: var(--babam-leading-snug);
}
.babam-kcat p.wp-block-kadence-advancedheading {
	font-size: var(--babam-text-sm);
	margin-top: 0.25rem;
	color: rgba(255, 255, 255, 0.9);
}

/* Per-tile image slot + distinct gradient fallback (mirrors core-block grid). */
.babam-kcat--rorelse       { background-image: url("../img/category-movement.jpg"), linear-gradient(150deg, #23323a, #3c5560); }
.babam-kcat--hem           { background-image: url("../img/category-home.jpg"),     linear-gradient(150deg, #3a322a, #5c4f40); }
.babam-kcat--valbefinnande { background-image: url("../img/category-wellness.jpg"), linear-gradient(150deg, #2c3a32, #4a5f50); }
.babam-kcat--vardag        { background-image: url("../img/category-everyday.jpg"), linear-gradient(150deg, #2e2c3a, #4c485f); }

/* --- Desktop ----------------------------------------------------------- */
@media (min-width: 1024px) {
	.babam-kcat-section { padding-block: var(--babam-space-6); }
	.babam-kcat.wp-block-kadence-column { min-height: 320px; }
}