/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Post Grid — blocks/post-grid/style.css
 *
 * Auto-enqueued by WordPress via "style": "file:./style.css" in block.json.
 * Never enqueue this manually in functions.php.
 *
 * Depends on tokens from css/global.css.
 * =====================================================================================================================
 */

.post-grid {
	--pg-pad-block   : var(--section-padding);
	--pg-stack-gap   : 3rem;       /* 48px ÷ 16 — between intro, grid and CTA */
	--pg-gap         : 1.5rem;     /* 24px ÷ 16 — between cards */
	--pg-radius      : 0.75rem;    /* 12px ÷ 16 */
	--pg-lh-body     : 1.625;      /* 1.625rem at 1rem — only this block uses it */
	--pg-btn-width   : 19.1875rem; /* 307px ÷ 16 */
	--pg-btn-height  : 3.5rem;     /* 56px ÷ 16 */

	box-sizing: border-box;
	padding: var(--pg-pad-block) var(--container-gutter);
}


/*
 * Background colours
 * ---------------------------------------------------------------------------------------------------------------------
 */

.post-grid--bg-white      { background: var(--clr-white);      color: var(--clr-charcoal-black); }
.post-grid--bg-cream      { background: var(--clr-cream);      color: var(--clr-charcoal-black); }
.post-grid--bg-warm-beige { background: var(--clr-warm-beige); color: var(--clr-charcoal-black); }
.post-grid--bg-rich-gold  { background: var(--clr-rich-gold);  color: var(--clr-white); }
.post-grid--bg-brown      { background: var(--clr-brown);      color: var(--clr-white); }
.post-grid--bg-black      { background: var(--clr-black);      color: var(--clr-white); }

.post-grid--bg-gradient-beige {
	background: var(--gradient-beige);
	color: var(--clr-charcoal-black);
}

.post-grid--bg-gradient-beige-top {
	background: var(--gradient-beige-top);
	color: var(--clr-charcoal-black);
}


/*
 * Layout
 * ---------------------------------------------------------------------------------------------------------------------
 */

.post-grid__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--pg-stack-gap);
}


/*
 * Intro
 * ---------------------------------------------------------------------------------------------------------------------
 */

.post-grid__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.post-grid__eyebrow {
	margin: 0;
	color: var(--clr-charcoal-black);
	font-family: var(--ff-body);
	font-size: var(--fs-eyebrow-lg);
	font-style: normal;
	font-weight: var(--fw-regular);
	line-height: normal;
}

.post-grid__heading {
	margin: 0;
	color: var(--clr-charcoal-black);
	font-family: var(--ff-heading);
	font-size: clamp(2rem, 3.6vw, var(--fs-heading-md));
	font-style: normal;
	font-weight: var(--fw-regular);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
	text-wrap: balance;
}

.post-grid__body {
	color: var(--clr-light-grey);
	font-family: var(--ff-body);
	font-size: var(--fs-body);
	font-style: normal;
	font-weight: var(--fw-regular);
	line-height: var(--pg-lh-body);
}

.post-grid__body > :first-child { margin-top: 0; }
.post-grid__body > :last-child  { margin-bottom: 0; }

.post-grid__body p {
	margin: 0 0 0.75em;
	color: inherit;
	font: inherit;
}

/* Keep the intro legible on the dark background options. */
.post-grid--bg-brown .post-grid__eyebrow,
.post-grid--bg-black .post-grid__eyebrow,
.post-grid--bg-rich-gold .post-grid__eyebrow,
.post-grid--bg-brown .post-grid__heading,
.post-grid--bg-black .post-grid__heading,
.post-grid--bg-rich-gold .post-grid__heading,
.post-grid--bg-brown .post-grid__body,
.post-grid--bg-black .post-grid__body,
.post-grid--bg-rich-gold .post-grid__body {
	color: inherit;
}


/*
 * Grid
 * ---------------------------------------------------------------------------------------------------------------------
 */

.post-grid__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--pg-gap);
}


/*
 * Card — the whole card is the <a>
 * ---------------------------------------------------------------------------------------------------------------------
 */

.post-grid a.post-grid__card {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--pg-radius);
	overflow: hidden;
	background: var(--clr-warm-beige);   /* shows if a post has no featured image */
	text-decoration: none !important;
	color: inherit;
}

.post-grid a.post-grid__card:focus-visible {
	outline: 2px solid var(--clr-copper-deep);
	outline-offset: 3px;
}

.post-grid--bg-brown a.post-grid__card:focus-visible,
.post-grid--bg-black a.post-grid__card:focus-visible,
.post-grid--bg-rich-gold a.post-grid__card:focus-visible {
	outline-color: var(--clr-white);
}

.post-grid__card-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

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

.post-grid__card-placeholder {
	width: 100%;
	height: 100%;
	background: var(--clr-warm-beige);
}

/* Scrim so the badge stays readable over any photograph. */
.post-grid__card::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgb(0 0 0 / 0.55) 0%,
		rgb(0 0 0 / 0.15) 40%,
		transparent 70%
	);
}

.post-grid__card-badge {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	z-index: 1;
	max-width: calc(100% - 2rem);
}

