.card-grid ul,
.card-grid ol {
    margin-left: 1.7rem;
}



/* OUTER GRID */
.card-grid{
  --card-w: 23rem;
  --gap: 2rem;

  display: grid;
  gap: var(--gap);

  /* fixed-width tracks that wrap + center */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-w)), var(--card-w)));
  justify-content: center;

  /* DEFINE SHARED ROW TRACKS (image / title / cta / content) */
  grid-auto-rows: auto;
  grid-template-rows: 200px auto auto 1fr;
    max-width: calc(var(--card-w) * 3 + var(--gap) * 2);
    margin: 2rem auto 0;
}

/* CARD: baseline styles */
.card-grid .card-item {
  border: 1px solid var(--color-border);
  border-radius: var(--size-card-radius);
  background: var(--color-surface);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  overflow: hidden;
  height: 100%;
  text-decoration: none;
  color: var(--color-text);
}


.card-grid .card-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--size-card-radius) var(--size-card-radius) 0 0;
}
/* SUBGRID VERSION: intrinsic title, CTA aligned */
@supports (grid-template-rows: subgrid){
  .card-grid .card-item{
    display: grid;
    grid-template-rows: subgrid; /* inherit the 4 row tracks from .card-grid */
    grid-row: span 4;            /* card occupies 4 parent rows */
    gap:0;
  }



  .card-grid .card-item .card-title{
    margin: 0;
    padding: 1rem;
    font-size: 2rem;
    text-align: center;
    display: grid;
    place-content: center;   /* vertical + horizontal centering */
    min-height: 6rem;
 }

  .card-grid .card-item .cta{
    /* display: grid; */
    /* place-items: center; */
    padding: .5rem 0;
    background: var(--btn-secondary-bg);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 500;
    text-align: center;
  }

  .card-grid .card-item > dl{
    margin: 0;
    padding: 1rem;
    align-content: start;
  }
}

/* FALLBACK (no subgrid): cannot guarantee CTA alignment without clamping titles */
@supports not (grid-template-rows: subgrid){
  .card-grid .card-item{ display: grid; grid-template-rows: 200px auto auto 1fr; }
  .card-grid .card-item > img{ width: 100%; height: 100%; object-fit: cover; }
  .card-grid .card-item > h2{ margin: 0; padding: 1rem; text-align:center; display: grid; place-content: center; }
  .card-grid .card-item > .cta{ display:grid; place-items:center; padding:.5rem 0; background:var(--btn-secondary-bg); color:#fff; }
  .card-grid .card-item > dl{ margin:0; padding:1rem; }
}


.card-grid .card-item:hover {
    transform: translateY(-6px);
}
.card-grid .card-item p {
    padding: 1rem;
    text-align: center;
}