/* report-examples.css: the example-report frames (the sweep of 2026-09-20).
 * ===========================================================================
 * Ten frames on five pages hold a capture of a real report: seo-report, full-report,
 * market-intelligence, pricing and case-studies. Three different frames grew around them at
 * three different times, in three different sheets:
 *
 *   .mo-frame-box  (money-onetime.css)  the $29 and $99 pages
 *   .capture-frame (money-plans.css)    pricing's "plan's proof" figure
 *   .report-card   (components.css)     the case studies gallery cards
 *
 * This sheet is the one layer above all three, so the two things the owner asked for are
 * stated once rather than three times, and so the shared sheets keep their own stamps (a bump
 * of components.css reaches every page on the site, and the fix here reaches five). It is
 * linked LAST on those five pages, and every selector below mirrors the one it overrides at
 * the same specificity, so source order is what decides.
 *
 * WHAT IT CHANGES, AND WHY
 *
 * 1. A FRAME TAKES THE SHAPE OF THE CAPTURE IT HOLDS. The three sheets each pinned the frame
 *    at 16:10 and cover-fit the picture inside it, which means the frame, not the photographer,
 *    decided what the visitor sees, and a re-cut at any other shape silently loses whatever
 *    falls outside. The pictures already state their own width and height, so the box can come
 *    from the picture: the browser reserves the exact box from those attributes before the file
 *    arrives, with or without this sheet, and the image is never cropped by a millimetre.
 *    A re-cut at a taller, shorter or wider window now drops in with NO stylesheet change at
 *    all. That is the whole point: the demo payloads are being rebuilt, these four captures
 *    will be taken again, and the frames must not have an opinion about their shape.
 *
 *    The one place that keeps a fixed window is the money pages' HERO, below 900px, where the
 *    grid stacks: there the frame stays 16:10 and top-anchored, so a tall capture shows its
 *    top and the order form stays within the first screens, which is that hero's own law.
 *
 * 2. THE WHOLE FRAME OPENS THE FULL EXAMPLE. Not one image of the ten was inside a link. Five
 *    carried "See a sample report" in the caption beneath, two carried a button in the card
 *    below, and three offered no way in at all. The frame itself is the target now, at every
 *    one of the ten, and it says so in the site's own mono voice rather than through a hover
 *    overlay that a touch screen never shows: a small gold tag, always visible, pinned in the
 *    corner of the picture. Hover and focus fill it, and the focus ring is drawn INSIDE the
 *    frame because both card frames clip their overflow. The caption links stay: a reader who
 *    is reading the caption should not have to travel back up to the picture.
 *
 * TOKENS ONLY. No em dashes in customer copy. Every transition carries its reduced-motion
 * guard in this same section.
 * ======================================================================================== */

/* ── 1. The frame takes the capture's own shape ──────────────────────────── */

/* the money pages' box was a fixed 16:10 with the slot absolutely covering it; a filled box
   now stands on the slot, and the slot on the picture. An empty box keeps its 16:10 for the
   drawn stand-in, which is absolutely positioned and has nothing else to stand on. */
.mo-frame-box:has(> .capture-slot:not([hidden])) { aspect-ratio: auto; }
.mo-frame-box > .capture-slot:not([hidden]) { position: relative; inset: auto; }
/* pricing's figure and the case-study cards pinned the slot itself at 16:10 */
.capture-frame > .capture-slot:not([hidden]),
.report-card > .capture-slot:not([hidden]) { aspect-ratio: auto; }

/* one rule for all three: the picture sets the height, and the width and height attributes on
   the <img> hold the box before the file lands, so nothing moves when it decodes */
.mo-frame-box > .capture-slot:not([hidden]) > img,
.capture-frame > .capture-slot:not([hidden]) > img,
.report-card > .capture-slot:not([hidden]) > img {
  display: block; width: 100%; height: auto; object-fit: fill;
}

/* THE STACKED HERO KEEPS ITS WIDE WINDOW. Above 900px the hero is two columns and the frame
   stands beside the words; below it the columns stack, and a tall capture at the full width of
   a phone would push the form off the first screens. So the hero's frame goes back to the
   fixed 16:10 box with the picture top-anchored inside it: a tall capture shows its top, which
   is the same picture the wide frames showed before it was re-cut. */
