/* ============================================================
   SharedMoment — experiential installation case study
   Recreated from "SharedMoment.fig". The original is a long
   vertical poster of alternating pastel bands (each a stage of
   the concept). Photo arrangement + copy are preserved; the
   typography, spacing, container widths, reveals and chrome are
   re-cut to the portfolio design system.
   ============================================================ */

.sm {
  background: var(--white);
  /* navy text → black across this page */
  --navy-deep: #141414;
  --navy-bio:  #141414;
  --navy:      #141414;
  /* pastel bands ≈ each Figma colour at 0.33 over white */
  --sm-blue:   #C2C8DB;
  --sm-cyan:   #C8E9F3;
  --sm-purple: #CDC2DA;
  --sm-yellow: #F8F2CD;
  --sm-green:  #C7E5D2;
  --sm-pink:   #F8E2E8;
  --sm-ink:    #16131F;
}

/* ---- Hero ---------------------------------------------------- */
.sm-hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(60px, 9vw, 160px) var(--gutter);
}
.sm-hero__bg {
  position: absolute;
  inset: 0;
  background: url("assets/sharedmoment/886b79b2460ae2de.jpg") 50% 50% / cover no-repeat;
}
.sm-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 22, 0.42);
}
.sm-hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 2.4vw, 38px); }
.sm-hero__lead {
  margin: 0;
  max-width: 660px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 300;
  font-size: clamp(17px, 1.5vw, 24px);
  line-height: 1.5;
  text-wrap: pretty;
}
.sm-hero__title {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 0.92;
  color: var(--white);
  font-size: clamp(38px, 6vw, 92px);
  text-transform: uppercase;
  text-shadow:
     2px  2px 0 var(--sm-ink),
     4px  4px 0 var(--sm-ink),
     6px  6px 0 var(--sm-ink),
     8px  8px 0 var(--sm-ink),
    10px 10px 0 var(--sm-ink),
    12px 12px 0 var(--sm-ink),
    14px 14px 0 var(--sm-ink),
    16px 16px 0 var(--sm-ink);
}

/* ---- Bands -------------------------------------------------- */
.sm-band { padding: clamp(76px, 9vw, 150px) 0; }
.sm-band--white  { background: var(--white); }
.sm-band--blue   { background: var(--sm-blue); }
.sm-band--cyan   { background: var(--sm-cyan); }
.sm-band--purple { background: var(--sm-purple); }
.sm-band--yellow { background: var(--sm-yellow); }
.sm-band--green  { background: var(--sm-green); }
.sm-band--pink   { background: var(--sm-pink); }
.sm-band--grey   { background: #e5e5e5; }
.sm-band--dark   { background: #232323; }
.sm-band--dark .sm-title,
.sm-band--dark .sm-eyebrow,
.sm-band--dark .sm-body,
.sm-band--dark .sm-card__k,
.sm-band--dark .sm-card__v,
.sm-band--dark .sm-meta { color: var(--white); }
.sm-band--dark .sm-num { background: var(--white); color: #232323; }

/* ---- Text block (number / eyebrow / title / body) ----------- */
.sm-copy { max-width: 640px; }
.sm-copy--center { margin-inline: auto; text-align: center; }
.sm-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 4vw, 66px);
  height: clamp(48px, 4vw, 66px);
  border-radius: 50%;
  background: var(--sm-ink);
  color: var(--white);
  font-weight: 800;
  font-size: clamp(22px, 2vw, 32px);
  margin-bottom: clamp(20px, 1.8vw, 30px);
}
.sm-title {
  margin: 0 0 clamp(14px, 1.4vw, 22px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.0;
  color: var(--navy-deep);
  font-size: clamp(30px, 3.6vw, 56px);
}
.sm-eyebrow {
  margin: 0 0 clamp(20px, 1.8vw, 30px);
  font-weight: 700;
  font-size: clamp(14px, 1.05vw, 19px);
  letter-spacing: 0.04em;
  color: var(--navy);
}
.sm-body {
  margin: 0 0 clamp(18px, 1.4vw, 24px);
  font-weight: 300;
  font-size: clamp(17px, 1.25vw, 22px);
  line-height: 1.6;
  color: var(--navy-bio);
  text-wrap: pretty;
}
.sm-body:last-child { margin-bottom: 0; }
.sm-meta { margin: 0; font-weight: 600; font-size: clamp(15px, 1.05vw, 18px); line-height: 1.55; color: var(--navy); }

/* ---- Section heading (centred, like FIVE Es) ---------------- */
.sm-head { max-width: 760px; margin: 0 auto clamp(48px, 5vw, 84px); text-align: center; }

/* ---- Split: text + media, alternating sides ----------------- */
.sm-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 96px);
  align-items: center;
}
.sm-split--media-left .sm-split__media { order: -1; }
.sm-split__copy { display: flex; justify-content: center; }

