/* ========================================================================
   HL2MP — Create & Customize cards (module scoped)
   ===================================================================== */

.cc-section{ --d: 700ms; --e: cubic-bezier(0.19, 1, 0.22, 1); }
.cc-section h2{ margin-bottom:8px; }

.cc-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

/* Card container with image background via --cc-bg */
.cc-card{
  position:relative;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  padding:1rem;
  width:100%;
  height: clamp(220px, 28vw, 360px);
  text-align:center;
  color:#fff;
  border-radius:16px;
  border:1px solid rgba(150,180,210,.22);
  background:#0b121d;
  box-shadow: 0 20px 36px rgba(0,0,0,.35);
  isolation:isolate;
}

/* Background image layer */
.cc-card::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--cc-bg);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
  transform: translateY(0);
  transition: transform calc(var(--d) * 1.5) var(--e), scale calc(var(--d) * 1.5) var(--e);
  pointer-events:none;
}

/* Tall gradient veil for the reveal effect */
.cc-card::after{
  content:"";
  position:absolute; inset:0;
  height:200%;
  pointer-events:none;
  background-image: linear-gradient(
    to bottom,
    hsla(0, 0%, 0%, 0) 0%,
    hsla(0, 0%, 0%, 0.009) 11.7%,
    hsla(0, 0%, 0%, 0.034) 22.1%,
    hsla(0, 0%, 0%, 0.072) 31.2%,
    hsla(0, 0%, 0%, 0.123) 39.4%,
    hsla(0, 0%, 0%, 0.182) 46.6%,
    hsla(0, 0%, 0%, 0.249) 53.1%,
    hsla(0, 0%, 0%, 0.320) 58.9%,
    hsla(0, 0%, 0%, 0.394) 64.3%,
    hsla(0, 0%, 0%, 0.468) 69.3%,
    hsla(0, 0%, 0%, 0.540) 74.1%,
    hsla(0, 0%, 0%, 0.607) 78.8%,
    hsla(0, 0%, 0%, 0.668) 83.6%,
    hsla(0, 0%, 0%, 0.721) 88.7%,
    hsla(0, 0%, 0%, 0.762) 94.1%,
    hsla(0, 0%, 0%, 0.790) 100%
  );
  transform: translateY(-50%);
  transition: transform calc(var(--d) * 2) var(--e);
}

/* Foreground content */
.cc-content{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  padding:1rem;
  z-index:1;
  transition: transform var(--d) var(--e);
}

.cc-title{ font-weight:800; font-size:1.1rem; line-height:1.2; }
.cc-copy{ color:#d7e0ee; margin:0; }

.cc-btn{
  display:inline-block;
  margin-top:1rem;
  padding:.6rem 1.1rem;
  font-size:.75rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  color:#00141f; background:#8fd7ff; border-radius:999px; border:0; text-decoration:none;
}

/* Hover/focus reveal (desktop/hover-capable only) */
@media (hover:hover){
  .cc-card::after{ transform: translateY(0); }

  .cc-content{
    transform: translateY(calc(100% - 4.5rem));
  }
  .cc-content > *:not(.cc-title){
    opacity:0; transform: translateY(12px);
    transition: transform var(--d) var(--e), opacity var(--d) var(--e);
  }

  .cc-card:hover, .cc-card:focus-within{
    align-items:center;
  }
  .cc-card:hover::before, .cc-card:focus-within::before{
    transform: translateY(-4%); 
    scale: 1.05;
  }
  .cc-card:hover::after, .cc-card:focus-within::after{
    transform: translateY(-50%);
  }
  .cc-card:hover .cc-content,
  .cc-card:focus-within .cc-content{
    transform: translateY(0);
  }
  .cc-card:hover .cc-content > *:not(.cc-title),
  .cc-card:focus-within .cc-content > *:not(.cc-title){
    opacity:1; transform: translateY(0);
    transition-delay: calc(var(--d) / 8);
  }
}

/* Mobile tweaks */
@media (max-width: 640px){
  .cc-card{ height: clamp(220px, 42vw, 360px); }
}