/**
 * Virgo — responsive refinements
 *
 * Loaded last so it can settle anything the component files leave ambiguous.
 * The approach is fluid first: type, spacing and grids are already clamp() and
 * auto-fit based, so this file handles the specific places where a fluid rule
 * alone is not enough — dense header chrome, tables, long unbroken strings and
 * touch-target sizing.
 *
 * Reference widths checked: 320, 360, 375, 390, 430, 768, 1024, 1280, 1600.
 */

/* -------------------------------------------------------------------------
   1. Absolute overflow guards
   Nothing on this site may create a horizontal scrollbar. These are the
   containers most likely to try.
   ---------------------------------------------------------------------- */

.virgo-band,
.virgo-container,
.virgo-footer__inner,
.virgo-header__inner,
.virgo-topbar__inner {
	max-width: 100%;
}

/* Grid and flex children default to min-width:auto, which lets long words and
   wide media push a track past its share. This is the single most common cause
   of sideways scroll in a card layout. */
.virgo-grid > *,
.virgo-split > *,
.virgo-section-head > *,
.wp-block-group.is-layout-grid > *,
.virgo-card,
.virgo-card__body,
.virgo-footer__col,
.virgo-form__row > * {
	min-width: 0;
}

/*
 * Panels and stacks sit inside Elementor flex containers, whose children are
 * also min-width:auto by default. Without this a single long list line — "Design
 * and development handled by one company" in the About "In short" card — sizes
 * the widget to its own content and pushes past the panel's padded edge instead
 * of wrapping inside it.
 */
.virgo-panel,
.virgo-panel > *,
.virgo-stack > *,
.elementor .e-con > .elementor-widget,
.elementor .e-con > .e-con,
.elementor-widget-container {
	min-width: 0;
	max-width: 100%;
}

/* Anything that can contain a raw URL. */
.virgo-card__text,
.virgo-contact-item__value,
.virgo-footer__contact,
.virgo-livesite__host,
.virgo-prose p,
.virgo-prose li {
	overflow-wrap: break-word;
	word-break: break-word;
}

/*
 * List rows must be allowed to break, and `anywhere` (unlike `break-word`) also
 * shrinks the min-content width, which is what actually stops a flex or grid
 * track being sized by the longest line.
 */
.virgo-checklist li,
.wp-block-list.is-style-virgo-checklist li,
.virgo-panel li,
.virgo-panel p {
	overflow-wrap: anywhere;
}

/*
 * Tables scroll inside their own box, never the page. Article tables are now
 * wrapped by inc/tables.php, which supplies the scrolling box; these rules stay
 * as the fallback for a table that arrives some other way, and step aside
 * inside the wrapper so there is only ever one scroller.
 */
.virgo-prose table,
.wp-block-table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.virgo-tablewrap .virgo-prose table,
.virgo-tablewrap .wp-block-table,
.virgo-tablewrap table {
	overflow: visible;
}

.virgo-prose table table,
.wp-block-table table {
	display: table;
	min-width: 32rem;
}

/* -------------------------------------------------------------------------
   2. Touch targets
   Anything tappable gets at least 44px in its smaller dimension on touch
   devices, without inflating dense desktop chrome.
   ---------------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
	.virgo-btn,
	.wp-block-button__link,
	.virgo-iconbtn,
	.virgo-burger,
	.virgo-drawer__sub a,
	.virgo-footer__list a,
	.virgo-footer__legal a,
	.virgo-contact-social a {
		min-height: 44px;
	}

	.virgo-footer__list a,
	.virgo-footer__legal a {
		display: inline-flex;
		align-items: center;
	}

	.virgo-btn--link {
		min-height: 44px;
		align-items: center;
	}
}

/* -------------------------------------------------------------------------
   3. Header at the narrow end
   ---------------------------------------------------------------------- */

@media (max-width: 25rem) {
	/* 400px and below: reclaim horizontal space in the bar. */
	.virgo-header__inner {
		gap: 0.5rem;
	}

	.virgo-iconbtn,
	.virgo-burger {
		width: 2.5rem;
		height: 2.5rem;
	}

	.virgo-logo__mark {
		width: 1.9rem;
		height: 1.9rem;
		font-size: 0.95rem;
	}

	.virgo-logo__name {
		font-size: 0.9375rem;
	}
}

