/* ── Home Consulting block ──────────────────────────────────────────
   A single CSS grid drives three distinct layouts via grid-template-
   areas, so the same flat DOM re-flows per breakpoint:

   • mobile  (<1024): one column — header, yellow bubble, image,
                      outline bubble, links, CTA.
   • tablet  (≥1024): two columns — left: header / yellow bubble /
                      outline bubble; right: image. Links span full
                      width as a 2-up grid, CTA centred below.
   • desktop (≥1280): two columns — left: header / yellow bubble /
                      links / CTA; right: image + outline bubble.

   Reuses .gender-link-arrow markup from the link-arrow block, plus
   .wp-block-button / .wp-element-button from core.
─────────────────────────────────────────────────────────────────── */

.home-consulting {
	position: relative;
	padding-block: 1rem;
	overflow: hidden;
}

/* ── Grid container ──────────────────────────────────────────────── */

.home-consulting__inner {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 1rem;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"head"
		"yellow"
		"media"
		"outline"
		"content";
	row-gap: 1.5rem;
	align-items: start;
}

.home-consulting__header  { grid-area: head; }
.home-consulting__bubble--yellow  { grid-area: yellow; }
.home-consulting__media   { grid-area: media; }
.home-consulting__bubble--outline { grid-area: outline; }
.home-consulting__content { grid-area: content; }

@media (min-width: 768px) {
	.home-consulting__inner { padding-inline: 2rem; }
}

/* Tablet: two columns, links + CTA span full width below.
   Bubbles sit in their own column, so no overlap with the photo. */
@media (min-width: 1024px) {
	.home-consulting__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"head    media"
			"yellow  media"
			"outline media"
			"content content";
		column-gap: 3rem;
		row-gap: 2rem;
	}
}

/* Desktop: outline bubble overlaps the bottom of the photo, links stay left */
@media (min-width: 1280px) {
	.home-consulting__inner {
		padding-inline: 4rem;
		column-gap: 5rem;
		grid-template-areas:
			"head    media"
			"yellow  media"
			"content media"
			"content outline";
	}
}

/* ── Header (diamond + heading) ──────────────────────────────────── */

.home-consulting__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

.home-consulting__diamond {
	display: block;
	width: 64px;
	height: 40px;
	/* Sits above the word, indented from the left edge (over ~"КО"). */
	margin-left: clamp(1.5rem, 3vw, 3rem);
	background: url('../../assets/home/consulting-color.svg') no-repeat center / contain;
	transform: rotate(-30deg);
}

.home-consulting__heading {
	margin: 0;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1;
	font-size: clamp(2rem, 4vw, 3.5rem);
	color: var(--wp--preset--color--contrast, #000);
}

/* Heading as a link: inherits the heading look, turns orange on
   hover/focus and while tapped (:active) on touch devices. */
.home-consulting__heading-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}

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

/* ── Speech bubbles (shared) ─────────────────────────────────────── */

.home-consulting__bubble {
	position: relative;
	padding: 1.5rem 3rem 1.75rem 1.5rem;
	max-width: 32rem;
}

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

.home-consulting__bubble .home-consulting__icon-arrow {
	position: absolute;
	right: 1rem;
	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;
}

/* Bubbles can be links — keep them looking like bubbles, and nudge the
   bottom-right arrow up in size on hover/focus. */
.home-consulting__bubble--link {
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

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

/* Yellow bubble — solid fill, tail hangs from the bottom-right */

.home-consulting__bubble--yellow {
	background: var(--wp--preset--color--highlight, #ffff42);
}

.home-consulting__bubble--yellow::after {
	content: "";
	position: absolute;
	bottom: -26px;
	right: 36px;
	width: 40px;
	height: 26px;
	background: inherit;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Outline bubble — white fill + border. The tail is a thin slanted SVG
   pointer that reads as a continuation of the outline; its built-in white
   base masks the bubble's own top border where the mouth opens.
   Mirrored per breakpoint: < 1280 it sits on the right, ≥ 1280 on the
   left (so it always leans toward the portrait). */

.home-consulting__bubble--outline {
	background: #fff;
	border: 2px solid var(--wp--preset--color--contrast, #000);
	color: var(--wp--preset--color--contrast, #000);
	max-width: 30rem;
	/* Mobile: overlap the bottom of the portrait, like the design.
	   Reset on tablet (own column) and re-applied on desktop. */
	margin-top: -6.5rem;
	z-index: 2;
}

.home-consulting__bubble-outline-tail {
	position: absolute;
	top: -74px;
	right: 40px;
	width: 120px;
	height: 76px;
	color: var(--wp--preset--color--contrast, #000);
	transform: scaleX(-1);
	transform-origin: center;
	overflow: visible;
	pointer-events: none;
}

@media (min-width: 1280px) {
	.home-consulting__bubble-outline-tail {
		right: auto;
		left: 40px;
		transform: none;
	}
}

/* ── Media (portrait image) ──────────────────────────────────────── */

.home-consulting__media {
	min-width: 0;
	/* Mobile: nudge up so the yellow bubble's tail dips onto the photo. */
	margin-top: -1rem;
}

.home-consulting__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	filter: grayscale(1);
	object-fit: contain;
}

.home-consulting__image--placeholder {
	aspect-ratio: 3 / 4;
	background:
		repeating-linear-gradient(
			45deg,
			#f3f3f3,
			#f3f3f3 8px,
			#e9e9e9 8px,
			#e9e9e9 16px
		);
}

@media (min-width: 1024px) {
	.home-consulting__media { align-self: stretch; }
	.home-consulting__image { height: 100%; object-position: center; }
}

/* ── Links + CTA slot (4 × gender/link-arrow + 1 × core/buttons) ──── */

.home-consulting__content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.25rem 2.5rem;
	align-content: start;
	min-width: 0;
}

/* CTA stays centred relative to the links at every breakpoint */
.home-consulting__content > .wp-block-buttons {
	margin-top: 1.25rem;
	justify-content: center;
}

/* Tablet: links become a 2-up grid (column-first: 1-2 left, 3-4 right),
   CTA spans both columns, centred. The block template locks the slot to
   exactly four links + one buttons block, so explicit placement is safe. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.home-consulting__content {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto auto auto;
		margin-top: 1.5rem;
	}
	.home-consulting__content > .gender-link-arrow-wrapper:nth-child(1) { grid-column: 1; grid-row: 1; }
	.home-consulting__content > .gender-link-arrow-wrapper:nth-child(2) { grid-column: 1; grid-row: 2; }
	.home-consulting__content > .gender-link-arrow-wrapper:nth-child(3) { grid-column: 2; grid-row: 1; }
	.home-consulting__content > .gender-link-arrow-wrapper:nth-child(4) { grid-column: 2; grid-row: 2; }
	.home-consulting__content > .wp-block-buttons {
		grid-column: 1 / -1;
		grid-row: 3;
	}
}

/* ── Bubble ↔ photo overlap (declared last so these win over the base
   margins regardless of source order) ────────────────────────────────
   • mobile  : outline bubble overlaps the bottom of the photo.
   • tablet  : bubbles live in their own column — no photo overlap, but
               the two stacked bubbles need room for both tails.
   • desktop : outline bubble overlaps the bottom of the photo again. */
@media (min-width: 1024px) {
	.home-consulting__media { margin-top: 0; }
	.home-consulting__bubble--outline { margin-top: 6rem; }
}

@media (min-width: 1280px) {
	.home-consulting__bubble--outline { margin-top: -8rem; }
}

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

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