/* ==========================================================================
   Dima Group - Home sections
   Certifications strip, about band, services grid, projects row, CTA band.
   Loaded after components.css and before responsive.css.

   The Home artboard is 1440px wide and every section sits on a 1328px inner
   row inside a 56px gutter (1440 - 2 x 56). That is wider than the 1100px
   --dima-layout-container used by the article-style pages, so the two are
   separate tokens: --dima-layout-row / --dima-layout-row-gutter for designed
   sections, --dima-layout-container for editor-authored article content.

   Section GROUNDS live on the <section> as .dima-section--dark / --warm /
   --gold-dark modifiers (see base.css). Nothing in this file hardcodes a
   surface or a text colour; every component reads the semantic aliases so it
   adapts to whichever ground it lands on.
   ========================================================================== */

/* The former local --dima-layout-section variable is gone: the 1328px row and
   its 56px gutter are now --dima-layout-row / --dima-layout-row-gutter in
   tokens.css, so every stylesheet centres the same row. */

/* NEEDS DESIGN: the Home sections are absolutely positioned on the Figma
   artboard, not stacked in an auto-layout frame, so the file specifies NO
   vertical gap between them. Every section below therefore uses the shared
   .dima-section block padding (--dima-space-9 = 64px top and bottom, so 128px
   between two neighbours). That is a consistent engineering default, not an
   approved value - the exact inter-section spacing needs design sign-off
   before launch. Change it in one place here, not per section. */
.dima-front-page .dima-section {
	padding-block: var(--dima-space-9);
}

/* Shared inner row for every Home section: the designed 1328px row inside the
   56px artboard gutter, capped at the 1440px design width. The row never grows
   past 1328px, so the discrete type scale is always used at the size it was
   drawn at instead of being scaled up on a wide monitor. */
.dima-certifications__inner,
.dima-about__inner,
.dima-services__inner,
.dima-projects__inner,
.dima-cta-band__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);
}

/* ==========================================================================
   1. Certifications - partner logo strip
   Figma: 1328 x 34 horizontal row, centered, gap 130px, seven marks. The
   section is transparent, so on Home the strip sits on white; on About Us
   (`Frame 11`) it sits on the gold-50 warm block.
   ========================================================================== */

/* The row must NEVER wrap: RTI dropping onto a second line on its own is the
   bug this replaces. `nowrap` plus shrinkable items keeps all seven on one
   line at every desktop width; the gap and the marks give ground instead.

   NEEDS DESIGN (unchanged, still open): the specified 130px gap is
   arithmetically impossible - seven marks at their exported proportions plus
   6 x 130px is wider than the 1328px row. The gap is clamped to what fits. */
.dima-certifications__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: clamp(16px, 4vw, 72px);
}

.dima-certifications__item {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Shrinkable, so seven marks always fit one line. */
	flex: 0 1 auto;
	min-width: 0;
}

.dima-certifications__logo {
	width: auto;
	height: auto;
	max-height: 34px; /* the 34px row height, verbatim */
	max-width: min(120px, 100%);
	object-fit: contain;
	/* On a dark ground the mixed-colour exports are flattened to one ivory
	   silhouette; on white (--dima-logo-filter: none) they show as designed. */
	filter: var(--dima-logo-filter);
	transition:
		opacity var(--dima-transition-base),
		filter var(--dima-transition-base);
}

/* The flattened silhouettes are held back slightly so the strip reads as one
   quiet row. On a light ground the marks keep their own weight. */
.dima-section--dark .dima-certifications__logo,
.dima-ground--dark .dima-certifications__logo {
	opacity: 0.75;
}

.dima-section--dark .dima-certifications__item:hover .dima-certifications__logo,
.dima-ground--dark .dima-certifications__item:hover .dima-certifications__logo {
	opacity: 1;
}

/* The same intent on a light ground, which is where Home actually renders it.
   Previously only the dark ground had a treatment, so the transition declared
   above could never fire and the strip read as seven pasted brand assets at
   seven different tonal weights instead of one quiet row of endorsements.
   Resting state holds the marks back; pointing at one brings it forward.
   :focus-within carries the same reveal for keyboard users. */
