/*
  FILE: csa-immersive.css
  PURPOSE: Styles specific to the CSA Immersive project page only, not
  reused by any other project (see project.css for the shared patterns
  every project page uses: header/Role/full-size image/Collaborators/
  Similar projects/etc, linked before this file). Covers two new
  section types this page needed that didn't exist anywhere else yet:
  a simple title + grid-of-images section (Original unit design), and
  the Final designs section, a full-bleed dark section with the same
  blue outline treatment as CSA Mobile's Final designs (csa-game.css)
  but without that section's soft background grid pattern or divider
  system: images 1, 2, 3, 4 and 7 run the section's full width, images
  5 and 6 sit side by side at a shared height instead, then a video,
  then a small closing icon + text in its own fixed-height box. Plus
  the mobile-only mask reset for the Full size image's portrait mobile
  crop (same technique used on CSA Mobile, SPYSCAPE Digital and CSA
  Spy Pack).
*/

/* ---- Role image: 5px corner radius, per Lucrecia's request ---- */
.project-role__image {
  border-radius: 5px;
}

/* ---- Section, Original unit design: title + grid of images ---- */
/* New pattern, no existing section on the site does this. 3 images
   (different aspect ratios: an exterior shot, an interior shot and a
   detail shot) in a simple 3-column CSS grid, 20px gap. object-fit:
   cover with a fixed 4:3 aspect ratio crops each to a consistent
   shape so the grid reads as one deliberate set rather than 3
   mismatched rectangles. */
.project-grid {
  padding: 50px 40px;
  box-sizing: border-box;
}

.project-grid__images {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.project-grid__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 5px; /* per the brief: this project's own corner radius, not the shared 10px --radius-image token */
}

/* ---- Section, Final designs: full-bleed dark background, blue outline ---- */
/* Same full-bleed technique and blue outline colours as CSA Mobile's
   Final designs section (project-final-designs in csa-game.css), but
   without that section's soft background grid pattern or divider
   system, per the brief: this one is a plain grid of images/gifs,
   ending in a video, instead of a collage of positioned feature
   blocks. */
.project-immersive-final {
  background: var(--color-csa-mobile-bg);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.project-immersive-final__inner {
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 60px 40px;
  border-left: 1px solid var(--color-csa-mobile-accent);
  border-right: 1px solid var(--color-csa-mobile-accent);
}

.project-immersive-final__stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Section title, white to sit on the dark background, same "title +
   30px gap" rhythm as Original unit design's title above (.project-grid
   H2 + 30px before its images). */
.project-immersive-final__title {
  margin: 0 0 50px; /* was 30px, per Lucrecia's request */
  color: var(--color-csa-mobile-text);
}

/* Images 1, 2, 3, 4 and 7: full container width, right out to the
   blue outline on both sides, instead of sitting inside .inner's 40px
   side padding like everything else in this section. Same negative-
   margin escape trick as CSA Mobile's closing image (project-final
   -designs__closing in csa-game.css): width adds back the 80px the
   padding would otherwise take out (40px each side), margin pulls it
   back flush with the outline. */
.project-immersive-final__full {
  display: block;
  width: calc(100% + 80px);
  margin: 0 -40px;
  height: auto;
}

/* Images 5 and 6: same width escape as .project-immersive-final__full
   above (this wrapper, not the images themselves, carries it), but
   side by side instead of stacked, sized to a shared height rather
   than a shared width. Since the two images aren't the same aspect
   ratio, that means the pair doesn't split the row 50/50, image 5
   (the wider of the two) ends up wider than image 6. gap adds
   separation between the two images themselves, the pair's own side
   padding (against the section's outline) stays 0, same as every
   other image in this section. */
.project-immersive-final__pair {
  display: flex;
  gap: 20px;
  width: calc(100% + 80px);
  margin: 0 -40px;
}

