/* ==========================================================================
   Dima Group - About Us page

   Covers the About Us artboard (Figma 67:2021, 1440 x 1938): the title block
   and body copy, the standalone Fiber Optics Association badge, and the
   five-person team grid.

   The seven-logo certifications strip and the pre-footer CTA band on this page
   are the SAME parts the Home page uses and are styled in sections.css; there
   is deliberately nothing for them here.

   Loaded after post-types.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.
   ========================================================================== */

/* Shared inner row: the same 1328px content row every Home section sits on,
   inside the 56px artboard gutter and capped at the 1440px design width. */
.dima-about-intro__inner,
.dima-foa__inner,
.dima-team__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. Title block and body copy
   Figma: "Frame 7" 657 x 208 holding two display-h1 lines with a 16px gap,
   then two body paragraphs, both 545px wide.
   ========================================================================== */

.dima-about-intro__inner {
	display: flex;
	flex-direction: column;

	/* NEEDS DESIGN: the artboard gives no gap between the title frame and the
	   first paragraph. --dima-space-6 (48px) is an engineering default chosen
	   to sit between the 16px inside the title set and the 64px section
	   padding, so the block reads as one group. */
	gap: var(--dima-space-6);
}

.dima-about-intro__title {
	display: flex;
	flex-direction: column;

	/* Verbatim: the title set's 16px gap between its two lines.
	   NOTE: the two lines are a single 657x128 text node in Figma, not two
	   nodes with a gap between them, so this reproduces the line box rather
	   than an auto-layout gap. */
	gap: var(--dima-space-3);

	/* Verbatim: "Frame 7" is 657 x 208, and the 208 is fully accounted for -
	   the "title set" child carries 40px padding top and bottom around its
	   128px title group (40 + 128 + 40 = 208). Nothing is missing. */
	padding-block: 40px;

	/* Verbatim: "Frame 7" is 657px wide. */
	max-width: 657px;
	color: var(--dima-text-heading);
}

.dima-about-intro__body {
	display: flex;
	flex-direction: column;

	/* NEEDS DESIGN: the two paragraphs are separate 545px frames with no gap
	   recorded between them. --dima-space-4 (24px) is the paragraph rhythm
	   used elsewhere in the theme. */
	gap: var(--dima-space-4);

	/* Verbatim: both paragraph frames are 545px wide. */
	max-width: 545px;
}

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

/* ==========================================================================
   2. Standalone Fiber Optics Association badge
   Figma: a 127 x 127 mark below the partner strip, on its own.
   ========================================================================== */

.dima-foa__inner {
	display: flex;

	/* NEEDS DESIGN: the artboard gives the badge a size but no alignment.
	   Centred, which is how the logo strip directly above it reads. */
	justify-content: center;
}

.dima-foa__badge {
	/* Verbatim: 127 x 127. */
	width: 127px;
	height: 127px;
}

.dima-foa__image {
	width: 100%;
	height: 100%;

	/* The export is 388 x 387, i.e. very nearly square but not exactly.
	   `contain` keeps the seal round rather than shearing it by one pixel. */
	object-fit: contain;
}

/* ==========================================================================
   3. Team grid
   Figma: "Frame 10", 1104 x 319 - five 208 x 319 cards in a row, gap 16px.
   Each card: a 208 x 208 photo, a 40px gap, then a 208 x 71 text block with a
   16px inner gap.
   ========================================================================== */

.dima-team__list {
	display: grid;

	/* Verbatim: five fixed 208px columns with a 16px gap.
	   5 x 208 + 4 x 16 = 1104, the width Figma gives the frame. */
	grid-template-columns: repeat(5, 208px);
	gap: var(--dima-space-3);

	/* NEEDS DESIGN: the 1104px grid is narrower than the 1328px section row
	   and the artboard records no x offset for it. Centred, matching the
	   certifications strip and the CTA band. */
	justify-content: center;
}

.dima-team__item {
	display: flex;
	flex-direction: column;

	/* Verbatim: 40px between the photo and the text block. Not on the theme's
	   spacing scale, so it is written as a literal rather than rounded to a
	   token that would change the design. */
	gap: 40px;
}

.dima-team__media {
	/* Verbatim: a 208 x 208 square. */
	width: 208px;
	height: 208px;
	overflow: hidden;
}

.dima-team__image {
	width: 100%;
	height: 100%;

	/* The five exports are 333-416px wide and all 416 tall, i.e. three
	   different aspect ratios. They are cropped to the square the design draws
	   rather than letterboxed. */
	object-fit: cover;
	object-position: center top;
}

.dima-team__body {
	display: flex;
	flex-direction: column;

	/* Verbatim: 16px between the name and the role. */
	gap: var(--dima-space-3);
	width: 208px;
}

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

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