/* ==============================================
   Inspiration Button Grid
   Scoped to this layout only. Auto-enqueued by
   flexible-template.php when the layout is present.
   ============================================== */

/* Note: the `.sky-light-top-shape::before` blend-mode bug that used to be
   patched here is now fixed at source in style.css, so no override is needed. */

/* ----------------------------------------------
   Cream -> white section transition.

   The cream video section above ends in a hard horizontal line where its
   background image stops, because this section and the one below it are
   transparent (they show the white page behind).

   The theme's `soft-white-top-shape` asset is filled #f8f5f3 — the same cream
   as --color-soft-white — so it only reads as a torn edge when it paints CREAM
   OVER WHITE. Applied as a top-shape on this section it would sit above the
   boundary, cream-on-cream, and stay invisible.

   So it is flipped: rendered at this section's own top edge but pulled up over
   the boundary, giving the cream section above the same organic torn bottom
   the mountain graphic has, instead of a straight cut.
   ---------------------------------------------- */
.inspiration-button-grid-sec {
	position: relative;
	z-index: 0;
}

.inspiration-button-grid-sec::after {
	content: "";
	width: 100%;
	height: 52px;
	background-image: url('../../../assets/images/soft-white-top-shape.webp');
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	top: -1px;
	left: 0;
	pointer-events: none;
	transform: scaleY(-1);
	z-index: 1;
}

/* Spacing balance around the button grid.

   The shared .common-padding is 100px top+bottom on desktop. Two problems that
   creates here: the buttons sit hard up against the torn edge above them, and
   this section's bottom padding stacks with the messages section's own 100px
   top padding — leaving a ~200px gulf between the buttons and the subheader.

   So: more room at the top (clears the torn edge, drops the buttons down) and
   much less at the bottom (the next section supplies the remaining breathing
   room, tightening buttons-to-subheader). */
.inspiration-button-grid-sec.common-padding {
	padding-top: 90px;
	padding-bottom: 20px;
}

/* Trim the messages subheader's own top padding so the gap closes from both
   sides rather than only this one. Scoped to the section that directly follows
   the button grid, so no other page using center-content-section is affected. */
.inspiration-button-grid-sec + .center-content-section.common-padding {
	padding-top: 30px;
}

.inspiration-button-grid-sec .inspiration-grid-title {
	font-size: var(--font-size-40);
	margin: 0 0 40px 0;
}

.inspiration-button-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 900px;
}

.inspiration-button-grid > li.inspiration-button-item {
	margin: 0;
	padding: 0;
	display: flex;
}

.inspiration-button-grid > li.inspiration-button-item::before {
	all: unset;
}

/* Single buttons: keep the theme's global .common-button background image (the
   textured SVG pill) exactly as-is. `background-size: cover` scales it to fill the
   wider grid cell without distorting its corners the way `100% 100%` did, and the
   element's own border-radius clips it to a clean pill at any width. */
.inspiration-button-grid-sec .inspiration-button-grid .inspiration-button-item a.common-button.inspiration-grid-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 15px 20px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
	line-height: 1.2;
}

.inspiration-button-grid .inspiration-grid-button:hover,
.inspiration-button-grid .inspiration-grid-button:focus-visible {
	box-shadow: 0 10px 45px #02673938;
	color: var(--color-white);
}

.inspiration-button-grid .inspiration-grid-button:focus-visible {
	outline: 2px solid var(--color-dark-green);
	outline-offset: 2px;
}

/* --------------------------------------------
   Split button (Videos | Reels)
   Two independent anchors reading as one pill.
   Rebuilt with a gradient rather than the fixed
   264x52 SVG so the halves and divider align.
   -------------------------------------------- */
/* The container carries the theme's own `.common-button` class (see the layout
   template), so it inherits the real textured SVG background — noise filter,
   inner shadow and all — rather than a hand-copied approximation that would
   drift if the theme's button style ever changes. Only layout is set here. */
.inspiration-button-grid .split-button {
	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: 52px;
	padding: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	transition: 0.5s;
}

.inspiration-button-grid .split-button:hover,
.inspiration-button-grid .split-button:focus-within {
	box-shadow: 0 10px 45px #02673938;
}

.inspiration-button-grid .split-button-half {
	flex: 1 1 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px 12px;
	color: var(--color-white);
	font-family: "Inter Tight", sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.32px;
	line-height: normal;
	text-align: center;
	text-decoration: none;
	background-color: transparent;
	transition: background-color 0.3s ease;
	cursor: pointer;
}

.inspiration-button-grid .split-button-half:hover,
.inspiration-button-grid .split-button-half:focus-visible {
	background-color: rgba(255, 255, 255, 0.14);
	color: var(--color-white);
}

.inspiration-button-grid .split-button-half:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: -4px;
}

.inspiration-button-grid .split-button-divider {
	width: 1.5px;
	flex: 0 0 1.5px;
	background-color: rgba(255, 255, 255, 0.45);
	align-self: stretch;
	margin: 8px 0;
}

/* --------------------------------------------
   Responsive: 3 columns -> 2 -> 1
   -------------------------------------------- */
@media (max-width: 1024px) {
	.inspiration-button-grid-sec.common-padding {
		padding-top: 70px;
		padding-bottom: 16px;
	}

	.inspiration-button-grid-sec + .center-content-section.common-padding {
		padding-top: 24px;
	}

	.inspiration-button-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		max-width: 640px;
	}
}

@media (max-width: 767px) {
	.inspiration-button-grid-sec.common-padding {
		padding-top: 55px;
		padding-bottom: 12px;
	}

	.inspiration-button-grid-sec + .center-content-section.common-padding {
		padding-top: 20px;
	}

	.inspiration-button-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		max-width: 360px;
	}

	.inspiration-button-grid .split-button-half {
		font-size: 15px;
		padding: 14px 10px;
	}
}