/**
 * Virgo — layout
 * Bands (full-bleed colour sections), containers, grids and the decorative
 * background treatments. Patterns compose these classes onto core/group.
 */

/* -------------------------------------------------------------------------
   1. Bands
   A band is a full-width group that paints a background and sets the local
   colour context. Vertical rhythm is owned here so sections stay consistent
   no matter what a pattern puts inside them.
   ---------------------------------------------------------------------- */

.virgo-band {
	position: relative;
	background-color: var(--virgo-bg);
	color: var(--virgo-text);
	/*
	 * One of three steps from the shared scale in base.css. A section never
	 * invents its own top/bottom padding — that is what made the vertical
	 * rhythm drift from page to page.
	 */
	padding-block: var(--section-space);
	/* Bands paint edge to edge; inner padding comes from the alignfull rules. */
	overflow: clip;
}

.virgo-band--tight {
	padding-block: var(--section-space-sm);
}

.virgo-band--loose {
	padding-block: var(--section-space-lg);
}

.virgo-band--flush-top {
	padding-block-start: 0;
}

.virgo-band--flush-bottom {
	padding-block-end: 0;
}

.virgo-band--surface {
	--virgo-bg: var(--wp--preset--color--surface);
}

.virgo-band--raised {
	--virgo-bg: var(--wp--preset--color--surface-2);
}

/* Headings and body text inside a light band must not inherit the dark
   defaults set in theme.json. */
.virgo-band--light,
.virgo-band--tinted {
	background-color: var(--virgo-bg);
	color: var(--virgo-text);
}

.virgo-band--light :is(h1, h2, h3, h4, h5, h6),
.virgo-band--tinted :is(h1, h2, h3, h4, h5, h6),
.virgo-band--light .wp-block-post-title,
.virgo-band--tinted .wp-block-post-title,
.virgo-band--light .wp-block-post-title a,
.virgo-band--tinted .wp-block-post-title a {
	color: var(--virgo-text);
}

.virgo-band--light :is(p, li, dd, dt, td, th, figcaption, blockquote),
.virgo-band--tinted :is(p, li, dd, dt, td, th, figcaption, blockquote) {
	color: inherit;
}

/* Buttons are excluded by class: a light band recolours prose links, never a
   call to action. `.elementor-button` belongs on that list too — it is an <a>,
   so without it the Elementor buttons in a light band lose their white label. */
.virgo-band--light a:not(.wp-block-button__link):not(.virgo-btn):not(.elementor-button):not(.virgo-card__overlay),
.virgo-band--tinted a:not(.wp-block-button__link):not(.virgo-btn):not(.elementor-button):not(.virgo-card__overlay) {
	color: var(--virgo-link);
}

.virgo-band--light a:not(.wp-block-button__link):not(.virgo-btn):not(.elementor-button):hover,
.virgo-band--tinted a:not(.wp-block-button__link):not(.virgo-btn):not(.elementor-button):hover {
	color: var(--virgo-link-hover);
}

.virgo-band--light hr,
.virgo-band--tinted hr,
.virgo-band--light .wp-block-separator,
.virgo-band--tinted .wp-block-separator {
	border-color: var(--virgo-line);
	color: var(--virgo-line);
}

/* -------------------------------------------------------------------------
   2. Containers
   Core's constrained layout gives us contentSize/wideSize. These modifiers
   handle the cases core cannot: a wider-than-wide shell and a narrow
   reading column for long-form pages.
   ---------------------------------------------------------------------- */

/*
 * The shell. One expression owns both the gutter and the maximum width, so
 * there is no band-padding-plus-inner-max-width interaction to reason about
 * and no way for the two to double up.
 */
.virgo-container {
	width: var(--virgo-content-shell);
	margin-inline: auto;
}

.virgo-container--narrow {
	width: var(--virgo-content-shell-prose);
}

.virgo-container--full {
	/* Kept as an alias: the site has one content width. */
	width: var(--virgo-content-shell);
}

/* -------------------------------------------------------------------------
   3. Decorative backgrounds
   Pure CSS — no images, no canvas, no libraries. Each is a single painted
   layer so it costs nothing to composite.
   ---------------------------------------------------------------------- */

.virgo-bg-aurora::before {
	content: "";
	position: absolute;
	inset: -30% -10% auto -10%;
	height: 130%;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(46% 40% at 18% 8%, rgba(139, 92, 246, 0.30) 0%, transparent 68%),
		radial-gradient(40% 38% at 84% 18%, rgba(236, 72, 153, 0.22) 0%, transparent 70%),
		radial-gradient(34% 34% at 62% 76%, rgba(251, 146, 60, 0.13) 0%, transparent 72%);
	filter: blur(6px);
}

.virgo-bg-grid::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 72px 72px;
	-webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 78%);
	mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 78%);
}