.dima-section--light .dima-certifications__logo,
.dima-ground--light .dima-certifications__logo,
.dima-section--warm .dima-certifications__logo,
.dima-ground--warm .dima-certifications__logo {
	opacity: 0.58;
	filter: grayscale(1);
}

.dima-section--light .dima-certifications__item:hover .dima-certifications__logo,
.dima-section--light .dima-certifications__item:focus-within .dima-certifications__logo,
.dima-ground--light .dima-certifications__item:hover .dima-certifications__logo,
.dima-ground--light .dima-certifications__item:focus-within .dima-certifications__logo,
.dima-section--warm .dima-certifications__item:hover .dima-certifications__logo,
.dima-section--warm .dima-certifications__item:focus-within .dima-certifications__logo,
.dima-ground--warm .dima-certifications__item:hover .dima-certifications__logo,
.dima-ground--warm .dima-certifications__item:focus-within .dima-certifications__logo {
	opacity: 1;
	filter: grayscale(0);
}

/* RTI ships as an opaque JPEG on a white card. On a light ground that card is
   invisible and needs no treatment at all. On a dark ground it cannot be
   flattened like the others - inverting lightens the mark and darkens the
   card, and `screen` then drops the now near-black card out. */
.dima-section--dark .dima-certifications__logo--on-white,
.dima-ground--dark .dima-certifications__logo--on-white {
	filter: invert(1);
	mix-blend-mode: screen;
	opacity: 1;
}

/* ==========================================================================
   2. About band
   Figma: the 577px text column `Main` on the LEFT (x = 72 .. 649) and the
   657 x 544 collage frame `img_about us home` on the RIGHT (x = 728 .. 1385).
   The gutters are asymmetric - 72px on the text side, 55/56px on the collage
   side - so the column gap is 728 - 649 = 79px.
   ========================================================================== */

/* DELIBERATE DEVIATION FROM FIGMA (approved by the client).
   The artboard insets this text column 16px further than the shared 1328px row
   - 72px instead of the 56px every other section uses. Read as an oversight in
   the source file rather than intent, and flattened to the shared gutter so all
   page content aligns on one edge. Restore the 72px only if design confirms the
   inset is intentional. */
.dima-about__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 79px;
	padding-inline: var(--dima-layout-row-gutter);
}

/* Figma frame `img_about us home`: 657 x 544 with clipsContent: true. The two
   photographs are absolutely positioned, both larger than the frame, and both
   CLIPPED by it - the visible result is one cohesive image, not two boxes.

   Every offset and size below is the Figma value expressed as a percentage of
   the 657 x 544 frame, so the whole collage scales as one piece at any width
   instead of needing new offsets per breakpoint. */
.dima-about__collage {
	position: relative;
	flex: 0 1 657px;
	width: 657px;
	max-width: 100%;
	aspect-ratio: 657 / 544;
	overflow: hidden; /* clipsContent: true */
}

.dima-about__photo {
	position: absolute;
	margin: 0;
	overflow: hidden;
}