@media (max-width: 900px) {
  .mo-hero-grid .mo-frame-box:has(> .capture-slot:not([hidden])) { aspect-ratio: 16 / 10; }
  .mo-hero-grid .mo-frame-box > .capture-slot:not([hidden]) { position: absolute; inset: 0; }
  .mo-hero-grid .mo-frame-box > .capture-slot:not([hidden]) > img {
    height: 100%; object-fit: cover; object-position: top center;
  }
}

/* ── 1b. A HERO FIGURE THAT ENDS WHERE THE WORDS END ─────────────────────── */
/* Beside the words, the picture is not the content: its job is to be the right size for them.
   Rule 1 gives a frame the capture's own shape, and the $99 hero's capture is a whole report
   chapter at 979x1476. In a 520px column that is 784px of picture against about 580px of words,
   so the figure hung some 200px below the buttons and the two columns ended nowhere near each
   other (the owner, 2026-09-20).
   .mo-frame--fit says: take the row's height, whatever the words beside you turn out to be, and
   crop rather than overhang. The figure becomes a grid of its own, the caption takes what it
   needs and the box takes the rest; the picture inside is taken OUT OF FLOW, which is what lets
   the figure ask the hero's row for no height of its own so the row is measured from the copy.
   (In flow it cannot work: an fr track under a max-content constraint grows back to its item's
   own contribution, and the figure would inflate the row it was trying to match.)
   It is opt-in, and belongs only on a capture TALLER than its column. The $29 and free pages'
   captures are landscape and already sit shorter than their words; stretching one to a taller
   box would scale it up and cut its sides off, which is the opposite of the fix.
   The min-height is the floor under a hero whose words are unusually short: past it the figure
   stops shrinking and drives the row itself, which is the right way round. */
@media (min-width: 901px) {
  .mo-hero-grid > .mo-frame--fit { align-self: stretch; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
  .mo-hero-grid > .mo-frame--fit > .mo-frame-box { min-height: 300px; }
  .mo-hero-grid > .mo-frame--fit > .mo-frame-box > .capture-slot:not([hidden]) { position: absolute; inset: 0; }
  .mo-hero-grid > .mo-frame--fit > .mo-frame-box > .capture-slot:not([hidden]) > img {
    height: 100%; object-fit: cover; object-position: top center;
  }
}

/* ── 2. The whole frame opens the full example ───────────────────────────── */

/* the slot is the picture's own box in all three frames, so the link is laid over the slot and
   is exactly the picture, never the caption under it */
.capture-slot { position: relative; }
.capture-open {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: clamp(8px, 2.4%, 14px);
  text-decoration: none; color: inherit;
  /* the arrow the tag draws, inherited by the tag inside it */
  --capture-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9L9 3M9 3H4.2M9 3v4.8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.capture-open-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 0.64rem; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--gold); background: rgba(8, 11, 10, .84);
  border: 1px solid rgba(215, 182, 93, .45);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
/* the arrow is the site's "this leaves the page" mark, drawn rather than typed so no copy
   guard ever reads it as a word */
.capture-open-tag::after {
  content: ""; width: 9px; height: 9px; flex: none;
  background: currentColor;
  -webkit-mask: var(--capture-arrow) center / contain no-repeat;
          mask: var(--capture-arrow) center / contain no-repeat;
}
.capture-open:hover .capture-open-tag,
.capture-open:focus-visible .capture-open-tag {
  color: #12160f; background: var(--gold); border-color: var(--gold);
}
/* the frame itself answers, drawn inside the box because .mo-frame-box and .report-card both
   clip their overflow and an outline drawn outside would be cut off */
.capture-open:hover { box-shadow: inset 0 0 0 2px rgba(215, 182, 93, .55); }
.capture-open:focus-visible {
  outline: 3px solid var(--gold); outline-offset: -3px;
  box-shadow: inset 0 0 0 5px rgba(8, 11, 10, .85);
}
@media (prefers-reduced-motion: reduce) {
  .capture-open-tag { transition: none; }
}

/* a phone gets the same tag, one step smaller, still a 44px-tall target because the target is
   the whole picture */
@media (max-width: 520px) {
  .capture-open-tag { font-size: 0.58rem; letter-spacing: .08em; padding: 5px 9px; }
}