/* Both source photos share the same native height (845px), so their
   relative native widths (1267px and 1071px) are exactly their width
   ratio at any shared height. Using those as flex-grow ratios (instead
   of a fixed height + width: auto on each image) lets the browser
   divide the row's exact pixel width between them with no rounding
   leftover, a fixed height risked being 1px too wide combined at
   certain screen widths. object-fit: cover keeps each image filling
   its box with only a fraction-of-a-pixel crop, since the ratio
   already matches the image's true aspect ratio. */
.project-immersive-final__pair img {
  display: block;
  height: 434px;
  min-width: 0;
  object-fit: cover;
}

.project-immersive-final__pair img:first-child {
  flex: 1267 1 0;
}

.project-immersive-final__pair img:last-child {
  flex: 1071 1 0;
}

/* Full width, no side padding, same negative-margin escape trick as
   .project-immersive-final__full above (not reused directly since a
   combined-class override would need higher specificity than this
   rule's own width to win the cascade, simpler to just repeat the 2
   properties here for this one unique element). */
.project-immersive-final__video {
  display: block;
  width: calc(100% + 80px);
  margin: 0 -40px;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* Small closing icon + short text, sitting below the grid, both
   centred, in a fixed 600px tall box (was sized to its own content).
   Flex centring keeps the icon+text centred vertically inside that
   height too, not just pinned to the top of it. */
.project-immersive-final__closing {
  margin-top: 60px;
  height: 600px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.project-immersive-final__closing-icon {
  display: block;
  width: 160px; /* was 100px, per Lucrecia's request */
  height: auto;
  margin-bottom: 20px;
}

.project-immersive-final__closing-text {
  margin: 0;
  max-width: 540px; /* was 480px, per Lucrecia's request */
  font-family: var(--font-body);
  font-size: 24px; /* was 18px, before that --font-size-project-body (16px), per Lucrecia's request */
  line-height: var(--line-height-project-body);
  color: var(--color-csa-mobile-text);
}

/* ---- Mobile (768px and narrower) ---- */
@media (max-width: 768px) {
  /* Per the brief: mobile section padding is 50px top/bottom, 20px
     sides, matching every other stacked section on this page (Role,
     Collaborators, etc). Grid collapses to a single column, 3
     side-by-side 4:3 crops would be too narrow to read anything in
     them at mobile width. */
  .project-grid {
    padding: 50px 20px;
  }

  .project-grid__images {
    grid-template-columns: 1fr;
  }

  .project-immersive-final__inner {
    padding: 40px 20px;
  }

  /* Mobile's own side padding above is 20px (not desktop's 40px), so
     the width-escape trick on .project-immersive-final__full, __pair
     and __video needs to add back 40px (20px each side) here instead
     of 80px, to land flush with the outline the same way. */
  .project-immersive-final__full,
  .project-immersive-final__pair,
  .project-immersive-final__video {
    width: calc(100% + 40px);
    margin: 0 -20px;
  }

  /* Images 5 and 6 stack instead of sitting side by side, at this
     width even half of the pair's already-narrower-of-the-two image
     would be too narrow to read. */
  .project-immersive-final__pair {
    flex-direction: column;
  }

  .project-immersive-final__pair img {
    flex: none;
    height: auto;
    width: 100%;
    object-fit: initial;
  }

  /* Full size image: the shared .project-full-image mobile mask
     (project.css), a fixed 296px height + object-fit: cover, crops
     most of this portrait mobile crop out of view, same fix as every
     other project page's full-size images that have a dedicated
     mobile crop. height: auto shows it in full instead. width/margin
     bring in the same 20px side padding every other mobile section on
     this page uses (see .project-grid above), instead of the shared
     .project-full-image default of edge to edge with no padding. */
  .project-full-image--full-1 {
    height: auto;
    width: calc(100% - 40px);
    /* 50px clearance above/below, per Lucrecia's request (was 0). */
    margin: 50px auto;
  }
}