.virgo-band--light.virgo-bg-grid::after,
.virgo-band--tinted.virgo-bg-grid::after {
	background-image:
		linear-gradient(to right, rgba(10, 10, 25, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(10, 10, 25, 0.05) 1px, transparent 1px);
}

/* A one-pixel brand rule used to separate stacked dark bands. */
.virgo-rule-top::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.55) 22%, rgba(236, 72, 153, 0.45) 55%, rgba(251, 146, 60, 0.35) 78%, transparent 100%);
	z-index: 1;
}

/* Keep real content above every decorative layer. */
.virgo-band > * {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------------------
   4. Grids
   ---------------------------------------------------------------------- */

.virgo-grid {
	display: grid;
	gap: clamp(1rem, 2.2vw, 1.5rem);
	grid-template-columns: 1fr;
}

/*
 * The modifier names the column count at desktop, and it has to mean it.
 * auto-fit was fitting four 17.5rem tracks into a 1240px container, so
 * `--3` rendered four columns and any six-item grid — Why Virgo, the process
 * steps — broke as four plus two orphans.
 *
 * Columns are stated explicitly from the laptop breakpoint up, and auto-fit
 * still handles everything below it so nothing gets crushed on a tablet.
 */
.virgo-grid--2,
.virgo-grid--3,
.virgo-grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}

@media (min-width: 62rem) {
	.virgo-grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.virgo-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.virgo-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Split layout: text beside a panel. Stacks below the laptop breakpoint. */
/*
 * Columns start together at the top. Centring is right for a hero, where both
 * halves are short, but on a page like Contact it drops the form hundreds of
 * pixels below the sidebar it sits next to. Use --middle where centring is
 * actually wanted.
 */
.virgo-split {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
	grid-template-columns: 1fr;
}

.virgo-split--middle {
	align-items: center;
}

@media (min-width: 62rem) {
	.virgo-split {
		grid-template-columns: 1.05fr 0.95fr;
	}

	.virgo-split--wide-first {
		/* 60/40 — the narrower column still has to hold addresses and lists. */
		grid-template-columns: 1.2fr 0.8fr;
	}

	.virgo-split--reverse > :first-child {
		order: 2;
	}
}

/* Section header: eyebrow + heading on the left, supporting copy on the right. */
.virgo-section-head {
	display: grid;
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: end;
	margin-bottom: clamp(2rem, 4vw, 3.25rem);
	grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
	.virgo-section-head--split {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	}
}

.virgo-section-head > * {
	margin: 0;
}

.virgo-section-head h2 {
	margin: 0;
	max-width: 20ch;
}

/* -------------------------------------------------------------------------
   5. Core block layout corrections
   ---------------------------------------------------------------------- */

/* Full-bleed bands inside a constrained parent. */
.wp-site-blocks > .alignfull,
.wp-block-post-content > .alignfull {
	margin-inline: 0;
	width: 100%;
	max-width: none;
}

/*
 * A band paints full width and no longer supplies a horizontal padding —
 * the shell inside it is already inset by the gutter. Keeping both was what
 * made the side space read as gutter-plus-leftover rather than one value.
 */
.virgo-band > .wp-block-group {
	width: var(--virgo-content-shell);
	margin-inline: auto;
}

.virgo-band > .wp-block-group.alignfull {
	width: 100%;
}

/* Columns: never let core's flex columns overflow on small screens. */
.wp-block-columns {
	gap: clamp(1.25rem, 3vw, 2.5rem);
}

@media (max-width: 781px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		gap: clamp(1.5rem, 5vw, 2rem);
	}
}

.wp-block-column {
	min-width: 0;
}

/* Buttons block: consistent gap and sensible wrapping on mobile. */
.wp-block-buttons {
	gap: 0.75rem;
}

