.directory-hero{min-height:670px;background:#131316;isolation:isolate}
.directory-hero::before{content:"";position:absolute;inset:0;z-index:-2;background-image:url('/assets/dubai-nightlife-events-konnektion-hero.webp');background-size:cover;background-position:center;transition:opacity .3s ease}
.directory-hero[data-city="mykonos"]::before{background-image:url('/assets/mykonos-discovery-hero.jpg')}
.directory-hero[data-city="ibiza"]::before{background-image:url('/assets/ibiza-discovery-hero.jpg')}
.directory-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,10,13,.81),rgba(9,10,13,.42) 68%,rgba(9,10,13,.45)),linear-gradient(0deg,rgba(9,10,13,.72),transparent 65%)}
.directory-hero-inner{padding:95px 36px 62px}
.directory-hero .eyebrow{color:#fff}.directory-hero h1 em{color:#ff6965}
.directory-hero-inner>p:not(.eyebrow){color:#f1eeed;max-width:560px}
.city-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:55px;max-width:1188px}
.city-tile{appearance:none;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;justify-content:end;text-align:left;overflow:hidden;min-width:0;min-height:170px;padding:20px;border:1px solid rgba(255,255,255,.37);border-radius:13px;background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.035)),rgba(8,10,14,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 26px rgba(0,0,0,.19);backdrop-filter:blur(16px) saturate(135%);color:#fff;cursor:pointer;transition:border-color .25s,background .25s,transform .25s,box-shadow .25s}
.city-tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(2,3,5,.86),rgba(2,3,5,.03) 83%)}
.city-tile::after{content:"";position:absolute;left:-55%;top:-45%;width:45%;height:200%;transform:rotate(22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);pointer-events:none;opacity:0}
.city-tile:hover::after,.city-tile:focus-visible::after{animation:tile-reflection 900ms ease forwards}
.city-tile img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.city-tile span{font:800 clamp(22px,2.5vw,35px)/1 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.035em}
.city-tile small{font:650 12px/1.3 Inter,ui-sans-serif,system-ui,sans-serif;margin-top:8px;color:#eee7e6}
.city-tile[aria-selected="true"]{border-color:#e13935;box-shadow:0 0 0 2px #e13935,inset 0 1px 0 rgba(255,255,255,.35),0 12px 26px rgba(0,0,0,.19)}
.city-tile:not([aria-selected="true"]):hover{transform:translateY(-2px);border-color:#fff}.city-tile[aria-selected="true"]:hover{border-color:#e13935}.city-tile:focus-visible{outline:3px solid #fff;outline-offset:4px}
@keyframes tile-reflection{0%{left:-55%;opacity:0}20%{opacity:1}100%{left:140%;opacity:0}}
.city-panel[hidden]{display:none!important}
.city-section{min-height:600px}.club-grid{align-items:stretch}.club-card{display:flex;flex-direction:column}.card-art{display:block;width:100%;height:290px;object-fit:cover;object-position:center;border:0}.club-card--playa .card-art{object-position:center 44%}.card-content{display:flex;flex-direction:column;flex:1}.card-content>p:not(.card-kicker){min-height:0}.card-content .glass-action{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-width:166px;min-height:50px;margin-top:auto;padding:12px 22px;border:1px solid rgba(255,255,255,.42);border-radius:9px;background:radial-gradient(circle at 16% 12%,rgba(255,255,255,.19),transparent 45%),linear-gradient(135deg,rgba(255,255,255,.13),rgba(237,28,36,.09)),rgba(8,10,14,.42);color:#fff;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 16px rgba(0,0,0,.2);backdrop-filter:blur(14px) saturate(128%);transition:background .2s,border-color .2s,transform .2s}
.card-content .glass-action:hover{border-color:#fff;background:radial-gradient(circle at 16% 12%,rgba(255,255,255,.24),transparent 45%),linear-gradient(135deg,rgba(255,255,255,.16),rgba(237,28,36,.22)),rgba(8,10,14,.5);transform:translateY(-1px)}
.card-content .glass-action:focus-visible{outline:3px solid #fff;outline-offset:4px}
.upcoming-city{min-height:420px;align-items:center}
@media(max-width:800px){.directory-hero{min-height:690px}.city-tiles{gap:10px}.city-tile{min-height:145px;padding:15px}.card-art{height:270px}.upcoming-city{min-height:340px}}
@media(max-width:560px){.directory-hero{min-height:650px}.directory-hero-inner{padding:74px 22px 52px}.directory-hero h1{font-size:clamp(54px,15vw,82px)}.city-tiles{gap:7px;margin-top:38px}.city-tile{min-height:125px;padding:11px;border-radius:9px}.city-tile span{font-size:clamp(17px,5vw,22px)}.city-tile small{font-size:10px}.card-art{height:205px}.card-content .glass-action{min-height:48px;margin-top:20px}.upcoming-city{min-height:240px}}
@media(max-width:360px){.city-tile{min-height:115px;padding:9px}.city-tile span{font-size:16px}.city-tile small{font-size:9px}}
@media(prefers-reduced-motion:reduce){.directory-hero::before,.city-tile,.card-content .glass-action{transition:none}.city-tile:hover,.card-content .glass-action:hover{transform:none}.city-tile::after{animation:none!important}}