/* =========================================================
   OKTI — FINAL style.css (multi-page, responsive, i18n-ready)
   - Mobile horizontal nav (no burger)
   - Nav always visible on mobile (2 rows)
   - Language switcher does NOT shift (fixed widths)
   - Sticky blur disabled on mobile (prevents glitches)
   - Offers cards restored (grid4)
   - Instructor photo section included
   ========================================================= */

/* ===== Reset ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: rgba(255,255,255,0.92);
  background:#0b1220;
  line-height:1.5;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ===== Variables ===== */
:root{
  --bg:#0b1220;
  --line: rgba(255,255,255,0.14);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.72);
  --muted2: rgba(255,255,255,0.60);

  --brand:#2f7bff;
  --brand2:#00d3a7;

  --shadow: 0 14px 40px rgba(0,0,0,0.35);
  --r-xl: 22px;
  --r-lg: 16px;
  --r-md: 12px;

  --max:1120px;
}

.container{
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

/* Optional page accents */
body.page-home{
  background:
    radial-gradient(1000px 520px at 70% -10%, rgba(47,123,255,0.25), transparent 60%),
    radial-gradient(900px 500px at 18% 12%, rgba(0,211,167,0.14), transparent 60%),
    var(--bg);
}
body.page-offers{
  background:
    radial-gradient(900px 520px at 30% -10%, rgba(47,123,255,0.18), transparent 62%),
    radial-gradient(900px 520px at 85% 18%, rgba(0,211,167,0.10), transparent 65%),
    var(--bg);
}
body.page-instructor{
  background:
    radial-gradient(900px 520px at 75% -10%, rgba(47,123,255,0.16), transparent 62%),
    radial-gradient(900px 520px at 20% 22%, rgba(0,211,167,0.12), transparent 65%),
    var(--bg);
}
body.page-gallery{
  background:
    radial-gradient(900px 520px at 55% -10%, rgba(47,123,255,0.14), transparent 62%),
    radial-gradient(900px 520px at 20% 18%, rgba(0,211,167,0.10), transparent 65%),
    var(--bg);
}

/* ===== Nav ===== */
.nav{
  position: sticky;
  top:0;
  z-index:50;
  background: rgba(11,18,32,0.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  min-width:0;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  letter-spacing:0.2px;
  min-width:0;
}

/* Wide logo image */
.logo-wide{
  height:34px;
  width:auto;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
}

/* Text next to logo */
.brand > div{
  display:flex;
  flex-direction:column;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:260px;
}
.brand small{
  color: var(--muted2);
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:260px;
}

/* Links */
.nav__links{
  display:flex;
  align-items:center;
  gap:18px;
  color: var(--muted);
  font-weight:650;
  min-width:0;
}
.nav__links a{
  padding:10px 10px;
  border-radius:12px;
  transition:180ms ease;
}
.nav__links a:hover{
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
.nav__links a.is-active{
  background: rgba(255,255,255,0.07);
  color: var(--text);
}

/* CTA area */
.nav__cta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

/* Language switcher */
.lang{
  display:flex;
  gap:6px;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.04);
  padding:6px;
  border-radius:14px;
}
.lang button{
  border:1px solid transparent;
  background:transparent;
  color: var(--muted);
  font-weight:850;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  transition:180ms ease;
}
.lang button:hover{ background: rgba(255,255,255,0.06); color: var(--text); }
.lang button.is-active{
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.07);
  color: var(--text);
}

/* Buttons */
.btn{
  border:1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  padding:10px 14px;
  border-radius:14px;
  font-weight:750;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition:180ms ease;
  user-select:none;
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.07); }
.btn--primary{
  border:none;
  background: linear-gradient(135deg, var(--brand), #1f5cff);
  box-shadow: 0 16px 40px rgba(47,123,255,0.22);
}
.btn--primary:hover{ filter: brightness(1.05); }
.btn--ghost{ background:transparent; }

/* Remove burger/mobile menu leftovers (if any exist in older HTML) */
.burger, .mobile{ display:none !important; }

/* ===== Hero (index) ===== */
.hero{ padding:34px 0 26px; }
.hero__grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:22px;
  align-items:stretch;
}
.hero__card{
  position:relative;
  border-radius: var(--r-xl);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  min-height:520px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.55)),
    url("../img/hero-boat.jpg") center 65% / cover no-repeat;
}
.hero__overlay{
  position:absolute;
  inset:0;
  padding:30px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:14px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  border-radius:999px;
  width:fit-content;
  color: rgba(255,255,255,0.88);
  font-weight:750;
}
.hero h1{
  margin:0;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height:1.06;
  letter-spacing:-0.6px;
}
.hero p{
  margin:0;
  max-width:58ch;
  color: rgba(255,255,255,0.80);
  font-weight:600;
  font-size:1.02rem;
}
.hero__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
}
.hero__side{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Panels */
.panel{
  border:1px solid var(--line);
  background: rgba(255,255,255,0.05);
  border-radius: var(--r-xl);
  padding:18px;
}
.panel h3{ margin:0 0 6px; font-size:1.05rem; }
.panel p{ margin:0; color: var(--muted); font-weight:650; }
.panel .row{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Sections */
section{ padding:54px 0; }
.section__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  margin-bottom:18px;
}
.section__head h2{
  margin:0;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing:-0.4px;
  line-height:1.15;
}
.section__head p{
  margin:0;
  max-width:62ch;
  color: var(--muted);
  font-weight:650;
}

/* ===== Offers (restored) ===== */
.grid4{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.card{
  border:1px solid var(--line);
  background: rgba(255,255,255,0.05);
  border-radius: var(--r-xl);
  padding:18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  transition:180ms ease;
  min-height:220px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.card:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,0.07);
}
.chip{
  width:fit-content;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(47,123,255,0.14);
  border: 1px solid rgba(47,123,255,0.25);
  color: rgba(255,255,255,0.86);
  font-weight:800;
  font-size:0.84rem;
}
.card h3{ margin:0; font-size:1.05rem; }
.card p{ margin:0; color: var(--muted); font-weight:650; }
.card ul{
  margin:8px 0 0;
  padding-left:18px;
  color: var(--muted);
  font-weight:650;
}
.card .spacer{ flex:1; }
.card .link{
  margin-top:10px;
  color: rgba(255,255,255,0.9);
  font-weight:800;
  display:inline-flex;
  gap:8px;
  align-items:center;
  opacity:0.92;
}
.card .link:hover{ opacity:1; }

/* ===== Video (thumbnail fallback) ===== */
.video{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:14px;
  align-items:start;
}
.video__frame{
  border:1px solid var(--line);
  border-radius: var(--r-xl);
  overflow:hidden;
  background: rgba(255,255,255,0.05);
  box-shadow: var(--shadow);
}
.video__thumb{
  display:block;
  position:relative;
  width:100%;
}
.video__thumb img{
  width:100%;
  aspect-ratio: 16/9;
  object-fit:cover;
  display:block;
  opacity:0.95;
}
.video__play{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width:64px;
  height:64px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:22px;
  font-weight:900;
  color: rgba(255,255,255,0.95);
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
}
.video__thumb:hover .video__play{ background: rgba(0,0,0,0.55); }

/* ===== Instructor + FAQ ===== */
.instructor__grid{
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap:14px;
  align-items:center;
}
.instructor__photo{
  border:1px solid var(--line);
  border-radius: var(--r-xl);
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.55)),
    url("../img/instructor.jpg") center 10% / cover no-repeat;
  min-height:420px;
  box-shadow: var(--shadow);
}

