/* ==========================================================================
   Dima Group - Responsive

   =========================================================================
   !! READ THIS BEFORE CHANGING ANYTHING IN THIS FILE !!

   EVERYTHING BELOW 1440px IN THIS FILE IS AN ENGINEERING ASSUMPTION.

   The Figma source file contains a SINGLE artboard set, desktop only, at
   1440px wide. There are NO tablet artboards and NO mobile artboards. No
   breakpoint, reflow, stacking order, type scale ramp-down, or navigation
   collapse below 1440px was specified by design.

   A WordPress site cannot ship desktop-only, so the rules below are a
   reasonable, conservative interpretation authored by engineering:
     - proportions are preserved where possible,
     - the desktop reading order is preserved when stacking,
     - type is stepped down rather than re-scaled fluidly, so the design
       system's discrete text styles stay recognisable.

   NONE OF IT IS APPROVED DESIGN. It all requires design sign-off before
   launch. Items most likely to need a real design decision are marked
   "NEEDS DESIGN" inline.

   Breakpoints used (max-width, desktop-first to match the 1440 source):
     1200px - large laptop:   gutters collapse, hero content widens
      900px - tablet:         PRIMARY NAV COLLAPSES TO A HAMBURGER,
                              mega menu becomes a stacked accordion panel
      600px - phone:          single column, display type steps down
   ========================================================================== */

/* --------------------------------------------------------------------------
   <= 1200px - large laptop
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	:root {
		/* The 170px Figma gutter is a fixed value on a 1440 artboard; below
		   1200 it eats too much of the line length. NEEDS DESIGN. */
		--dima-layout-gutter: 72px;
		--dima-layout-row-gutter: 40px;
		--dima-hero-height: 620px;
	}

	.dima-mega-menu {
		padding: 40px 48px;
	}

	/* Eight 285px cards need 2496px of row. Below 1200 the track reflows to as
	   many ~240px columns as fit rather than scrolling horizontally.

	   .dima-mega-menu__list is a GRID (components.css:459). This block used to
	   say `flex-wrap: wrap` with `flex: 1 1 240px` on the item, and BOTH are
	   inert on a grid container - the breakpoint did nothing whatsoever.
	   auto-fit + minmax is the grid expression of that same intent, and it
	   also subsumes the orphan `max-width: 1180px` rule in components.css:470
	   (this file loads later, so this track wins below 1180 too).

	   NEEDS DESIGN. */
	.dima-mega-menu__list {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}

	.dima-primary-nav__list {
		gap: var(--dima-space-5); /* 50px -> 32px */
	}
}

/* --------------------------------------------------------------------------
   <= 900px - tablet. The primary nav collapses to a hamburger here.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	:root {
		--dima-layout-gutter: 32px;
		--dima-layout-row-gutter: 24px;
		--dima-header-height: 88px;
		--dima-hero-height: 560px;
		/* Display type steps down one notch. NEEDS DESIGN: the design system
		   defines no responsive type ramp at all. */
		--dima-font-size-display-h1: 44px;
		--dima-line-height-display-h1: 50px;
		--dima-font-size-h2-section: 36px;
		--dima-line-height-h2-section: 42px;
		--dima-font-size-h2-emphasis: 28px;
		--dima-line-height-h2-emphasis: 34px;
	}

	/* The bar is one row at every width; only the gutter and the mark shrink. */
	.dima-site-header__inner {
		gap: var(--dima-space-3);
		padding-inline: var(--dima-layout-gutter);
	}

	.dima-site-header__logo,
	.dima-site-header__branding .custom-logo-link {
		width: 64px;
		height: 64px;
	}

	.dima-nav-toggle {
		display: inline-flex;
	}

	/* The nav becomes an off-canvas-style panel dropped from the header bar.
	   Only enhanced (JS active) headers hide it; without JS it stays a plain
	   visible list so the site is still navigable. NEEDS DESIGN. */
	.dima-site-header.is-enhanced .dima-primary-nav {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		z-index: 25;
		background-color: var(--dima-color-ink-900);
		border-block-start: 1px solid var(--dima-color-ink-800);
		padding: var(--dima-space-4) var(--dima-layout-gutter) var(--dima-space-6);
		max-height: calc(100vh - var(--dima-header-height));
		overflow-y: auto;
	}

	.dima-site-header.is-enhanced .dima-primary-nav.is-open {
		display: block;
	}

	/* `stretch`, not `flex-start`.

	   Once flex-direction is column, align-items governs the HORIZONTAL axis,
	   so flex-start shrink-wrapped every item to its own max-content: the
	   SERVICES item measured 517px inside an 836px drawer, and the mega-menu
	   panel it contains inherited that width. The drawer looked correct on a
	   375px phone only because the viewport was narrower than the content;
	   the gap was visible from roughly 560px to 900px.

	   The links are inline-flex, so they still shrink-wrap to their own text
	   and nothing moves. Only the panel gains the full drawer width. */
	.dima-primary-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: var(--dima-space-4);
	}

	.dima-primary-nav__link,
	.dima-primary-nav__toggle {
		height: auto;
		font-size: var(--dima-font-size-body);
		line-height: var(--dima-line-height-body);
		padding-block: var(--dima-space-2);
	}

	/* The mega menu stops being a full-bleed overlay panel and becomes an
	   in-flow accordion body under the SERVICES item. NEEDS DESIGN. */
	.dima-mega-menu {
		position: static;
		min-height: 0;
		gap: var(--dima-space-4);
		padding: var(--dima-space-3) 0 var(--dima-space-4);
		border-block-start: 0;
	}

	/* One card per row inside the drawer.

	   This block used to say `flex-direction: column` with `flex: 1 1 auto` on
	   the item. Both are inert on a grid container, so the accordion never
	   stacked: the panel kept the two-column track and rendered eight cards
	   164px wide at a 375px viewport, with titles as long as "Motorized
	   Shading & Window Treatments" inside them. Measured in the browser with
	   the drawer actually open, not inferred from the stylesheet.

	   NEEDS DESIGN. */
	.dima-mega-menu__list {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--dima-space-2);
	}

	.dima-mega-menu__card {
		flex-direction: row;
		align-items: center;
		gap: var(--dima-space-3);
	}

	.dima-mega-menu__description {
		display: none;
	}

	.dima-hero__content {
		max-width: 100%;
	}
}

