/* ==========================================
   UNIBALL BCN — Values (Figma-look, fixed)
   Namespace: #ub-values (.uv*)
   ========================================== */

:root{
  --uv-dark:#081C34;
  --uv-black:#393939;
  --uv-muted:#575757;
  --uv-card:#ffffff;
  --uv-shadow:0 4px 24px rgba(0,0,0,.10);
  --uv-radius:16px;
  --uv-max:1240px;  /* your page container width */
}

/* Safety: never clip hidden rows */
#ub-values, #ub-values .uv__container, #ub-values .uv__grid{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

/* Section */
#ub-values.uv.section{
  padding:80px 20px;
  background:#fff;
}

/* Inner width (matches your layout shell) */
#ub-values .uv__container{
  width:min(100%, var(--uv-max));
  margin-inline:auto;
}

/* Header */
#ub-values .uv__head{
  display:flex; flex-direction:column; gap:10px;
  margin-bottom:32px;
}
#ub-values .uv__title{
  margin:0;
  font-weight:800;
  font-size:38px;
  line-height:50px;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  color:var(--uv-dark);
}
#ub-values .uv__sub{
  margin:0;
  font-weight:400;
  font-size:16px;
  line-height:19px;
  color:var(--uv-black);
  /* sentence case */
  text-transform:none;
}

/* ===== Grid =====
   Flexible 3 cols (no clipping), with 19px gaps like Figma */
#ub-values .uv__grid{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:19px;
}

/* 2 cols / 1 col responsive */
@media (max-width:1100px){
  #ub-values .uv__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  #ub-values .uv__grid{ grid-template-columns: 1fr; }
}

/* ===== Card ===== */
#ub-values .uv-card{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start;

  /* Make cards fill grid tracks without fixed px width */
  width:100%;
  min-height:297px;           /* Figma height */
  background: var(--uv-card);
  box-shadow: var(--uv-shadow);
  border-radius: var(--uv-radius);
  padding:12px;
  isolation:isolate;
  overflow:hidden;            /* for decorative dot */
  transition: transform .2s ease, box-shadow .2s ease;
}
#ub-values .uv-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
}

/* Decorative ellipse bottom-left */
#ub-values .uv-card::before{
  content:"";
  position:absolute; left:-8px; bottom:-8px;
  width:29px; height:29px; border-radius:50%;
  background: var(--uv-dark);
  opacity:0; transition:opacity .2s, transform .2s;
}
#ub-values .uv-card:hover::before{ opacity:.12; transform:scale(1.1); }

/* Icon */
#ub-values .uv-card__icon{
  width:40px; height:40px; display:grid; place-items:center;
  color:var(--uv-dark); margin-bottom:21px;
}
#ub-values .uv-card__icon svg{ width:24px; height:24px; display:block; }

/* Title */
#ub-values .uv-card__title{
  margin:0 0 12px;
  font-weight:500; font-size:24px; line-height:1;
  letter-spacing:-0.02em; text-transform:uppercase;
  color:var(--uv-dark);
  /* ensure last letter never clips */
  overflow:visible; white-space:normal;
}

/* Text */
#ub-values .uv-card__text{
  margin:0;
  font-weight:400; font-size:16px; line-height:24px;
  color:var(--uv-muted);
  text-transform:none;        /* <- FIX: no weird “Every Word” capitalization */
  /* optional clamp to keep rows visually even */
  display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Entrance animation */
@keyframes uvFadeUp{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }
#ub-values .uv-card{ opacity:0; animation: uvFadeUp .45s ease forwards; }
#ub-values .uv-card:nth-child(2){ animation-delay:.05s; }
#ub-values .uv-card:nth-child(3){ animation-delay:.10s; }
#ub-values .uv-card:nth-child(4){ animation-delay:.15s; }
#ub-values .uv-card:nth-child(5){ animation-delay:.20s; }
#ub-values .uv-card:nth-child(6){ animation-delay:.25s; }
#ub-values .uv-card:nth-child(7){ animation-delay:.30s; }

@media (prefers-reduced-motion: reduce){
  #ub-values .uv-card{ animation:none; opacity:1; transform:none; }
}