/* ==========================================================================
 * 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.
 * ========================================================================== */
: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 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),
/* 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-wf.special:not(.full-width-rounded) > .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); }
}