/* Figma image fills are scaleMode: FILL. */
.dima-about__photo img,
.dima-about__photo picture {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* `IMG_0734 1`: offset (-425, -236), rendered 1388 x 1041.
   -425/657, -236/544, 1388/657, 1041/544. */
.dima-about__photo--back {
	inset-inline-start: -64.6879%;
	inset-block-start: -43.3824%;
	width: 211.2633%;
	height: 191.3603%;
}

/* `IMG_4777 1`: offset (-12, -239), rendered 714 x 951 - PORTRAIT, ~3:4, the
   same proportion the source file now has.
   -12/657, -239/544, 714/657, 951/544.

   RESOLVED: this crop used to look wrong - the photograph read sideways and
   the visible window looked arbitrary. That was an IMAGE ORIENTATION problem,
   not a layout one: the raw Figma image fill had lost its EXIF orientation and
   shipped landscape, so portrait offsets were being applied to a landscape
   file. The source has been rotated 90 deg clockwise and its derivatives
   regenerated (assets/images/home/about-collage-front.* is now 986 x 1314),
   and these verbatim Figma offsets now produce the designed crop: a landscape
   window onto the middle of the portrait photograph. Do NOT "correct" the
   offsets and do NOT swap the collage for a plain object-fit: cover.

   FIGMA NOTE: at these coordinates this frame spans (-12..702, -239..712) and
   therefore covers the whole 657 x 544 clip box, so the back photograph above
   is fully hidden by it. That is what the artboard specifies; it is reproduced
   verbatim rather than "corrected" by shrinking one of the two.
   TODO(design): confirm the back photograph is meant to be fully covered. */
.dima-about__photo--front {
	inset-inline-start: -1.8265%;
	inset-block-start: -43.9338%;
	width: 108.6758%;
	height: 174.8162%;
}

.dima-about__content {
	display: flex;
	flex-direction: column;
	flex: 0 1 577px;
	gap: var(--dima-space-8); /* 56px, from the Figma auto-layout */
	max-width: 577px;
}

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

.dima-about__title {
	color: var(--dima-text-heading);
	/* Figma: the "We craft" range is gold-400 (#C3A55D), SemiBold Italic. */
	--dima-emphasis-color: var(--dima-color-gold-400);
}

/* The heading is two visual lines inside one <h2>. */
.dima-about__title-line {
	display: block;
}

.dima-about__body {
	color: var(--dima-text);
}

.dima-about__actions {
	display: flex;
}

/* ==========================================================================
   3. Services - eight cards on a plain wrapped grid
   Figma `Main`: layoutMode HORIZONTAL with layoutWrap WRAP, gap 48, container
   1328px, cards 296px. The child coordinates are unambiguous:
     cards 1-4  y = 0
     cards 5-8  y = 356
   Both rows start at a single consistent Y. There is NO stagger and no
   per-card offset - the differing card heights are only content length.

   This section is the one dark body section on Home: fill ink-800 (#161616),
   applied through .dima-section--dark on the <section>.

   The cards have no fill, border or radius in the design: icon, title and
   description sit directly on the section ground.
   ========================================================================== */

.dima-services__inner {
	display: flex;
	flex-direction: column;
	gap: var(--dima-space-9); /* 64px */
}

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

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

.dima-services__title {
	color: var(--dima-text-heading);
	/* Figma: the "your home" range is gold-300 (#D9AE47), SemiBold Italic. */
	--dima-emphasis-color: var(--dima-color-gold-300);
}

/* Figma stores the headline as "Everything \nyour home needs". The newline is
   an authored hard break, so the two lines are block spans inside one <h2> and
   the break holds at every width instead of reflowing. */
.dima-services__title-line {
	display: block;
}

/* A plain four-column wrapped grid. Row 2 starts at one consistent Y, which is
   exactly what the artboard coordinates say (y = 0 and y = 356). */
.dima-services__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--dima-space-6); /* 48px, the Figma layout gap on both axes */
	align-items: start;
}

/* No fill, no border, no radius, no padding: the design puts the icon, title
   and description straight onto the section ground. */
.dima-services__card {
	display: flex;
	flex-direction: column;
	gap: var(--dima-space-3);
	height: 100%;
	background-color: transparent;
	border: 0;
}

.dima-services__icon {
	color: var(--dima-accent-on-ground);
	transition: transform var(--dima-transition-base);
}

/* The card is the hover target, not the icon - the whole cell should feel
   live, and the icon is the only part of it that can move without shifting
   text. translateY does not reflow, so nothing around it moves. */
.dima-services__card:hover .dima-services__icon,
.dima-services__card:focus-within .dima-services__icon {
	transform: translateY(-3px);
}

.dima-services__card-title {
	color: var(--dima-text-heading);
}

.dima-services__card-description {
	color: var(--dima-text);
}

