/* kv_home_bento.css — living bento grid for the recrafted homepage (index_bento.php).
   Light theme; brand accent = blue→purple→pink gradient (matches .grad in kv_index_v2.css).
   Self-contained, no external assets. Paired with the inline rotator/count-up JS in index_bento.php. */

:root{
  --kvb-grad: linear-gradient(135deg,#4f7cff 0%,#9a5cff 52%,#ff5ca8 100%);
  --kvb-ink:#141a2e; --kvb-mut:#6b7386; --kvb-line:#e9edf5; --kvb-card:#ffffff;
  --kvb-bg:#f6f8fc; --kvb-soft:#f0f3fa;
}

/* ---- section shell ---- */
.bento-section{ padding:56px 0 72px; background:
    radial-gradient(60% 45% at 12% 0%, rgba(79,124,255,.06), transparent 70%),
    radial-gradient(55% 40% at 92% 8%, rgba(255,92,168,.06), transparent 70%),
    var(--kvb-bg); }
.bento-head{ text-align:center; max-width:640px; margin:0 auto 30px; }
.bento-kick{ display:inline-flex; align-items:center; gap:7px; font-size:.74rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:#5b64d8; background:#eef1ff;
  border:1px solid #e0e5ff; padding:5px 12px; border-radius:999px; }
.bento-kick .dot{ width:7px; height:7px; border-radius:50%; background:#39d98a; box-shadow:0 0 0 0 rgba(57,217,138,.6); animation:kvbPulse 1.8s infinite; }
.bento-head h2{ font-size:clamp(1.6rem,3.4vw,2.4rem); font-weight:800; letter-spacing:-.02em; margin:.5rem 0 .35rem; color:var(--kvb-ink); }
.bento-head p{ color:var(--kvb-mut); font-size:1rem; margin:0; }

/* ---- the grid ---- */
.bento-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:170px;
  grid-auto-flow:dense; gap:16px; }
.bento-tile{ position:relative; display:flex; flex-direction:column; gap:10px; overflow:hidden;
  background:var(--kvb-card); border:1px solid var(--kvb-line); border-radius:20px; padding:16px 17px;
  text-decoration:none; color:var(--kvb-ink); box-shadow:0 1px 2px rgba(20,26,46,.04),0 8px 24px rgba(20,26,46,.05);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s; }
.bento-tile:hover{ transform:translateY(-4px); box-shadow:0 6px 14px rgba(20,26,46,.07),0 18px 44px rgba(79,124,255,.14); border-color:#dfe6ff; }
.bento-tile.span2{ grid-column:span 2; } .bento-tile.row2{ grid-row:span 2; }

/* ---- tile chrome ---- */
.bt-top{ display:flex; align-items:center; justify-content:space-between; }
.bt-chip{ font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  background:var(--kvb-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.bt-live{ display:inline-flex; align-items:center; gap:5px; font-size:.66rem; font-weight:700; color:#e0469a; text-transform:uppercase; letter-spacing:.05em; }
.pdot{ width:7px; height:7px; border-radius:50%; background:#ff5ca8; box-shadow:0 0 0 0 rgba(255,92,168,.5); animation:kvbPulse 1.6s infinite; }
.bt-cta{ margin-top:auto; font-size:.82rem; font-weight:600; color:#5b64d8; }
.bt-stat{ margin-top:auto; display:flex; flex-direction:column; }
.bt-stat b{ font-size:1.9rem; font-weight:800; line-height:1; background:var(--kvb-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.bt-stat span{ font-size:.82rem; color:var(--kvb-mut); margin-top:3px; }
.bt-stat2{ margin-top:auto; display:flex; flex-direction:column; }
.bt-stat2 b{ font-size:.98rem; font-weight:700; }
.bt-stat2 span{ font-size:.8rem; color:var(--kvb-mut); }
.bt-emoji{ font-size:1.9rem; line-height:1; margin-top:2px; filter:saturate(1.1); }

/* ---- social feed (rotating cards) ---- */
.bt-feed{ position:relative; flex:1; min-height:120px; }
.feedcard{ position:absolute; inset:0; display:flex; align-items:center; gap:11px; padding:12px;
  background:var(--kvb-soft); border:1px solid var(--kvb-line); border-radius:14px;
  opacity:0; transform:translateY(10px) scale(.99); transition:opacity .55s, transform .55s; pointer-events:none; }
.feedcard.on{ opacity:1; transform:none; }
.feedcard .fc-t{ display:flex; flex-direction:column; min-width:0; }
.feedcard b{ font-size:.9rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feedcard i{ font-style:normal; font-size:.76rem; color:var(--kvb-mut); }
.feedcard .fheart{ margin-left:auto; font-size:.78rem; font-weight:700; color:#e0469a; white-space:nowrap; }
.fav{ width:38px; height:38px; border-radius:50%; flex:none; }
.fav.g1{ background:linear-gradient(135deg,#5b8cff,#9a5cff); }
.fav.g2{ background:linear-gradient(135deg,#ff7eb3,#ff5ca8); }
.fav.g3{ background:linear-gradient(135deg,#34d3b0,#4f7cff); }

/* ---- nearby avatars ---- */
.np-avatars{ display:flex; align-items:center; }
.np{ width:34px; height:34px; border-radius:50%; border:2.5px solid #fff; margin-left:-9px; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.np:first-child{ margin-left:0; }
.np.a1{ background:linear-gradient(135deg,#5b8cff,#9a5cff);} .np.a2{ background:linear-gradient(135deg,#ff7eb3,#ff5ca8);}
.np.a3{ background:linear-gradient(135deg,#34d3b0,#4f7cff);} .np.a4{ background:linear-gradient(135deg,#ffb35c,#ff5ca8);}
.np.more{ display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:800; color:#5b64d8; background:#eef1ff; }

/* ---- marketplace shelf ---- */
.shelf{ display:flex; gap:8px; flex:1; align-items:center; }
.sp{ flex:1; height:58px; border-radius:12px; background-size:cover; background-position:center; box-shadow:inset 0 0 0 1px rgba(20,26,46,.06); }
.sp.p1{ background:linear-gradient(135deg,#dbe4ff,#c9d6ff);} .sp.p2{ background:linear-gradient(135deg,#ffe0ef,#ffcfe4);} .sp.p3{ background:linear-gradient(135deg,#d8f5ec,#c4efe1);}

/* ---- jobs rotating ---- */
.jobrot{ position:relative; flex:1; min-height:66px; }
.jobcard{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:2px;
  padding:11px 13px; background:var(--kvb-soft); border:1px solid var(--kvb-line); border-radius:13px;
  opacity:0; transform:translateY(8px); transition:opacity .5s, transform .5s; }
.jobcard.on{ opacity:1; transform:none; }
.jobcard b{ font-size:.92rem; font-weight:700; } .jobcard i{ font-style:normal; font-size:.77rem; color:var(--kvb-mut); }

/* ---- dating match (swipe-deck) ---- */
.matchcard{ display:flex; align-items:center; gap:11px; flex:1; }
.matchcard .mphoto{ width:46px; height:46px; border-radius:14px; background:linear-gradient(135deg,#ff7eb3,#9a5cff); flex:none; }
.t-dating{ background:linear-gradient(160deg,#fff 60%,#fff0f6); }
.match-deck{ position:relative; height:64px; display:flex; align-items:center; justify-content:center; margin:2px 0; flex:none; }
.mcard{ position:absolute; width:44px; height:56px; border-radius:12px; border:2.5px solid #fff;
  box-shadow:0 5px 13px rgba(154,92,255,.22); transition:transform .32s cubic-bezier(.2,.7,.3,1); }
.mcard.c1{ background:linear-gradient(135deg,#ff7eb3,#9a5cff); z-index:3; }
.mcard.c2{ background:linear-gradient(135deg,#ffb35c,#ff5ca8); z-index:2; transform:translateX(-22px) rotate(-8deg); }
.mcard.c3{ background:linear-gradient(135deg,#5b8cff,#34d3b0); z-index:1; transform:translateX(22px) rotate(8deg); }
.mheart{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.3rem; filter:drop-shadow(0 2px 4px rgba(0,0,0,.28)); animation:mheartPulse 1.9s ease-in-out infinite; }
.t-dating:hover .mcard.c1{ transform:translateY(-4px) scale(1.04); }
.t-dating:hover .mcard.c2{ transform:translateX(-26px) rotate(-12deg); }
.t-dating:hover .mcard.c3{ transform:translateX(26px) rotate(12deg); }
@keyframes mheartPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.14)} }
@media (prefers-reduced-motion:reduce){ .mheart{ animation:none; } .mcard{ transition:none; } }

/* real avatar photos fill the circle (gradient stays as fallback when no photo) */
.fav{ background-size:cover; background-position:center; }
/* plain module tiles: icon + text on ONE row (col-2 icon / col-10 text) via grid — no markup change */
.bento-tile.t-plain{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto 1fr;
  grid-template-areas:"top top" "ic txt"; column-gap:13px; row-gap:8px; align-content:start; }
.t-plain .bt-top{ grid-area:top; }
.t-plain .bt-emoji{ grid-area:ic; align-self:center; margin:0; }
.t-plain .bt-stat2{ grid-area:txt; align-self:center; margin:0; }

/* ---- join CTA ---- */
.t-join{ background:linear-gradient(135deg,#101733,#20264d); border:none; color:#fff; }
.t-join .join-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:100%; flex-wrap:wrap; }
.t-join h3{ font-size:1.35rem; font-weight:800; margin:0 0 3px; color:#fff; }
.t-join .join-copy p{ margin:0; color:#c3cbe6; font-size:.9rem; max-width:44ch; }
.t-join .join-btns{ display:flex; gap:10px; flex-wrap:wrap; }
/* the ghost button is styled for light pages — make it readable on the dark banner */
.t-join .btn-ghost{ background:transparent; border:1px solid rgba(255,255,255,.45); color:#fff; }
.t-join .btn-ghost:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.7); color:#fff; }
.t-join .grad{ background-image:linear-gradient(135deg,#a9c2ff,#d7b8ff,#ffc2e0);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

/* slim quick-links under the hero search */
.qpills-slim{ opacity:.9; }

/* ---- Bramha AI tile (premium dark, glowing orb) ---- */
.t-bramha{ background:linear-gradient(160deg,#0f1230 0%,#241a4d 58%,#3a1d5c 100%); border:none; color:#fff; overflow:hidden; }
.t-bramha::after{ content:""; position:absolute; top:-30%; right:-20%; width:70%; height:80%;
  background:radial-gradient(circle,rgba(154,92,255,.35),transparent 70%); pointer-events:none; }
.t-bramha .bramha-chip{ background:linear-gradient(135deg,#8fb0ff,#c79dff,#ff9ecb); -webkit-background-clip:text; background-clip:text; color:transparent; }
.t-bramha .bramha-live{ color:#c79dff; }
.t-bramha .bt-stat2 b{ color:#fff; } .t-bramha .bt-stat2 span{ color:#c3cbe6; }
.bramha-orb{ position:relative; height:62px; display:flex; align-items:center; justify-content:center; margin:2px 0; }
.bo-core{ position:relative; z-index:2; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; color:#fff; background:radial-gradient(circle at 32% 28%,#d7b8ff,#7a5cff 55%,#4f7cff);
  box-shadow:0 0 24px rgba(124,92,255,.65); }
.bo-ring{ position:absolute; width:62px; height:62px; border-radius:50%; border:2px solid rgba(199,157,255,.45); animation:boPulse 2.4s ease-in-out infinite; }
.t-bramha:hover .bo-core{ transform:scale(1.06); transition:transform .25s; }
@keyframes boPulse{ 0%,100%{ transform:scale(.88); opacity:.75 } 50%{ transform:scale(1.18); opacity:.15 } }
@media (prefers-reduced-motion:reduce){ .bo-ring{ animation:none; } }

/* scroll-reveal (added by JS via .bento-reveal — no-JS keeps tiles visible) */
.bento-reveal .bento-tile{ opacity:0; transform:translateY(16px); }
.bento-reveal .bento-tile.in{ opacity:1; transform:none;
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); }

/* respect reduced-motion: no pulse, no rotate-transition, no reveal offset */
@media (prefers-reduced-motion:reduce){
  .bento-kick .dot, .pdot{ animation:none; }
  .feedcard, .jobcard, .bento-tile{ transition:none !important; }
  .bento-reveal .bento-tile{ opacity:1 !important; transform:none !important; }
}

@keyframes kvbPulse{ 0%{box-shadow:0 0 0 0 rgba(255,92,168,.5)} 70%{box-shadow:0 0 0 7px rgba(255,92,168,0)} 100%{box-shadow:0 0 0 0 rgba(255,92,168,0)} }

/* ---- responsive ---- */
/* tablet: 2 columns; keep the Social tile roomy (2 rows) so its feed never clips */
@media (max-width:900px){
  .bento-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:156px; }
  .bento-tile.span2{ grid-column:span 2; }
  .t-social{ grid-column:span 2; grid-row:span 2; }
  .t-join{ grid-column:span 2; }
}
/* phones: single column, tiles grow to fit their content */
@media (max-width:560px){
  .bento-section{ padding:38px 0 50px; }
  .bento-grid{ grid-template-columns:1fr; grid-auto-rows:auto; gap:13px; }
  .bento-tile{ min-height:auto; }
  .bento-tile.span2, .bento-tile.row2, .t-social, .t-join{ grid-column:span 1; grid-row:span 1; }
  .bt-feed{ min-height:96px; }
  .t-social{ min-height:180px; }
  .t-join .join-in{ flex-direction:column; align-items:flex-start; gap:12px; }
}
/* very small phones */
@media (max-width:380px){
  .bento-head h2{ font-size:1.5rem; }
  .bento-tile{ padding:14px 15px; border-radius:17px; }
}

/* ---- dark-mode friendliness (if the viewer/theme is dark) ---- */
@media (prefers-color-scheme:dark){
  body.kv-bento .bento-section{ --kvb-ink:#eaeefb; --kvb-mut:#9aa3bd; --kvb-line:#232a44; --kvb-card:#141a2e; --kvb-bg:#0c1020; --kvb-soft:#1a2138; }
}