/* ═══════════════════════════════════════════
   EDITORIAL GRID
   A 4-column grid with visible cell borders
   that spans every section and creates the
   Figma wireframe aesthetic.
   ═══════════════════════════════════════════ */

.pl-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  position: relative;
}

/* Cell borders stop at the frame's vertical grid line. Only the nav's
   top + bottom horizontal lines extend to the viewport edges — every
   other section divider respects the frame. */
.pl-cell {
  border-right:  1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
  padding: var(--cell-pad, var(--sp-32));
  min-height: var(--cell-min-h, auto);
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  position: relative;
}
.pl-cell:last-child { border-right: none; }

.pl-cell[data-span="2"] { grid-column: span 2; }
.pl-cell[data-span="3"] { grid-column: span 3; }
.pl-cell[data-span="4"] { grid-column: span 4; }

.pl-cell--spacer {
  --cell-min-h: 80px;
  padding: 0;
}

/* Tighter spacer row — used between a section's heading and its
   content. Keeps the gap between folds full-height, just shrinks
   the inner gap to 60% (80px → 48px). */
.pl-grid--spacer-tight .pl-cell--spacer { --cell-min-h: 48px; }

/* Inter-fold gap row — sits BETWEEN sections (outside any [data-theme]
   block) so it always shows the page canvas colour, never a section's
   themed background. Used to separate folds with a clean empty row. */
.pl-grid--fold-gap {
  background: var(--page-bg, #E6E6E6);
}

/* Tinted cell — used to highlight specific cells (heading boxes,
   the hero chart cell, the parallelloop positioning cell, etc.).
   Light theme uses a soft warm grey; dark theme uses near-black so
   it sits naturally against the dark canvas (otherwise the light
   tint blocks any text reading against the dark surface). */
.pl-cell--tinted { background: #D9D9D9; }

/* Whole-section tint — used by Proof Point. Wins over the
   [data-theme] background rule via extra class specificity. */
.pl-section--tinted[data-theme],
.pl-section--tinted { background: #D9D9D9; }

/* Dark-theme overrides. Triggered both when the body is globally
   dark and when an individual section is dark-themed. */
[data-theme="dark"] .pl-cell--tinted,
.pl-cell--tinted[data-theme="dark"],
[data-theme="dark"] .pl-section--tinted,
.pl-section--tinted[data-theme="dark"] { background: #1E1E1E; }

/* Cell with orange fill — CTA block full-bleed */
.pl-cell--accent {
  background: var(--bg-accent);
  color: var(--color-white);
}

/* Cell that hosts a visual (graph, diagram) without text padding */
.pl-cell--visual {
  padding: 0;
  overflow: hidden;
}

.pl-cell--flush {
  padding: 0;
}

/* Title cell */
.pl-cell__title {
  font-size: clamp(2.25rem, 3.5vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}

.pl-cell__lead {
  font-size: var(--fs-lg);
  line-height: 1.4;
  color: var(--text);
  max-width: 44ch;
}

/* Small uppercase label */
.pl-cell__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}

.pl-cell__label--accent { color: var(--accent); }

/* Body copy in a cell */
.pl-cell__body {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-soft);
}

.pl-cell__body-muted { color: var(--text-muted); }

/* Responsive collapse below tablet.
   The !important overrides section-specific --cols values
   (e.g. .pl-hero__main { --cols: 4 }) that would otherwise win by
   source-order specificity. */
@media (max-width: 880px) {
  .pl-grid { --cols: 2 !important; }
  .pl-cell[data-span="2"],
  .pl-cell[data-span="3"],
  .pl-cell[data-span="4"] { grid-column: span 2; }
}

@media (max-width: 640px) {
  .pl-grid { --cols: 1 !important; }
  .pl-cell,
  .pl-cell[data-span="2"],
  .pl-cell[data-span="3"],
  .pl-cell[data-span="4"] { grid-column: span 1; }
  .pl-cell { padding: var(--sp-24); }
  /* Collapse multi-cell spacer rows to a single short divider on mobile */
  .pl-cell--spacer { --cell-min-h: 40px; }
  .pl-cell--spacer ~ .pl-cell--spacer { display: none; }
}