/* ==========================================================================
 * ui-cards.css  -  navy / dark FULL-WIDTH bands rendered as inset rounded cards
 * (WS11, CHG-20261004-WS11-01).  Reference cards: /services hero panel,
 * /project-proposal hero card, hub hero card (inset to the container column,
 * --r-20 radius, generous inner padding).
 *
 * One shared pattern, applied by selector (no template edits):
 *   - margin-inline = same inset as the container column (tracks --container-max /
 *     --container-pad, so the card edge lines up with the other cards)
 *   - border-radius token, overflow:hidden (clips background photos)
 *   - small vertical margin so the card does not touch neighbouring sections
 *   - <=640px: 16px side gutter (--container-pad) and a smaller radius
 * Loaded site-wide after tokens.css / template.css / ui-refresh.css.
 * ========================================================================== */
/* --------------------------------------------------------------------------
 * Card widths (David 2026-10-04): HARD RULE = no coloured / image section is
 * full screen width. Two deliberate types, free choice per section, alternate
 * them for rhythm and never stack two "statement" cards back to back:
 *   (a) statement card = near-full-width, ~30px inset (.full-width-rounded:
 *       heroes of listing/product pages, big media showcases);
 *   (b) content card   = aligned with the content column (--cm-card-inset):
 *       stats / CTA / closing bands, hub section bands.
 * -------------------------------------------------------------------------- */
:root { --cm-card-inset-wide: var(--sp-30, 30px); }

:root {
  --cm-card-inset: max(var(--container-pad, 16px), calc((100% - var(--container-max, 1200px)) / 2 + var(--container-pad, 16px)));
  --cm-card-radius: var(--r-20, 20px);
  --cm-card-gap: var(--sp-24, 24px);
}
@media (max-width: 640px) {
  :root { --cm-card-radius: var(--r-16, 16px); --cm-card-gap: var(--sp-16, 16px); }
}

/* hub pages: navy hero (/ecommerce-projects, /b2b, /platform, legacy /ai) — same inset card as /products */
.cm-hub__hero {
  margin: var(--sp-16, 16px) var(--cm-card-inset) 0;
  border-radius: var(--cm-card-radius);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.cm-hub__hero .cm-hub__wrap { padding-inline: var(--sp-24, 24px); max-width: none; }
@media (max-width: 640px) {
  .cm-hub__hero .cm-hub__wrap { padding-inline: var(--sp-16, 16px); }
}

/* hub pages: navy gradient / photo bands + closing CTA band */
.cm-hub__band,
.cm-hub__cta,
/* solution + product landing pages: navy "Services"/"Key features" and dark photo workflow bands */
section.solution-keyfeature:not(.full-width-rounded),
section.solution-wf.special:not(.full-width-rounded),
section.solution-screen,
section.solution-contact,
/* extensions / themes category intro banner (photo + tint) */
.category-description {
  margin-inline: var(--cm-card-inset);
  margin-block: var(--cm-card-gap);
  border-radius: var(--cm-card-radius);
  overflow: hidden;
}

/* solution sections: the framework container is wider than the card, let it shrink and add inner padding */
section.solution-keyfeature:not(.full-width-rounded) > .uk-container,
section.solution-keyfeature:not(.full-width-rounded) > .container,
section.solution-wf.special:not(.full-width-rounded) > .uk-container,
section.solution-screen > .uk-container,
section.solution-contact > .uk-container,
section.solution-wf.special:not(.full-width-rounded) > .container,
section.solution-screen > .container,
section.solution-contact > .container,
.category-description > .container,
.category-description > .uk-container {
  width: auto;
  max-width: 100%;
  padding-inline: var(--sp-24, 24px);
  box-sizing: border-box;
}
.category-description { padding-inline: var(--sp-24, 24px); box-sizing: border-box; }
@media (max-width: 640px) {
  section.solution-keyfeature:not(.full-width-rounded) > .uk-container,
  section.solution-wf.special:not(.full-width-rounded) > .uk-container,
  .category-description > .container { padding-inline: var(--sp-16, 16px); }
  .category-description { padding-inline: var(--sp-16, 16px); }
}

/* ==========================================================================
 * Heroes / top banners (WS11 follow-up, CHG-20261004-WS11-02)
 * Full-bleed photo heroes that were never carded: legal /tos banner, /home/teams
 * header, /ecommerce solutions hero on mobile, service-detail hero on mobile.
 * ========================================================================== */
.view_tos .banner,
#main > section.section.entry-header {
  margin: var(--sp-16, 16px) var(--cm-card-inset) var(--cm-card-gap);
  border-radius: var(--cm-card-radius);
  overflow: hidden;
  box-sizing: border-box;
}
.view_tos .banner { margin-bottom: var(--sp-32, 32px); }

@media (max-width: 640px) {
  body .solution-slider.landing-service.landing-service--bg {
    width: auto;
    max-width: none;
    margin-inline: var(--sp-16, 16px);
    padding-inline: var(--sp-20, 20px);
    border-radius: var(--cm-card-radius);
  }
  body .component-uyiad66p6 .svcd-hero {
    margin-inline: var(--sp-16, 16px);
    border-radius: var(--cm-card-radius);
    padding-inline: var(--sp-8, 8px);
  }
}

/* sweep fix (CHG-20261004-WS11-03): delivery teaser touched both screen edges at 390 on /projects */
@media (max-width: 640px) {
  .cm-delivery-teaser-wrap { margin-inline: var(--sp-16, 16px); }
}

/* ==========================================================================
 * Hero balance (CHG-20261004-WS11-04): in two-column heroes the media column
 * stretches to the full height of the text column (cover crop, min-height so
 * it never reads as a thumbnail); stacked layouts on mobile are untouched.
 * ========================================================================== */
@media (min-width: 992px) {
  .cm-hub__hero-grid,
  .cm-aip-hero__grid { align-items: stretch; }

  .cm-hub__hero-grid > .cm-hub__shot,
  .cm-aip-hero__grid > .cm-aip-frame { display: flex; flex-direction: column; min-height: 320px; }
  .cm-hub__hero-grid > .cm-hub__shot img,
  .cm-aip-hero__grid > .cm-aip-frame img {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    object-fit: cover;
    object-position: center top;
  }
}
@media (min-width: 1025px) {
  body .svcd-hero__grid { align-items: stretch; }
  body .svcd-hero__media { display: flex; flex-direction: column; min-height: 320px; }
  body .svcd-hero__media > .svc-media { aspect-ratio: auto; flex: 1 1 auto; min-height: 280px; }
}