:root {
  --cove-navy: #0A1F32;
  --cove-blue: #53C8EC;
  --cove-blue-light: #E3F6FD;
  --cove-gray: #5C738A;
  --cove-white: #ffffff;
}

.cove-portfolio.light-theme {
  background: linear-gradient(180deg, var(--cove-blue-light) 0%, #f9fcfe 100%);
  padding: 40px 0 50px;
  border-radius: 24px;
}

/* Controls */
.cove-portfolio__controls { display:flex; align-items:center; gap:12px; margin:0 auto 24px; max-width:1200px; padding:0 20px; }
.cove-portfolio__filters { display:flex; flex-wrap:wrap; gap:10px; }
.pill { background:#fff; color:var(--cove-navy); border:1.5px solid var(--cove-blue); border-radius:999px; padding:8px 16px; font-weight:500; font-size:14px; cursor:pointer; transition:all .25s; }
.pill:hover{ background:var(--cove-blue-light); }
.pill.is-active{ background:var(--cove-blue); color:#fff; box-shadow:0 4px 10px rgba(83,200,236,.3); }

/* Grid */
.cove-portfolio__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px; max-width:1200px; margin:0 auto; padding:0 20px;
}

/* Card — square */
.cove-card{
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 4px 16px rgba(10,31,50,.08);
  transition:transform .25s, box-shadow .25s;
  display:flex; flex-direction:column;
}
.cove-card:hover{ transform:translateY(-4px); box-shadow:0 8px 24px rgba(10,31,50,.15); }

/* Square image */
.cove-card__image-square{
  position:relative; width:100%; aspect-ratio:1/1;
  overflow:hidden; background:#eef6fb;
}
.cove-card__image-square img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .35s ease, filter .3s ease;
}
.cove-card:hover .cove-card__image-square img{ transform:scale(1.03); filter:brightness(0.85); }

/* Base title bar (transparent white) */
.cove-card__title-bg{
  position:absolute; left:0; right:0; bottom:0;
  background: rgba(255,255,255,0.7);
  padding:10px 14px;
  z-index:2;
  transition: opacity .25s ease;
}
.cove-card__title{
  margin:0; font-size:18px; font-weight:700; color:var(--cove-navy);
  line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* HIDE base title on hover ONLY when a description exists */
.cove-card.has-desc:hover .cove-card__title-bg{
  opacity: 0;   /* fade out so it doesn't sit on top of the hover panel title */
}

/* Hover panel (title → description → button) */
.cove-card__hover-panel{
  position:absolute; left:0; right:0; bottom:0;
  transform:translateY(100%);
  transition:transform .3s ease;
  background: rgba(255,255,255,0.8);
  color: var(--cove-navy);
  padding:18px 20px 22px;
  display:flex; flex-direction:column; gap:12px;
  z-index:3;
  border-top:2px solid var(--cove-blue);
  box-shadow: 0 -6px 18px rgba(10,31,50,0.15);
}
.cove-card:hover .cove-card__hover-panel{ transform:translateY(0%); }

.cove-card__hover-title{
  margin:0; font-size:18px; font-weight:700; color:var(--cove-navy);
  line-height:1.25;
}
.cove-card__desc{
  font-size:14px; line-height:1.45; color:var(--cove-navy);
  max-height:7em; overflow:hidden;
}

/* Button inside hover panel */
.btn.btn-panel{
  align-self:flex-start;
  background: var(--cove-blue); color:#fff;
  padding:10px 16px; border-radius:10px; font-weight:700; font-size:14px;
  text-decoration:none; text-align:center;
  box-shadow:0 6px 16px rgba(83,200,236,0.35);
  transition:transform .15s ease, box-shadow .25s ease, background .25s;
}
.btn.btn-panel:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(10,31,50,0.18), 0 6px 16px rgba(83,200,236,0.35);
}

/* Blue divider at bottom of card */
.cove-card__divider{ width:100%; height:4px; background:var(--cove-blue); flex:0 0 auto; }

/* Aspect-ratio fallback */
@supports not (aspect-ratio:1/1){
  .cove-card__image-square{ width:100%; padding-top:100%; }
  .cove-card__image-square > *{ position:absolute; left:0; top:0; right:0; bottom:0; }
}