/* Interior pages — the shared layer the page templates build on.
   The homepage keeps its own layout in style.css; this file holds the page
   hero, the card grid and the closing band that the interior pages share.
   Every value comes from assets/css/tokens.css. */

/* ------------------------------------------------------------- Page hero -- */
.site-main.site-main--page{padding-block:0}
.page-hero{background:var(--color-navy);color:#d2deea;padding-block:clamp(44px,6vw,76px)}
.page-hero__inner{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
.page-hero__inner--solo{grid-template-columns:1fr}
.page-hero .eyebrow{color:var(--color-sun)}
.page-hero__title{color:#fff;font-size:clamp(30px,3.6vw,48px)}
.page-hero__lede{margin-top:20px;max-width:560px;color:rgba(255,255,255,.88);font-size:18px}
.page-hero .btn{background:var(--color-sun);border-color:var(--color-sun);color:var(--color-navy)}
.page-hero .btn:hover{background:#ffd873;border-color:#ffd873}
.page-hero .btn--outline{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.6);color:#fff}
.page-hero .btn--outline:hover{background:rgba(255,255,255,.18);border-color:#fff}
.page-hero__media{overflow:hidden;background:#f5f7fa;border-radius:var(--radius-lg)}
.page-hero__photo{width:100%;height:280px;padding:30px;object-fit:contain}
.page-hero__label{margin:0;padding:14px 22px;background:var(--color-surface);color:var(--color-navy);font-size:13px;font-weight:600}

/* ------------------------------------------------------------ Card grid -- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards--four{grid-template-columns:repeat(4,1fr)}
.card{display:flex;flex-direction:column;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md)}
.card__image{position:relative;height:210px;padding:24px;background:#f5f7fa}
.card__photo{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.card__body{display:flex;flex:1;flex-direction:column;padding:26px}
.card__body h3{margin:0}
.card__body > p{margin:15px 0 0;font-size:15px;color:var(--color-muted)}
.card__link{margin-top:auto;padding-top:22px}
.card__meta{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}

/* A two-card row: .cards is three columns, this variant is two. */
.cards--two{grid-template-columns:repeat(2,1fr)}

/* In a two-card row that carries a specification list and a card link, the list
   follows the paragraph and the link keeps the bottom of the card, so only one
   of them takes the leftover height instead of both. */
.cards--two .card .specs{margin-top:22px}

/* A three-step row: .steps is four columns, this variant is three. */
.steps--three{grid-template-columns:repeat(3,1fr)}

/* ----------------------------------------------------------- Closing band -- */
/* The band and the footer below it are the same navy, so the band carries a
   hairline on its lower edge: the closing block reads as its own band above
   the footer instead of running into it as one slab. */
.cta-band{background:var(--color-navy);color:#d2deea;padding-block:var(--section-space);border-bottom:1px solid rgba(255,255,255,.2)}
.cta-band__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px 56px}
.cta-band__copy{max-width:640px}
.cta-band h2{color:#fff}
.cta-band .eyebrow{color:#bed8fa}
.cta-band__text{margin:0;max-width:520px;color:#d2deea;font-size:16px}
.cta-band__actions{margin-top:0}
.cta-band .btn{background:var(--color-sun);border-color:var(--color-sun);color:var(--color-navy)}
.cta-band .btn:hover{background:#ffd873;border-color:#ffd873}
.cta-band .btn--outline{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.6);color:#fff}
.cta-band .btn--outline:hover{background:rgba(255,255,255,.18);border-color:#fff}

/* ------------------------------------------- Panel: picture beside copy -- */
.panel{overflow:hidden;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg)}
.panel__image{width:100%;height:300px;padding:30px;object-fit:contain;background:#f5f7fa}
.panel__label{margin:0;padding:16px 24px;border-top:1px solid var(--color-line);font-size:13px;font-weight:600;color:var(--color-navy)}

/* ---------------------------------------------------------- Long copy -- */
.prose{max-width:70ch}
.prose h2{margin-top:48px}
.prose > h2:first-child{margin-top:0}
.prose h3{margin-top:34px}
.prose ul{margin:0 0 1em;padding-left:20px;font-size:15px;color:var(--color-muted)}
.prose li{margin:8px 0}

/* ---------------------------------------------------------- Responsive -- */
@media(max-width:1180px){
  .cards--four{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .page-hero__inner{grid-template-columns:1fr;gap:32px}
  .page-hero__photo{height:240px}
  .cards{grid-template-columns:1fr 1fr}
  .steps--three{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .cards,.cards--four{grid-template-columns:1fr}
  .cta-band__inner{flex-direction:column;align-items:flex-start}
  .page-hero__photo{height:220px;padding:20px}
  .steps--three{grid-template-columns:1fr}
}