@media (max-width: 30rem) {
	.wp-block-buttons.virgo-buttons--stack-sm {
		display: grid;
		grid-template-columns: 1fr;
	}

	.wp-block-buttons.virgo-buttons--stack-sm .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons.virgo-buttons--stack-sm .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* Tables scroll inside their own box rather than widening the page. */
.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Embeds keep their ratio without a library. */
.wp-block-embed__wrapper {
	position: relative;
}

.wp-block-embed iframe {
	width: 100%;
}

/* -------------------------------------------------------------------------
   6. Page shell
   ---------------------------------------------------------------------- */

.wp-site-blocks {
	display: flow-root;
}

.virgo-main {
	display: block;
	min-height: 40vh;
}

/* The header is fixed; push the first band clear of it. */
.virgo-has-fixed-header .virgo-main {
	padding-top: var(--virgo-shell-h);
}

/* Hero bands absorb the header offset themselves for a flush look. */
.virgo-has-fixed-header .virgo-main > .virgo-hero:first-child {
	margin-top: calc(-1 * var(--virgo-shell-h));
	padding-top: calc(var(--virgo-shell-h) + clamp(3rem, 7vw, 6rem));
}

/* -------------------------------------------------------------------------
   7. Neutralise flow margins inside our own grid/flex containers
   Core's constrained layout adds vertical margins between siblings. Inside a
   grid or split container those margins fight the gap, so they are removed.
   ---------------------------------------------------------------------- */

.virgo-split > *,
.virgo-section-head > *,
.virgo-grid > *,
.virgo-steps > * {
	margin-block: 0;
}

/* Panels used as the second half of a split. */
.virgo-panel {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background-color: var(--virgo-bg-card);
	border: 1px solid var(--virgo-line);
	border-radius: var(--virgo-radius-xl);
}

.virgo-panel > * {
	margin-block: 0;
}

.virgo-panel > * + * {
	margin-block-start: 1rem;
}

/* Vertical stack helper with a consistent gap. */
.virgo-stack > * {
	margin-block: 0;
}

.virgo-stack > * + * {
	margin-block-start: 1rem;
}

.virgo-stack--lg > * + * {
	margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
}

/* -------------------------------------------------------------------------
   8. Elementor pages
   A page laid out in Elementor owns its own spacing, so the theme's band
   padding and constrained width step aside. Everything else — colours,
   typography, buttons — still comes from the Virgo design system.
   ---------------------------------------------------------------------- */

.virgo-elementor-page .virgo-main > .virgo-band {
	padding-block: 0;
}

.virgo-elementor-page .elementor {
	color: var(--virgo-text);
}

.elementor-widget-container > :first-child {
	margin-block-start: 0;
}

.elementor-widget-container > :last-child {
	margin-block-end: 0;
}

/* Elementor's own container should never exceed the site's wide width unless
   the section is explicitly set to full width. */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con.e-con-boxed > .e-con-inner {
	max-width: var(--virgo-wide);
}

/* -------------------------------------------------------------------------
   9. Grid balance

   A grid whose item count is not a multiple of its column count leaves a
   short final row. One card alone at the left edge reads as a mistake rather
   than a decision, and the site had six of them: the seven WordPress
   capability cards (3+3+1), four portfolio cards in a three-track grid
   (3+1), three cards in a two-track grid (2+1) and three five-step process
   grids declared at four columns (4+1).

   These rules make the short row deliberate. They are shared, so no page
   needs its own breakpoint patch, and none of them touch card content.
   ---------------------------------------------------------------------- */

@media (min-width: 62rem) {
	/*
	 * A single leftover card in a three-track grid moves to the middle track.
	 * Process steps are deliberately excluded below: a numbered sequence reads
	 * left to right, so 04-05 belongs under 01, not floating in the centre.
	 */
	.virgo-grid--3:not(.virgo-steps-counter) > :nth-child(3n + 1):last-child {
		grid-column: 2;
	}

	/* Same idea for a four-track grid, where the orphan spans the two middle
	   tracks rather than sitting at a quarter width. */
	.virgo-grid--4:not(.virgo-steps-counter) > :nth-child(4n + 1):last-child {
		grid-column: 2 / span 2;
	}
}

/*
 * Where :has() is available the count itself can choose a better track count,
 * which is the more intentional answer for the two cases that have one. Seven
 * capability cards become 4 + 3 and eight become 4 + 4 on a wide desktop; the
 * centring rule above stays as the fallback everywhere else.
 */
@supports selector(:has(*)) {
	/*
	 * 85rem, not 75rem. With the shell at 1280px a four-track row gives 249px
	 * per card at 1200px and 267px at 1280px, and a capability card carries a
	 * heading plus roughly twenty words — at that width it becomes a tall thin
	 * column. Four tracks only earn their place from 1360px up, where each is
	 * 285px or more. Below that the rule above already produces 3 + 3 with the
	 * seventh card centred, which is the intended fallback rather than an
	 * accident.
	 */
	@media (min-width: 85rem) {
		.virgo-grid--3:not(.virgo-steps-counter):has(> :nth-child(7):last-child),
		.virgo-grid--3:not(.virgo-steps-counter):has(> :nth-child(8):last-child) {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}

		/* Having widened the track count, the centring rule no longer applies. */
		.virgo-grid--3:not(.virgo-steps-counter):has(> :nth-child(7):last-child) > :nth-child(3n + 1):last-child,
		.virgo-grid--3:not(.virgo-steps-counter):has(> :nth-child(8):last-child) > :nth-child(3n + 1):last-child {
			grid-column: auto;
		}
	}

	@media (min-width: 62rem) {
		/* Three equal cards in a two-track grid are simply three columns. */
		.virgo-grid--2:not(.virgo-steps-counter):has(> :nth-child(3):last-child) {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}
}