/* --------------------------------------------------------------------------
   <= 600px - phone
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	:root {
		--dima-layout-gutter: 20px;
		--dima-layout-row-gutter: 16px;
		--dima-header-height: 72px;
		--dima-hero-height: 480px;
		--dima-font-size-display-h1: 34px;
		--dima-line-height-display-h1: 40px;
		--dima-font-size-h2-section: 28px;
		--dima-line-height-h2-section: 34px;
		--dima-font-size-h2-emphasis: 24px;
		--dima-line-height-h2-emphasis: 30px;
		--dima-font-size-h3-subsection: 22px;
		/* FIGMA DEFECT (carried down): the desktop h3-subsection line-height of
		   28.8px is smaller than its 32px font-size. At this breakpoint we keep
		   the same defective RATIO rather than silently correcting it, so the
		   defect stays visible until design fixes the token. 22 x 0.9 = 19.8. */
		--dima-line-height-h3-subsection: 19.8px;
		--dima-font-size-body-large: 17px;
		--dima-line-height-body-large: 28px;
	}

	.dima-container {
		padding-inline: var(--dima-space-3);
	}

	.dima-section {
		padding-block: var(--dima-space-6);
	}

	/* components.css pins the 404 to 120px of block padding and never ramps it,
	   so a phone spent roughly a third of its viewport on empty ground above
	   and below four short lines. 120px is left intact from 601px up, where it
	   reads as deliberate space rather than as a gap. NEEDS DESIGN. */
	.dima-error-404 {
		padding-block: var(--dima-space-6);
	}

	.dima-hero__actions .dima-button--btn {
		width: 100%;
	}
}

/* ==========================================================================
   Home sections (certifications, about, services, projects, CTA band)

   Same caveat as everything else in this file: the Home artboard is 1440px
   only. Every rule below is an engineering interpretation, and each invented
   decision is marked NEEDS DESIGN.
   ========================================================================== */

/* --------------------------------------------------------------------------
   <= 1200px - large laptop
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	/* 577 + 79 + 657 = 1313 no longer fits. The collage keeps its proportion
	   and shrinks; the column gap drops to the 48px scale step. NEEDS DESIGN. */
	.dima-about__inner {
		gap: var(--dima-space-6);
	}

	.dima-about__content {
		gap: var(--dima-space-5);
	}

	/* Three columns, not the four the artboard draws: at a 901px viewport four
	   cards leave each one 181px wide (measured) for an icon, a title and a
	   two-line description. Three gives 252px.

	   This ALSO has to live in the Home block rather than beside the archive
	   rule further down, even though the two grids are meant to move together.
	   Every one of these queries is max-width, so at 375px the 1200, 900 and
	   600 blocks all match at equal specificity and the LAST one in the file
	   wins. Declared next to the archive it sat after Home's own 900 and 600
	   steps and pinned Home to three columns all the way down - 93px cards on
	   a phone. Measured, and the reason this rule is here. NEEDS DESIGN. */
	.dima-services__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--dima-space-5);
	}

	.dima-cta-band__inner {
		gap: var(--dima-space-6);
	}
}