/* Fix instructor photo on mobile */
@media (max-width: 768px){
  .instructor__photo{
    background-position: center 15% !important;
    min-height: 320px;
  }
}

.kpis{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  margin-top:14px;
}
.kpi{
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background: rgba(255,255,255,0.04);
}
.kpi strong{ display:block; font-size:1.05rem; }
.kpi span{ color: var(--muted); font-weight:650; font-size:0.92rem; }

.faq{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
details{
  border:1px solid var(--line);
  background: rgba(255,255,255,0.05);
  border-radius: var(--r-xl);
  padding:14px 16px;
}
summary{
  cursor:pointer;
  font-weight:850;
  color: rgba(255,255,255,0.92);
}
details p{
  color: var(--muted);
  font-weight:650;
  margin:10px 0 0;
}

/* ===== Gallery ===== */
.gallery{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:12px;
}
.g{
  border-radius: var(--r-xl);
  overflow:hidden;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.05);
  min-height:180px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  position:relative;
}
.g img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0.94;
}
.g::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55));
  pointer-events:none;
}
.g span{
  position:absolute;
  left:14px; bottom:12px;
  z-index:2;
  font-weight:850;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 12px 28px rgba(0,0,0,0.55);
  font-size:0.95rem;
}
.g1{ grid-column: span 7; }
.g2{ grid-column: span 5; }
.g3{ grid-column: span 4; }
.g4{ grid-column: span 4; }
.g5{ grid-column: span 4; }
.g6{ grid-column: span 6; }
.g7{ grid-column: span 6; }

/* ===== Contact ===== */
.contact{
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap:14px;
  align-items:start;
}
.meta{
  display:grid;
  gap:10px;
  margin-top:12px;
  color: var(--muted);
  font-weight:650;
}
.meta a{ color: rgba(255,255,255,0.9); font-weight:850; }

form{ display:grid; gap:10px; margin-top:10px; }
input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(11,18,32,0.55);
  color: var(--text);
  font-weight:650;
  outline:none;
}
textarea{ min-height:120px; resize:vertical; }
input:focus, textarea:focus{
  border-color: rgba(47,123,255,0.55);
  box-shadow: 0 0 0 4px rgba(47,123,255,0.12);
}