@media (max-width: 20.5rem) {
	/* 328px and below — the smallest phones still in use. */
	.virgo-logo {
		gap: 0.45rem;
	}

	.virgo-header__inner {
		gap: 0.35rem;
	}
}

/* The utility bar's positioning line is the first thing to go when the
   contact links need the space. */
@media (min-width: 64rem) and (max-width: 74rem) {
	.virgo-topbar__note {
		display: none;
	}

	.virgo-topbar__inner {
		justify-content: flex-end;
	}
}

/* Between the laptop breakpoint and a comfortable desktop, the nav is the
   tightest element in the bar. */
@media (min-width: 64rem) and (max-width: 79.999rem) {
	.virgo-menu > li > a,
	.virgo-menu > li > .virgo-menu__label {
		padding-inline: 0.5rem;
		font-size: 0.875rem;
	}

	.virgo-menu > li.current-menu-item > a::after,
	.virgo-menu > li.current-menu-ancestor > a::after,
	.virgo-menu > li.current-page-ancestor > a::after,
	.virgo-menu > li.current-menu-ancestor > .virgo-menu__label::after,
	.virgo-menu > li.current-page-ancestor > .virgo-menu__label::after {
		left: 0.5rem;
		right: 0.5rem;
	}

	.virgo-header__inner {
		gap: 0.75rem;
	}
}

/* -------------------------------------------------------------------------
   4. Hero and headings
   ---------------------------------------------------------------------- */

@media (max-width: 48rem) {
	.virgo-hero__title {
		max-width: 100%;
		letter-spacing: -0.025em;
	}

	.virgo-hero__lede,
	.virgo-lede {
		max-width: 100%;
	}

	.virgo-section-head {
		margin-bottom: 1.75rem;
	}

	.virgo-section-head h2 {
		max-width: 100%;
	}
}

/* Balanced headings look wrong once they wrap to four or more short lines. */
@media (max-width: 30rem) {
	:where(h1, h2, h3) {
		text-wrap: pretty;
	}
}

/* -------------------------------------------------------------------------
   5. Cards, grids and portfolio
   ---------------------------------------------------------------------- */

