/* ── Home Community block ───────────────────────────────────────────
   Blue full-width section with a heading, a portrait image (PNG that
   ships its own +/× decorative pattern), a yellow speech bubble whose
   tail points down-left into the image, and a 4-item list of
   gender/link-arrow inner blocks rendered in white.

   Layout (driven by named grid areas):
     mobile/tablet (<1024)  single column, order: heading → bubble → media → links
     desktop (≥1024)        2 columns — left: heading above media; right: bubble
                            above the links. Links sit at the bottom-right,
                            aligned with the bottom of the portrait.
─────────────────────────────────────────────────────────────────── */

.home-community {
	position: relative;
	background: var(--wp--preset--color--secondary, #3b3bff);
	color: #fff;
	padding-block: 2rem;
	overflow: hidden;
}

.home-community__inner {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 1rem;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"header"
		"bubble"
		"media"
		"content";
	gap: 1.5rem;
}

.home-community__inner .home-community__header {
	background-color: var(--wp--preset--color--secondary, #3b3bff);
}

@media (min-width: 768px) {
	.home-community { padding-block: 3rem; }
	.home-community__inner { padding-inline: 2rem; }
}

/* Desktop: portrait (left) + bubble (right) on the top row, then the links
   span the FULL width on their own bottom row as a 2-column grid. */
@media (min-width: 1024px) {
	.home-community__inner {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		grid-template-areas:
			"media    bubble"
			"content  content";
		gap: 2.5rem 4rem;
	}

	/* Heading sits on top of the image (top-left), no longer its own row.
	   Specificity bumped (.home-community__inner …) so these win over the
	   unconditional base rules declared later in the file. */
	.home-community__inner .home-community__header {
		grid-area: media;
		align-self: start;
		justify-self: start;
		z-index: 2;
		position: relative;
		pointer-events: none;
	}

	.home-community__heading-link {
		pointer-events: auto;
	}

	/* Image pinned to the top of the shared cell so the heading overlaps it. */
	.home-community__inner .home-community__media {
		align-self: start;
		z-index: 1;
	}
}

/* ≥1280: links move into the right column, sitting below the bubble and
   hugging the bottom of the portrait (which now spans both rows again).
   In the narrower right column they stack as a single column. */
@media (min-width: 1280px) {
	.home-community__inner {
		padding-inline: 4rem;
		grid-template-areas:
			"media  bubble"
			"media  content";
		gap: 2.5rem 5rem;
	}
}

/* ── Header / heading ────────────────────────────────────────────── */

.home-community__header   { grid-area: header; }
.home-community__bubble   { grid-area: bubble; align-self: start; }
.home-community__media    { grid-area: media; align-self: end; }
.home-community__content  { grid-area: content; }

.home-community__heading {
	margin: 0;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1;
	font-size: clamp(2rem, 4vw, 3.5rem);
	color: #fff;
}

/* Heading as a link: inherits the white heading look, turns orange on
   hover/focus and while tapped (:active) on touch devices. */
.home-community__heading-link {
	color: inherit;
	text-decoration: none;
	background-color: var(--wp--preset--color--secondary, #3b3bff);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	transition: color 0.25s ease;
}

.home-community__heading-link:hover,
.home-community__heading-link:focus-visible,
.home-community__heading-link:active {
	color: var(--wp--preset--color--primary, #f05023);
}

/* ── Yellow speech bubble (tail points down-left toward the image) ─ */

.home-community__bubble {
	position: relative;
	padding: 1.5rem 3rem 1.5rem 1.5rem;
	background: var(--wp--preset--color--highlight, #ffff42);
	color: var(--wp--preset--color--contrast, #000);
	max-width: 32rem;
	align-self: start;
}

.home-community__bubble-text {
	margin: 0;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.3;
	font-size: clamp(0.875rem, 1.2vw, 1.125rem);
	color: var(--wp--preset--color--contrast, #000);
}

/* The whole bubble becomes a link when a URL is set — keep it looking like
   a bubble (no underline, inherited colour) and grow the corner arrow on
   hover/focus to signal it's clickable. */
.home-community__bubble--link {
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.home-community__bubble .home-community__icon-arrow {
	position: absolute;
	right: 0.875rem;
	bottom: 0.875rem;
	width: 22px;
	height: 22px;
	color: var(--wp--preset--color--contrast, #000);
	stroke: currentColor;
	transform-origin: bottom right;
	transition: transform 0.25s ease;
}

.home-community__bubble--link:hover .home-community__icon-arrow,
.home-community__bubble--link:focus-visible .home-community__icon-arrow {
	transform: scale(1.35);
}

/* Tail: a solid yellow triangle hanging from the bottom of the bubble.
   The shape AND position mirror per breakpoint to always lean toward the photo:
     • < 1024 : centred, point at the bottom-RIGHT, aiming down at the photo
                stacked directly below.
     • ≥ 1024 : anchored left, point at the bottom-LEFT, aiming down-left
                toward the photo in the left column. */
.home-community__bubble::after {
	content: "";
	position: absolute;
	bottom: -28px;
	left: 50%;
	transform: translateX(-50%);
	width: 44px;
	height: 30px;
	background: inherit;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}

@media (min-width: 1024px) {
	.home-community__bubble::after {
		left: 36px;
		transform: none;
		clip-path: polygon(0 0, 100% 0, 0 100%);
	}
}

/* ── Media (PNG: woman + +/× decorative pattern) ─────────────────── */

.home-community__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

.home-community__image--placeholder {
	aspect-ratio: 3 / 4;
	background:
		repeating-linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.15),
			rgba(255, 255, 255, 0.15) 8px,
			rgba(255, 255, 255, 0.08) 8px,
			rgba(255, 255, 255, 0.08) 16px
		);
}

/* ── Inner-blocks slot (4 × gender/link-arrow) ───────────────────── */
/* Single column on mobile/tablet. On desktop (≥1024) the links become a
   2-column grid pinned to the bottom of the cell (align-content: end) so
   they line up with the foot of the photo. */

.home-community__content {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: min-content;
	align-content: end;
	gap: 0.5rem 2rem;
}

@media (min-width: 1024px) {
	.home-community__content {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(2, auto);
		grid-auto-flow: column;
		column-gap: 4rem;
	}
}

/* Declared after the ≥1024 rule so it wins the cascade at ≥1280: the links
   collapse back to a single column in the right-hand cell. */
@media (min-width: 1280px) {
	.home-community__content {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		grid-template-rows: repeat(4, auto);
		grid-auto-flow: column;
		column-gap: 4rem;
	}
}

/* The link-arrow block paints its visible underline via .gender-link-arrow's
   border-bottom (its own style.css), but its `borderColor` attribute only
   sets border-TOP-color inline. Force the underline + text + arrow to white
   so the links read against the blue background. */
.home-community .gender-link-arrow {
	color: #fff !important;
	border-bottom-color: #fff !important;
}

.home-community .gender-link-arrow:hover {
	color: var(--wp--preset--color--primary, #f05023) !important;
	border-bottom-color: var(--wp--preset--color--primary, #f05023) !important;
}

.home-community .gender-link-arrow .gender-link-arrow-icon,
.home-community .gender-link-arrow .gender-link-arrow-icon path {
	stroke: #fff;
}

.home-community .gender-link-arrow:hover .gender-link-arrow-icon,
.home-community .gender-link-arrow:hover .gender-link-arrow-icon path {
	stroke: var(--wp--preset--color--primary, #f05023) !important;
}

/* ── Editor-only tweaks ──────────────────────────────────────────── */

.editor-styles-wrapper .home-community { overflow: visible; }