/*
  FILE: spyscape-digital.css
  PURPOSE: Styles specific to the SPYSCAPE Digital 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/etc,
  linked before this file). Covers the drop shadow on full-size image
  sections 1 and 2 (masked flush at the bottom via
  .project-shadow-mask-bottom--edge-to-edge in index.html, see
  project.css for that class), the mobile-only treatment for the same
  two sections below, and the Role/note-on-development image corner
  radius.
*/

.project-full-image--full-1,
.project-full-image--full-2 {
  box-shadow: var(--shadow-image);
}

@media (max-width: 768px) {
  /* Full size image sections 1 and 2: the shared .project-full-image
     mobile mask (project.css), a fixed 296px height + object-fit:
     cover, was cropping most of these two images out of view, they're
     both much taller than that once shown at mobile width (see the
     dedicated mobile crops in index.html). height: auto shows each in
     full instead. 30px side padding (was edge to edge) and 40px of
     space above match the same treatment CSA Mobile uses for its own
     full-size image on mobile, but bottom stays flush with the
     divider below, unlike CSA's, per the brief for this page. */
  .project-full-image--full-1,
  .project-full-image--full-2 {
    width: calc(100% - 60px);
    height: auto;
    margin: 40px auto 0;
  }
}

/* ---- Role and note-on-development images: 5px corner radius, per Lucrecia's request ---- */
.project-role__image,
.project-role__image-stack-item {
  border-radius: 5px;
}