/* ==========================================================================
   /adsense_mediation/ — page-specific layout
   Links after site.css (tokens/buttons) + inner.css (shared inner-page bits).
   Only the per-section arrangement and image sizing live here.
   ========================================================================== */

/* Body offset: fixed 82px header + fixed 50px 2nd-level strip (>=1200px).
   Below 1200px the strip is hidden and the header collapses to the 60px
   mobile bar, so the strip's 50px is dropped. (Same as monetization.) */
body { padding-top: 132px; }
@media screen and (max-width: 1199px) { body { padding-top: 60px; } }

/* Body copy on this page runs at 24px line-height (per spec, vs 25 elsewhere). */
.body-copy { line-height: 1.5; }

/* ------------------------------------------------------------------ 01 hero
   Split hero: left = title + subhead + CTA, right = illustration. The dark-art
   background differs from monetization, so re-point it (page-scoped override).
   candidate for inner.css: parametrize .ihero background per page. */
.ihero--split {
  /* background art inherited from .ihero (shared canonical /img/hero-bg.png) */
  padding: 60px 0 84px;
}
.ihero-inner { position: relative; z-index: 1; }
.ihero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "title art"
    "lead  art";
  column-gap: 48px;
  align-items: center;
  min-height: 440px;
}
.ihero-split .ihero-title {
  grid-area: title;
  text-align: left;
  align-self: end;
  margin: 0 0 22px;
}
.ihero-split .ihero-lead { grid-area: lead; align-self: start; }
.ihero-split .ihero-art { grid-area: art; align-self: center; }
.ihero-art img { width: 100%; height: auto; display: block; }
.ihero-lead .ihero-sub { max-width: 500px; margin: 0 0 18px; }
.ihero-lead .ihero-cta { margin-top: 12px; }

/* ------------------------------------------ 02/03/05 text + illustration rows */
.two-col .col-visual .row-illus { width: 100%; max-width: 540px; }
.two-col .col-visual .row-chip { width: 100%; max-width: 560px; margin: 0 auto; }
/* dashboard is oversized in the live art and bleeds toward the right edge */
.two-col .col-visual .dash-illus { width: 100%; max-width: 680px; }
.adsm-dash { align-items: center; }

/* ------------------------------------------------ 04 Premium demand partners
   Bordered logo cards laid out 2 / 4 / 5 across the left column. */
.adsm-partners { align-items: center; }
.logo-wall { display: flex; flex-direction: column; gap: 16px; }
.logo-row { display: flex; gap: 16px; }
.logo-row > .logo-cell { flex: 1 1 0; }
.logo-cell {
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid #E4E8F0;
  border-radius: 14px;
  padding: 16px 12px;
  min-height: 64px;
}
/* beat inner.css `.two-col .col-visual img { width:100% }` (equal specificity,
   loaded later) so logos size by height, not stretch to the cell width */
.two-col .col-visual .logo-cell img { width: auto; height: auto; max-width: 100%; max-height: 30px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (max-width: 980px) {
  .two-col { grid-template-columns: 1fr; gap: 30px; }
  /* sections whose illustration sits FIRST in the DOM (left on desktop) should
     drop below the copy when stacked, matching live mobile order */
  .adsm-row .col-visual,
  .adsm-partners .col-visual { order: 2; }
  .two-col .col-visual .row-illus,
  .two-col .col-visual .row-chip,
  .two-col .col-visual .dash-illus { margin: 0 auto; }

  /* hero: single column, order title -> art -> lead */
  .ihero--split { padding: 32px 0 44px; }
  .ihero-split {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "art" "lead";
    row-gap: 24px;
  }
  .ihero-split .ihero-title { align-self: auto; font-size: clamp(34px, 9vw, 46px); }
  .ihero-art img { max-width: 460px; margin: 0 auto; }

  /* logo wall collapses to a 3-up grid (rows unwrap via display:contents) */
  .logo-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .logo-row { display: contents; }
}

@media screen and (max-width: 480px) {
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Submenu active item — page-scoped (do NOT edit the shared partial).
   Bold the "AdSense Mediation" entry in the 2nd-level strip. Mirrors what the
   partial's path-matching script does, but works even if that JS is delayed.
   ========================================================================== */
#menu-2nd #to-adsense-mediation a { font-weight: 900; }