/* ===================================================================
   Sevra Design Studio — Device-pair work card component
                        + Endorsement band
   -------------------------------------------------------------------
   Two pieces in one file because they shipped together as part of the
   "Selected work" rework:

   1. .device-pair — laptop + phone composition that animates in
      lockstep through the page screenshots. Animation engine lives
      in device-pair.js. See Build Convention #28.

   2. .endorsement — dark editorial pullquote band that sits between
      the work section and the process section. Styled as a sibling
      of .intro (the dark Section 02) so it reads as a deliberate
      second dark moment in the page rhythm, not a one-off. Uses the
      same coral seam, the same on-dark text vars, the same vertical
      padding family.

   Loaded after style-v2.css so contextual overrides on .work-card__image
   resolve via cascade order rather than specificity hacks.
   =================================================================== */


/* -------------------------------------------------------------------
   Tunable parameters — adjust these to taste.

   The overlap between laptop and phone is encoded in --laptop-w and
   --phone-w summing to >100%: current 83.3% + 23.1% = 106.4%, so 6.4%
   overlap. For no overlap, sum to exactly 100%. Keep the ratio roughly
   360:100 to preserve the "laptop is much bigger than phone" reading.
   ------------------------------------------------------------------- */

:root {
  --device-tilt: 12deg;
  --device-perspective: 1500px;
  --laptop-w: 83.3%;
  --phone-w: 23.1%;
}


/* -------------------------------------------------------------------
   Work-card image-slot adjustments for the device-pair.

   style-v2.css already declares .work-card__image as a flex container
   with align-items: center. The device-pair needs two extra things:
   centered horizontal alignment, and a small inset so the device pair
   doesn't touch the card edges. Layered here rather than edited in
   style-v2.css so all the device-pair work lives in one file.
   ------------------------------------------------------------------- */

.work-card__image {
  justify-content: center;
  padding: clamp(0.75rem, 1.5vw, 1.25rem);
}


/* -------------------------------------------------------------------
   Device-pair container

   Aspect ratio 192:100 chosen so a laptop occupying --laptop-w (83.3%)
   of the container reads at ~1.6 (16:10). Math: container W/H = 1.6 / 0.833
   = 1.92, hence 192/100. Adjust --laptop-w and the aspect ratio holds.
   ------------------------------------------------------------------- */

.device-pair {
  position: relative;
  width: 100%;
  aspect-ratio: 192 / 100;
  perspective: var(--device-perspective);
  perspective-origin: center;
}


/* Both devices fill the full container height and are absolutely
   positioned so they can genuinely overlap when their widths sum to
   more than 100%. */
.device-pair__laptop,
.device-pair__phone {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  will-change: transform;
}

.device-pair__laptop {
  left: 0;
  width: var(--laptop-w);
  background: #FFFFFF;
  border: 0.5px solid rgba(26, 26, 26, 0.18);
  border-radius: var(--radius-md);
  transform: rotateY(var(--device-tilt));
}

.device-pair__phone {
  right: 0;
  width: var(--phone-w);
  background: var(--ink);
  border-radius: 14px;
  /* 1px halo in the surrounding bg color — invisible against the
     cream/sand bg around the device pair, visible against dark
     laptop screenshot content where the phone overlaps it. Defines
     the phone silhouette in any context without adding noise. */
  box-shadow: 0 0 0 1px var(--bg-alt);
  z-index: 2;
  transform: rotateY(calc(var(--device-tilt) * -1));
}


/* Laptop minimal chrome bar — three dots, no other affordances. */
.device-pair__chrome {
  height: 14px;
  background: #DAD7CC;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  position: relative;
  z-index: 2;
}

.device-pair__chrome span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.32);
}


/* Viewport — masks the screenshot, contains the translate3d motion. */
.device-pair__viewport {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: var(--bg-alt);
}

.device-pair__shot {
  display: block;
  width: 100%;
  height: auto;
  /* JS drives this via translate3d for GPU compositing.
     Initial state is translated 0px, which is also the no-JS and
     reduced-motion fallback (top of page visible). */
  transform: translate3d(0, 0, 0);
  will-change: transform;
}


/* Phone notch and home indicator. The phone viewport is inset rather
   than full-bleed so the notch and home indicator have somewhere to
   sit visually without overlapping the screenshot content. */
.device-pair__notch {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 5px;
  background: #1A1A1A;
  border-radius: 999px;
  z-index: 3;
  pointer-events: none;
}

.device-pair__home {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 3px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  z-index: 3;
  pointer-events: none;
}

.device-pair__phone .device-pair__viewport {
  position: absolute;
  inset: 4.5% 3% 4.5% 3%;
  border-radius: 9px;
  background: var(--bg-alt);
}


