/* Card shell */
.csc-card{
  background:#fff;
  /*border-radius:18px;*/
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease;

  /* NEW: fixed card height */
  height:var(--csc-card-h, 560px);
}
.csc-card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.12); }

/* Make link a flex column to control vertical layout within the fixed height */
.csc__link{
  display:flex; flex-direction:column;
  height:100%; color:inherit; text-decoration:none;
}

/* Tall image block (fixed height) */
.csc__media{
  position:relative;
  width:100%;
  height:var(--csc-img-h, 380px);  /* must be <= card height */
  overflow:hidden;
  background:#e9eef3;
}
.csc__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  transition:transform .4s ease;
}
/* Enforce full cover fill no matter what global CSS says */
.csc-card .csc__media img{
  display:block;                    /* remove inline-image baseline gap */
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;      /* fill without distortion, crop edges */
  object-position:center center;    /* default focal point; overridable */
}
.csc-card:hover .csc__media img{ transform:scale(1.06); }

/* Blurred white title bar over image */
.csc__titlebar{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:flex-end;
  padding:2px 18px 12px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 60%, rgba(255,255,255,.98) 100%);
  -webkit-backdrop-filter: blur(var(--csc-blur, 8px));
  backdrop-filter: blur(var(--csc-blur, 8px));
}
.csc__title{
  font-weight:800;
  font-size:1.25rem;
  color:var(--csc-brand, #2A82C8);

  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Opaque content area fills the remaining space inside fixed card */
.csc__content{
  background:#fff;
  padding:16px 18px 18px;
  /* Height left for content = card - image */
  height: calc( var(--csc-card-h, 560px) - var(--csc-img-h, 380px) );
  overflow:hidden; /* protect layout if text is too long */
  display:flex; flex-direction:column; justify-content:space-between;
}
.csc__desc{
  margin:0 0 14px;
  color:#516173; line-height:1.6;
  /* keep from overflowing visually; tweak lines if you like */
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.csc__cta{
  display:inline-block;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--csc-brand, #014a93);
  border-bottom:2px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.csc-card:hover .csc__cta{ border-color:var(--csc-brand, #2A82C8); }

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .csc__media img{ transition:none !important; transform:none !important; }
  .csc-card{ transition:none !important; }
}




/* Global: never use text-decoration underlines inside the card */
.csc-card a,
.csc-card a:hover,
.csc-card a:focus,
.csc-card a:active { text-decoration: none !important; }

/* Description links: no underline at all */
.csc__desc a { text-decoration: none !important; border: 0 !important; }

/* CTA = keep the underline BORDER effect (single line), not text-decoration */
.csc__cta{
  border-bottom: 2px solid transparent;   /* keep this */
  transition: color .2s ease, border-color .2s ease;
}
.csc-card:hover .csc__cta{
  border-color: var(--csc-brand, #014a93);       /* single underline on hover */
  /* subtle darker hover color; fallback below for old browsers */
  color: color-mix(in srgb, var(--csc-brand, #2A82C8) 80%, black);
}
@supports not (color: color-mix(in srgb, red 50%, white)){
  .csc-card:hover .csc__cta{ color:#0f4d7c; }
}




/* Promote to its own layer and reduce compositor artifacts */
.csc__media{
  will-change: transform;
  transform: translateZ(0);
  isolation: isolate;                     /* separate stacking context */
}
.csc__media img{
  backface-visibility: hidden;
}

/* Overlap the blur bar slightly over the content to hide the seam */
.csc__titlebar{ bottom:-6px; padding-bottom: 20px; }   /* extends ~6px below */
.csc__content{ margin-top: -6px; position: relative; } /* pull content under */

/* Extra guard: a 1px white mask line in the content underlay */
.csc__content::before{
  content:"";
  position:absolute; left:0; right:0; top:-1px; height:1px;
  background:#fff; pointer-events:none;
}