/* SearchSoda page media — shared image pattern for industry and service pages.
   Implements the six-slot layout in IMAGE-VIDEO-BRIEF.md §2 as three reusable
   blocks rather than a bespoke layout per page:

     .pm-split      a portrait beside a section header  (slots 2 and 5)
     .pm-duo        two 4:3 frames side by side          (slot 4, In command x2)
     .pm-band       one 4:3 frame, centred and capped    (slot 6, The result)

   Every photograph sits inside a dark mount. The set is graded near-black, so
   on the light sections it would otherwise read as a hole in the page. The
   mount, the 2px #2E2E3A border and the accent rule are the same idiom as
   .modelslab-frame and the other demo frames, which is what ties the
   photography to the rest of the site.

   Nothing here animates and nothing is positioned outside its own box, so it
   cannot introduce layout shift. Every <img> still needs width and height
   attributes in the markup. */

:root{
  --pm-mount:#0B0B0F;
  --pm-edge:#2E2E3A;
  --pm-rule:linear-gradient(90deg,#39FF14,#00BFFF,#8A2BE2);
  --pm-cap:rgba(255,255,255,.72);
}

/* ---- the frame ------------------------------------------------------- */

.pm-figure{
  position:relative;
  margin:0;
  background:var(--pm-mount);
  border:2px solid var(--pm-edge);
  box-shadow:0 18px 44px rgba(0,0,0,.26);
  overflow:hidden;
}

.pm-figure::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:var(--pm-rule);
  z-index:2;
}

.pm-figure img{
  display:block;
  width:100%;
  height:auto;
}

.pm-figure figcaption{
  padding:12px 16px 14px;
  font-family:var(--font-body);
  font-size:.78rem;
  line-height:1.5;
  letter-spacing:.01em;
  color:var(--pm-cap);
}

/* On the dark sections the mount and the section share a background, so the
   border is what separates them. Lift it slightly. */
.section-dark .pm-figure{
  border-color:#3A3A48;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}

/* ---- .pm-split: portrait beside a section header --------------------- */

.pm-split{
  display:grid;
  grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);
  align-items:center;
  /* .section-header normally carries margin-bottom:60px. Inside a split that
     margin is removed, so the split itself has to hold the section apart from
     whatever grid follows it, or the cards butt straight up against the frame. */
  margin-bottom:clamp(34px,4.5vw,56px);
}

/* Image on the right. Put the copy first in the markup for this variant so the
   reading order is right without reordering anything. */
.pm-split--reverse{
  grid-template-columns:minmax(0,1fr) minmax(0,360px);
}

/* Landscape media in a split. A 4:3 frame in the 360px portrait column is only
   270px tall and reads as a thumbnail beside a heading, so the column widens.
   Some pages supply a landscape for slot 5 and some a portrait; this is the
   difference between the two, and nothing else changes. */
.pm-split--media-wide{
  grid-template-columns:minmax(0,520px) minmax(0,1fr);
}

.pm-split--media-wide.pm-split--reverse{
  grid-template-columns:minmax(0,1fr) minmax(0,520px);
}

/* A .section-header inside a split is left-aligned and unconstrained; the
   centred, 720px version is for full-width headers. */
.pm-split .section-header{
  text-align:left;
  max-width:none;
  margin:0;
}

.pm-split .section-header p{
  margin-left:0;
  margin-right:0;
}

/* ---- .pm-duo: two frames side by side -------------------------------- */

.pm-duo{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.4vw,28px);
}

/* Two portraits side by side. At full container width a 4:5 pair is over 700px
   tall each and swamps the section, so the pair is capped and centred. Only
   needed where a page supplies portraits for slot 4; landscape pairs use the
   full width. */
.pm-duo--portrait{
  max-width:840px;
  margin-inline:auto;
}

/* ---- .pm-band: one frame, centred ------------------------------------ */

.pm-band{
  max-width:920px;
  margin-inline:auto;
}

/* Slot 2 standing on its own, where a page has no section header for it to sit
   beside. Smaller than .pm-band on purpose: a band closes a section and can
   carry the width, whereas a plate opens one and sits alone, so at 920px it
   reads as a poster dropped into the page rather than part of it. Measured
   against models-influencers-talent, where every image is either beside text at
   360px or the closing band, and which is the arrangement that reads correctly. */
.pm-plate{
  max-width:660px;
  margin-inline:auto;
}

.pm-plate--portrait{
  max-width:340px;
}

/* ---- spacing helpers ------------------------------------------------- */

.pm-mt{margin-top:clamp(28px,4vw,48px)}

/* ---- responsive ------------------------------------------------------ */

@media(max-width:860px){
  .pm-split,
  .pm-split--reverse,
  .pm-split--media-wide,
  .pm-split--media-wide.pm-split--reverse{
    grid-template-columns:minmax(0,1fr);
    gap:26px;
  }
  /* A 3:4 portrait at full phone width is 520px tall and pushes the copy off
     screen. Cap it and centre it. Landscape media is not tall enough to have
     that problem, so the wide variant keeps the full column. */
  .pm-split .pm-figure{
    max-width:360px;
    margin-inline:auto;
  }
  .pm-split--media-wide .pm-figure{
    max-width:none;
  }
  /* Image above copy on the reverse variant too, so both read the same way. */
  .pm-split--reverse .pm-figure{order:-1}
  .pm-split--reverse .section-header{order:0}
}

@media(max-width:760px){
  .pm-duo{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:520px){
  .pm-figure figcaption{font-size:.75rem;padding:10px 13px 12px}
  .pm-split .pm-figure{max-width:100%}
}

/* Matches the reduced-motion treatment already used on .modelslab-frame:
   the three-stop gradient becomes a single flat colour. */
@media(prefers-reduced-motion:reduce){
  :root{--pm-rule:#00BFFF}
}

/* Forced colours: keep the frame visible when the mount is overridden. */
@media(forced-colors:active){
  .pm-figure{border-color:CanvasText}
}