/* ==========================================================================
   Block: device-mockup — heading + copy beside a phone / laptop showing the output, with floating
   creatives joined to the screen by thin connector lines (src/blocks/device-mockup.html,
   js/blocks/device-mockup.js)
   Figma "Social Media Advertising" 4506:165 at 1920 (page y):
     stage    x891  y3459  964 × 770 ("3 9") — bleeds 35px past the 1820 content edge
     eyebrow  dot x96, label x117 y3556 (20px)       → 97px under the stage top
     title    x96   y3607  48px Blauer Nue Regular, 2 lines, 118 tall → 26px under the eyebrow
     rule     x93   y3770  125 × 2 green             → 44px under the title
     body     x99   y3844  699 wide, 20px, 7 lines   → 73px under the rule
     previous block's content ends y3375 (84 above the stage), next eyebrow y4457 (228 below): split
   Columns: 100→891 | 891→1820 (791fr | 929fr); the stage is its column + 35px.
   Composition: every box inside the stage is in the stage's own units (the Figma "3 9" px, default
   964 × 770), placed with % of the stage, so it scales as one picture at every width.
     phone  x301.7 y5.8 362.2 × 758.8, screen inset 8.8 / 9.5, radius 50 / 42, island 88 × 22 at y16.8
     floats left-top 43,26 162×289 · left-bottom 87,490 164×204 · right-1…4 758, 48/217/385/555 164×164
   "Mobile Category" 4148:2776 at 402: head (eyebrow 16px y2816, title 36px y2848, rule 64px y2969), the
   stage 385 × 308 at x8 y2996, then the body (x22 y3352).
   Other service frames (layout variants, below): SEO 4641:2 stage x895 y3725 · Organic Social 4539:196
   x895 y3505 · Web Design 4816:2 composite x950 y2720 868 × 694 (eyebrow y2739) · Paid Search 4665:482 and
   Media Buying 4684:795 composites 1268 × 881 at x660 y1318 / y5038.
   ========================================================================== */

.block-device-mockup {
  --nudge: min(0.2083vw, 4px);                      /* Figma text boxes sit 4px left of the 100px gutter */
  --bleed: min(1.8229vw, 35px);                     /* the stage runs 35px into the right gutter */
  padding: min(6.9792vw, 134px) 0 min(5.9375vw, 114px);   /* top = half the Figma's 268px gap to the scroll-stack's closing rule (it pads 134 below) */
}

