/* ═══════════════════════════════════════════════════════════════════════
   Projects Expert — compact mobile lists (review only)
   pe-mobile-compact.css · loaded ONLY by templates/_mobile-compact/*.
   ───────────────────────────────────────────────────────────────────────
   Solutions by Industry and Solutions by Function each stack five long
   nodes on a phone, which makes the page very tall. This exposes the first
   two and puts the rest behind one control.

   It is not a new interaction: it reuses the disclosure pe.js already binds
   ([data-pe-disclosure] + aria-expanded + aria-controls + [hidden]), which
   is the same mechanism the mobile drawer uses. One pattern, both pages.

   Desktop and tablet are untouched: from 768 the control is removed and the
   group is forced visible, so the approved layout renders exactly as today.
   ═══════════════════════════════════════════════════════════════════════ */

@layer pe.components {

  /* The control. Full width and comfortably past the 44px touch target. */
  .pe-more__toggle {
    display: flex; width: 100%; align-items: center; justify-content: center; gap: var(--pe-space-3);
    min-height: 52px; margin-top: var(--pe-space-6);
    padding: var(--pe-space-4) var(--pe-space-5);
    border: 1px solid var(--pe-line-strong); border-radius: var(--pe-radius-pill);
    background: var(--pe-white); color: var(--pe-text-heading);
    font-family: var(--pe-font-display); font-weight: 600; font-size: 15px;
    cursor: pointer;
  }
  .pe-more__toggle:hover { border-color: var(--pe-teal-500); color: var(--pe-teal-900); }
  .pe-more__count { color: var(--pe-text-muted); font-weight: 400; }
  .pe-more__icon {
    flex: none; width: 20px; height: 20px; color: var(--pe-teal-500);
    transition: transform var(--pe-dur-base) var(--pe-ease-out);
  }
  .pe-more__toggle[aria-expanded="true"] .pe-more__icon { transform: rotate(180deg); }
  /* The label swaps without JavaScript touching the text */
  .pe-more__toggle .pe-more__less { display: none; }
  .pe-more__toggle[aria-expanded="true"] .pe-more__more { display: none; }
  .pe-more__toggle[aria-expanded="true"] .pe-more__less { display: inline; }

  /* The revealed group gets the same rhythm the nodes already have */
  .pe-more__rest > .pe-node:first-child { margin-top: var(--pe-space-8); }

  /* Desktop and tablet: no control, nothing hidden, layout exactly as approved.
     pe.css sets [hidden] { display: none !important }, so this has to match it. */
  @media (min-width: 768px) {
    .pe-more__toggle { display: none; }
    .pe-more__rest[hidden] { display: block !important; }
  }
}

@layer pe.motion {
  /* The group appears; it does not slide. A height transition on five long
     articles is the kind of movement that fights reading on a phone. */
  .pe-motion-full .pe-more__rest:not([hidden]) > .pe-node {
    animation: pe-more-in 420ms var(--pe-ease-out) both;
  }
  @keyframes pe-more-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .pe-motion-reduced .pe-more__rest > .pe-node,
  .pe-motion-off .pe-more__rest > .pe-node { animation: none !important; }
  @media (prefers-reduced-motion: reduce) { .pe-more__rest > .pe-node { animation: none !important; } }
}

/* ── Review harness: two phone frames side by side ──────────────────── */
@layer pe.templates {
  .pe-compare { display: grid; gap: var(--pe-space-7); align-items: start; }
  @media (min-width: 900px) { .pe-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .pe-compare__col { min-width: 0; }
  .pe-compare__head { display: flex; align-items: baseline; gap: var(--pe-space-3); margin-bottom: var(--pe-space-4); }
  .pe-compare__tag {
    padding: 0.25rem 0.625rem; border-radius: var(--pe-radius-pill);
    border: 1px solid var(--pe-line); background: var(--pe-white);
    font-family: var(--pe-font-body); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--pe-text-muted);
  }
  .pe-compare__tag--proposed { border-color: var(--pe-teal-500); color: var(--pe-teal-700); }
  .pe-compare__frame {
    width: 100%; max-width: 390px; height: min(78vh, 760px);
    border: 1px solid var(--pe-line-strong); border-radius: var(--pe-radius-lg);
    background: var(--pe-white); overflow: hidden; box-shadow: var(--pe-shadow-card);
  }
  .pe-compare__frame iframe { display: block; width: 390px; height: 100%; border: 0; }
  .pe-compare__note { margin-top: var(--pe-space-4); max-width: 34rem; color: var(--pe-text-muted); font-size: 15px; }
}

/* ── Case-study / story rows with imagery (review only) ─────────────────
   The image-led variant of .pe-story-row. It adds one grid column and reuses
   .pe-media--duotone, the treatment the industry nodes already use, so the
   rows gain a picture without gaining a new visual language. */
@layer pe.components {
  .pe-story-row--media { gap: var(--pe-space-4) var(--pe-space-5); }
  .pe-story-row--media .pe-story-row__media {
    width: 100%; margin: 0 0 var(--pe-space-2);
    border-radius: var(--pe-radius-md); overflow: hidden;
  }
  @media (min-width: 768px) {
    .pe-story-row--media { grid-template-columns: 9rem 11rem minmax(0, 1fr) 24px; align-items: center; }
    .pe-story-row--media .pe-story-row__media { margin: 0; }
  }
  /* A row whose image is missing must not collapse the grid: the column holds
     its place and shows the brand ground, so a feed with mixed content stays aligned. */
  .pe-story-row--media .pe-story-row__media:empty { aspect-ratio: 4 / 3; background: var(--pe-mist); }
}