/* ==========================================================================
   Dima Group - Service and Project templates

   Covers the service detail page (Figma 145:2075), the project detail page
   (Figma 67:1667), the projects archive (Figma 67:2424), the services archive
   (NO ARTBOARD - see archive-service.php) and the shared projects bar
   (Figma 1440 x 909).

   Loaded after sections.css and BEFORE responsive.css, so every narrow
   viewport rule in responsive.css still wins. Desktop rules only live here.

   Like every other stylesheet in this theme, values copied from Figma are
   verbatim and anything invented is marked NEEDS DESIGN.
   ========================================================================== */

/* ==========================================================================
   0. Shared card link

   The card partials put the anchor on the title rather than around the whole
   card, so the accessible name stays "Key Biscayne Residence" instead of the
   entire card read aloud. This stretches the anchor's hit area back over the
   card so a mouse can still click anywhere on it.

   NEEDS DESIGN: the cards carry no link treatment in Figma at all. The gold
   title on hover reuses the link colour already used elsewhere.
   ========================================================================== */

.dima-services__card,
.dima-projects__card {
	position: relative;
}

.dima-card-link {
	color: inherit;
	text-decoration: none;
	/* Every button on the page eases at --dima-transition-fast; without this
	   the 12 card titles were the only interactive text that snapped. That
	   inconsistency in state TIMING between sibling components is felt before
	   it is noticed. */
	transition: color var(--dima-transition-fast);
}

.dima-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Above the card's own background, below anything interactive that a
	   future design might add inside the card. */
	z-index: 1;
}

.dima-card-link:hover,
.dima-card-link:focus-visible {
	color: var(--dima-accent-on-ground);
}

/* The stretched pseudo-element swallows the focus ring, so it is drawn on the
   card instead of on the invisible anchor box. */
.dima-card-link:focus-visible {
	outline: none;
}

.dima-services__card:has(.dima-card-link:focus-visible),
.dima-projects__card:has(.dima-card-link:focus-visible) {
	outline: 2px solid var(--dima-focus-ring);
	outline-offset: 4px;
}

/* ==========================================================================
   1. Archive headers (services and projects)
   Figma (projects): 752px title block at a 16px gap, then a 657px intro.
   ========================================================================== */

.dima-archive__header {
	display: flex;
	flex-direction: column;
	gap: var(--dima-space-3); /* 16px */
	max-width: 752px;
}

.dima-archive__eyebrow {
	color: var(--dima-accent-on-ground);
}

.dima-archive__intro {
	max-width: 657px;
	margin-block-start: var(--dima-space-4);
	color: var(--dima-text);
}

/* The page header content sits on the same 1328px row as every section rather
   than the narrower 1100px article container, inside the same 56px gutter. */
.dima-page-header > .dima-container {
	max-width: calc(var(--dima-layout-row) + 2 * var(--dima-layout-row-gutter));
	padding-inline: var(--dima-layout-row-gutter);
}

/* ==========================================================================
   2. Services archive grid

   NO ARTBOARD EXISTS. Everything here is an engineering assumption needing
   design sign-off - see the header comment in archive-service.php.
   ========================================================================== */

/* NEEDS DESIGN: the archive grid is deliberately IDENTICAL to Home's
   .dima-services__list, and the two step together in responsive.css.

   They share one card component (template-parts/cards/service-card.php), so
   any width where they show a different number of columns is a difference the
   client sees between two pages showing the same thing. They used to diverge:
   this file said four, responsive.css walked the archive down to three at
   1200 while Home held four all the way to 900. Measured at 901px that gave
   Home 181px cards against the archive's 252px, for the same card.

   An intrinsic repeat(auto-fit, minmax(N, 1fr)) track was tried here and
   rejected - the reasoning is on the rule below.

   Both grids now walk 4 -> 3 (1200) -> 2 (900) -> 1 (600). The three-column
   step exists because four cards at 901px leaves each one 181px wide, which
   is not enough for an icon, a title and a two-line description. */