/* --------------------------------------------------------------------------
   <= 900px - tablet
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	/* The about band stops being two columns and stacks text over image, which
	   preserves the desktop reading order (the text is the left column, so it
	   comes first in the source). NEEDS DESIGN. */
	.dima-about__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.dima-about__collage {
		flex: 0 0 auto;
		width: 100%;
	}

	.dima-about__content {
		flex: 0 0 auto;
		max-width: none;
	}

	/* Two cards per row. NEEDS DESIGN. */
	.dima-services__list,
	.dima-projects__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Below 900px the 1328px row is narrower than the heading's 862px Figma
	   text box, so the fixed width is released and the heading wraps to the
	   row instead of overflowing it. NEEDS DESIGN. */
	.dima-projects__title {
		width: auto;
	}

	/* The band stacks the mark above the text. NEEDS DESIGN. */
	.dima-cta-band {
		min-height: 0;
	}

	.dima-cta-band__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--dima-space-6);
	}

	.dima-cta-band__content {
		flex: 0 0 auto;
		gap: var(--dima-space-6);
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
   <= 600px - phone
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	/* Seven marks on one line stop being legible on a phone, so this is the
	   ONE breakpoint where the strip is allowed to wrap. Above it the row
	   never wraps - see .dima-certifications__list in sections.css.
	   NEEDS DESIGN. */
	.dima-certifications__list {
		flex-wrap: wrap;
		gap: var(--dima-space-4) var(--dima-space-5);
	}

	.dima-certifications__logo {
		max-height: 24px;
		max-width: min(110px, 100%);
	}

	/* Single column. NEEDS DESIGN. */
	.dima-services__list,
	.dima-projects__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.dima-services__inner,
	.dima-projects__inner {
		gap: var(--dima-space-6);
	}

	.dima-cta-band__logo {
		width: 96px;
		height: 96px;
	}

	.dima-cta-band__mark {
		flex-basis: auto;
	}

	.dima-about__actions .dima-button--btn,
	.dima-projects__actions .dima-button--btn {
		width: 100%;
	}
}

/* ==========================================================================
   Service and project templates
   (single-service, archive-service, single-project, archive-project and the
   shared projects bar - see assets/css/post-types.css)

   Same caveat as everything else in this file: the artboards are 1440px only.
   Every rule below is an engineering interpretation and each invented decision
   is marked NEEDS DESIGN.
   ========================================================================== */

/* --------------------------------------------------------------------------
   <= 1200px - large laptop
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	/* 824 + 528 no longer fits. Both columns keep shrinking in proportion
	   rather than stacking this early. NEEDS DESIGN. */
	.dima-service__lead-inner {
		gap: var(--dima-space-3);
	}

	.dima-service__column {
		gap: var(--dima-space-4);
	}

	.dima-service__title {
		min-height: 0;
	}

	/* The PROJECTS archive is deliberately absent from this block: its three
	   432px cards compress rather than rewrap, so the row count keeps matching
	   the artboard all the way down to 900. NEEDS DESIGN. */

	/* The services archive steps to three here. Home's identical grid takes the
	   same step, but its rule has to be declared in the Home block further up
	   this file so it lands before Home's own 900 and 600 steps - see the note
	   there. The two are meant to stay in lockstep: change one, change both.
	   NEEDS DESIGN. */
	.dima-archive__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.dima-project__hero {
		min-height: 640px;
	}

	.dima-project__hero-panel {
		min-height: 0;
		padding-inline: var(--dima-space-6);
	}
}

