/* ==========================================================================
   InnBucks Connect — page-level composition
   Layout rules specific to a single page/route that don't belong in the
   reusable component library. Sections are ordered per page.
   ========================================================================== */

/* ============ DISCOVER EVENTS ============ */
.pagehead{padding-block:var(--s6)}
.pagehead h1{font-size:clamp(24px,3vw,36px)}
.pagehead .sub{font-size:14.5px;color:var(--n600);margin-top:8px;max-width:64ch}

.discover-layout{display:block}
@media(min-width:1024px){.discover-layout{display:grid;grid-template-columns:272px 1fr;gap:32px;align-items:start}}

.filterdock{position:fixed;left:0;right:0;bottom:0;max-height:86vh;background:#fff;border-radius:20px 20px 0 0;
  z-index:calc(var(--z-sheet) + 1);transform:translateY(100%);transition:transform .22s ease;
  display:flex;flex-direction:column;box-shadow:var(--sh-lg)}
body.sheet-open .filterdock{transform:translateY(0)}
.filterdock .grabber{width:40px;height:4px;background:var(--n300);border-radius:99px;margin:10px auto}
.filterdock .fd-head{display:flex;align-items:center;justify-content:space-between;padding:2px 18px 14px;
  border-bottom:1px solid var(--n200)}
.filterdock .fd-body{padding:18px;overflow-y:auto;flex:1}
.filterdock .fd-foot{padding:14px 18px;border-top:1px solid var(--n200);display:flex;gap:10px}
@media(min-width:1024px){
  .filterdock{position:static;transform:none;max-height:none;border-radius:var(--rp);border:1px solid var(--n200);
    box-shadow:var(--soft-shadow-xs);display:block;background:#fff}
  .filterdock .grabber,.filterdock .fd-head,.filterdock .fd-foot{display:none}
  .filterdock .fd-body{padding:22px;overflow:visible}
}
.filtercheck{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:14px;font-weight:600;color:var(--n700);
  min-height:40px}
.filtercheck input{width:19px;height:19px;accent-color:var(--v600);flex:0 0 auto}
.filter-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:12px}
.filter-toggle-row .lbl{font-size:13.5px;font-weight:700;color:var(--p900)}
.filter-toggle-row .lbl span{display:block;font-size:12px;font-weight:500;color:var(--n500);margin-top:2px}
.switch{position:relative;display:inline-block;width:44px;height:26px;flex:0 0 auto}
.switch input{opacity:0;width:100%;height:100%;position:absolute;margin:0;cursor:pointer}
.switch .track{position:absolute;inset:0;background:var(--n300);border-radius:99px;transition:background .15s ease}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:transform .15s ease;box-shadow:var(--sh-xs)}
.switch input:checked+.track{background:var(--v600)}
.switch input:checked+.track::after{transform:translateX(18px)}
.pricechips{display:flex;flex-wrap:wrap;gap:8px}

.resultshead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.resultshead .count{font-size:14px;color:var(--n600)}
.resultshead .count b{color:var(--p900)}
.resultscontrols{display:flex;align-items:center;gap:10px}
.resultscontrols .select{width:auto;min-width:160px;height:44px}

.resultsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1023px){.resultsgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:479px){.resultsgrid{grid-template-columns:1fr}}
.resultsgrid.is-list{grid-template-columns:1fr}
.resultsgrid.is-list .ecard{flex-direction:row}
.resultsgrid.is-list .ecard .top{width:150px;flex:0 0 150px}
.resultsgrid.is-list .ecard .media{aspect-ratio:auto;height:100%}
@media(max-width:479px){.resultsgrid.is-list .ecard .top{width:110px;flex-basis:110px}}

.pagination{display:flex;justify-content:center;margin-top:32px}
.statedemo{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 14px;background:var(--n100);
  border:1px dashed var(--n300);border-radius:var(--r);margin-bottom:22px;font-size:12px}
