/* FlyNumber "product shot" hero — the pattern every page hero with a
 * screenshot/collage follows (home first; pricing, how-it-works, features,
 * call-forwarding next).
 *
 *   .page-hero   two-column block — copy left, shot right — in the site's
 *                wide measure (1200px, same as the nav bar) instead of
 *                minima's ~800px column. Sits under the page's sticker h1.
 *
 * The shot itself is UNFRAMED, straight on the page background, exactly like
 * the site's existing illustrations — a collage of floating cards inside a
 * hard sticker box double-frames it (tried, looked awkward). Whatever goes in
 * .page-hero-shot (an <img>, a <picture>, an HTML collage) keeps its own
 * product look; the sticker title, the site's copy styles and .button-more
 * around it are what tie it to the page.
 */

/* `100vw` counts the scrollbar gutter, and the collage's tilted/shadowed
   boxes can graze the viewport edge at in-between widths — clip ancestors so
   neither ever grows a phantom horizontal scrollbar (same guard rates.css
   uses; the old .home-hero version of this rule was lost in the rename). */
html:has(.page-hero),
body:has(.page-hero) { overflow-x: clip; }

.page-hero {
  /* Break out of the 800px .wrapper to the nav's 1200px measure, centred.
     `100vw - 48px` (not 40) leaves room for a vertical scrollbar, which vw
     counts but the viewport doesn't show. */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, calc(100vw - 48px));
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 44px;
  align-items: center;
  margin: 10px 0 36px;
}
/* The copy column is the same sticker box the sections below use
   (.content-with-image: #f9f9f9, 2px border, 5px offset shadow) and carries
   the `text-section` class in the markup for the site's paragraph treatment
   (✦ marker, black, centred — custom.css:916). Plain paragraphs next to the
   boxed sections below read as an afterthought; this is what makes the hero
   copy as prominent as the rest of the page. The shot beside it stays bare. */
.page-hero-text {
  min-width: 0;
  box-sizing: border-box;
  background-color: #f9f9f9;
  border: 2px solid #333;
  box-shadow: 5px 5px 0 #333;
  padding: 20px;
  margin: 0 5px 5px 0;   /* room for the offset shadow inside the grid cell */
}
.page-hero-text > p:first-child { margin-top: 0; }
.page-hero-text .button-more { margin: 24px auto 4px; }
.page-hero-shot { min-width: 0; }
.page-hero-shot > img, .page-hero-shot > picture > img { display: block; width: 100%; height: auto; }

@media (max-width: 1024px) {
  .page-hero { grid-template-columns: 1fr; gap: 28px; }
  .page-hero-shot { max-width: 900px; width: 100%; margin: 0 auto; }
}
@media (max-width: 720px) {
  .page-hero { width: calc(100vw - 30px); margin: 4px 0 28px; }
}