/* CMS_CONTENT_SURFACES_V1
 * One visual contract for editorial panels and their cards. The compatibility
 * layer's important declarations outrank historical unlayered component skins,
 * without escalating selector specificity or adding page-specific overrides.
 * Projects customize tokens; renderers only select surface, item or layout.
 */
@layer cms-content-surfaces {
  .cms-content-surface {
    background: var(--cms-content-surface-background, #fff) !important;
    border: var(--cms-content-surface-border, none) !important;
    box-shadow: var(--cms-content-surface-shadow, 0 5px 16px rgb(15 23 42 / 8%)) !important;
  }

  .cms-content-layout {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .cms-content-surface:not(.cms-content-surface--item) {
    padding: var(--cms-content-surface-padding, clamp(20px, 3vw, 30px)) !important;
    border-radius: var(--cms-content-surface-radius, var(--radius-lg, 22px)) !important;
  }

  .cms-content-cpanel__list,
  .cms-content-clp__list,
  .cms-pc-std__content > ul:not([class]) {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .cms-content-cpanel__icon {
    background: var(--color-accent) !important;
    color: var(--cms-content-icon-foreground, #fff) !important;
  }

  @media (max-width: 760px) {
    .cms-content-cpanel__list,
    .cms-content-clp__list,
    .cms-pc-std__content > ul:not([class]) {
      grid-template-columns: 1fr !important;
    }
  }
}

.cms-content-surface--item {
  border-radius: var(--cms-content-item-radius, var(--radius-md, 16px));
}

.cms-content-cpanel__icon svg { stroke: currentColor; }

.cms-pc-std__content > ul:not([class]) {
  column-gap: 28px;
  row-gap: 8px;
}

.cms-pc-std__content > ul:not([class]) > li { margin-bottom: 0; }