/* ==========================================================================
   4. Projects - four featured project cards
   Figma: 752px title block (gap 16px), then a 1328px row of four 320 x 563
   cards with a 16px gap, then a centered button.
   ========================================================================== */

.dima-projects__inner {
	display: flex;
	flex-direction: column;
	gap: var(--dima-space-9); /* 64px */
}

/* Verbatim: the title block frame is 752px wide. */
.dima-projects__intro {
	display: flex;
	flex-direction: column;
	gap: var(--dima-space-3); /* 16px */
	max-width: 752px;
}

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

/* Verbatim: the heading TEXT BOX is 862px wide - wider than the 752px title
   block that holds it, which does not clip in Figma. The heading is therefore
   allowed to run past the block, which is what makes it wrap after "Miami's"
   and put the whole gold italic range on line two, as drawn. It stays well
   inside the 1328px row; responsive.css releases the fixed width below 900px
   so it never overflows a narrow viewport. */
.dima-projects__title {
	width: 862px;
	/* Do NOT add `max-width: 100%` here. The parent .dima-projects__title-block
	   is capped at 752px and this heading is MEANT to escape it - that overhang
	   is what makes the line wrap after "Miami's", as drawn. Clamping to 100%
	   pins the heading to 752px and silently rewrites the designed line break.
	   Measured: 862px -> 752px at 1440px.

	   Known and deliberately unfixed: between roughly 901px and 941px the row
	   is narrower than 862px, so the heading puts about 1px of horizontal
	   scroll into the document. Resolve it when tablet artboards exist rather
	   than by trading the line break for it. NEEDS DESIGN. */
	color: var(--dima-text-heading);
	/* Figma: the " most exclusive addresses" range is gold-400 (#C3A55D),
	   SemiBold Italic. */
	--dima-emphasis-color: var(--dima-color-gold-400);
}

.dima-projects__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--dima-space-3); /* 16px */
	align-items: start;
}

/* --------------------------------------------------------------------------
   Project card - Figma `Card`, 320 x 563

   Card frame:  radius 16, padding 16, inner gap 16, NO fill.
   Inner main:  288 wide, vertical gap 32.
   Image:       288 x 288 SQUARE, scaleMode FILL.
   Category:    a PILL (button instance), not bare text - see below.
   Text block:  288 wide, gap 16 - title 22 / description 16 / date 12.

   Shared verbatim by the Home row, the Projects archive and the projects bar.
   -------------------------------------------------------------------------- */

.dima-projects__card {
	display: flex;
	flex-direction: column;
	gap: var(--dima-space-3); /* 16px */
	height: 100%;
	padding: var(--dima-space-3); /* 16px */
	border-radius: 16px; /* verbatim from Figma */
	background-color: transparent; /* the frame has no fill */
}

.dima-projects__main {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--dima-space-5); /* 32px, the inner `main` gap */
}

/* 288 x 288 - a square, at any card width. */
.dima-projects__media {
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background-color: var(--dima-surface-raised);
}

.dima-projects__image {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Figma scaleMode: FILL */
	transition: transform var(--dima-transition-slow);
}

/* Contained entirely by .dima-projects__media, which is already
   overflow: hidden with a locked 1/1 aspect-ratio. The card does not grow,
   the grid does not reflow, and the crop stays exactly where Figma put it -
   only the pixels inside the window move. */
.dima-projects__card:hover .dima-projects__image,
.dima-projects__card:focus-within .dima-projects__image {
	transform: scale(1.04);
}

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

/* The category is a 215 x 24 button instance: gold-100 fill, 100px radius,
   padding 10px 16px, 8px gap, a 12px gold-700 label and a 16px right arrow.

   FIGMA DEFECT: the instance is 24px tall but declares 10px of vertical
   padding around a 15.6px line box (10 + 15.6 + 10 = 35.6). The two cannot
   both hold. The padding is reproduced verbatim and the height is allowed to
   follow, because clamping to 24px would clip the label.
   TODO(design): confirm the pill's height or its vertical padding. */
