/* 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}
/* The tag strip under the hero lede: the figures a buyer scans first. It wraps
   on its own, so a page may carry five of them or eight without a rule of its
   own. */
.page-hero__tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.page-hero__tags li{padding:6px 13px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(255,255,255,.07);color:#fff;font-size:13px;font-weight:600}
.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}

/* ---------------------------------- Accessibility helpers -- */
/* The pattern used for a caption or label that belongs to the accessibility
   tree only: present for a screen reader, off the visual page. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ------------------------------------------- Photo placeholder -- */
/* A slot that is still waiting for its shot keeps the layout shaped. The
   dashed box names the slot and the wanted photograph, so a reviewer reads
   exactly what goes there; it is replaced silently once the slot maps to a
   real attachment. */
.img-todo{display:flex;flex-direction:column;justify-content:center;gap:10px;width:100%;height:100%;margin:0;padding:20px;background:repeating-linear-gradient(135deg,#f5f7fa 0,#f5f7fa 10px,#eef2f7 10px,#eef2f7 20px);border:1px dashed var(--color-field-line);border-radius:var(--radius-sm);color:var(--color-muted);text-align:center}
.img-todo__tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent)}
.img-todo__note{font-size:13px;line-height:1.5}

/* ------------------------------------------------ Duty list -- */
/* A set of applications read as named rows rather than boxed cards: quicker
   to scan, and every row is itself the link that opens the inquiry. */
.jobs-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;padding:0;list-style:none}
.jobs-list__item{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-sm);font-size:15px;font-weight:600;color:var(--color-navy);text-decoration:none}
.jobs-list__item .arrow{color:var(--color-accent)}
.jobs-list__item:hover{border-color:var(--color-accent);background:var(--color-accent-pale)}

/* ---------------------------------------------------------- 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}
  .jobs-list{grid-template-columns:1fr 1fr}
  .steps--three{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .cards,.cards--four{grid-template-columns:1fr}
  .jobs-list{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}
}