.dima-archive__list {
	/* Back to a fixed four, identical to .dima-services__list on Home, because
	   an intrinsic `repeat(auto-fit, minmax(N, 1fr))` track cannot satisfy both
	   ends at once:

	     - a floor high enough to avoid absurd counts (260px) drops the archive
	       to three columns at 1280 while Home still shows four - measured, and
	       the opposite of the point;
	     - a floor low enough to hold four down to 1201 (236px or less) leaves
	       room for a FIFTH track at 1440, since 5*236 + 4*48 = 1372 fits inside
	       a 1328px row once the floor drops much further.

	   A fixed count handles a ninth service perfectly well - it wraps to a
	   third row - so the intrinsic track was solving a problem this grid does
	   not have. Both grids now step together in responsive.css. NEEDS DESIGN. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
}

/* ==========================================================================
   3. Projects archive grid
   Figma 67:2424: 1328px container, 16px gap, cards 432 x 649 with a 400px
   inner column at a 32px vertical gap - three per row
   (3 x 432 + 2 x 16 = 1328).
   ========================================================================== */

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

/* The archive card is 432 x 649 with a 400px inner column at a 32px vertical
   gap - the same `main` gap the 320px Home card uses, so the shared card needs
   no override here at all. The image stays a square at any card width. */

/* ==========================================================================
   4. Projects bar (shared by both detail templates)
   Figma: band 1440 x 909; inner frame 1328 x 773 at a 64px vertical gap,
   holding a 1328 x 669 main (48px gap) and the 228 x 40 button.
   ========================================================================== */

/* Figma fills this band gold-50 (#FFFDF5), a warm off-white. The fill comes
   from .dima-section--warm on the <section>. */
.dima-projects-bar {
	border-block-start: 1px solid var(--dima-border);
}

.dima-projects-bar__inner {
	gap: var(--dima-space-9); /* 64px */
}

.dima-projects-bar__main {
	display: flex;
	flex-direction: column;
	gap: var(--dima-space-6); /* 48px */
}

/* NEEDS DESIGN: the bar shows three cards, not the four of the Home row - see
   template-parts/sections/projects-bar.php. */
.dima-projects-bar__list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The 862px heading text box belongs to the HOME projects section only. The
   bar re-uses the same block but writes its own, much shorter heading, so it
   takes the width of its 752px title block like any other text. */
.dima-projects-bar .dima-projects__title {
	width: auto;
}

/* ==========================================================================
   5. Service detail page
   Figma 145:2075: hero 824 x 815, title column 528 (gap 7) with a title set
   at gap 16, intro 472, two 432 x 440 supporting frames, body 657.
   ========================================================================== */

.dima-service__lead-inner,
.dima-service__support-inner,
.dima-service__body-inner {
	width: 100%;
	max-width: calc(var(--dima-layout-row) + 2 * var(--dima-layout-row-gutter));
	margin-inline: auto;
	padding-inline: var(--dima-layout-row-gutter);
}

/* NEEDS DESIGN: the artboard has no coordinates, so the hero and the title
   column are read as one row - see the header comment in single-service.php.
   824 + 528 = 1352 is 24px over the 1328 row, so both are allowed to shrink
   and the gap comes out of the overshoot. */
.dima-service__lead-inner {
	display: flex;
	align-items: flex-start;
	gap: var(--dima-space-4);
}

.dima-service__hero {
	flex: 0 1 824px;
	overflow: hidden;
	aspect-ratio: 824 / 815;
	background-color: var(--dima-surface-raised);
}

.dima-service__hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dima-service__column {
	display: flex;
	flex-direction: column;
	flex: 0 1 528px;
	max-width: 528px;
	/* NEEDS DESIGN: Figma gives a 7px gap inside the title block but nothing
	   between the title block and the intro. 32px keeps the intro from
	   crowding the eyebrow. */
	gap: var(--dima-space-5);
}

.dima-service__title-block {
	display: flex;
	flex-direction: column;
	gap: 7px; /* verbatim from Figma */
}

.dima-service__title-set {
	display: flex;
	flex-direction: column;
	gap: var(--dima-space-3); /* 16px */
}

.dima-service__icon {
	color: var(--dima-accent-on-ground);
}

.dima-service__title {
	color: var(--dima-text-heading);
	/* The Figma title group is 128px tall, i.e. two lines of h2-section at a
	   56px line height plus its own leading. Not fixed to 128px: a longer
	   service name has to be allowed to wrap onto a third line. */
	min-height: 128px;
}

.dima-service__eyebrow {
	color: var(--dima-accent-on-ground);
}

.dima-service__intro {
	max-width: 472px;
	color: var(--dima-text);
}

/* Two 432 x 440 frames. NEEDS DESIGN: the gap between them is not given;
   16px matches every other paired row in the design. */
.dima-service__support-inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dima-space-3);
}