.block-device-mockup__grid {
  display: grid;
  grid-template-columns: minmax(0, 791fr) minmax(0, 929fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "head  stage"
    "body  stage";
  align-items: start;
}
.block-device-mockup--left .block-device-mockup__grid {
  grid-template-columns: minmax(0, 929fr) minmax(0, 791fr);
  grid-template-areas:
    "stage head"
    "stage body";
}

/* ---- Heading ------------------------------------------------------------- */
.block-device-mockup__head {
  grid-area: head;
  padding-top: min(5.0521vw, 97px);                 /* stage top 3459 → eyebrow 3556 */
}
.block-device-mockup__eyebrow { margin-left: calc(var(--nudge) * -1); }
.block-device-mockup__title {
  max-width: 729px;
  margin: min(1.3542vw, 26px) 0 0 calc(var(--nudge) * -1);
  font-family: var(--font-display);
  font-weight: 400;                                 /* Blauer Nue Regular, sentence case */
  font-size: 48px;
  line-height: 1.23;                                /* 59px lines */
}
.block-device-mockup__line { display: block; }     /* title_lines: the designer's desktop wrap */
.block-device-mockup__rule {
  display: block;
  width: 125px;
  height: 2px;
  margin: min(2.2917vw, 44px) 0 0 calc(var(--nudge) * -1.75);   /* x93 · title bottom 3725 → line 3769 */
  background: var(--accent);
}

/* ---- Body ---------------------------------------------------------------- */
.block-device-mockup__body {
  grid-area: body;
  max-width: 699px;
  padding-top: min(3.8021vw, 73px);                 /* line bottom 3771 → body 3844 */
  margin-left: calc(var(--nudge) * -0.25);          /* x99 */
}
.block-device-mockup__body p { font-size: var(--fs-body); line-height: var(--lh-body); }
.block-device-mockup__body p + p { margin-top: calc(var(--lh-body) * 1em); }   /* one blank line */

/* ---- Stage: the composition canvas --------------------------------------- */
.block-device-mockup__stage {
  --sw: 964;                                        /* design canvas (overridable per row: stage.w / .h) */
  --sh: 770;
  --u: calc(100cqw / var(--sw));                    /* one design px, resolved inside the stage */
  grid-area: stage;
  position: relative;
  width: calc(100% + var(--bleed));
  margin: 0;
  aspect-ratio: var(--sw) / var(--sh);
  container-type: inline-size;
  isolation: isolate;
}
.block-device-mockup--left .block-device-mockup__stage { margin-left: calc(var(--bleed) * -1); }

.block-device-mockup__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.block-device-mockup__stage--composite .block-device-mockup__media { object-fit: contain; }
/* composite.mask (video composites): the device silhouette, set by the script once the video plays. Sized and
   placed exactly like the video's own object-fit / object-position (the mask has the video's aspect ratio). */
.block-device-mockup__stage--composite video.block-device-mockup__media {
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: 50% 50%;
          mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Every placed box: --x / --y / --w / --h in stage units (presets below, or a row's own pos / device_pos). */
.block-device-mockup__device,
.block-device-mockup__float {
  position: absolute;
  left: calc(var(--x) / var(--sw) * 100%);
  top: calc(var(--y) / var(--sh) * 100%);
  width: calc(var(--w) / var(--sw) * 100%);
  height: calc(var(--h) / var(--sh) * 100%);
}

/* ---- Device: phone ------------------------------------------------------- */
.block-device-mockup__device { z-index: 2; }
.block-device-mockup__device--phone {
  --x: 301.7; --y: 5.8; --w: 362.2; --h: 758.8;
  border-radius: calc(50 * var(--u));
  background: #030303;
}
/* the metal rim: a 2px ring, light where the edge catches the light (top / bottom), dark on the sides */
.block-device-mockup__device--phone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: calc(2.2 * var(--u));
  border-radius: inherit;
  background: linear-gradient(180deg, #8d8d8d 0, #5a5a5a calc(6 * var(--u)), #2a2a2a calc(48 * var(--u)),
              #161616 30%, #161616 70%, #2a2a2a calc(100% - 48 * var(--u)), #4a4a4a calc(100% - 6 * var(--u)), #6e6e6e 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* side buttons: action + volume (left), power (right) */
.block-device-mockup__device--phone::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(-1.9 * var(--u));
  right: calc(-1.9 * var(--u));
  background:
    linear-gradient(#424242, #424242) left 0 top calc(93.5 * var(--u)) / calc(1.9 * var(--u)) calc(31.8 * var(--u)) no-repeat,
    linear-gradient(#424242, #424242) left 0 top calc(158.9 * var(--u)) / calc(1.9 * var(--u)) calc(54.6 * var(--u)) no-repeat,
    linear-gradient(#424242, #424242) left 0 top calc(226.5 * var(--u)) / calc(1.9 * var(--u)) calc(56.2 * var(--u)) no-repeat,
    linear-gradient(#3f3f3f, #3f3f3f) right 0 top calc(158.9 * var(--u)) / calc(1.9 * var(--u)) calc(80.8 * var(--u)) no-repeat;
}
.block-device-mockup__device--phone .block-device-mockup__screen {
  left: calc(8.8 * var(--u));
  top: calc(9.5 * var(--u));
  width: calc(343 * var(--u));
  height: calc(739.2 * var(--u));
  border-radius: calc(42 * var(--u));
  box-shadow: 0 0 0 calc(1.2 * var(--u)) #1a1a1a, 0 0 0 calc(2.2 * var(--u)) #262626;   /* the inner bezel ring */
}
.block-device-mockup__island {
  position: absolute;
  z-index: 2;
  left: calc(136.3 * var(--u));                     /* 438 − 301.7 */
  top: calc(16.8 * var(--u));
  width: calc(88 * var(--u));
  height: calc(22 * var(--u));
  border-radius: calc(11 * var(--u));
  background: #000;
}

/* ---- Device: laptop (lid + base, drawn) --------------------------------- */
.block-device-mockup__device--laptop { --x: 170; --y: 170; --w: 624; --h: 430; }
.block-device-mockup__device--laptop::before {       /* lid */
  content: "";
  position: absolute;
  inset: 0 6.5% 5% 6.5%;
  border-radius: calc(16 * var(--u)) calc(16 * var(--u)) 0 0;
  background: #0a0a0a;
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) #3a3a3a;
}
.block-device-mockup__device--laptop::after {        /* base */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5%;
  border-radius: 0 0 calc(14 * var(--u)) calc(14 * var(--u));
  background: linear-gradient(180deg, #9a9a9a, #5a5a5a 45%, #262626);
}
.block-device-mockup__device--laptop .block-device-mockup__screen {
  left: calc(6.5% + 12 * var(--u));
  right: calc(6.5% + 12 * var(--u));
  top: calc(12 * var(--u));
  bottom: calc(5% + 14 * var(--u));
  border-radius: calc(4 * var(--u));
}
.block-device-mockup__device--laptop .block-device-mockup__island { display: none; }

/* ---- Screen (one or more slides, crossfaded by the script) --------------- */
.block-device-mockup__screen {
  position: absolute;
  z-index: 0;
  overflow: hidden;
  background: #111;
}
.block-device-mockup__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
}
.block-device-mockup__slide.is-active { opacity: 1; }

/* ---- Floats -------------------------------------------------------------- */
.block-device-mockup__float {
  z-index: 1;
  overflow: hidden;
  border-radius: calc(var(--r, 0) * var(--u));     /* floats[].radius (stage units), e.g. rounded phone screenshots */
}
.block-device-mockup__float::after {               /* the Figma's 1px white inside stroke */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px #fff;
  pointer-events: none;
}
.block-device-mockup__float.is-bare::after { content: none; }
.block-device-mockup__float--left-top    { --x: 43;  --y: 26;  --w: 162; --h: 289; }
.block-device-mockup__float--left-bottom { --x: 87;  --y: 490; --w: 164; --h: 204; }
.block-device-mockup__float--right-1     { --x: 758; --y: 48;  --w: 164; --h: 164; }
.block-device-mockup__float--right-2     { --x: 758; --y: 217; --w: 164; --h: 164; }
.block-device-mockup__float--right-3     { --x: 758; --y: 385; --w: 164; --h: 164; }
.block-device-mockup__float--right-4     { --x: 758; --y: 555; --w: 164; --h: 164; }

/* ---- Connector lines ----------------------------------------------------- */
.block-device-mockup__lines {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.block-device-mockup__line line {
  stroke: #fff;
  stroke-width: max(0.75px, calc(1.4 * var(--u)));   /* ~1.4px at 1920, like the Figma export */
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
.block-device-mockup__line circle { fill: #fff; }
/* inset frames (SEO, Organic Social): the Figma lines carry a soft drop shadow — it is what keeps a white
   line visible where it crosses a white screen (SEO's AI Mode answer, the ChatGPT / Maps screenshots).
   Measured on the SEO composite: offset 4, 6 and a σ≈5 blur (stage units), ~10% darkening at the peak.
   (SMA's rows keep their line as built; add this rule to the default if SMA should match.) */
.block-device-mockup--inset .block-device-mockup__lines {
  filter: drop-shadow(calc(4 * var(--u)) calc(6 * var(--u)) calc(8 * var(--u)) #000);
}

/* ---- Entrance (js/blocks/device-mockup.js adds .is-armed, then .is-in on scroll-in) ------------
   The device rises into place; the floats slide out from behind it (each from --from-x / --from-y,
   set by the script toward the device centre) with a small stagger (--delay); the lines then draw
   and their dots settle. .is-snap resets without animating (scrolled back above). */
.block-device-mockup__stage.is-armed .block-device-mockup__device {
  transition: opacity .8s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.block-device-mockup__stage.is-armed .block-device-mockup__float {
  transition: opacity .7s ease var(--delay, 0s), transform 1.2s cubic-bezier(.16, 1, .3, 1) var(--delay, 0s);
}
.block-device-mockup__stage.is-armed .block-device-mockup__line line {
  stroke-dasharray: 1;
  transition: stroke-dashoffset .8s cubic-bezier(.65, 0, .35, 1) var(--line-delay, 1s);
}
.block-device-mockup__stage.is-armed .block-device-mockup__line circle {
  transition: opacity .4s ease var(--line-delay, 1s);
}
.block-device-mockup__stage.is-armed:not(.is-in) .block-device-mockup__device {
  opacity: 0;
  transform: translateY(calc(36 * var(--u)));
}
.block-device-mockup__stage.is-armed:not(.is-in) .block-device-mockup__float {
  opacity: 0;
  transform: translate(var(--from-x, 0), var(--from-y, 0)) scale(.94);
}
.block-device-mockup__stage.is-armed:not(.is-in) .block-device-mockup__line line { stroke-dashoffset: 1; }
.block-device-mockup__stage.is-armed:not(.is-in) .block-device-mockup__line circle { opacity: 0; }
.block-device-mockup__stage.is-armed.is-in .block-device-mockup__line line { stroke-dashoffset: 0; }
.block-device-mockup__stage.is-snap *,
.block-device-mockup__stage.is-snap *::before,
.block-device-mockup__stage.is-snap *::after { transition: none !important; }

/* ---- Variants (layout field) — desktop only; ≤1024 every variant stacks like the default ----------
   inset (SEO 4641:2, Organic Social 4539:196, Web Design 4816:2): eyebrow dot + title x103, rule x100,
   body x106 (the gutter every other block uses; SMA's text sits at 96) and the stage 4px right (x895).
   wide (Paid Search 4665:482, Media Buying 4684:795 ×2): stage 1268 × 881 at x660 → 1928 (the frame is 1920:
   8px are clipped), i.e. 231 left of the stage column (it runs under the text column, transparent there)
   and 108 past the container; the text keeps the inset gutter, sits above the stage, and is centred on it
   ~19px above its middle (PS: eyebrow y1471 = stage 1318 + 153; MB "Added value": 5201 = 5038 + 163 with a
   1-line title). Column 929 → width 1268/929, margin −231/929, so it scales with the column. */
@media (min-width: 1025px) {
  .block-device-mockup--inset,
  .block-device-mockup--wide { --gut: min(0.1563vw, 3px); }
  .block-device-mockup--inset .block-device-mockup__eyebrow,
  .block-device-mockup--wide .block-device-mockup__eyebrow,
  .block-device-mockup--inset .block-device-mockup__title,
  .block-device-mockup--wide .block-device-mockup__title { margin-left: var(--gut); }
  .block-device-mockup--inset .block-device-mockup__rule,
  .block-device-mockup--wide .block-device-mockup__rule { margin-left: 0; }
  .block-device-mockup--inset .block-device-mockup__body,
  .block-device-mockup--wide .block-device-mockup__body { margin-left: calc(var(--gut) * 2); }
  .block-device-mockup--inset .block-device-mockup__stage { margin-left: min(0.2083vw, 4px); }

  .block-device-mockup--wide { overflow-x: clip; }
  .block-device-mockup--wide .block-device-mockup__grid {
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      ".    stage"
      "head stage"
      "body stage"
      ".    stage";
  }
  .block-device-mockup--wide .block-device-mockup__head { padding-top: 0; }
  .block-device-mockup--wide .block-device-mockup__head,
  .block-device-mockup--wide .block-device-mockup__body { position: relative; z-index: 1; }
  .block-device-mockup--wide .block-device-mockup__body { margin-bottom: min(2.031vw, 39px); }   /* text centre ~19 above the stage centre: eyebrow +153 */
  .block-device-mockup--wide .block-device-mockup__stage {
    --sw: 1268;
    --sh: 881;
    width: calc(100% * 1268 / 929);
    margin-left: calc(100% * -231 / 929);
  }
}

/* ---- Tablet: stacked — heading, composition, copy ------------------------ */
@media (max-width: 1024px) {
  .block-device-mockup { --nudge: 0px; --bleed: 0px; padding: 72px 0; }
  .block-device-mockup__grid,
  .block-device-mockup--left .block-device-mockup__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "head" "stage" "body";
  }
  .block-device-mockup__head { padding-top: 0; }
  .block-device-mockup__title { font-size: 40px; }
  .block-device-mockup__line { display: inline; }   /* title_lines flow as one sentence */
  /* wide: show the device's window of the 1268-wide render (x 200→1160), not its empty left side */
  .block-device-mockup--wide .block-device-mockup__stage--composite { aspect-ratio: 960 / 881; }
  .block-device-mockup--wide .block-device-mockup__stage--composite .block-device-mockup__media {
    object-fit: cover;
    object-position: 65% 50%;                       /* 200 / (1268 − 960) */
    -webkit-mask-size: cover;                       /* a video's composite.mask follows the same crop */
            mask-size: cover;
    -webkit-mask-position: 65% 50%;
            mask-position: 65% 50%;
  }
  .block-device-mockup__stage,
  .block-device-mockup--left .block-device-mockup__stage {
    width: 100%;
    max-width: 964px;
    margin: 40px auto 0;
  }
  .block-device-mockup__body { max-width: 699px; padding-top: 48px; }
}

/* ---- Mobile (Figma "Mobile Category" 4148:2776, 402 wide) ---------------- */
@media (max-width: 640px) {
  .block-device-mockup { padding: 46px 0 40px; }     /* top = half the Mobile Category's 92px from the stack's closing rule (it pads 46 below) · 80px to the next, split */
  .block-device-mockup__eyebrow { margin-left: 2px; }                     /* dot x22 */
  .block-device-mockup__title { margin: 12px 0 0 -2px; font-size: 36px; } /* x18 y2848 */
  .block-device-mockup__rule { width: 64px; margin: 32px 0 0 -2px; }      /* x18, line y2969 */
  .block-device-mockup__stage,
  .block-device-mockup--left .block-device-mockup__stage {
    width: calc(100% + 2 * var(--gutter) - 17px);                         /* 385 at 402: x8 → 393 */
    margin: 26px 0 0 calc(8px - var(--gutter));
  }
  .block-device-mockup__body { padding: 48px 0 0 2px; margin-left: 0; }   /* x22 y3352 */
}