/*
  FILE: csa-spypack.css
  PURPOSE: Styles specific to the CSA Spy Pack 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 three new
  section types this page needed that didn't exist anywhere else yet:
  Agent's journey (title + 4 cards in a row), the text-block-then-
  full-width-image pattern shared by Starter spy pack, Expansion packs
  and Connecting the journey with the CSA App, and the full-bleed dark
  grid section. Plus a couple of one-off overrides: Full size image 1
  (inset to the page's usual 1120px content width instead of the
  standard edge-to-edge treatment, plus a drop shadow), and the
  mobile-only mask reset for this page's full-size images that have a
  dedicated mobile crop (same technique used on CSA Mobile and
  SPYSCAPE Digital).
*/

/* ---- Full size image 1: inset to the 1120px content width, drop shadow ---- */
/* This image renders smaller than the section (unlike every other
   full-size image, which is edge to edge), so instead of the shared
   .project-full-image treatment it's scaled up to the same 1120px
   content width every other section's 40px side padding uses
   (calc(100% - 80px), centred with margin: 0 auto), rather than the
   full 1200px. Same shadow token every thumbnail/image on the site
   uses. 50px margin-top (same value as .project-role's own top
   padding) gives it breathing room from the divider above: the photo
   itself is a close-up of the welcome letter with a solid black band
   right at its own top edge, so sitting flush against the divider like
   the page's other edge-to-edge full-size images do read as a
   cramped, cut-off top. Flush with the divider below (no bottom
   margin), per Lucrecia's request -- carries
   .project-shadow-mask-bottom (see index.html/project.css) so the
   shadow itself still renders in full on top/left/right but gets
   clipped exactly at that bottom edge instead of crossing into the
   divider. */
.project-full-image--full-1 {
  display: block;
  width: calc(100% - 80px);
  height: auto;
  margin: 50px auto 0;
  box-shadow: var(--shadow-image);
}

/* Desktop only, per Lucrecia's request: a smaller, effective 650px
   height instead of scaling to fill the full available content width.
   1041px is this image's own real aspect ratio (2108:1316) at exactly
   650px tall -- used as a ceiling via min(), not a fixed width,
   because the desktop breakpoint spans 769px-1200px+ and the content
   column itself is narrower than 1041px for part of that range (below
   ~1200px viewport width). A flat "height: 650px" computed a fixed
   1041px-wide image regardless of the column's own width and
   overflowed the page between roughly 769px-1170px viewport widths --
   min() instead keeps shrinking with calc(100% - 80px) exactly like
   the base rule above once the column gets narrower than 1041px,
   only reaching the full 650px tall at wider desktop widths where
   there's actually room for it. This is ONLY the image shrinking for
   now -- the section itself (the vertical space between this and the
   dividers above/below) isn't being resized to match yet, so there's
   some extra empty space below the image before the lower divider at
   wider widths, expected for the time being. */
@media (min-width: 769px) {
  .project-full-image--full-1 {
    width: min(1041px, calc(100% - 80px));
    height: auto;
  }
}

/* ---- Section, Agent's journey: title + 4 cards in a row ---- */
/* New pattern, no existing section on the site does this. Cards sit
   edge to edge with a 10px gap, evenly dividing the same 1120px
   content width every other section uses (40px side padding). flex: 1
   (flex-basis: 0%) ignores each card's own intrinsic width so all 4
   end up exactly equal. Each card is its own white-background frame
   (border colour reuses --color-bg-accent, the closest existing token
   to the F0EBE4 Lucrecia gave, close enough it's almost certainly the
   same colour, just a slightly different hex export) with a caption
   at the top and the photo below it, 8px of padding all round.

   Each card is a flex column with the photo pushed to the bottom
   (margin-top: auto on .project-journey__image) rather than sitting
   directly under its own caption. Cards are already the same height
   as each other (default align-items: stretch on the row above), so
   with every photo anchored to the bottom, all 4 line up with each
   other regardless of how many lines a given caption wraps to, the
   gap above a photo just grows or shrinks to take up the difference. */
.project-journey {
  padding: 50px 40px;
  box-sizing: border-box;
}

.project-journey__row {
  margin-top: 30px;
  display: flex;
  gap: 10px;
}

.project-journey__card {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px;
  /* Per Lucrecia's request, was #fff. */
  background: #FBF9F7;
  border: 3px solid var(--color-bg-accent);
  border-radius: 5px; /* per Lucrecia's request, on the card itself -- the photo below already has its own separate 5px radius */
  display: flex;
  flex-direction: column;
}

.project-journey__caption {
  margin: 0 0 8px;
  /* Per Lucrecia's request: the text's own internal padding, on top of
     the card's 8px -- the photo below keeps just the card's padding,
     only the caption gets this extra inset. */
  padding: 10px;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.4;
  color: var(--color-text-dark);
}