.dima-service__support-figure {
	flex: 0 1 432px;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 432 / 440;
	background-color: var(--dima-surface-raised);
}

.dima-service__support-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* NEEDS DESIGN: the 657px body column is left-aligned inside the 1328px
   content row rather than centred on the page, matching the left-aligned
   title block above it. */
.dima-service__body-inner {
	color: var(--dima-text);
}

.dima-service__body-inner > * {
	max-width: 657px;
}

/* ==========================================================================
   6. Project detail page
   Figma 67:1667: full-bleed hero 1440 x 815 with an 880 x 333 overlay panel,
   657px title block (gap 7) with a 185 x 24 chip and a 601px intro, body 657,
   then the editorial gallery.
   ========================================================================== */

.dima-project__hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 815px;
	overflow: hidden;
}

.dima-project__hero-media {
	position: absolute;
	inset: 0;
}

.dima-project__hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* NEEDS DESIGN: the panel's fill and its offset from the bottom of the hero
   did not come across in the handoff. A translucent ink panel keeps the title
   legible over any photograph, which a solid fill from the ramp would not
   guarantee on a bright shot. */
.dima-project__hero-panel {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	width: 880px;
	max-width: calc(100% - 2 * var(--dima-space-4));
	min-height: 333px;
	margin-block-end: var(--dima-space-9);
	padding: var(--dima-space-6) calc((880px - 657px) / 2);
	background-color: color-mix(in srgb, var(--dima-color-ink-900) 88%, transparent);
	border: 1px solid rgba(247, 244, 236, 0.16);
}

/* The panel is a dark island over the photograph even though the page ground
   is white, so it carries its own ground modifier in the template. */

.dima-project__title-block {
	display: flex;
	flex-direction: column;
	gap: 7px; /* verbatim from Figma */
	width: 100%;
	max-width: 657px;
}

/* The 185 x 24 chip. It is a `label`-kind button, so it has no box of its own
   in the component; the box is added here. */
.dima-project__chip.dima-button--label {
	align-self: flex-start;
	min-width: 185px;
	min-height: 24px;
	justify-content: center;
	padding-inline: var(--dima-space-2);
	border: 1px solid var(--dima-accent-on-ground);
	/* Pill, like every other button box in the system - the base component
	   declares cornerRadius 100. Restated because this box is added here. */
	border-radius: 100px;
}

.dima-project__title {
	color: var(--dima-text-heading);
	/* The Figma title group is 168px tall - three lines of h2-section. Not a
	   fixed height, for the same reason as the service title. */
	min-height: 0;
}

.dima-project__intro {
	max-width: 601px;
	color: var(--dima-text);
}

.dima-project__body-inner {
	width: 100%;
	max-width: calc(657px + 2 * var(--dima-space-4));
	margin-inline: auto;
	padding-inline: var(--dima-space-4);
	color: var(--dima-text);
}

/* --------------------------------------------------------------------------
   Editorial gallery

   THE MIXED FRAME SIZES ARE INTENTIONAL and confirmed by the client. Do NOT
   normalise this to a uniform grid.

   A 12-column grid across the 1328px row with a 16px gap makes one column
   96px, so a span of n is 112n - 16 px wide. Each item carries its own span,
   row span and aspect ratio as custom properties written by
   single-project.php, straight from the artboard frame sizes.
   -------------------------------------------------------------------------- */

.dima-project__gallery-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--dima-space-3); /* 16px */
	width: 100%;
	max-width: calc(var(--dima-layout-row) + 2 * var(--dima-layout-row-gutter));
	margin-inline: auto;
	padding-inline: var(--dima-layout-row-gutter);
	/* Rows are sized by the items themselves; auto keeps a tall frame from
	   forcing every other row to match it. */
	grid-auto-rows: auto;
	align-items: start;
}

.dima-project__gallery-item {
	grid-column: span var(--dima-frame-span, 4);
	grid-row: span var(--dima-frame-rows, 1);
	overflow: hidden;
	aspect-ratio: var(--dima-frame-ratio, 1 / 1);
	background-color: var(--dima-surface-raised);
}

.dima-project__gallery-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}