/* Vĩnh Lộc Pickleball — 1.8.0 approved-concept visual correction.
   Render the approved panoramic HERO artwork at the proper ratio rather than zooming
   a 1550x824 photo into a narrow 1/3-column. All copy and actions remain live HTML. */
:root{--vl18-lime:#e4ff28;--vl18-bg:#06192e;--vl18-panel:#0b2540;--vl18-blue:#2798f8;--vl18-line:#36719f}
body{background:var(--vl18-bg)!important;color:#f6faff!important}
body .shell,.shell{max-width:1510px;width:calc(100% - 54px);padding-inline:0;margin-inline:auto}
/* Approved narrow bar and shield overlapping the top of the stadium. */
body .site-header{min-height:54px!important;height:auto;background:rgba(3,18,34,.96)!important;border-bottom:1px solid #4385b54d!important;box-shadow:0 2px 24px #03122588;overflow:visible;position:sticky;top:0;z-index:110}
body.admin-bar .site-header{top:32px}
body .site-header .header-inner{min-height:54px!important;gap:clamp(8px,1.25vw,20px);display:flex;align-items:center;flex-wrap:nowrap;position:relative}
body .site-header .brand{position:relative;z-index:3;min-width:155px;max-width:170px!important;width:clamp(120px,13vw,170px);height:54px;display:flex!important;align-items:flex-start;overflow:visible;flex-shrink:0}
body .site-header .brand .brand-logo{width:clamp(91px,8.5vw,122px)!important;height:clamp(91px,8.5vw,122px)!important;max-width:none!important;max-height:none!important;object-fit:contain;transform:translateY(4px);filter:drop-shadow(0 3px 7px #061225ce);position:relative;z-index:5}
body .site-header .brand-name{display:none!important}
body .site-header .primary-nav{margin-left:0;margin-right:auto;min-width:0}
body .site-header .nav-list{gap:clamp(3px,.75vw,14px);justify-content:center;flex-wrap:nowrap}
body .site-header .nav-list a{font-size:clamp(10px,.81vw,12px);padding:17px 6px;line-height:1.2;color:#ecf3ff!important;white-space:nowrap;font-weight:700}
body .site-header .header-tools{margin-left:auto;gap:10px}
body .site-header .header-search{min-width:170px;max-width:205px;width:clamp(166px,14.5vw,205px);font-size:10px;padding:7px 11px;border-radius:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .site-header .header-cta{padding:9px 13px!important;min-height:37px!important;border-radius:6px!important;font-size:10px!important;white-space:nowrap}
body .site-header .nav-list a:hover,body .site-header .current-menu-item>a,body.home .site-header .nav-list>li:first-child>a{box-shadow:inset 0 -2px 0 var(--vl18-lime),0 6px 16px #caff1933;color:#fff!important}
/* IMPORTANT: old hero-visual forced a portrait photo to cover and zoom; remove it.
   The panoramic approved concept is used as the section itself and preserves the
   two players, stadium, light streaks, ball and script at their approved positions. */
body .arena-hero.vl-hero{height:clamp(284px,23.75vw,408px)!important;min-height:0!important;max-height:none!important;position:relative;overflow:hidden;background-color:#06182e!important;background-image:url('../img/approved-hero-art.webp')!important;background-repeat:no-repeat!important;background-size:100% 100%!important;background-position:center center!important;isolation:isolate}
body .vl-hero:before,body .vl-hero:after{content:none!important;display:none!important}
body .vl-hero .arena-hero-glow{display:none!important}
body .vl-hero .arena-hero-visual{display:none!important}
body .vl-hero .arena-hero-side{display:none!important}
body .vl-hero .arena-hero-grid{display:flex!important;min-height:100%!important;height:100%;max-width:1510px;align-items:center;justify-content:flex-start;gap:0;position:relative;z-index:2}
body .vl-hero .arena-hero-copy{width:min(48%,620px);margin-left:clamp(38px,4.6vw,74px);padding:15px 0 10px!important;max-width:none!important;z-index:5;position:relative}
body .vl-hero .arena-kicker{display:block;color:#e8f2ff!important;font-size:clamp(9px,.76vw,12px)!important;line-height:1.5;font-weight:800;letter-spacing:.23em;text-shadow:0 2px 5px #001e3e}
body .vl-hero h1{margin:5px 0 4px!important;max-width:none!important;line-height:.97!important;letter-spacing:-.035em!important;text-shadow:0 5px 11px #04142a70}
body .vl-hero h1 span,body .vl-hero h1 strong{font-size:clamp(42px,5.05vw,83px)!important;line-height:.97!important;letter-spacing:-.065em!important;font-weight:900!important;font-style:italic;white-space:nowrap;display:block}
body .vl-hero h1 span{background:linear-gradient(175deg,#f4ff88 5%,#e3ff27 48%,#b9da00 100%)!important;background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important;text-shadow:none!important}
body .vl-hero h1 strong{margin-top:1px;background:linear-gradient(180deg,#fff 4%,#f9fcff 40%,#b0c9e5 100%)!important;background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important;text-shadow:none!important}
body .vl-hero .arena-hero-copy>p{font-size:clamp(9px,.83vw,12px)!important;line-height:1.55!important;letter-spacing:.16em!important;white-space:nowrap!important;color:#e7f2fd!important;margin:8px 0 7px!important;font-weight:750}
body .vl-hero .vl-hero-facts{margin:11px 0 11px!important;gap:7px 15px;flex-wrap:wrap;font-size:clamp(9px,.72vw,11px)!important;line-height:1.4;color:#f1f6ff;letter-spacing:0;font-weight:750}
body .vl-hero .vl-hero-facts span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
body .vl-hero .vl-hero-facts svg{width:17px;height:17px;stroke:#efffff;filter:drop-shadow(0 0 4px #a2d8ff6b)}
body .vl-hero .arena-hero-actions{margin:0!important}
body .vl-hero .arena-hero-actions .button{font-size:11px!important;padding:9px 14px!important;border-radius:6px!important;min-height:35px;font-weight:900;line-height:1.25}
body .vl-hero .hero-bottom-accent{height:2px!important;background:linear-gradient(90deg,#d5ff05,#63bfff 30%,#2e91ff 72%,#e5ff25)!important;box-shadow:0 0 14px #56adff}
/* Customizer image can replace the approved asset without changing live HTML layout. */
body .arena-hero.vl-hero.vl-custom-hero{background-image:linear-gradient(90deg,#06182ee8 0,#06182eaa 38%,#06182e05 78%),var(--vl-hero-photo)!important;background-size:cover!important;background-position:center center!important}
/* Same content order as approved reference: tour → services → portraits → ratings → editorial. */
body .arena-section{padding:14px 0 16px!important;border-bottom:1px solid #32658b96;position:relative}
body .arena-section-title{margin-bottom:10px!important;align-items:end}
body .arena-section-title h2{font-size:clamp(14px,1.18vw,19px)!important;line-height:1.35;letter-spacing:.015em;font-weight:850}
body .arena-section-title p{font-size:clamp(10px,.76vw,12px)!important;line-height:1.45}
body .tour-grid{gap:10px!important}
body .tour-card{min-height:clamp(208px,17vw,272px)!important}
body .tour-card-content{min-height:clamp(208px,17vw,272px)!important;padding:12px!important}
body .tour-card h3{font-size:clamp(13px,1.03vw,16px)!important}
body .service-grid{gap:10px!important}
body .service-grid .service-tile{min-height:clamp(146px,12.4vw,188px)!important;padding:10px 11px!important}
body .service-tile small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body .vl-player-grid{gap:10px!important}
body .vl-player-grid .athlete-card{min-height:clamp(195px,18.1vw,275px)!important;border:1px solid #4d8cba!important;border-radius:7px!important}
body .vl-player-grid .athlete-photo img{object-position:center 16%}
body .vl-player-grid .athlete-meta{padding:34px 10px 12px!important}
body .vl-player-grid .athlete-meta strong{font-size:clamp(11px,.9vw,15px)!important}
body .vl-player-grid .athlete-rank{font-size:9px!important}
body .vl-player-grid .vl-illustration-tag{font-size:8px!important;color:#0a2335!important;letter-spacing:.03em}
body .vl-player-grid .vl-player-unfilled .athlete-meta small{font-size:10px!important}
body .vl-rank-card{min-height:clamp(195px,15.5vw,245px)!important}
body .vl-rank-art{background-position:center 22%}
body .vl-news-grid{gap:10px!important}
body .vl-news-card{min-width:0}
body .site-footer{background:#06182d}
/* Laptop and tablet: never clip the title or hide the navigation button. */
@media(max-width:1320px){
 body .site-header .brand{min-width:120px;width:120px}
 body .site-header .nav-list{gap:1px}
 body .site-header .nav-list a{font-size:10px;padding-inline:5px}
 body .site-header .header-search{display:none!important}
 body .vl-hero .arena-hero-copy{width:min(52%,520px)}
 body .vl-hero h1 span,body .vl-hero h1 strong{font-size:clamp(43px,5.15vw,69px)!important}
}
@media(max-width:1080px){
 body .site-header .header-inner{flex-wrap:wrap!important;min-height:62px!important}
 body .site-header .brand{height:62px;min-width:85px!important;width:85px!important;max-width:85px!important}
 body .site-header .brand .brand-logo{width:80px!important;height:80px!important}
 body .site-header .nav-toggle{display:block!important;order:4;margin-left:0;min-height:40px}
 body .site-header .header-tools{margin-left:auto;order:3}
 body .site-header .primary-nav{order:5;flex-basis:100%;width:100%;margin:0;display:none}
 body .site-header .primary-nav.is-open{display:block!important}
 body .site-header .nav-list{flex-direction:column!important;align-items:stretch;gap:0;background:#061b31;border:1px solid #3b6b93;border-radius:9px;padding:9px!important;margin-bottom:10px!important}
 body .site-header .nav-list a{display:block;width:100%;padding:12px 14px;font-size:13px;min-height:42px}
 body .arena-hero.vl-hero{height:clamp(320px,34vw,400px)!important;background-size:auto 100%!important;background-position:57% center!important}
 body .vl-hero .arena-hero-copy{margin-left:0;width:min(59%,520px);padding:18px 0!important}
 body .vl-hero h1 span,body .vl-hero h1 strong{font-size:clamp(41px,5.8vw,60px)!important}
 body .vl-hero .arena-hero-copy>p{white-space:normal!important;max-width:475px}
 body .tour-grid,body .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body .tour-card,body .tour-card-content{min-height:240px!important}
 body .vl-player-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 body .vl-player-grid .athlete-card{min-height:270px!important}
 body .vl-rank-grid{grid-template-columns:1fr!important}
 body .vl-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:767px){
 body.admin-bar .site-header{top:46px}
 body .site-header .brand{min-width:64px!important;width:64px!important;max-width:64px!important}
 body .site-header .brand .brand-logo{height:65px!important;width:65px!important;transform:translateY(3px)}
 body .site-header .header-cta{font-size:10px!important;padding:8px 10px!important;min-height:38px!important}
 body .arena-hero.vl-hero{height:450px!important;background-image:linear-gradient(90deg,#06182ef5 2%,#06182eab 63%,#06182e33),url('../img/hero-players.webp')!important;background-size:cover!important;background-position:58% center!important}
 body .vl-hero .arena-hero-grid{height:100%;min-height:0!important;align-items:flex-end}
 body .vl-hero .arena-hero-copy{width:100%;margin:0;max-width:490px!important;padding:0 0 26px!important}
 body .vl-hero h1 span,body .vl-hero h1 strong{font-size:clamp(39px,9vw,65px)!important}
 body .vl-hero .arena-kicker{font-size:10px!important;letter-spacing:.11em}
 body .vl-hero .arena-hero-copy>p{white-space:normal!important;line-height:1.55!important;max-width:420px;font-size:11px!important}
 body .vl-hero .vl-hero-facts{font-size:10px!important;gap:8px 14px;max-width:400px}
 body .vl-hero .vl-hero-facts svg{width:15px;height:15px}
 body .vl-hero .arena-hero-actions .button{min-height:41px;padding:10px 15px!important}
 body .arena-section{padding:20px 0!important}
 body .tour-card,body .tour-card-content{min-height:235px!important}
 body .service-grid .service-tile{min-height:175px!important}
 body .vl-player-grid .athlete-card{min-height:240px!important}
 body .vl-rank-card{min-height:220px!important}
}
@media(max-width:540px){
 body .shell,body .site-header .shell{width:calc(100% - 28px)!important;padding-inline:0!important}
 body .arena-hero.vl-hero{height:420px!important;background-position:56% center!important}
 body .vl-hero h1 span,body .vl-hero h1 strong{font-size:clamp(38px,9.3vw,51px)!important}
 body .vl-hero .arena-hero-copy>p{font-size:10px!important}
 body .arena-section-title{align-items:start;gap:8px}
 body .arena-section-title h2{font-size:14px!important}
 body .arena-section-title p{font-size:10px!important}
 body .more-link{font-size:10px!important;text-align:right;white-space:normal;max-width:125px}
 body .tour-grid{grid-template-columns:1fr!important}
 body .tour-card,body .tour-card-content{min-height:248px!important}
 body .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
 body .service-grid .service-tile{min-height:172px!important;padding:10px!important}
 body .service-tile strong{font-size:11px!important;line-height:1.35}
 body .service-tile small{font-size:10px!important}
 body .vl-player-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
 body .vl-player-grid .athlete-card{min-height:235px!important}
 body .vl-player-grid .athlete-meta strong{font-size:11px!important}
 body .vl-rank-card{grid-template-columns:28% 72%;min-height:207px!important}
 body .vl-rank-head,body .vl-rank-row{font-size:10px!important}
 body .vl-news-grid{grid-template-columns:1fr!important}
 body .vl-news-image{aspect-ratio:16/9}
 body .footer-grid{grid-template-columns:1fr!important}
}
@media(max-width:365px){body .vl-hero h1 span,body .vl-hero h1 strong{font-size:36px!important}body .service-grid{grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){body .athlete-card,body .tour-card,body .service-tile{transition:none!important}}