.statedemo .lbl{font-weight:700;color:var(--n600);margin-right:4px}
.statedemo button{height:32px;padding:0 12px;border-radius:99px;font-size:12px;font-weight:700;color:var(--n600);
  background:#fff;border:1px solid var(--n300)}
.statedemo button[aria-pressed="true"]{background:var(--p900);color:#fff;border-color:var(--p900)}

/* ============ EVENT DETAILS ============ */
.eventhero{border-radius:0;overflow:hidden}
.eventhero .media{aspect-ratio:4/3}
@media(min-width:600px){.eventhero .media{aspect-ratio:16/9}}
@media(min-width:1024px){.eventhero .media{aspect-ratio:21/8;border-radius:var(--rl)}}
.eventlayout{display:block}
@media(min-width:1024px){.eventlayout{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start}}
.eventfacts{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.eventfacts div{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--n700);font-weight:600}
.eventfacts .icn{width:17px;height:17px;color:var(--v500)}
@media(min-width:768px){.eventfacts{flex-direction:row;flex-wrap:wrap;gap:22px}}

.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gallery a:first-child{grid-column:1/-1}
.gallery .media{aspect-ratio:16/9;border-radius:var(--rc)}
.gallery a:not(:first-child) .media{aspect-ratio:4/3}
@media(min-width:768px){.gallery{grid-template-columns:repeat(3,1fr)}.gallery a:first-child{grid-column:1/3;grid-row:1/3}
  .gallery .media{aspect-ratio:auto;height:100%}}

.eventsection{padding-block:28px;border-top:1px solid var(--n200)}
.eventsection:first-of-type{border-top:none}
.eventsection h2{font-size:20px}
@media(min-width:1024px){.eventsection h2{font-size:23px}}

.mapstub{aspect-ratio:16/9;border-radius:var(--rc);border:1px solid var(--n200);position:relative;overflow:hidden;
  background:
    linear-gradient(0deg,transparent 24%,var(--n200) 25%,var(--n200) 26%,transparent 27%,transparent 74%,var(--n200) 75%,var(--n200) 76%,transparent 77%,transparent),
    linear-gradient(90deg,transparent 24%,var(--n200) 25%,var(--n200) 26%,transparent 27%,transparent 74%,var(--n200) 75%,var(--n200) 76%,transparent 77%,transparent),
    var(--n100);background-size:64px 64px}
.mapstub .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);width:38px;height:38px;
  border-radius:50% 50% 50% 0;background:var(--v600);rotate:-45deg;box-shadow:var(--sh-md)}
.mapstub .pin::after{content:"";position:absolute;inset:9px;background:#fff;border-radius:50%}
.mapstub .cap{position:absolute;left:12px;bottom:12px;background:#fff;border-radius:var(--r);padding:8px 12px;
  font-size:11px;font-weight:700;color:var(--n600);box-shadow:var(--sh-sm)}

.bookingcard{background:#fff;border:1px solid var(--n200);border-radius:var(--rp);box-shadow:var(--soft-shadow-sm);
  padding:22px;display:flex;flex-direction:column;gap:16px}
.bookingcard .bprice{font-size:26px;font-weight:800;color:var(--p900);letter-spacing:-.02em}
.bookingcard .bprice small{display:block;font-size:10.5px;font-weight:700;color:var(--n400);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:4px}
.eventalert{margin-bottom:18px}

/* ============ CHECKOUT ============ */
.checkoutlayout{display:block}
@media(min-width:1024px){.checkoutlayout{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start}}
.checkout-event{display:flex;gap:14px;align-items:center;padding:16px;background:#fff;border:1px solid var(--n200);
  border-radius:var(--rp);margin-bottom:22px}
.checkout-event .thumb{width:64px;height:64px;border-radius:var(--rc);overflow:hidden;flex:0 0 64px}
.checkout-event h3{font-size:15px;font-weight:800;color:var(--p900)}
.checkout-event p{font-size:12.5px;color:var(--n600);margin-top:3px}
.tiercard .qtywrap{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.statuspanel{text-align:center;max-width:480px;margin:20px auto;padding:36px 20px}
.statuspanel .ic{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px}
.statuspanel .ic .icn{width:32px;height:32px}
.statuspanel.ok .ic{background:var(--ok50);color:var(--ok)}
.statuspanel.warn .ic{background:var(--warn50);color:var(--warn)}
.statuspanel.err .ic{background:var(--err50);color:var(--err)}
.statuspanel.info .ic{background:var(--info50);color:var(--info)}
.statuspanel h2{font-size:22px}
.statuspanel p{font-size:14px;color:var(--n600);margin-top:10px;line-height:1.6}
.statuspanel .acts{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.confirm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:26px}
@media(min-width:600px){.confirm-grid{grid-template-columns:repeat(4,1fr)}}
.confirm-grid a,.confirm-grid button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;
  background:#fff;border:1px solid var(--n200);border-radius:var(--rc);font-size:12px;font-weight:700;color:var(--p900);
  text-align:center;min-height:44px}
.confirm-grid .icn{width:20px;height:20px;color:var(--v600)}
.donutspin{width:56px;height:56px;border-radius:50%;border:5px solid var(--n200);border-top-color:var(--v600)}

/* ============ MY TICKETS ============ */
.myticket .statusnote{font-size:12px;color:var(--n600);margin-top:8px;padding-top:8px;border-top:1px dashed var(--n200)}
.myticket.postponed .statusnote{color:var(--info)}
.myticket.cancelled .statusnote{color:var(--err)}
.myticket.refund .statusnote{color:var(--warn)}
.myticket-list{display:flex;flex-direction:column;gap:14px}

/* ============ TICKET DETAIL ============ */
.ticketpage{display:grid;grid-template-columns:1fr;gap:28px;max-width:900px;margin:0 auto}
@media(min-width:900px){.ticketpage{grid-template-columns:400px 1fr;align-items:start}}
.entryinfo{display:flex;flex-direction:column;gap:16px}
.entryinfo .row{display:flex;gap:12px}
.entryinfo .row .ic{width:34px;height:34px;border-radius:var(--rc);background:var(--p50);color:var(--v600);
  display:grid;place-items:center;flex:0 0 auto}
.entryinfo .row h5{font-size:13.5px;font-weight:800;color:var(--p900)}
.entryinfo .row p{font-size:12.5px;color:var(--n600);margin-top:3px;line-height:1.5}
.offlinepill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ok);
  background:var(--ok50);padding:6px 12px;border-radius:var(--rfull);margin-top:14px}
