/*
 Theme Name:   PassionClass
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ==========================================================================
   Section landing pages (/yoga, /wellness, /teaching) — see category.php
   Uses the Core Framework tokens already loaded site-wide (with fallbacks):
   --primary #4a5561 · --secondary #faf4ea · --tertiary #c2614e
   ========================================================================== */

/* --- Hero band ------------------------------------------------------------ */
body.category .pc-archive-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, #fdf8f0 0%, var(--secondary, #faf4ea) 55%, #f6e7d9 100%);
	padding: clamp(4rem, 7vw, 8rem) 0 clamp(3.2rem, 5vw, 6rem);
}

/* Soft organic shapes echoing the post illustrations (decorative only) */
body.category .pc-archive-hero::before,
body.category .pc-archive-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

body.category .pc-archive-hero::before {
	width: 44rem;
	height: 44rem;
	right: -10rem;
	top: -16rem;
	background: radial-gradient(circle at 35% 35%, rgba(194, 97, 78, 0.16), rgba(194, 97, 78, 0) 70%);
}

body.category .pc-archive-hero::after {
	width: 30rem;
	height: 30rem;
	right: 18rem;
	bottom: -14rem;
	background: radial-gradient(circle at 40% 40%, rgba(74, 85, 97, 0.1), rgba(74, 85, 97, 0) 70%);
}

body.category .pc-archive-hero .brxe-container {
	position: relative;
	z-index: 1;
}

body.category .pc-archive-hero-eyebrow {
	color: var(--pc-primary, #a30c0c);
	font-size: var(--text-s, 1.4rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 1.2rem;
}

body.category .pc-archive-hero-title {
	color: var(--pc-secondary, #2b2941);
	font-size: clamp(3.6rem, 5.5vw, 6.4rem);
	line-height: 1.08;
	margin-bottom: 1.6rem;
}

body.category .pc-archive-hero-desc {
	color: var(--primary, #4a5561);
	font-size: var(--text-m, 1.8rem);
	line-height: 1.65;
	max-width: 68ch;
}

body.category .pc-archive-hero-desc p {
	margin-bottom: 1em;
}

body.category .pc-archive-hero-desc p:last-child {
	margin-bottom: 0;
}

body.category .pc-archive-hero-count {
	display: inline-block;
	margin-top: 2.4rem;
	padding: 0.5rem 1.4rem;
	border-radius: var(--radius-full, 999rem);
	background: var(--tertiary, #c2614e);
	color: #fff;
	font-size: var(--text-xs, 1.26rem);
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* --- Card grid ------------------------------------------------------------ */
body.category .pc-archive-grid {
	padding-top: clamp(3.2rem, 5vw, 5.6rem);
	padding-bottom: clamp(4rem, 6vw, 7.2rem);
}

body.category .pc-archive-grid .bricks-layout-wrapper {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4rem;
}

@media (max-width: 767px) {
	body.category .pc-archive-grid .bricks-layout-wrapper {
		grid-template-columns: 1fr;
		gap: 3.2rem;
	}
}

body.category .pc-archive-grid .bricks-layout-item {
	margin: 0; /* Bricks gutter is replaced by grid gap */
	/* Bricks' layout script pins items to a measured grid-template-rows value
	   (computed before images load), which squashes the image slot. Block
	   display sidesteps it; equal heights come from the ul grid stretch. */
	display: block !important;
	grid-template-rows: none !important;
}

body.category .pc-archive-grid .bricks-layout-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--bg-surface, #fff);
	border-radius: var(--radius-l, 1.8rem);
	overflow: hidden;
	box-shadow: var(--shadow-s, 0 1.5px 3px hsla(0, 0%, 0%, 0.15));
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.category .pc-archive-grid .bricks-layout-item:hover .bricks-layout-inner {
	transform: translateY(-4px);
	box-shadow: var(--shadow-l, 0 3px 12px hsla(0, 0%, 0%, 0.15));
}

/* Fixed 3:2 image slot via the padding-top ratio technique: uniform cards
   regardless of source aspect ratio, no layout holes while images lazy-load,
   and immune to Bricks' own .image { aspect-ratio } / layout-script sizing. */
body.category .pc-archive-grid .image-wrapper {
	position: relative;
	height: 0 !important;
	padding-top: 66.667%; /* 3:2 */
	margin: 0;
	overflow: hidden;
	background: var(--secondary, #faf4ea);
}

body.category .pc-archive-grid .image-wrapper a {
	position: absolute;
	inset: 0;
	display: block;
}

body.category .pc-archive-grid .image-wrapper img {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover;
	transition: transform 0.35s ease;
}

body.category .pc-archive-grid .bricks-layout-item:hover .image-wrapper img {
	transform: scale(1.04);
}

body.category .pc-archive-grid .content-wrapper {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 1.4rem;
	padding: 2.4rem 2.8rem 2.6rem;
}

body.category .pc-archive-grid .content-wrapper h3 {
	font-size: var(--text-l, 2.2rem);
	line-height: 1.3;
	margin-bottom: 1.2rem;
}

body.category .pc-archive-grid .content-wrapper h3 a {
	color: var(--pc-secondary, #2b2941);
	text-decoration: none;
	transition: color 0.2s ease;
}

body.category .pc-archive-grid .bricks-layout-item:hover .content-wrapper h3 a {
	color: var(--tertiary, #c2614e);
}

/* Date */
body.category .pc-archive-grid .content-wrapper .dynamic[data-field-id="1"] {
	margin-top: auto;
	color: var(--primary, #4a5561);
	opacity: 0.75;
	font-size: var(--text-xs, 1.26rem);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* Pagination (if a section outgrows one page) */
body.category .pc-archive-grid .bricks-pagination {
	margin-top: 4rem;
	text-align: center;
}

body.category .pc-archive-grid .bricks-pagination a,
body.category .pc-archive-grid .bricks-pagination span {
	border-radius: var(--radius-s, 0.8rem);
}