/* ===========================================================
   Fullhouse — Variation 3 · "Playful, emotion-first"
   Centered bold hero with quick event chips + bento event grid.
   Loads AFTER fullhouse.css (shares tokens & components).
   =========================================================== */

/* ---- playful centered hero ---- */
.v3hero{
  position:relative; overflow:visible; text-align:center;
  padding:92px 0 72px;
  background:
    radial-gradient(58% 48% at 82% 2%, var(--amber-100), transparent 60%),
    radial-gradient(52% 44% at 10% 16%, #FCEBD0, transparent 58%),
    var(--sand-50);
}
.v3hero-inner{position:relative; z-index:2;}
.v3blobs{position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;}
.v3blob{position:absolute; z-index:0; border-radius:50%; filter:blur(34px); pointer-events:none;}
.v3blob-a{width:200px; height:200px; background:var(--t-rovakot); opacity:.20; top:70px; inset-inline-start:7%;}
.v3blob-b{width:150px; height:150px; background:var(--t-team); opacity:.18; top:150px; inset-inline-end:9%;}
.v3blob-c{width:120px; height:120px; background:var(--t-bday); opacity:.20; bottom:40px; inset-inline-start:20%;}

.v3hero .eyebrow{display:inline-block;}
.v3hero h1{font-family:var(--serif); font-weight:800; font-size:clamp(42px,7vw,82px); letter-spacing:-.02em; line-height:1.03; margin:14px auto 0; max-width:15ch;}
.v3hero h1 .hl{color:var(--ink-900); position:relative; white-space:nowrap;}
.v3hero h1 .hl svg{position:absolute; left:-2%; right:-2%; bottom:-.16em; width:104%; height:.34em; stroke:var(--mustard); fill:none; stroke-width:9; stroke-linecap:round;}
.v3hero .sub{margin:18px auto 0; font-size:clamp(17px,2.2vw,21px); color:var(--ink-500); max-width:48ch;}
.v3hero .searchwrap{margin:34px auto 0; max-width:820px;}

/* quick popular event chips */
.quickrow{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin:26px auto 0;}
.quickrow .qlabel{font-size:14px; font-weight:700; color:var(--ink-500); margin-inline-end:2px;}
.evchip{display:inline-flex; align-items:center; gap:9px; background:var(--cream); border:1.5px solid var(--line); border-radius:999px; padding:10px 18px; font-family:var(--sans); font-weight:600; font-size:15px; color:var(--ink-900); cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);}
.evchip .dot{width:11px; height:11px; border-radius:50%; background:var(--c); transition:transform .35s var(--ease);}
.evchip:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:var(--c);}
.evchip:hover .dot{transform:scale(1.55);}

/* ---- bento event grid ---- */
body.v3 #tiles .tiles{grid-template-columns:repeat(3,1fr); grid-auto-rows:190px; gap:16px;}
body.v3 #tiles .tiles .tile{aspect-ratio:auto;}
body.v3 #tiles .tiles .tile:nth-child(1){grid-row:span 2;}
body.v3 #tiles .tiles .tile:nth-child(2){grid-column:span 2;}
body.v3 #tiles .tiles .tile:nth-child(5){grid-column:span 2;}
body.v3 #tiles .tiles .tile:nth-child(1) .nm{font-size:26px;}

/* a touch more colour rhythm */
body.v3 .promises{background:var(--amber-50);}

@media(max-width:720px){
  body.v3 #tiles .tiles{grid-template-columns:repeat(2,1fr); grid-auto-rows:auto;}
  body.v3 #tiles .tiles .tile{aspect-ratio:4/5; grid-row:auto !important; grid-column:auto !important;}
  .v3hero{padding:72px 0 54px;}
}