.ticketwrap.status-offline .offlinepill,.ticketwrap.status-cancelled .offlinepill,
.ticketwrap.status-postponed .offlinepill,.ticketwrap.status-refund .offlinepill{background:var(--n100);color:var(--n500)}

/* ============ HELP CENTRE ============ */
.topiccard{display:flex;gap:14px;align-items:flex-start;padding:18px;background:#fff;border:1px solid var(--n200);
  border-radius:var(--rp);box-shadow:var(--soft-shadow-xs);transition:transform .15s ease,box-shadow .15s ease}
.topiccard:hover{transform:translateY(-2px);box-shadow:var(--sh-hover)}
.topiccard .ic{width:40px;height:40px;border-radius:var(--rc);background:var(--p50);color:var(--v600);display:grid;
  place-items:center;flex:0 0 auto}
.topiccard h4{font-size:14px;font-weight:800;color:var(--p900);line-height:1.35}
.topiccard p{font-size:12.5px;color:var(--n600);margin-top:4px}
.contactcard{text-align:center;padding:24px 16px;background:#fff;border:1px solid var(--n200);border-radius:var(--rp);
  box-shadow:var(--soft-shadow-xs)}
.contactcard .ic{width:48px;height:48px;border-radius:50%;background:var(--p50);color:var(--v600);display:grid;
  place-items:center;margin:0 auto 12px}
.contactcard h4{font-size:14.5px;font-weight:800;color:var(--p900)}
.contactcard p{font-size:12.5px;color:var(--n600);margin-top:4px}
.retrievecard{max-width:480px;margin:0 auto;background:#fff;border:1px solid var(--n200);border-radius:var(--rl);
  padding:28px 22px;box-shadow:var(--soft-shadow-sm)}
@media(min-width:600px){.retrievecard{padding:32px}}

/* ============ PRESENTATION INDEX ============ */
.prhdr{background:var(--p950);color:#fff;padding:36px var(--edge-mob) 30px}
@media(min-width:1024px){.prhdr{padding:44px var(--edge-lg) 36px}}
.prhdr .k{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.prhdr h1{color:#fff;font-size:clamp(24px,3vw,32px);margin-top:10px}
.prhdr p{color:var(--p200);margin-top:8px;max-width:64ch;font-size:14px}
.prgroup{padding:26px 0;border-bottom:1px solid var(--n200)}
.prgroup h2{font-size:16px;font-weight:800;color:var(--p900);display:flex;align-items:center;gap:10px}
.prgroup .num{width:26px;height:26px;border-radius:50%;background:var(--p900);color:#fff;display:grid;place-items:center;
  font-size:12px;font-weight:800;flex:0 0 auto}
.prlinks{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:16px}
@media(min-width:600px){.prlinks{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.prlinks{grid-template-columns:repeat(4,1fr)}}
.prlinks a{display:flex;align-items:center;gap:8px;padding:11px 13px;background:var(--n100);border-radius:var(--r);
  font-size:13px;font-weight:600;color:var(--p900);min-height:44px}
.prlinks a:hover{background:var(--p50);color:var(--v700)}
.prlinks a.primary{background:var(--p900);color:#fff}
.prlinks a.primary:hover{background:var(--v700)}