/* ===================================================================
   studio-grid.css — Homepage "What's inside" rebuilt as a RING around
   the Studio centerpiece, with a dual-layer particle field for depth.
   Linked AFTER theme.css so it wins the cascade. Scoped to
   .features-grid--ring so the features-page grid is untouched.

   Layout (desktop, 4 cols):
     [ 1 ][ 2 ][ 3 ][ 4 ]
     [ 5 ][  STUDIO   ][ 6 ]
     [ 7 ][  (2×2)    ][ 8 ]
     [ 9 ][10 ][11 ][12 ]
   Studio is placed explicitly (cols 2–3, rows 2–3); the 12 cards
   auto-place into the remaining cells in DOM order.

   Depth (z within the grid):
     1  back particle canvas   (behind cards)
     2  feature cards
     3  front particle canvas  (above cards)
     4  Studio room            (particles flow behind it)
   =================================================================== */

.features-grid.features-grid--ring {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;          /* don't clip Studio shadow / particles */
  position: relative;
  align-items: stretch;
}

/* Tiles float (no hairline container) so particles can weave between them */
.features-grid--ring .feature-card {
  position: relative;
  z-index: 2;
  border-radius: 16px;
  border: 1px solid rgba(20, 33, 61, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;     /* center content in the airier flank tiles */
}

/* ── Studio centerpiece — spans the inner 2×2 ────────────────────── */
.features-studio {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  position: relative;
  z-index: 4;                  /* topmost → particles pass behind it */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;                /* allow the room to shrink into the cell */
}
.features-studio-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -0.02em;
  color: var(--text);
  text-align: center;
  margin: 0 0 14px;
}
.features-studio-label em { font-style: italic; color: var(--accent); }
.features-studio .sv {
  max-width: none;
  width: 100%;
  margin: 0;
  /* Lift the room above the orbiting cards — layered drop shadow (soft halo +
     tighter contact) reads as elevated, the centerpiece sitting on top. */
  box-shadow: 0 36px 80px rgba(20, 33, 61, 0.30), 0 10px 26px rgba(20, 33, 61, 0.16);
}

/* Studio-as-a-card — desktop shows the room above, so the card is hidden here;
   it only appears on mobile (where the room is dropped). Selector matches the
   specificity of `.features-grid--ring .feature-card` so the hide actually wins. */
.features-grid--ring .feature-card--studio-m { display: none; }

/* ── Particle layers (canvases injected by JS in stage 2) ────────── */
.fx-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.fx-particles--back  { z-index: 1; }   /* behind the cards */
.fx-particles--front { z-index: 3; }   /* above the cards, behind Studio */

/* ── Responsive: single column. Mobile drops the room mockup and shows
   Studio as a card, placed first in the list. ─────────────────────── */
@media (max-width: 980px) {
  .features-grid.features-grid--ring { grid-template-columns: 1fr; }
  .features-studio { display: none; }              /* room is desktop-only */
  .features-grid--ring .feature-card--studio-m {   /* Studio card leads the list, lifted above the rest */
    display: flex; order: -1;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 40px rgba(20, 33, 61, 0.20);
  }
  .features-grid--ring .feature-card { justify-content: flex-start; }
}