/* ==========================================================================
   ETEX Padel — "Court Journal" shared stylesheet
   Locked style guide: turf blue ground, editorial serif type, court-line
   grid, one amber CTA per screen. No rounded corners, no shadows, no
   gradients, no icon grids, no emoji.
   ========================================================================== */

:root{
  --turf-blue:#1540A6;
  --deep-turf:#0E2E7A;
  --board-black:#0C0E0B;
  --line-white:#F4F6F2;
  --mist:#C9D4F2;
  --amber:#FFB020;
  --amber-hover:#FFC24D;

  --container-pad:56px;
  --gap:24px;
  --mobile-bp:860px;
}

@media (max-width: 860px){
  :root{ --container-pad:16px; }
}

/* ---- Reset ---- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--turf-blue);
  color:var(--line-white);
  font-family:'Work Sans', sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
@media (max-width: 860px){ body{ padding-bottom:96px; } }
img{ max-width:100%; display:block; }
a{ color:var(--line-white); text-decoration:none; }
a:hover{ color:var(--amber); }
button, input, textarea{ font-family:inherit; color:inherit; }
button{ cursor:pointer; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }

/* ---- Type ---- */
.kicker{
  font-family:'Work Sans', sans-serif;
  font-stretch:125%;
  font-weight:700;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
@media (max-width: 860px){ .kicker{ font-size:10px; } }
.kicker--amber{ color:var(--amber); }
.kicker--mist{ color:var(--mist); }

.mono{
  font-family:'Space Mono', monospace;
  font-stretch:87.5%;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.wordmark{
  font-family:'Work Sans', sans-serif;
  font-weight:800;
  letter-spacing:-.015em;
  line-height:1;
  font-size:21px;
}

h1, .h1{
  font-family:'Space Grotesk', sans-serif;
  font-style:normal;
  font-weight:700;
  letter-spacing:-.015em;
  line-height:.92;
  margin:0;
  font-size:96px;
}
@media (max-width: 860px){ h1, .h1{ font-size:52px; line-height:.94; } }

.h1--sub{
  font-family:'Space Grotesk', sans-serif;
  font-style:normal;
  font-weight:500;
  line-height:1.05;
  color:var(--mist);
  font-size:40px;
}
@media (max-width: 860px){ .h1--sub{ font-size:24px; line-height:1.1; } }

h2, .h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  line-height:1;
  margin:0;
  font-size:48px;
}
@media (max-width: 860px){ h2, .h2{ font-size:34px; } }

.h1-package{ font-size:56px; line-height:.92; }
@media (min-width: 861px){ .h1-package{ font-size:118px; line-height:.9; letter-spacing:-.015em; } }

.h2--lg{ font-size:64px; }
@media (max-width: 860px){ .h2--lg{ font-size:38px; } }

.italic-num{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  line-height:1;
}

.lede{ font-size:17px; line-height:1.55; }
.body-sm{ font-size:15px; line-height:1.5; }
.mist{ color:var(--mist); }

.cap{
  font-family:'Space Grotesk', sans-serif;
  font-weight:500;
  font-size:14px;
  color:var(--mist);
  margin-top:8px;
}

/* ---- Layout ---- */
.container{
  padding-left:var(--container-pad);
  padding-right:var(--container-pad);
}

.grid-12{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  column-gap:var(--gap);
}
@media (max-width: 860px){
  .grid-12{ grid-template-columns:1fr; row-gap:28px; }
  .grid-12 > [class*="span-"]{ grid-column:span 1; }
}
@media (min-width: 861px){
  .span-3{ grid-column:span 3; }
  .span-4{ grid-column:span 4; }
  .span-5{ grid-column:span 5; }
  .span-6{ grid-column:span 6; }
  .span-7{ grid-column:span 7; }
  .span-8{ grid-column:span 8; }
  .col-9-4{ grid-column:9 / span 4; }
  .col-10-3{ grid-column:10 / span 3; }
  .col-1-3{ grid-column:1 / span 3; }
  .col-5-8{ grid-column:5 / span 8; }
  .stat-strip{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .stat-strip > div:nth-child(2n){ border-right:1px solid #2A2D28; }
  .stat-strip > div:last-child{ border-right:none; }
  .stat-strip > div{ border-bottom:none; }
}

.two-col{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 28px; }
@media (max-width: 860px){ .two-col{ grid-template-columns:1fr; } }

.coach-row{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width: 861px){ .coach-row{ grid-template-columns:140px minmax(0,1fr); } }

.cols-2, .cols-3{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width: 861px){
  .cols-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

.split2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (max-width: 860px){ .split2{ grid-template-columns:1fr; } }
.split2--divider{ border-top:2px solid var(--line-white); }
.split2--divider > *:first-child{ border-right:2px solid var(--line-white); }
@media (max-width: 860px){ .split2--divider > *:first-child{ border-right:none; border-bottom:2px solid var(--line-white); } }

.service-line{
  height:2px;
  background:var(--line-white);
  position:relative;
  margin:0 var(--container-pad);
}
.service-line > span{
  position:absolute; left:50%; top:-8px; transform:translateX(-50%);
  background:var(--turf-blue); padding:0 12px; color:var(--mist);
}

/* ---- Buttons / links ---- */
.btn-amber{
  background:var(--amber);
  color:var(--board-black);
  text-decoration:none;
  font-weight:700;
  font-size:15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 24px;
  border:none;
  min-height:44px;
}
.btn-amber:hover{ background:var(--amber-hover); color:var(--board-black); }
.btn-amber:focus-visible{ outline-offset:3px; }

.btn-text{
  font-weight:600;
  font-size:15px;
  text-underline-offset:5px;
  text-decoration:underline;
  background:none;
  border:none;
  padding:4px 0;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  color:var(--line-white);
}
.btn-text:hover{ color:var(--amber); }

.tag{
  font-size:11px;
  border:2px solid var(--line-white);
  padding:6px 10px;
  display:inline-block;
}

.icon-btn{
  width:48px; height:48px;
  border:2px solid var(--line-white);
  background:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--line-white);
  flex-shrink:0;
}
.icon-btn:hover{ border-color:var(--amber); color:var(--amber); }

/* ---- Photo placeholder / duotone ---- */
.photo{
  position:relative;
  background:var(--deep-turf);
  background-image:repeating-linear-gradient(0deg, rgba(244,246,242,.12) 0 2px, transparent 2px 7px);
  border:2px solid var(--line-white);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:13px;
  color:#DCE3F7;
  padding:12px;
  overflow:hidden;
}
.photo:has(img){ background-image:none; }
.photo:has(video){ background-image:none; }
.photo img,
.photo video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.photo:has(img) .photo-label,
.photo:has(video) .photo-label{ display:none; }

.film{
  background:var(--board-black);
  padding:14px 14px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.film .photo{ height:220px; border:none; }
.film .mono-row{
  display:flex; justify-content:space-between;
  font-size:9px; color:var(--mist);
}

/* ---- Nav ---- */
.site-nav{
  height:72px;
  display:flex;
  align-items:center;
  gap:40px;
  border-bottom:2px solid var(--line-white);
}
@media (max-width: 860px){
  .site-nav{ height:56px; justify-content:space-between; }
}
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; flex-shrink:0; }
.brand img{ height:34px; }
@media (max-width: 860px){ .brand img{ height:30px; } .wordmark{ font-size:18px; } }

.nav-links{ display:flex; gap:28px; flex-grow:1; font-size:14px; font-weight:500; }
.nav-links a{ text-decoration:none; }
.nav-links a.current{ color:var(--amber); }

.nav-links, .nav-whatsapp{ display:flex; }
@media (max-width: 860px){
  .nav-links, .nav-whatsapp{ display:none; }
}

.nav-toggle{
  display:none;
  background:none; border:2px solid var(--line-white);
  width:44px; height:44px;
  align-items:center; justify-content:center;
  color:var(--line-white);
}
@media (max-width: 860px){ .nav-toggle{ display:flex; } }

.mobile-menu{
  display:none;
  flex-direction:column;
  border-bottom:2px solid var(--line-white);
  background:var(--turf-blue);
}
.mobile-menu.is-open{ display:flex; }
.mobile-menu a{
  padding:16px;
  min-height:44px;
  display:flex; align-items:center;
  font-size:16px; font-weight:600;
  border-top:1px solid rgba(244,246,242,.25);
}
.mobile-menu a:first-child{ border-top:none; }

/* ---- Footer ---- */
.site-footer{
  border-top:2px solid var(--line-white);
  padding:22px 0 32px;
  display:flex;
  align-items:center;
  gap:32px;
  flex-wrap:wrap;
}
@media (max-width: 860px){
  .site-footer{ flex-direction:column; align-items:flex-start; gap:14px; padding-bottom:100px; }
}
.site-footer .fine{ color:var(--mist); flex-grow:1; }

/* ---- Scoreboard (Space Mono data blocks) ---- */
.scoreboard{
  background:var(--board-black);
  color:var(--amber);
  padding:20px 22px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.scoreboard-row{ display:flex; justify-content:space-between; gap:12px; }
.scoreboard-row span:last-child{ text-align:right; }
.scoreboard-head{ color:var(--line-white); font-size:11px; padding-bottom:8px; border-bottom:1px solid #2A2D28; }
.scoreboard-row.divider{ padding-top:8px; border-top:1px solid #2A2D28; }

/* ---- Numbered rows ---- */
.num{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:32px;
  line-height:1;
  width:48px;
  flex-shrink:0;
}
.nrow{ display:flex; gap:18px; padding:18px 0; border-top:2px solid var(--line-white); }
.nrow:last-child{ border-bottom:2px solid var(--line-white); }

/* ---- Sticky booking bar (the "net") ---- */
.net-bar{
  background:var(--board-black);
  border-top:2px solid var(--line-white);
  border-bottom:2px solid var(--line-white);
  display:flex;
  align-items:center;
  gap:40px;
  padding:0 var(--container-pad);
  height:128px;
}
@media (max-width: 860px){
  .net-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    height:auto;
    padding:12px 16px 24px;
    gap:12px;
    border-bottom:none;
  }
}

/* ---- Utility ---- */
.stack{ display:flex; flex-direction:column; }
.gap-8{ gap:8px; } .gap-10{ gap:10px; } .gap-12{ gap:12px; } .gap-14{ gap:14px; }
.gap-16{ gap:16px; } .gap-18{ gap:18px; } .gap-20{ gap:20px; } .gap-22{ gap:22px; }
.gap-24{ gap:24px; } .gap-28{ gap:28px; } .gap-32{ gap:32px; }
.hide-mobile{ }
@media (max-width: 860px){ .hide-mobile{ display:none !important; } }
.show-mobile{ display:none !important; }
@media (max-width: 860px){ .show-mobile{ display:flex !important; } }

.border-frame{ border:2px solid var(--line-white); }
.divider-top{ border-top:2px solid var(--line-white); }
.divider-bottom{ border-bottom:2px solid var(--line-white); }

/* ---- Selectable chips / option cards (room picker, level picker, etc) ---- */
.chip{
  font-family:'Work Sans', sans-serif;
  font-size:14px;
  font-weight:600;
  padding:12px 14px;
  cursor:pointer;
  min-height:48px;
  text-align:left;
  display:flex;
  justify-content:space-between;
  gap:16px;
  background:transparent;
  color:var(--line-white);
  border:2px solid var(--line-white);
}
.chip.is-selected{ background:var(--amber); color:var(--board-black); border-color:var(--amber); }

.opt{
  font-family:'Work Sans', sans-serif;
  text-align:left;
  cursor:pointer;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:44px;
  background:transparent;
  color:var(--line-white);
  border:2px solid var(--line-white);
}
.opt.is-selected{ background:var(--line-white); color:var(--board-black); border-color:var(--line-white); }

.level-row{
  display:grid; grid-template-columns:96px minmax(0,1fr); gap:8px; align-items:start; margin-bottom:14px;
}
.level-row .level-opts{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; }
@media (max-width: 860px){
  .level-row{ grid-template-columns:1fr; gap:8px; }
  .level-row .level-opts{ grid-template-columns:1fr; }
}

.lv-btn{
  display:flex; justify-content:space-between; align-items:center;
  min-height:44px; padding:10px 14px;
  border:2px solid var(--line-white); box-sizing:border-box;
  font-size:14px; background:transparent; color:var(--line-white);
  font-family:'Work Sans', sans-serif; width:100%; text-align:left;
  flex-direction:column; align-items:flex-start; gap:2px;
}
.lv-btn.is-selected{ background:var(--line-white); color:var(--board-black); }
.lv-btn .range{ font-weight:700; font-size:14px; }
.lv-btn .name{ font-size:12px; opacity:.8; }

.stat-strip{ background:var(--board-black); display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
.stat-strip > div{ padding:14px 16px; border-right:1px solid #2A2D28; border-bottom:1px solid #2A2D28; display:flex; flex-direction:column; gap:6px; }
.stat-strip > div:nth-child(2n){ border-right:none; }
.stat-strip > div:nth-last-child(-n+2){ border-bottom:none; }
.stat-strip .stat-label{ font-size:10px; color:var(--mist); }
.stat-strip .stat-value{ font-size:18px; color:var(--amber); }

.row-itin{
  display:grid; grid-template-columns:150px minmax(0,1fr) 64px; gap:16px;
  padding:13px 0; border-top:2px solid var(--line-white); align-items:baseline;
}
@media (max-width: 860px){
  .row-itin{ grid-template-columns:1fr; gap:4px; }
}
.row-itin .t{ font-family:'Space Mono', monospace; font-stretch:87.5%; font-size:13px; color:var(--amber); }
.row-itin .h{ font-family:'Space Mono', monospace; font-stretch:87.5%; font-size:11px; text-align:right; color:var(--mist); }
@media (max-width: 860px){ .row-itin .h{ text-align:left; } }

.chk-row{ display:flex; gap:14px; padding:13px 0; border-top:2px solid var(--line-white); font-size:16px; line-height:1.45; }
.chk-row:last-child{ border-bottom:2px solid var(--line-white); }

/* ---- Form controls (private trip planner) ---- */
.q-block{ display:flex; flex-direction:column; gap:18px; padding:32px 0; border-top:2px solid var(--line-white); }
.q-head{ display:flex; gap:18px; align-items:baseline; }
.q-num{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:34px; line-height:1; width:52px; flex-shrink:0; }
.q-title{ font-size:22px; font-weight:700; line-height:1.25; }
.q-sub{ font-size:15px; line-height:1.5; color:var(--mist); margin-top:6px; }
.q-body{ margin-left:70px; display:flex; flex-direction:column; gap:14px; }
@media (max-width: 860px){ .q-body{ margin-left:0; } }

.field-inp{
  font-family:'Work Sans', sans-serif; font-size:16px; background:transparent;
  border:2px solid var(--line-white); color:var(--line-white);
  padding:14px 16px; box-sizing:border-box; width:100%; outline:none;
}
.field-inp:focus{ border-color:var(--amber); }
.field-inp::placeholder{ color:#8FA3D9; }
.field-label{ display:flex; flex-direction:column; gap:8px; font-size:14px; }
.field-label > span:first-child{ color:var(--mist); }

.stepper{
  display:flex; align-items:center;
}
.stepper-btn{
  width:48px; height:48px; background:none; border:2px solid var(--line-white);
  color:var(--line-white); font-size:22px; font-family:'Work Sans', sans-serif;
}
.stepper-btn:hover{ border-color:var(--amber); color:var(--amber); }
.stepper-val{
  min-width:120px; height:48px; border-top:2px solid var(--line-white); border-bottom:2px solid var(--line-white);
  box-sizing:border-box; display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:28px; padding:0 16px;
}

.goal-chip{
  font-family:'Work Sans', sans-serif; font-stretch:125%; font-weight:700; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; padding:12px 14px; cursor:pointer;
  min-height:44px; background:transparent; color:var(--line-white); border:2px solid var(--line-white);
}
.goal-chip.is-selected{ background:var(--line-white); color:var(--board-black); }

/* honeypot */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Private trip: mobile step wizard */
.wizard-progress{ display:flex; align-items:center; gap:12px; margin-top:6px; }
.wizard-progress .track{ flex-grow:1; height:2px; background:var(--line-white); }

@media (max-width: 860px){
  .q-block{ display:none; padding:0; border-top:none; }
  .q-block.is-active{ display:flex; padding-top:20px; }
  .part-divider{ display:none; }
  .part-divider.is-active{ display:flex; }
}

.trip-aside{
  background:transparent;
}
@media (min-width: 861px){
  .trip-aside{ position:sticky; top:24px; }
}

.error-box{ padding:14px 0 0 70px; }
@media (max-width: 860px){ .error-box{ padding-left:0; } }

/* ---- Confirmation panel ---- */
.confirm-panel{
  margin-top:32px; margin-left:70px; border:2px solid var(--line-white); padding:24px 26px;
  display:flex; flex-direction:column; gap:10px;
}
@media (max-width: 860px){ .confirm-panel{ margin-left:0; } }
.email-preview{ border:2px solid var(--line-white); display:flex; flex-direction:column; }
.email-preview .ep-head{ padding:10px 14px; border-bottom:2px solid var(--line-white); color:var(--amber); }
.email-preview .ep-meta{ padding:12px 14px; display:flex; flex-direction:column; gap:4px; font-size:13px; border-bottom:1px solid #3A5DB8; }
.email-preview .ep-body{ padding:12px 14px; font-size:13px; line-height:1.5; white-space:pre-line; color:#DCE3F7; }

.wizard-bar-hidden{ display:none !important; }

/* ---- Skip link ---- */
.skip-link{
  position:absolute; left:16px; top:-60px;
  background:var(--amber); color:var(--board-black);
  padding:12px 16px; font-weight:700; z-index:100;
  transition:top .15s;
}
.skip-link:focus{ top:16px; }