.dima-projects__category {
	display: inline-flex;
	align-items: center;
	gap: var(--dima-space-2); /* 8px */
	align-self: flex-start;
	max-width: 100%;
	padding: 10px 16px; /* verbatim from Figma */
	border-radius: 100px; /* verbatim from Figma */
	background-color: var(--dima-color-gold-100); /* #FBEFC9 */
	color: var(--dima-color-gold-700); /* #7A6530 */
	font-family: var(--dima-font-body);
	font-size: var(--dima-font-size-micro-button); /* 12px */
	line-height: var(--dima-line-height-micro-button);
	font-weight: var(--dima-font-weight-micro-button);
}

.dima-projects__category-label {
	min-width: 0;
}

.dima-projects__category-icon {
	flex: 0 0 auto;
}

.dima-projects__card-title {
	color: var(--dima-text-heading); /* #161616 on a light ground */
}

.dima-projects__description {
	color: var(--dima-text); /* #2F2F2F */
}

.dima-projects__date {
	margin-block-start: auto;
	color: var(--dima-text); /* #2F2F2F */
	font-size: var(--dima-font-size-micro-button); /* 12px */
	line-height: var(--dima-line-height-micro-button);
	/* Figma renders the date in caps. The stored value stays "jul, 2026" and
	   only the presentation is uppercased, so the data is never mangled. */
	text-transform: uppercase;
}

.dima-projects__actions {
	display: flex;
	justify-content: center;
}

/* ==========================================================================
   5. CTA band ("Frame 5") - pre-footer contact
   Figma: 1440 x 428 band, 1297px inner row, horizontal gap 81px. Left is the
   128 x 128 DIMA mark; right is a 547px column with a 58px vertical gap.
   ========================================================================== */

/* The band's fill is gold-900 (#332A12) - a dark WARM brown, not black. It is
   applied through the .dima-section--gold-dark ground modifier on the
   <section>, which also flips the text, accent and logo roles for it. */
.dima-cta-band {
	display: flex;
	align-items: center;
	min-height: 428px;
}

/* The band's content sits on the SAME 1328px row as every other section, so
   its mark lines up with the section content above it. Figma draws the inner
   frame 1297px wide, but the row only holds 128 + 81 + 547 = 756px of content:
   the missing 31px is empty trailing space, so honouring it would have pushed
   the whole band 15px to the right of every neighbour for no visual gain. */
.dima-cta-band__inner {
	display: flex;
	align-items: center;
	gap: 81px; /* from the Figma auto-layout */
	padding-block: var(--dima-space-9);
}

.dima-cta-band__mark {
	flex: 0 0 128px;
}

/* NEEDS DESIGN: the exported mark is near-black (#231F20) and would be
   invisible on the dark band, so it is flattened to an ivory silhouette. A
   light-on-dark export (or a gold one) should replace this. The filter comes
   from the ground modifier, so the same mark also works on a light block. */
.dima-cta-band__logo {
	width: 128px;
	height: 128px;
	filter: var(--dima-logo-filter);
}

.dima-cta-band__content {
	display: flex;
	flex-direction: column;
	flex: 0 1 547px;
	/* NEEDS DESIGN: Figma says 58px; 56px is the nearest step on the scale. */
	gap: var(--dima-space-8);
	max-width: 547px;
}

.dima-cta-band__title {
	color: var(--dima-text-heading);
	/* Figma: the "your project" range is gold-300 (#D9AE47), Bold Italic. */
	--dima-emphasis-color: var(--dima-color-gold-300);
}

/* Figma stores the headline as "Ready to take \nyour project to the next
   level?". The newline is an authored hard break, so the two lines are block
   spans inside one <h2> and the break holds at every width. */
.dima-cta-band__title-line {
	display: block;
}

.dima-cta-band__details {
	display: flex;
	flex-direction: column;
	gap: var(--dima-space-2);
	color: var(--dima-text);
}

.dima-cta-band__link {
	color: var(--dima-text);
	text-decoration: underline;
	text-decoration-color: var(--dima-accent-on-ground);
	text-underline-offset: 4px;
	transition: color var(--dima-transition-fast);
}

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