/* image_collage.css — static six-photo collage (/contact, position 4).

   Values from the spec ## Computed Styles + the six tile positions measured
   verbatim off the Phase-A reference crop (the collage internals sit past the
   spec's depth-5 cutoff, so the img-col / tile geometry is reconstructed here —
   rule 26 own BEM hooks). The tiles are absolutely positioned inside the
   collage row because the source layout is a per-viewport scatter that
   REGROUPS at mobile (the desktop left/right clusters collapse to three even
   columns, mixing one tile from each cluster into the middle column) — a
   reflow no single flex/grid flow can express. Every left/top/width below is a
   recorded value, not an invented one (rule 19).

     1440 = base rules; 768 -> @media(max-width:991px); 375 -> @media(max-width:479px).
   Run breakpoint boundary set {479,767,991,1919}.
   Typography via var(--font-*) (framework-11 E1 lock; source family
   'Plus Jakarta Sans' resolves through the frozen tokens).
   Cross-component canonical classes (c-about_info__*, c-hero__*,
   c-careers_jointeam__*) are scoped under the component root so they never
   leak (rule 9). */

/* ============================ Section root ================================= */
.c-image_collage__section-image-collage {
  display: block;
  width: 100%;
  color: var(--color-text-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  /* SDC-preview UA body-margin neutraliser: the bare preview body carries an
     8px TOP margin only (left margin is already 0), so cancel just the top —
     a full `-8px` shifts the collage 8px left off the source axis. */
  margin: -8px 0 0 0;
}
.region-content .c-image_collage__section-image-collage {
  margin: 0;
  width: 100%;
}

/* ---- Outer padding wrapper (padding-global + padding-section-large) ------- */
.c-image_collage__section-image-collage .c-about_info__heading-wrap-5 {
  display: block;
  padding: 128px var(--space-40); /* no --space-128 token this run */
}

/* ---- Container (container-large cap, centred) ---------------------------- */
.c-image_collage__section-image-collage .c-about_info__heading-wrap {
  display: block;
  width: 100%;
  max-width: 1280px; /* source container-large cap; no --container-max token this run */
  margin-inline: auto;
}

/* ---- Columns (shared `column` canonical) -------------------------------- */
.c-image_collage__section-image-collage .c-careers_jointeam__column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}
.c-image_collage__section-image-collage .c-careers_jointeam__align-items-center {
  align-items: center;
  justify-content: center;
}

/* ============================ Collage ===================================== */
/* The row is the positioning context; tiles are absolutely placed within it.
   Explicit height reserves the collage band (spec collage row height 595.969px
   @1440) so the (empty) text column + section height match the source. */
.c-image_collage__section-image-collage .c-careers_jointeam__collage-img-row {
  position: relative;
  display: block;
  width: 100%;
  height: 596px;
}
/* img-col wrappers are structural only (spec DOM); tiles position off the row */
.c-image_collage__img-col {
  display: contents;
}
.c-image_collage__tile {
  position: absolute;
  display: block;
  width: 230px;
  height: auto;
  object-fit: cover;
}

/* six recorded tile positions, row-relative (px off the collage row top-left) */
.c-image_collage__tile--p0 { left: 0;      top: 0;    }   /* portrait,  left stack top */
.c-image_collage__tile--p1 { left: 0;      top: 366px; }  /* square,    left stack bottom */
.c-image_collage__tile--p2 { left: 250px;  top: 246px; }  /* landscape, left single (offset right) */
.c-image_collage__tile--p3 { left: 1050px; top: 38px;  }  /* landscape, right stack top */
.c-image_collage__tile--p4 { left: 799px;  top: 221px; }  /* landscape, right single (offset left) */
.c-image_collage__tile--p5 { left: 1050px; top: 212px; }  /* portrait,  right stack bottom */

/* ============================ Empty text column ========================== */
/* spec path 0.0.0.0.0.1 — present in markup, 0px tall on this instance. */
.c-image_collage__section-image-collage .c-about_info__heading-wrap-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  width: 668px;
  max-width: 100%;
}

/* ============================ Tablet: 768 band =========================== */
@media (max-width: 991px) {
  /* No container centring at this width (container fills the viewport), so the
     bare-preview body's 8px LEFT margin is no longer absorbed — cancel it too. */
  .c-image_collage__section-image-collage {
    margin: -8px 0 0 -8px;
  }
  .region-content .c-image_collage__section-image-collage {
    margin: 0;
  }
  .c-image_collage__section-image-collage .c-about_info__heading-wrap-5 {
    padding: 96px var(--space-40); /* no --space-96 token this run */
  }
  .c-image_collage__section-image-collage .c-careers_jointeam__collage-img-row {
    height: 327px; /* spec collage row height 327.188px @768 */
  }
  .c-image_collage__tile { width: 123px; }
  .c-image_collage__tile--p0 { left: 0;     top: 0;    }
  .c-image_collage__tile--p1 { left: 0;     top: 204px; }
  .c-image_collage__tile--p2 { left: 133px; top: 148px; }
  .c-image_collage__tile--p3 { left: 565px; top: 21px;  }
  .c-image_collage__tile--p4 { left: 432px; top: 123px; }
  .c-image_collage__tile--p5 { left: 565px; top: 122px; }
}

/* ============================ Mobile: 375 band ========================== */
/* the two clusters collapse to three even columns of two (p2+p4 form the
   middle column, one tile from each source cluster). */
@media (max-width: 479px) {
  .c-image_collage__section-image-collage .c-about_info__heading-wrap-5 {
    padding: 64px var(--space-16); /* spec padding 64px 16px @375 */
  }
  .c-image_collage__section-image-collage .c-careers_jointeam__collage-img-row {
    height: 280px; /* spec collage row height 280.234px @375 */
  }
  .c-image_collage__tile { width: 108px; }
  .c-image_collage__tile--p0 { left: 0;     top: 0;    }
  .c-image_collage__tile--p1 { left: 0;     top: 172px; }
  .c-image_collage__tile--p2 { left: 118px; top: 64px;  }
  .c-image_collage__tile--p3 { left: 236px; top: 19px;  }
  .c-image_collage__tile--p4 { left: 118px; top: 145px; }
  .c-image_collage__tile--p5 { left: 236px; top: 100px; }
}