/* -------------------------------------------------------------------
   Alternation — when the work-card is even-numbered, the image-slot
   sits on the right (parent flex direction-reverse). The device-pair's
   absolute children swap sides AND rotation directions so they still
   face each other across the composition.
   ------------------------------------------------------------------- */

.work-card:nth-child(even) .device-pair__laptop {
  left: auto;
  right: 0;
  transform: rotateY(calc(var(--device-tilt) * -1));
}

.work-card:nth-child(even) .device-pair__phone {
  right: auto;
  left: 0;
  transform: rotateY(var(--device-tilt));
}


/* -------------------------------------------------------------------
   Mobile collapse — work card already stacks vertically below 720px
   via style-v2.css. Just nudge the inner padding so the device-pair
   has breathing room when the card is narrower.
   ------------------------------------------------------------------- */

@media (max-width: 720px) {
  .work-card__image,
  .work-card:nth-child(even) .work-card__image {
    padding: clamp(0.75rem, 2vw, 1.25rem);
  }
}


/* -------------------------------------------------------------------
   Reduced motion — devices sit flat side-by-side, no 3D rotation,
   no scroll animation (engine short-circuits in JS). Composition
   still reads as "same work at two sizes" without any motion.
   ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .device-pair__laptop,
  .device-pair__phone,
  .work-card:nth-child(even) .device-pair__laptop,
  .work-card:nth-child(even) .device-pair__phone {
    transform: none !important;
  }
}


/* ===================================================================
   Endorsement band — dark editorial pullquote between sections 03 and 04.

   Visual register:
     - Same dark background as .intro (Section 02), establishing a
       second dark moment in the page rhythm.
     - 56px coral seam centered at top, matching .intro::before.
     - Vertical padding matches .pullquote (the upper studio-philosophy
       band) — slightly less than .intro / .work / .process because this
       is a transition, not a numbered section.
     - No meta-row — labelling it "TESTIMONIALS" or similar would push
       it back toward marketing furniture and break the calm.

   Semantic structure:
     <section class="endorsement"> wraps a <figure> that pairs the
     <blockquote> with its <figcaption>. Standard W3C testimonial markup.
     The section gets aria-label="Client endorsement" mirroring the
     upper pullquote's aria-label="Studio philosophy".
   =================================================================== */

.endorsement {
  position: relative;
  padding-top: clamp(5rem, 9vw, 7rem);
  padding-bottom: clamp(5rem, 9vw, 7rem);
  background: var(--bg-dark);
  color: var(--text-on-dark);
  text-align: center;
  overflow: hidden;
}

/* Coral seam — identical to .intro::before. Anchors this band visually
   in the same family as Section 02. */
.endorsement::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 2px;
  background: var(--coral);
}

.endorsement__inner {
  margin: 0;
  padding: 0;
  /* 64ch tuned to this specific quote. The Dan Okray quote runs 60
     words; 50ch produced a 9-line tall block that read more "monument"
     than "transition." 64ch consolidates it to ~7 lines without dropping
     editorial register. If a future quote is much shorter, this can
     come back down. */
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
}

/* Five small coral stars — same SVG path as the prior in-card version,
   sized up slightly because they're standalone here rather than nested
   in body copy. */
.endorsement__stars {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 1.75rem;
  color: var(--coral);
}

.endorsement__stars svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Quote — italic Fraunces, sized below the upper pullquote (which is a
   six-word punchline) because this is sixty words and needs to read as
   a paragraph. Line-height slightly tighter than body for centered
   editorial typography. */
.endorsement__quote {
  margin: 0 0 1.75rem;
  padding: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text-on-dark);
}

.endorsement__quote p {
  margin: 0;
}

/* Attribution — muted sans, with a coral em-dash leading. The dash
   echoes the same accent used in the previous in-card testimonial and
   ties the band visually to the rest of the brand without adding chrome. */
.endorsement__attribution {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--text-on-dark-muted);
}

.endorsement__attribution::before {
  content: "— ";
  color: var(--coral);
  margin-right: 0.15rem;
}

/* Narrow viewports — the full attribution string ("Dan Okray, Co-Owner,
   Master Mechanical Solutions" — 47 chars plus the em-dash prefix) won't
   fit on one line at 0.85rem on phone-width content columns and was
   wrapping "Solutions" onto its own line. Drop the size a touch so it
   stays a single editorial line. Tightening letter-spacing too — at this
   size the 0.02em tracking starts to feel loose. */
@media (max-width: 480px) {
  .endorsement__attribution {
    font-size: 0.78rem;
    letter-spacing: 0.015em;
  }
}