/* media that should breathe a little wider than text */
.sm-split--wide-media { grid-template-columns: 1.15fr 0.85fr; }
.sm-split--wide-media.sm-split--media-left { grid-template-columns: 0.85fr 1.15fr; }

/* ---- Media primitives --------------------------------------- */
.sm-img { width: 100%; height: auto; display: block; }
.sm-img--brand { clip-path: inset(1px); }
.sm-figure { position: relative; }

/* paired media: two images side by side */
.sm-pair { display: grid; gap: clamp(16px, 1.6vw, 28px); align-items: center; }
.sm-pair--2 { grid-template-columns: 1fr 1fr; }
.sm-pair--3 { grid-template-columns: repeat(3, 1fr); align-items: center; }
/* stacked media: two images stacked */
.sm-stack { display: grid; gap: clamp(16px, 1.6vw, 28px); }
.sm-stack--flush { gap: 0; overflow: hidden; }
.sm-stack--flush img:nth-child(2) { margin-top: -1px; }
.sm-stack--flush .sm-zoom:hover { transform: none; }

/* phone + landscape composite (Entry) */
.sm-compose { position: relative; }
.sm-compose__phone {
  position: absolute;
  right: -2%;
  bottom: -10%;
  width: 34%;
  filter: drop-shadow(0 24px 40px rgba(20, 16, 35, 0.28));
  z-index: 2;
}

/* ---- Engagement: full-bleed image with overlaid copy -------- */
.sm-engage {
  position: relative;
  background: var(--sm-ink);
  overflow: hidden;
}
.sm-engage__img { width: 100%; height: auto; display: block; }
.sm-engage__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(12, 10, 22, 0.86) 0%, rgba(12, 10, 22, 0.55) 34%, rgba(12, 10, 22, 0.12) 62%, rgba(12, 10, 22, 0) 85%);
}
.sm-engage__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding-bottom: clamp(40px, 5vw, 72px); }
.sm-engage__copy { position: relative; z-index: 2; max-width: 560px; }
.sm-engage .sm-title { color: var(--white); }
.sm-engage .sm-eyebrow { color: rgba(255, 255, 255, 0.82); }
.sm-engage .sm-body { color: rgba(255, 255, 255, 0.92); }
.sm-engage .sm-num { background: var(--white); color: var(--sm-ink); }
@media (max-width: 760px) {
  .sm-engage { display: flex; flex-direction: column; }
  .sm-engage__img { order: 1; }
  .sm-engage__overlay { position: static; padding: clamp(28px, 7vw, 46px) var(--gutter); align-items: flex-start; order: 0; }
  .sm-engage__scrim { display: none; }
}

/* ---- Caption row (Entry 5E mini-stages) --------------------- */
.sm-entry-col { display: flex; flex-direction: column; }
.sm-entry-col .sm-card { margin-top: clamp(20px, 2.4vw, 32px); }
.sm-card { text-align: center; }
.sm-card__k {
  margin: 0 0 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(17px, 1.3vw, 22px);
  color: var(--navy-deep);
}
.sm-card__v { margin: 0; font-weight: 300; font-size: clamp(15px, 1.05vw, 18px); line-height: 1.5; color: var(--navy-bio); }

/* ---- Website mockup row (Entry) ----------------------------- */
.sm-row { display: grid; gap: clamp(18px, 2vw, 36px); }
.sm-row--3 { grid-template-columns: repeat(3, 1fr); }
.sm-row--2 { grid-template-columns: 1fr 1fr; }
.sm-row--4 { grid-template-columns: repeat(4, 1fr); align-items: end; }