.post-grid__card-title {
	display: inline-block;
	padding: 0.375rem 0.875rem;
	border-radius: var(--radius-pill);
	background: rgb(255 255 255 / 0.92);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: var(--clr-charcoal-black);
	font-family: var(--ff-body);
	font-size: 0.9375rem;   /* 15px ÷ 16 */
	font-weight: var(--fw-medium);
	line-height: 1.4;
}

@media (hover: hover) {

	.post-grid__card-img {
		transition: transform var(--motion-slow) var(--ease-out-soft);
	}

	.post-grid__card:hover .post-grid__card-img,
	.post-grid__card:focus-visible .post-grid__card-img {
		transform: scale(1.04);
	}

}

@media (prefers-reduced-motion: reduce) {

	.post-grid__card:hover .post-grid__card-img,
	.post-grid__card:focus-visible .post-grid__card-img {
		transform: none;
	}

}


/*
 * Button — same pill as the other blocks
 * ---------------------------------------------------------------------------------------------------------------------
 * Replaces the old flat rich-gold button. The commented-out first draft in
 * the previous stylesheet is gone with it.
 */

.post-grid__actions {
	display: flex;
	justify-content: flex-start;
}

.post-grid a.post-grid__button {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;   /* 10px ÷ 16 */

	inline-size: min(100%, var(--pg-btn-width));
	min-height: var(--pg-btn-height);
	padding: 0.5rem 1.75rem;

	border: 0 solid var(--clr-copper-deep);
	border-radius: var(--radius-pill);
	overflow: hidden;

	background: var(--gradient-cta);
	color: var(--clr-white);

	font-family: var(--ff-body);
	font-size: var(--fs-btn);
	font-style: normal;
	font-weight: var(--fw-medium);
	line-height: 1.1875rem;   /* 19px ÷ 16 */
	letter-spacing: var(--ls-btn);
	text-align: center;
	text-transform: uppercase;
	text-decoration: none !important;

	transition:
		transform var(--motion-med) var(--ease-out-soft),
		box-shadow var(--motion-med) var(--ease-out-soft),
		color var(--motion-med) var(--ease-in-out-soft);
}

.post-grid a.post-grid__button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background: var(--gradient-cta-hover);
	transition: opacity var(--motion-med) var(--ease-in-out-soft);
}

.post-grid a.post-grid__button:hover::before,
.post-grid a.post-grid__button:focus-visible::before {
	opacity: 1;
}

/* The label MUST go dark on hover — --gradient-cta-hover starts at white. */
.post-grid a.post-grid__button:hover,
.post-grid a.post-grid__button:focus-visible {
	color: var(--clr-charcoal-black);
	transform: translateY(-1px);
	box-shadow: 0 0.75rem 1.5rem -0.5rem rgb(161 103 69 / 0.45);
}

.post-grid a.post-grid__button:active {
	transform: translateY(0);
}

.post-grid a.post-grid__button:focus-visible {
	outline: 2px solid var(--clr-copper-deep);
	outline-offset: 3px;
}

.post-grid__button-label {
	position: relative;
	color: inherit;
}

.post-grid__button-icon {
	position: relative;
	flex: 0 0 auto;
	display: block;
	width: 1rem;
	height: 1rem;
	overflow: hidden;
}

.post-grid__button-icon svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 1rem;
	height: 1rem;
}

.post-grid__button-icon svg:last-child {
	transform: translateX(-170%);
}

@media (prefers-reduced-motion: no-preference) {

	.post-grid__button-icon svg {
		transition: transform var(--motion-med) var(--ease-out-soft);
	}

	.post-grid__button:hover .post-grid__button-icon svg:first-child,
	.post-grid__button:focus-visible .post-grid__button-icon svg:first-child {
		transform: translateX(170%);
	}

	.post-grid__button:hover .post-grid__button-icon svg:last-child,
	.post-grid__button:focus-visible .post-grid__button-icon svg:last-child {
		transform: translateX(0);
		transition-delay: 60ms;
	}

}


/*
 * Editor empty state
 * ---------------------------------------------------------------------------------------------------------------------
 */

.post-grid__empty {
	padding: 2rem;
	border: 1px dashed var(--clr-copper-deep);
	border-radius: var(--radius-md);
	color: var(--clr-espresso);
	font-family: var(--ff-body);
	font-size: 0.9375rem;
}


/*
 * Responsive
 * ---------------------------------------------------------------------------------------------------------------------
 */

@media only screen and (max-width: 56.25em) {   /* 900px */

	.post-grid {
		--pg-pad-block: 3.75rem;
		--pg-stack-gap: 2.5rem;
	}

	.post-grid__grid {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media only screen and (max-width: 31.25em) {   /* 500px */

	.post-grid {
		--pg-pad-block: 2.5rem;
		--pg-gap: 0.75rem;
	}

	/* Two columns kept on phones, as originally specified. */
	.post-grid__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.post-grid__card-title {
		padding: 0.25rem 0.625rem;
		font-size: 0.8125rem;   /* 13px ÷ 16 */
	}

	.post-grid__heading br {
		display: none;
	}

	.post-grid a.post-grid__button {
		inline-size: min(100%, var(--pg-btn-width));
	}

}