/* Base */
.cardc{
    display:flex; 
    flex-direction:column;
    gap:16px;
    background: var(--paper);
    border-radius: var(--radius-component, var(--radius-xl, 12px)); 
    padding:24px; 
    height:100%;
  }
  .cardc .child a {
    min-height: 40px;
  }

  /* -------- graphic variant -------- */
  .cardc--graphic .cardc-media img{
    width:100%; height:200px; object-fit:cover; border-radius: var(--radius-md, 6px); display:block;
  }
  
  @media (min-width:600px){ .cardc--graphic .cardc-media img{ height:200px; } }
  @media (min-width:1024px){ .cardc--graphic .cardc-media img{ height:200px; } }
  
  .cardc-badge{
    background-color:#add8d8; color:#005f5f; font-weight:bold;
    border-radius: var(--radius-component, var(--radius-xl, 12px)); border:2px solid #005f5f;
    min-height:36px; min-width:140px; max-width:240px;
    display:inline-flex; align-items:center; justify-content:center;
    padding:6px 12px; width:fit-content;
  }
  .cardc-badge:hover{ background-color:#9ccccc; }
  
  .cardc-footer{
    display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-top:auto;
  }
  .cardc-link a{ text-decoration:underline; text-underline-offset:2px; }
  


  /* -------- icon variant -------- */
  .cardc--icon .cardc-icon{
    display:inline-flex; 
    align-items:center; 
    justify-content:center;
    width:40px; 
    height:40px; 
    border-radius: var(--radius-lg, 8px); 
  }

  .cardc--icon .cardc-icon img{ width:40px; height:40px; display:block; }
  

  /* -------- step variant -------- */
  .cardc--step{ padding:24px; }
  .cardc-step-head{ 
    display:flex; 
    align-items:flex-start; 
    gap:1rem; 
    margin-bottom:.25rem; flex-direction: row; }
  .cardc-step-num{ display:block; width:40px; height:40px; color: var(--ink); }
  /* Optional icon in step variant (when @iconId provided) */

  .cardc--step .cardc-icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:60px; 
    height:60px; border-radius: var(--radius-lg, 8px);;
  }
  .cardc--step .cardc-icon img{ width:60px; height:60px; display:block; }
  .cardc-step-list{ margin:.25rem 0 0 0; list-style: disc inside; }
  .cardc-step-list li + li{ margin-top:.25rem; }


  /* footer layout tweaks so buttons align nicely */
.cardc-footer{
  display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-top:auto;
}

.cardc-actions{
  display:flex; align-items:center; gap:12px; width: 100%;
}

.cardc-actions .parent {
  width: 100%;
}

/* Button footer layout (matches chipset/graphicContainer pattern) */
.cardc .parent {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  width: 100%;
  flex-wrap: wrap;
}

.cardc .parent .child:only-child {
  margin-left: auto;
}

.cardc-quick .btn--icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  max-width: 32px;
  min-height: 32px;
}

/* ARTICLE variant must not inherit the base 16px padding */
.cardc--article { padding: 0; background: transparent; }

/* The inner article card already has its own radius & overflow */
.cardc--article .card-hub { border-radius: var(--radius-component, var(--radius-xl, 12px)); overflow: hidden; background: var(--paper); padding: 0; }

/* Image: edge-to-edge, no accidental padding */
.cardc--article .top-image-insight-card { display:block; width:100%; height:200px; object-fit:cover; }

/* Compact icon button when it appears inside article cards */
.cardc--article .btn--icon { --_size:32px; }

/* Business spec: “Read article →” text link */
.read-link{
  display:inline-flex; align-items:center; gap:6px;
  font: inherit; color: var(--ink); text-decoration: none;
}
.read-link:hover .chev{ transform: translateX(2px); }
.read-link .chev{ transition: transform .15s ease; }