/* ==========================================================================
   Features — Device stage (shared)
   ==========================================================================
   A product render presented beside the column that reads it. Two sections of
   the family close on this composition — meeting preparation and CRM updates —
   and they showed it: the figure, its light, the two columns and both of their
   breakpoints were written twice, declaration for declaration.

   What the frame owns is the PRESENTATION, never the argument. The render is a
   cut-out phone on a transparent canvas, so it needs two lights that no image
   carries with it: a key light anchored on the one control the section is
   about, and a floor, without which the cut-out drifts over the page glow.
   Everything a section actually says — a duration, a waveform, stations,
   situations — is that section's own, and stays in its own folder.

   The three things that differ between two renders are variables, not forks:

     --device-ratio        the master's aspect ratio (they are not the same box)
     --device-anchor-x/y   where the key light sits, measured on the canvas
     --device-key-spread   how wide that light opens

   Same family rule as StoryScaffold and StoryDeck: linked by the page shell
   BEFORE the section sheet that fills it.
   ========================================================================== */

/* --- The composition -------------------------------------------------------- */

/* Both columns are sized to their content and centred as one cluster —
   stretched to the container's full width they would read as two objects on a
   page rather than one composition. */
.feat-device-stage {
  --device-stage-gap: clamp(3.5rem, 8vw, 7.5rem);

  display: grid;
  grid-template-areas: 'visual content';
  grid-template-columns: minmax(15rem, 19rem) minmax(0, 34rem);
  gap: var(--device-stage-gap);
  align-items: start;
  justify-content: center;
}

.feat-device-stage__content {
  display: grid;
  grid-area: content;
  align-content: start;
  min-width: 0;
  padding-top: clamp(0.3rem, 1.2vw, 1rem);
}

/* The line the column resolves to, marked in the family's value colour. The
   type and the mark are the object's; WHERE the line sits is not, because it
   hangs under whatever the section built above it — a two-situation spine on
   one page, a three-station relay on the other. Hence three variables and no
   fork: how far below, how far in, and where the mark lands. */
.feat-device-stage__foot {
  position: relative;
  padding-left: var(--device-stage-foot-inset, 0);
  margin: var(--device-stage-foot-gap, clamp(2.1rem, 3.6vw, 3rem)) 0 0;
  color: var(--feat-text);
  font-family: var(--feat-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.feat-device-stage__foot::before {
  content: '';
  position: absolute;
  top: 0.42rem;
  left: var(--device-stage-foot-x, 0);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--feat-mint);
  box-shadow:
    0 0 0 4px var(--feat-bg),
    0 0 0 6px rgba(var(--feat-mint-rgb), 0.4),
    0 0 22px rgba(var(--feat-mint-rgb), 0.75);
  transform: translateX(-50%);
}

/* --- The render ------------------------------------------------------------- */

.feat-device {
  display: grid;
  grid-area: visual;
  gap: 1.1rem;
  justify-items: center;
  justify-self: center;
  min-width: 0;
  margin: 0;
}

.feat-device__caption {
  color: var(--feat-muted);
  font-family: var(--feat-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}

.feat-device__frame {
  position: relative;
  display: block;
  width: min(18.5rem, 25vw);
  aspect-ratio: var(--device-ratio);
  isolation: isolate;
}

/* Key light: the cut-out is grounded without drawing another interface element
   over the render. Anchored on the control the section is about, so a section
   that has a gesture to show lights exactly that. */
.feat-device__frame::before {
  content: '';
  position: absolute;
  top: var(--device-anchor-y);
  left: var(--device-anchor-x);
  z-index: -1;
  width: var(--device-key-spread, 230%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(84, 45, 255, 0.4),
    rgba(111, 66, 255, 0.13) 54%,
    transparent 76%
  );
  filter: blur(56px);
  transform: translate(-50%, -50%);
}

/* Floor: the render is a cut-out with no shadow of its own, and without one it
   floats over the page glow. */
.feat-device__frame::after {
  content: '';
  position: absolute;
  bottom: -1.5%;
  left: 50%;
  z-index: -1;
  width: 118%;
  height: 5%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(98, 47, 255, 0.42),
    rgba(84, 45, 255, 0.12) 58%,
    transparent 80%
  );
  filter: blur(24px);
  transform: translateX(-50%);
}

.feat-device__screen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* --- Breakpoints ------------------------------------------------------------ */

/* Stacked, the render comes first and the column reads under it. */
@media (max-width: 1023px) {
  .feat-device-stage {
    grid-template-areas:
      'visual'
      'content';
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.6rem, 6vw, 3.6rem);
    justify-items: center;
  }

  .feat-device-stage__content {
    width: 100%;
    max-width: 34rem;
    padding-top: 0;
  }

  .feat-device__frame {
    width: min(38vw, 17rem);
  }
}

@media (max-width: 640px) {
  .feat-device__frame {
    width: min(58vw, 13.5rem);
  }

  /* A large blur radius is the most expensive paint these sections make; on a
     phone the light is smaller, so the radius shrinks with it. */
  .feat-device__frame::before {
    filter: blur(38px);
  }
}