/* ===== Footer ===== */
footer{
  padding:28px 0 36px;
  color: var(--muted2);
  border-top:1px solid var(--line);
  background: rgba(0,0,0,0.08);
}
.foot{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.foot a{ color: var(--muted); font-weight:750; }
.foot a:hover{ color: var(--text); }

/* ===== Responsive ===== */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns:1fr; }
  .video{ grid-template-columns:1fr; }
  .instructor__grid{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .grid4{ grid-template-columns: repeat(2, 1fr); }
  .grid3{ grid-template-columns:1fr; }
  .kpis{ grid-template-columns: repeat(3, 1fr); }
  .faq{ grid-template-columns:1fr; }
  .hero__card{ min-height:480px; }

  .brand > div{ max-width:180px; }
  .brand small{ display:none; }
}

/* =========================================================
   MOBILE HEADER (FINAL)
   - 2-row header
   - Links always visible + horizontal scroll
   - Language + CTA fixed widths (no shifting when HR/IT selected)
   - Blur disabled on mobile to prevent weird repaint/glitches
   ========================================================= */
@media (max-width: 900px){

  .nav{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background: rgba(11,18,32,0.98) !important;
  }

  .nav__inner{
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* Row 1: brand left */
  .brand{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    order: 1 !important;
  }

  /* Row 1: CTA right */
  .nav__cta{
    order: 2 !important;
    flex: 0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  /* Row 2: nav links full width */
  .nav__links{
    display:flex !important;
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;

    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
    gap: 8px;
  }
  .nav__links::-webkit-scrollbar{ display:none; }
  .nav__links a{
    padding: 8px 10px !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
  }

  /* Brand text compact */
  .brand > div{
    max-width: 140px !important;
    white-space: nowrap !important;
    overflow:hidden !important;
    text-overflow: ellipsis !important;
  }
  .brand small{ display:none !important; }
  .logo-wide{ height: 26px !important; }

  /* ===== Language switcher DOES NOT SHIFT ===== */
  .lang{
    min-width: 120px !important;     /* fixed container width */
    justify-content: center !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
    padding: 5px !important;
  }
  .lang button{
    width: 36px !important;          /* HR/EN/IT fixed width */
    min-width: 36px !important;
    text-align: center !important;
    padding: 6px 0 !important;
    font-size: 0.85rem !important;
  }

  /* Call & Book fixed width so translation doesn't push layout */
  .nav__cta .btn{
    min-width: 70px !important;
    justify-content: center !important;
    padding: 10px 12px !important;
  }
}

@media (max-width: 680px){
  .grid4{ grid-template-columns:1fr; }
  .kpis{ grid-template-columns:1fr; }
  .g1,.g2,.g3,.g4,.g5,.g6,.g7{ grid-column: span 12; }
  .hero__overlay{ padding:18px; }
  .hero__card{ min-height:520px; }
  .instructor__photo{
    min-height: 320px;
    background-position: center 82%;
  }
}

.offers3{ margin-top:14px; }

.kpis--two{ grid-template-columns: 1fr 1fr; }
.kpi--big{
  display:flex; align-items:center; justify-content:center;
  text-align:center; font-weight:850; font-size:1.02rem;
}
@media (max-width:680px){ .kpis--two{ grid-template-columns:1fr; } }

/* ===== Spinner for EmailJS submit button ===== */
.btn.is-loading{
  opacity: 0.92;
  pointer-events: none;
}

.spinner{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: rgba(255,255,255,0.95);
  display: inline-block;
  animation: spin 0.8s linear infinite;
}

@keyframes spin{
  to { transform: rotate(360deg); }
}

#formMsg{
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 650;
}

/* ===== Quick contact links (hero sidebar) ===== */
.quick-links{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.quick-link{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px;
  border-radius: 14px;

  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-weight: 800;

  transition: 180ms ease;
}

.quick-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.07);
}

.quick-link__icon{
  width: 22px;
  display: inline-flex;
  justify-content: center;
  opacity: 0.95;
}

.quick-link__text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Contact meta rows (icons inline) ===== */
.meta--rows{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.meta__row{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 650;
}

.meta__icon{
  width: 22px;
  display: inline-flex;
  justify-content: center;
  opacity: 0.95;
}

.meta__row a{
  color: rgba(255,255,255,0.9);
  font-weight: 850;
}

/* ===== Prevent decorative overlays from stealing taps (mobile bug fix) ===== */
.hero__card::before,
.hero__card::after,
.video__frame::before,
.video__frame::after,
.panel::before,
.panel::after{
  pointer-events: none !important;
}

.video-embed{
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  border-radius: var(--r-xl);
  background: #000;
}

/* HARD STOP horizontal overflow */
*{
  max-width: 100vw;
}

html, body{
  overflow-x: hidden !important;
}


@media (max-width: 900px){
  .nav__inner{
    flex-wrap: wrap;
  }

  .nav__links{
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    white-space: normal;
  }
}