/* Image Band - Smith 2.0.

   BugZap #64. The Agentis design export authors this section entirely inline on
   /services/ ("Strategy at every stage."). Captured verbatim from the export
   DOM, and this file now matches it:

       section  background: var(--color-pampas,#f9f8f5)
       inner    max-width:1280px; margin:0 auto;
                padding: clamp(3.5rem,9vw,7rem) clamp(1.25rem,5vw,4rem);
                text-align:center
       h2       max-width:800px; margin:0 auto 1.5rem
       intro    max-width:800px; margin:0 auto 3rem
       picture  display:block; margin:40px auto 0
       img      width:100%; max-width:1180px; height:auto; margin:0 auto

   Measured on the export (iframe viewport emulation, /services/):
       @1974  section pad 0px  inner w1280  h2 x587 w800  pic x411 w1152
       @1400  inner x60 w1280 pad112px 64px  pic x124 w1152
       @700   inner x0  w700  pad63px  35px  pic x35  w630
   and on staging before this change:
       @1974  section pad 112px 64px, bg #fff, inner w1280, h2 x347 w1280,
              pic x381 w1213

   Font sizes are deliberately NOT changed here - BugZap #64 says "font size
   will be changed with styling", so that is Christine's call, not a retrofit.

   Still outstanding on #64 and not fixable in CSS: the mobile artwork. The
   template already emits <source media="(max-width: 780px)"> from the ACF
   `image_mobile` field, so the variant works the moment an asset is uploaded;
   staging has no mobile image set, which is why the desktop infographic is
   illegible on small screens. */
.image-band {
    background: var(--color-pampas, #f9f8f5);
    padding: 0;
}

.image-band__inner {
    max-width: 1280px;
    margin-inline: auto;
    /* The rhythm lives here, inside the 1280 cap, so the tint runs full bleed
       and the artwork is bounded by the padded content box (1152px at
       >=1408) instead of by its own max-width. 9vw, not the 7.8vw this used
       to carry on the section - the export measures 63px at 700. */
    padding: clamp(3.5rem, 9vw, 7rem) clamp(1.25rem, 5vw, 4rem);
    text-align: center;
}

.image-band__heading {
    max-width: 800px;
    margin: 0 auto 1.5rem;
    font-family: var(--font-family-heading);
    font-weight: 400; /* 400: Smith Style Guide - Hoefler Text is Regular. See docs/DECISIONS.md D8 */
    font-size: 3.25rem; /* 52px */
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-blue-zodiac, #0e1b44);
}

.image-band__intro {
    max-width: 800px;
    margin: 0 auto 3rem;
    font-family: var(--font-family-base);
    /* BugZap #120 ("different paragraph font"). The Agentis design export runs this
       paragraph at 17px / 1.6 / 300, not the superseded Figma 24px / 1.5 / 400.
       Measured 2026-08-06 with staging and the export both at innerWidth 1512:
       this 54px paragraph delta is the whole of the section's 53px overrun.
       `.image-band` renders on /services/ only (audited across every page on
       2026-08-06), so this is safe to change globally. */
    font-size: 1.0625rem; /* 17px */
    line-height: 1.6;     /* 27.2px */
    font-weight: 300;
    color: var(--color-blue-zodiac, #0e1b44);
}

.image-band__intro p { margin: 0; }

.image-band__intro a {
    color: var(--color-surfie-green, #0f7e7c);
    font-weight: 300; /* BugZap #120: the export does not bold the inline link. */
    text-decoration: underline;
}

.image-band__media {
    display: block;
    margin: 2.5rem auto 0; /* 40px, export verbatim */
}

.image-band__media img {
    display: block;
    width: 100%;
    max-width: 1180px; /* export cap; the padded inner is the binding constraint on desktop */
    height: auto;
    margin-inline: auto;
}


/* BugZap #64 (2026-08-07): "change this section to beige background" -
   editor opts in via the image-band--cream className. */
.image-band--cream {
    background-color: var(--color-pampas, #f9f8f5);
}