/* diagonal fanned stack of "thank you" phone mockups — occupies
   the same footprint as one .sm-row--4 cell */
.sm-phone-fan {
  position: relative;
  width: 100%;
  aspect-ratio: 796 / 1606;
}
.sm-phone-fan__img {
  position: absolute;
  left: 22%;
  top: 22%;
  width: 56%;
  height: 56%;
  display: block;
  cursor: zoom-in;
  border-radius: 8%;
  filter: drop-shadow(0 10px 18px rgba(20,20,20,0.16));
  transform:
    translate(
      calc((var(--i) - (var(--n) - 1) / 2) * 11%),
      calc((var(--i) - (var(--n) - 1) / 2) * 7%)
    );
  transition: transform 0.4s var(--ease);
}
.sm-phone-fan:hover .sm-phone-fan__img {
  transform:
    translate(
      calc((var(--i) - (var(--n) - 1) / 2) * 15%),
      calc((var(--i) - (var(--n) - 1) / 2) * 10%)
    );
}

/* ---- App store gallery (Extension) -------------------------- */
.sm-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 32px); align-items: start; }
.sm-apps__pair { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(16px, 1.6vw, 28px); align-items: center; margin-top: clamp(24px, 2.6vw, 44px); }

/* ---- City context grids ------------------------------------- */
.sm-city-feature { margin-bottom: clamp(16px, 1.6vw, 28px); }
.sm-city { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 28px); align-items: start; }
.sm-strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(8px, 1vw, 16px); margin-top: clamp(24px, 2.6vw, 44px); }
.sm-city img, .sm-strip img, .sm-city-feature img { clip-path: inset(1px); }

/* ---- Click-to-enlarge lightbox ------------------------------ */
.sm-zoom { cursor: zoom-in; transition: transform 0.4s var(--ease); }
.sm-zoom:hover { transform: translateY(-4px); }
.sm-lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(12, 10, 22, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vmin, 72px);
  cursor: zoom-out;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.sm-lb.is-open { opacity: 1; pointer-events: auto; }
.sm-lb__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 40px 90px -28px rgba(0, 0, 0, 0.8);
  transform: scale(0.96);
  transition: transform 0.28s ease;
}
.sm-lb.is-open .sm-lb__img { transform: scale(1); }
.sm-lb__close {
  position: absolute;
  top: clamp(14px, 2.4vw, 30px);
  right: clamp(16px, 2.6vw, 36px);
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.sm-lb__close:hover { background: rgba(255, 255, 255, 0.26); }

/* ---- Two-column intro (Problem / Solution) ------------------ */
.sm-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 110px);
}

/* ---- Responsive --------------------------------------------- */
@media (max-width: 760px) {
  .sm-band--white .sm-split[style*="flex-end"] { margin-top: clamp(48px, 10vw, 90px); }
}
@media (max-width: 860px) {
  .sm-split,
  .sm-duo { grid-template-columns: 1fr; }
  .sm-split--wide-media,
  .sm-split--wide-media.sm-split--media-left { grid-template-columns: 1fr; }
  .sm-split--media-left .sm-split__media { order: 1; }
  .sm-copy { max-width: none; }
  .sm-split--media-left .sm-split__copy { margin-bottom: clamp(28px, 6vw, 44px); }
  .sm-split[style*="flex-end"] > div:first-child { margin-bottom: clamp(28px, 6vw, 44px); }
  .sm-cards { grid-template-columns: repeat(2, 1fr); }
  .sm-row--4 { grid-template-columns: repeat(2, 1fr); }
  .sm-apps { grid-template-columns: 1fr; }
  .sm-city { grid-template-columns: repeat(2, 1fr); }
  .sm-strip { grid-template-columns: repeat(4, 1fr); }
  .sm-compose__phone { position: static; width: 46%; margin: 18px auto 0; display: block; }
}

/* ---- Navy nav + footer theme, scoped to this page ----------- */
.nav--sm, .footer--sm { background: #16131F; --pink: #E79EC0; }

/* ---- Meta bar (Discipline/Location/Year) --------------------- */
.sm-meta-bar { background: var(--sm-pink); border-bottom-color: #e0a9bb; }
.sm-meta-bar .cs-meta__k,
.sm-meta-bar .cs-meta__v { color: #16131F; }