/* ═══════════════════════════════════════════════════════════════════════
   Projects Expert — inside-page hero options (review only)
   pe-inside-hero-options.css · loaded AFTER css/pe.css and css/pe-r2.css,
   and ONLY by templates/_inside-hero-options/*. No shipping page loads it.
   ───────────────────────────────────────────────────────────────────────
   Two visual treatments for the inside-page hero. Neither changes the hero's
   content, type scale, CTA structure, breadcrumb, eyebrow or aside — they add
   a visual to the right-hand zone and reserve clear space for the copy.

     A. Abstract  .pe-hero--field + .pe-hero__field  swept flow field (now shipping)
     B. Photo     .pe-hero--visual + .pe-ihv    framed image slot on the right

   Each attaches to the approved hero as one extra class on the section plus one
   element, so the chosen direction is a two-line change per template and nothing
   else moves.

   Reusable knobs, set on the section:
     --pe-ihv-w      width of the visual zone            (default clamp below)
     --pe-ihv-ratio  aspect ratio of the visual          (default 4 / 3)
     --pe-ihv-gap    clear space kept between copy and visual
     --pe-ihv-focus  object-position for the photo       (Option B only)
   ═══════════════════════════════════════════════════════════════════════ */

@layer pe.templates {

  /* ── Shared: the hero reserves a right-hand zone and the copy stays clear ── */
  .pe-hero--visual {
    --pe-ihv-w: clamp(18rem, 26vw, 30rem);
    --pe-ihv-ratio: 4 / 3;
    --pe-ihv-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  }

  /* Below 1024 the visual is a block under the copy, never behind it. The hero's own
     padding still applies, so nothing about the vertical rhythm changes. */
  .pe-ihv {
    position: relative;
    margin: clamp(1.75rem, 1rem + 2vw, 2.75rem) 0 0;
    width: 100%;
    aspect-ratio: var(--pe-ihv-ratio);
    border-radius: var(--pe-radius-lg);
    overflow: hidden;
  }

  /* From 1024 it moves into the right-hand zone, vertically centred on the copy.
     The hero already has overflow: hidden, so the zone can run to the page edge. */
  @media (min-width: 1024px) {
    .pe-hero--visual .pe-hero__content { position: relative; }
    .pe-hero--visual .pe-hero__grid,
    .pe-hero--visual .pe-hero__inner { max-width: calc(100% - var(--pe-ihv-w) - var(--pe-ihv-gap)); }
    /* A hero that already carries a facts aside has no right-hand zone to give: the aside IS
       the right-hand element, and a photograph behind it reads as a mistake. Rather than
       squeezing the approved panel, the slot stands down and those heroes ship unchanged.
       Nine of the twenty-nine inside heroes are in this case. */
    .pe-hero--visual:has(.pe-hero__aside) .pe-ihv { display: none; }
    .pe-hero--visual:has(.pe-hero__aside) .pe-hero__grid,
    .pe-hero--visual:has(.pe-hero__aside) .pe-hero__inner { max-width: none; }

    .pe-ihv {
      position: absolute; top: 50%; right: 0; margin: 0;
      width: var(--pe-ihv-w);
      transform: translateY(-50%);
      border-radius: var(--pe-radius-lg) 0 0 var(--pe-radius-lg);
    }
  }

  /* The corner gear and a visual in the same zone would fight; the visual carries the
     motif instead, so the gear steps back rather than being removed. */
  .pe-hero--visual .pe-hero__corner { opacity: 0.12; }

  /* Option A now ships: its rules live in css/pe-r2.css under
     "INSIDE-PAGE HERO FIELD". This sheet keeps Option B, which was not
     selected, so the comparison pages still render. */

  /* ═══ OPTION B — PHOTO ════════════════════════════════════════════════
     An image slot, not an image. The frame owns the ratio and the crop; the
     <picture> inside is the only thing that changes when the licensed shot
     arrives. --pe-ihv-focus moves the subject within the frame without
     touching the markup, which is how a portrait or a wide shot is made to
     sit correctly in the same slot. */
  .pe-ihv--photo {
    --pe-ihv-focus: 62% 58%;
    background: var(--pe-mist);
    box-shadow: inset 0 0 0 1px var(--pe-line);
  }
  /* <picture> is an inline wrapper with no height of its own, so the image's height: 100%
     would resolve against nothing. display: contents takes it out of the box tree and lets
     the image fill the frame directly — the same technique the homepage banner uses. */
  .pe-ihv--photo picture { display: contents; }
  .pe-ihv--photo img {
    display: block; width: 100%; height: 100%;
    object-fit: cover;
    object-position: var(--pe-ihv-focus);
  }
  /* The frame's inner edge, so a photograph never sits flush against light copy */
  .pe-ihv--photo::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(7, 45, 51, 0.12);
  }
  /* From 1024 the frame runs off the right edge, so its left edge is the only one that
     needs softening into the hero ground. */
  @media (min-width: 1024px) {
    .pe-ihv--photo {
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%);
              mask-image: linear-gradient(90deg, transparent 0, #000 9%);
    }
    .pe-ihv--photo::after { display: none; }
  }
  .pe-on-dark .pe-ihv--photo { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--pe-line-inverse-soft); }

  /* Placeholder marker — removed with the placeholder */
  .pe-ihv__note {
    position: absolute; z-index: 2; left: 0.75rem; bottom: 0.75rem;
    padding: 0.25rem 0.625rem; border-radius: var(--pe-radius-pill);
    border: 1px solid var(--pe-line); background: rgba(255, 255, 255, 0.92);
    font-family: var(--pe-font-body); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--pe-text-muted);
  }
  @media (min-width: 1024px) { .pe-ihv__note { left: 2rem; } }

  /* Review chrome: names the option on screenshots */
  .pe-ihv-tag {
    display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: var(--pe-space-4);
    padding: 0.3rem 0.75rem; border-radius: var(--pe-radius-pill);
    border: 1px solid var(--pe-line); background: var(--pe-white);
    font-family: var(--pe-font-body); font-size: 0.75rem; letter-spacing: var(--pe-tracking-caps);
    text-transform: uppercase; color: var(--pe-text-muted);
  }
  .pe-ihv-tag b { color: var(--pe-ink); }
}

@layer pe.motion {
  /* The field arrives with the copy, once, and never loops. Reduced motion gets it
     finished and still, at the same layout. */
  .pe-motion-full .pe-ihv { animation: pe-ihv-in 900ms var(--pe-ease-expo) 120ms backwards; }
  @keyframes pe-ihv-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @media (min-width: 1024px) {
    .pe-motion-full .pe-ihv { animation-name: pe-ihv-in-side; }
    @keyframes pe-ihv-in-side { from { opacity: 0; transform: translateY(-50%) translateX(16px); } to { opacity: 1; transform: translateY(-50%); } }
  }
  .pe-motion-reduced .pe-ihv, .pe-motion-off .pe-ihv { animation: none !important; }
  @media (prefers-reduced-motion: reduce) { .pe-ihv { animation: none !important; } }
}