/* --------------------------------------------------------------------------
   <= 900px - tablet
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	/* The service lead stops being two columns and stacks the hero over the
	   title column, preserving the desktop reading order. NEEDS DESIGN. */
	.dima-service__lead-inner {
		flex-direction: column;
		align-items: stretch;
	}

	.dima-service__hero,
	.dima-service__column {
		flex: 0 0 auto;
		max-width: none;
	}

	.dima-service__support-figure {
		flex: 1 1 260px;
	}

	.dima-archive__list,
	.dima-projects__list--archive,
	.dima-projects-bar__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dima-project__hero {
		min-height: 520px;
	}

	/* The overlay panel stops being a fixed 880px card and becomes a full
	   width band at the foot of the hero. NEEDS DESIGN. */
	.dima-project__hero-panel {
		width: 100%;
		max-width: 100%;
		margin-block-end: 0;
		padding: var(--dima-space-5) var(--dima-space-4);
	}

	/* THE MIXED GALLERY FRAMES ARE A DESKTOP EFFECT. The 12-column spans are
	   authored for a 1328px row; at this width a 4-column frame is barely
	   wider than a thumbnail, so the collage becomes a two-column grid and
	   every frame keeps only its own aspect ratio. The irregularity survives
	   as varying heights rather than varying widths. NEEDS DESIGN. */
	.dima-project__gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dima-project__gallery-grid .dima-project__gallery-item {
		grid-column: auto / span 1;
		grid-row: auto / span 1;
	}
}

/* --------------------------------------------------------------------------
   <= 600px - phone
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	/* Single column throughout. NEEDS DESIGN. */
	.dima-archive__list,
	.dima-projects__list--archive,
	.dima-projects-bar__list,
	.dima-project__gallery-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.dima-service__support-inner {
		flex-direction: column;
	}

	.dima-service__support-figure {
		flex: 0 0 auto;
	}

	.dima-project__hero {
		min-height: 420px;
	}

	.dima-project__chip.dima-button--label {
		min-width: 0;
	}

	.dima-projects-bar__main {
		gap: var(--dima-space-5);
	}

	.dima-projects-bar__inner {
		gap: var(--dima-space-6);
	}
}

/* ==========================================================================
   About Us page (intro copy, FOA badge, team grid)

   Same caveat as everything else in this file: the About Us artboard is
   1440px only. Every rule below is an engineering interpretation and each
   invented decision is marked NEEDS DESIGN.
   ========================================================================== */

@media (max-width: 1200px) {
	/* NEEDS DESIGN: the 1104px team row no longer fits beside the collapsing
	   gutters at five fixed 208px columns. The columns become fluid and keep
	   the 16px gap and the square photo, so the row still reads as one line
	   down to the tablet breakpoint. */
	.dima-team__list {
		grid-template-columns: repeat(5, minmax(0, 208px));
	}

	.dima-team__media,
	.dima-team__body {
		width: 100%;
	}

	.dima-team__media {
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

@media (max-width: 900px) {
	/* NEEDS DESIGN: display-h1 at 60px overflows a tablet column. Stepped down
	   to 44px/48px, matching how the rest of this file ramps display type. */
	.dima-about-intro__title {
		font-size: 44px;
		line-height: 48px;
	}

	.dima-about-intro__inner {
		gap: var(--dima-space-5);
	}

	/* NEEDS DESIGN: five people no longer fit on one line. Three across, then
	   two, which keeps the Figma left-to-right reading order. */
	.dima-team__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: var(--dima-space-6);
		justify-content: stretch;
	}

	/* NEEDS DESIGN: the 40px photo-to-text gap is generous once the cards are
	   narrower and stacked in rows. Reduced to 24px. */
	.dima-team__item {
		gap: var(--dima-space-4);
	}

	/* NEEDS DESIGN: 127px is a fixed desktop size. Held, but allowed to shrink
	   rather than crowd a narrow column. */
	.dima-foa__badge {
		width: min(127px, 30vw);
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

@media (max-width: 600px) {
	/* NEEDS DESIGN: phone step for the two-line page title. */
	.dima-about-intro__title {
		font-size: 34px;
		line-height: 40px;
	}

	.dima-about-intro__title,
	.dima-about-intro__body {
		max-width: none;
	}

	/* NEEDS DESIGN: two people across on a phone. One per row would make the
	   grid five screens tall for what is a supporting block, not the page. */
	.dima-team__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dima-team__item {
		gap: var(--dima-space-3);
	}
}

/* --------------------------------------------------------------------------
   Global motion preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* One carve-out. The blanket rule above is the right default, but it also
	   flattens the entrance crossfade to nothing, and a crossfade is not what
	   this preference protects against - translation, parallax and scaling are.
	   assets/js/motion.js already drops the rise and the stagger in this mode;
	   what is left is a plain change in opacity, which stays.

	   Scoped to .dima-motion-reduced so it can only ever apply to elements the
	   script itself marked, and only in the reduced variant. */
	.dima-motion-reduced .dima-reveal {
		transition-duration: 320ms !important;
	}
}