.project-journey__image {
  display: block;
  width: 100%;
  height: auto;
  margin-top: auto;
  border-radius: 5px; /* per Lucrecia's request */
}

/* ---- Pattern, text block on top + full-width image below ---- */
/* Shared by 3 sections: Starter spy pack, Expansion packs and
   Connecting the journey with the CSA App. Text block (title + body)
   followed by one image that fills the section's full 1200px width
   edge to edge, same "full size image" treatment as
   .project-full-image, just placed after this section's own text
   instead of standing alone between two dividers. max-width (534px
   content + 40px padding each side) matches the fixed 534px width
   .project-role's text column uses on Role (the one section on this
   page that keeps its original 2-column layout), so every section's
   text block lines up the same width, box-sizing: border-box so the
   max-width includes the padding, not just the text itself. */
.project-text-image__text {
  padding: 50px 40px 40px;
  box-sizing: border-box;
  max-width: 614px;
}

.project-text-image__image {
  display: block;
  width: 100%;
  height: auto;
}

/* Starter spy pack and Expansion packs only, per Lucrecia's request --
   Connecting the journey with the CSA App reuses this same
   .project-text-image__image class but stays flush against its
   divider below, unchanged. Scoped via each section's own
   aria-labelledby (there's no other hook to tell these 3 sections
   apart, they all share the plain .project-text-image markup). */
section[aria-labelledby="section-starter-title"] .project-text-image__image,
section[aria-labelledby="section-expansion-title"] .project-text-image__image {
  margin-bottom: 40px;
}

/* ---- Section, full-bleed dark grid + single image ---- */
/* Same background/grid technique as CSA Mobile's Final designs section
   (project-final-designs in csa-game.css), reused here since the brief
   asks for the identical look, just much simpler content: no collage,
   dividers or badges, one image sitting inside the padded column. */
.project-final-image {
  background: var(--color-csa-mobile-bg);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.project-final-image__inner {
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 40px 40px 60px; /* top reduced to 40px per Lucrecia's request, sides/bottom unchanged */
  border-left: 1px solid var(--color-csa-mobile-accent);
  border-right: 1px solid var(--color-csa-mobile-accent);
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(15, 84, 248, 0.2) 0,
      rgba(15, 84, 248, 0.2) 1px,
      transparent 1px,
      transparent 100px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(15, 84, 248, 0.2) 0,
      rgba(15, 84, 248, 0.2) 1px,
      transparent 1px,
      transparent 100px
    );
}

/* Desktop shows the one combined image (both phones side by side, see
   .project-final-image__image--desktop), mobile instead shows 2
   dedicated single-phone crops stacked (.project-final-image__mobile
   -group), the combined image's wide diagonal layout doesn't fit a
   narrow screen. Both variants share this base rule, the mobile media
   query below swaps which one is visible. */
.project-final-image__image {
  display: block;
  width: 100%;
  height: auto;
}

.project-final-image__mobile-group {
  display: none;
}

/* ---- 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). The row also stacks into a single column
     here, at 390px wide even a 10px gap only leaves about 70px per
     card, nowhere near enough to read the caption. Each photo is
     masked to a 4:3 (landscape) crop to keep the stacked column from
     getting too tall, object-fit: cover picks the crop, centred by
     default. */
  .project-journey {
    padding: 50px 20px;
  }

  .project-journey__row {
    flex-direction: column;
  }

  .project-journey__image {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .project-text-image__text {
    padding: 50px 20px 30px;
  }

  .project-final-image__inner {
    padding: 40px 30px;
  }

  .project-final-image__image--desktop {
    display: none;
  }

  .project-final-image__mobile-group {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  /* Full size image 1: 30px side padding here (was 40px on desktop),
     same flush-bottom + shadow-masking as desktop (see the base rule
     above). */
  .project-full-image--full-1 {
    width: calc(100% - 60px);
    height: auto;
    margin: 40px auto 0;
  }

  /* Full size images 2 and 4: the shared .project-full-image mobile
     mask (project.css), a fixed 296px height + object-fit: cover,
     crops most of these two out of view, each has a dedicated mobile
     crop (see the <picture> elements in index.html) that's meant to
     show in full, not get cover-cropped again on top of that. Same
     fix as CSA Mobile's full-size diagram and both of SPYSCAPE
     Digital's full-size images: height: auto lets each box match its
     own mobile crop's proportions exactly, 30px side padding and 40px
     space above/below match CSA Mobile's own full-size image on
     mobile. */
  .project-full-image--full-2,
  .project-full-image--full-4 {
    width: calc(100% - 60px);
    height: auto;
    margin: 40px auto;
  }
}

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