/**
 * UndeStam.ro — Carduri "Ce fel de vacanță plănuiești?" (cerere-noua.php)
 * HOTFIX 3.4.21 (Task 15) — implementare directă a mockup-ului aprobat de
 * Vali în 3.4.19 (_design/scenario-cards-mockup.html). Grid 2 coloane
 * mobil / 4 desktop, poză reală de fundal + overlay + titlu + descriere,
 * hover elevate + bordură bordo, selecție cu bifă vizibilă.
 *
 * Foloseste tokenii CSS (--a, --a2, --a3, --bo, --s, --s2, --m, --f) din
 * :root din cerere-noua.php — fisier incarcat DUPA acel :root.
 */
.vibes{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
@media(min-width:640px){
  .vibes{grid-template-columns:repeat(4,1fr);gap:14px}
}

.vibe{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  aspect-ratio:4/3;
  background:var(--s2) center/cover no-repeat;
  border:2px solid transparent;
  padding:0;
  font-family:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  isolation:isolate;
}
@media(min-width:640px){
  .vibe{aspect-ratio:16/9}
}
.vibe:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(10,10,10,.18);
  border-color:var(--a);
}
.vibe.on{
  border-color:var(--a);
  box-shadow:0 0 0 4px rgba(107,27,36,.15), 0 10px 26px rgba(10,10,10,.2);
}
.vibe.no-photo{ background:linear-gradient(135deg,var(--a2) 0%,var(--t) 100%); }

.vibe-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.78) 100%);
}

.vibe-check{
  position:absolute; top:8px; right:8px;
  width:24px; height:24px; border-radius:50%;
  background:#fff; color:var(--a);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:900;
  opacity:0; transform:scale(.6);
  transition:all .18s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  z-index:2;
}
.vibe.on .vibe-check{ opacity:1; transform:scale(1); }

.vibe-body{
  position:absolute; left:0; right:0; bottom:0;
  padding:12px 12px 10px;
  color:#fff;
  text-align:left;
  z-index:1;
}
.vibe.no-photo .vibe-body{ position:static; padding:16px 14px; }

.vibe-e{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:9px;
  background:rgba(255,255,255,.18);
  margin-bottom:7px; color:#fff;
}
.vibe-e svg{width:15px;height:15px}
.vibe.no-photo .vibe-e{ color:#fff; background:rgba(255,255,255,.1) }

.vibe-t{
  font-size:12.5px; font-weight:800; letter-spacing:-.01em; line-height:1.2;
  margin-bottom:2px;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.vibe.no-photo .vibe-t{ text-shadow:none }
.vibe-d{
  font-size:9.5px; font-weight:600; opacity:.88; line-height:1.35;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.vibe.no-photo .vibe-d{ text-shadow:none; color:var(--s2) }

@media(min-width:640px){
  .vibe-body{padding:16px 18px 15px}
  .vibe-t{font-size:14.5px}
  .vibe-d{font-size:11px}
}

/* Touch target: cardul intreg e zona clickabila, deja peste minimul de
   44x44px la 2 coloane pe orice latime mobila realista (>=320px). */
.vibe:active{ transform:scale(.98); }