/* ==========================================================================
   /adaptive-layout/ — page-specific layout
   Links after site.css (tokens/buttons) + inner.css (shared inner-page bits).
   Destination of the "See examples" buttons on /monetization/ and
   /ad_optimization/. Most of the page is shared components from inner.css: the
   dark-art `.ihero`, `.grad-head`, `.ipanel`, `.two-col`, `.lead`, `.body-copy`.
   Only the per-section arrangement (a LEFT-aligned hero variant, the
   example/label columns above the phone visuals, and the Outcomes 3-up cards)
   lives here.
   ========================================================================== */

/* Body offset: fixed header only (82px desktop / 60px mobile). Live does NOT
   render the 2nd-level monetization strip on this page, so no +50px here. */
body { padding-top: 82px; }
@media screen and (max-width: 1199px) { body { padding-top: 60px; } }

/* ============================================================= 01 hero variant
   Same dark-art `.ihero` template, but LEFT-aligned: copy on the left (title +
   paragraph, no button), illustration on the right. "Ad Layout" run stays inline
   coral on the same line (not the default block-break `.ihero-title em`). */
.ihero-inner { position: relative; z-index: 1; }
.ad-hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 48px; min-height: 420px; }
/* cap below the shared 72px so "Adaptive Ad Layout" stays on one line at 1440
   (matches live ~62px); still fluid down to mobile */
.ad-hero-title { text-align: left; margin: 0 0 26px; font-size: clamp(38px, 4.6vw, 60px); }
.ad-hero-title em { display: inline; color: var(--coral); }
.ad-hero-sub { max-width: 560px; margin: 0; }
.ad-hero-visual { text-align: center; }
.ad-hero-illus { width: 100%; max-width: 620px; height: auto; margin: 0 auto; }

/* ==================================================== 02 Content Structure
   White `.ipanel` card on the tint section; visual (two phones) left,
   heading + copy right. */
.ad-card { padding: 44px 52px; }
.ad-cs-grid { grid-template-columns: 0.82fr 1fr; gap: 48px; }
.ad-cs-visual { max-width: 340px; margin: 0 auto; text-align: center; }
/* labels row sits above the two phones in the SVG */
.ad-example-labels { display: flex; justify-content: space-around; margin-bottom: 14px; }
.ad-example { text-align: center; }
.ad-example-num { display: block; font-size: 16px; line-height: 1.4; color: var(--navy); }
.ad-example-label { display: block; font-size: 20px; font-weight: 700; color: var(--navy); margin-top: 4px; }
/* beat inner.css `.two-col .col-visual img { width:100% }` */
.two-col .col-visual .ad-cs-phones { width: 100%; max-width: 300px; height: auto; margin: 0 auto; }

/* ================================================= 03 Device & Connection
   White section; heading + tinted `.ipanel` copy note on the left, one animated
   two-phone comparison on the right (one device per example, like the original
   Tilda gif): labels row, then a single video showing both phones. */
.ad-dc-grid { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.ad-dc-note { margin-top: 22px; padding: 34px 40px; }
.ad-dc-visual { max-width: 440px; margin: 0 auto; text-align: center; }
/* beat inner.css `.two-col .col-visual img { width:100% }` */
.two-col .col-visual .ad-dc-phones { width: 100%; max-width: 420px; height: auto; margin: 0 auto; display: block; }

/* ============================================================ 04 Outcomes
   Three white cards on the tint section: icon + heading + body. */
.ad-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 34px; }
.outcome-card { padding: 30px 34px 34px; }
.outcome-icon { display: block; height: 72px; width: auto; margin: 0 0 20px; }
.outcome-card h3 { font-size: 24px; font-weight: 700; color: var(--navy); margin: 0 0 10px; }
.outcome-card p { font-size: 16px; line-height: 1.55; color: var(--body); margin: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (max-width: 980px) {
  .two-col { grid-template-columns: 1fr; gap: 34px; }
  .ihero-grid { grid-template-columns: 1fr; gap: 28px; }
  .ad-hero-sub { max-width: none; }
  /* §02: on mobile show heading + copy first, then the phones (matches live) */
  .ad-cs-grid { grid-template-columns: 1fr; }
  .ad-cs-grid .col-copy { order: 1; }
  .ad-cs-grid .ad-cs-visual { order: 2; }
}

@media screen and (max-width: 860px) {
  .ihero { padding: 32px 0 44px; }
  .ad-hero-title { font-size: clamp(30px, 8vw, 44px); margin: 6px 0 22px; }
  .ad-hero-sub { font-size: 16px; }
  .ipanel, .ad-card { padding: 30px 24px; border-radius: 28px; }
  .ad-dc-note { padding: 26px 22px; }
  .ad-outcomes { grid-template-columns: 1fr; }
  .outcome-card { padding: 26px 24px 28px; }
}