@media (max-width: 48rem) {
	.virgo-facts {
		grid-template-columns: 1fr;
	}

	.virgo-checklist {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 30rem) {
	.virgo-card__list li {
		font-size: 0.75rem;
	}

	.virgo-card__actions {
		gap: 0.4rem;
	}
}

/* Keep the preview image ratio locked so a slow image never shifts the card. */
.virgo-card--media .virgo-card__media,
.virgo-card--project .virgo-card__media {
	aspect-ratio: 16 / 10;
	background-color: var(--virgo-bg-raised);
}

.virgo-card--media .virgo-card__media img,
.virgo-card--project .virgo-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
   6. Forms
   ---------------------------------------------------------------------- */

@media (max-width: 40rem) {
	.virgo-form__row--2 {
		grid-template-columns: 1fr;
	}

	.virgo-form {
		gap: 1rem;
	}

	.virgo-enquiry .virgo-btn {
		width: 100%;
	}
}

/* Every text control stays at or above 16px so iOS does not zoom on focus. */
.virgo-input,
.virgo-select,
.virgo-textarea,
.virgo-search__input,
.wp-block-search__input {
	font-size: max(1rem, 16px);
}

/* -------------------------------------------------------------------------
   7. Case study page
   ---------------------------------------------------------------------- */

@media (max-width: 48rem) {
	.virgo-project-facts,
	.virgo-business-facts {
		gap: 1.5rem;
	}

	.virgo-project-shot img {
		border-radius: var(--virgo-radius-md);
	}
}

/* -------------------------------------------------------------------------
   8. Footer
   ---------------------------------------------------------------------- */

@media (max-width: 48rem) {
	.virgo-footer__top {
		gap: 2rem;
	}

	.virgo-footer__brand {
		max-width: 100%;
	}

	.virgo-footer__tagline {
		max-width: 100%;
	}
}

@media (max-width: 30rem) {
	.virgo-footer__social {
		flex-wrap: wrap;
	}
}

/* -------------------------------------------------------------------------
   9. Floating WhatsApp button
   It must never sit on top of a call to action or the footer's last row.
   ---------------------------------------------------------------------- */

@media (max-width: 30rem) {
	.virgo-wa-float {
		width: 3rem;
		height: 3rem;
		right: max(0.75rem, env(safe-area-inset-right));
		bottom: calc(0.75rem + env(safe-area-inset-bottom));
	}
}

/* Give the page a little breathing room at the very bottom so the button is
   never the last thing overlapping real content. */
.virgo-footer {
	padding-bottom: calc(clamp(1.5rem, 3vw, 2rem) + 3.5rem);
}

@media (min-width: 48rem) {
	.virgo-footer {
		padding-bottom: clamp(1.5rem, 3vw, 2rem);
	}
}

/* -------------------------------------------------------------------------
   10. Breadcrumbs
   ---------------------------------------------------------------------- */

@media (max-width: 30rem) {
	.virgo-breadcrumbs {
		font-size: 0.75rem;
	}

	.virgo-breadcrumbs ol {
		gap: 0.3rem;
	}
}

/* -------------------------------------------------------------------------
   11. Long-form reading measure
   ---------------------------------------------------------------------- */

@media (max-width: 48rem) {
	.virgo-prose > * {
		max-width: 100%;
	}

	.virgo-prose > :is(h2, h3, h4) {
		margin-top: 1.75em;
	}
}

/* -------------------------------------------------------------------------
   12. Tablet
   At 768–1023px the layout is between the mobile drawer and the desktop bar.
   Two-column grids are correct here; three would be cramped.
   ---------------------------------------------------------------------- */

@media (min-width: 48rem) and (max-width: 61.999rem) {
	.virgo-grid--3,
	.virgo-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-group.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.virgo-split {
		gap: 2.5rem;
	}
}

/* -------------------------------------------------------------------------
   13. Large desktop
   Stop the reading measure from becoming uncomfortably wide on a big monitor.
   ---------------------------------------------------------------------- */

/*
 * The 1600px gutter override that used to live here is gone. --virgo-gutter
 * already caps at 96px, and past roughly 1573px the 1400px max-width is what
 * decides the side space, so the override changed nothing except introducing
 * a visible jump from 88px to 48px exactly at 1600px.
 */
@media (min-width: 100rem) {
	.virgo-hero__title {
		max-width: 18ch;
	}
}

/* -------------------------------------------------------------------------
   14. Print
   ---------------------------------------------------------------------- */

@media print {
	.virgo-drawer,
	.virgo-search-panel,
	.virgo-topbar,
	.virgo-skip-link,
	.virgo-card__actions,
	.wp-block-buttons {
		display: none !important;
	}

	.virgo-main {
		padding-top: 0 !important;
	}

	.virgo-band {
		padding-block: 1rem !important;
		background: none !important;
		color: #000 !important;
	}

	.virgo-band :is(h1, h2, h3, h4, p, li) {
		color: #000 !important;
	}
}

/* -------------------------------------------------------------------------
   9. Layout hardening (2026-08-17 responsive pass)

   Added after unifying the site grid on --virgo-wide / --virgo-gutter. These
   are guards and clearances, not a second layout system: no !important, no
   per-page overrides, and every value comes from an existing token.
   ---------------------------------------------------------------------- */

/* A page must never scroll sideways. `clip` rather than `hidden` because
   `hidden` on the root silently breaks position: sticky further down. */
html {
	overflow-x: clip;
}

body {
	overflow-x: clip;
	max-width: 100%;
}

/* Anything that escapes its track still cannot widen the document. */
.virgo-band,
.virgo-container,
.virgo-footer__inner,
.virgo-header__inner,
.virgo-topbar__inner,
.elementor .e-con,
.elementor .e-con-inner {
	min-width: 0;
}

/* The floating WhatsApp button sits above the page. Give the last things on a
   page room to clear it rather than letting it cover a submit button or the
   footer's legal row. The header shell and drawer already stack above it, so
   search suggestions are unaffected. */
@media (max-width: 48rem) {
	.virgo-footer__legal {
		padding-bottom: 3.5rem;
	}

	.virgo-enquiry .virgo-form__actions,
	.virgo-form__actions {
		padding-bottom: 0.5rem;
	}
}

/* Hero: keep the two-column composition until it would actually be cramped,
   then stack text above the image slot rather than squeezing both. */
@media (max-width: 64rem) {
	.virgo-hero .virgo-split,
	.virgo-hero .virgo-split--wide-first {
		grid-template-columns: 1fr;
	}

	.virgo-hero .virgo-hero-slot,
	.virgo-hero .virgo-imgslot {
		max-width: 34rem;
	}
}

/* Long headings must scale rather than overflow; long unbroken strings in
   prose and tables must wrap rather than push the page wide. */
.virgo-hero__title,
h1,
h2,
h3 {
	overflow-wrap: break-word;
}

.virgo-prose a[href],
.virgo-prose code,
.wp-block-table td,
.wp-block-table th {
	overflow-wrap: anywhere;
}

/*
 * Card grids collapse by available width rather than by fixed breakpoints, so
 * no track is ever narrower than its content.
 *
 * The bound is 47.999rem, not 60rem. At 60rem this block overlapped the
 * 48-61.999rem tablet rule above and, being later in the file at equal
 * specificity, won inside that overlap. The column count then ran
 * 2 -> 3 -> 2 -> 3 as the viewport grew:
 *
 *     768-907px   2 columns  (auto-fit, 16rem tracks)
 *     908-960px   3 columns  (auto-fit found room for a third)
 *     961-991px   2 columns  (tablet rule, no longer overlapped)
 *     992px+      3 columns  (desktop rule)
 *
 * so widening the window from 960px to 961px removed a column. Ending this
 * block where the tablet band begins hands 768-991px to the tablet rule,
 * which states the intent directly - two columns, three would be cramped -
 * and leaves the auto-fit fallback doing the job it was written for, below
 * 768px where there is no fixed column count to fall back to.
 *
 * 47.999rem/48rem is the pairing this codebase already uses for that
 * boundary, so no new breakpoint value is introduced and 60rem leaves the
 * stylesheet entirely.
 */
@media (max-width: 47.999rem) {
	.virgo-grid--3,
	.virgo-grid--4 {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	}
}

@media (max-width: 40rem) {
	.virgo-grid--2,
	.virgo-grid--3,
	.virgo-grid--4 {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   15. Touch targets — the controls added or changed in this pass

   The coarse-pointer block above predates these. Turning the search submit
   from a text pill into a 32px icon button made it comfortably the smallest
   tappable thing on the site, and the drawer is exactly where it gets used on
   a phone. The list links added with the pillar cards and the contents panel
   have the same problem for the same reason: they are text, and text is short.

   Nothing here changes a desktop layout — it is all inside the coarse-pointer
   query, so a mouse still gets the compact chrome.
   ---------------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
	/* The field grows to hold a full-size control rather than the control
	   shrinking to fit the field. */
	.virgo-search__field,
	.virgo-drawer__search .virgo-search__field {
		min-height: 3.25rem;
	}

	.virgo-search__submit {
		width: 2.75rem;
		height: 2.75rem;
	}

	.virgo-search__clear {
		width: 2.75rem;
		height: 2.75rem;
	}

	.virgo-search__option {
		min-height: 2.75rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.virgo-pillarcard__links a,
	.virgo-toc__link,
	.virgo-metabar__item--action .virgo-btn,
	.virgo-contact-item__wa,
	.virgo-contact-method,
	.virgo-card--project .virgo-btn--ghost,
	.virgo-drawer__toggle,
	.virgo-megagroup__list a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	/* A tertiary text action is still a target. */
	.virgo-btn--tertiary,
	.virgo-btn--ghost {
		min-height: 44px;
		align-items: center;
	}

	/* The scrolling table box is reachable by touch drag; make sure the hint
	   under it is not so tight against the table that it is hard to read. */
	.virgo-tablewrap__hint {
		min-height: 1.5rem;
	}
}