/* ============================================================
   Golf igrišče Ptuj — Sezona 2026
   Quiet Luxe redesign · cream + ink + single deep green
   Typography: Instrument Serif (display, italic-led) + Geist
   ============================================================ */

:root {
  /* Pure-nature palette: white + sky/water blue + grass green. No cream. */
  --bg:        #FFFFFF;   /* clean white body */
  --surface:   #F4F6F4;   /* cool natural surface */
  --surface-2: #E7ECE8;

  /* Type on white — cool nature ink */
  --ink:     #0E1A1F;     /* near-black */
  --ink-2:   #2C3942;     /* graphite */
  --ink-3:   #5E6B73;     /* muted */
  --ink-4:   #8E9AA0;     /* dim */
  --paper:   #EEF2EE;     /* hover surface */

  /* "cream" alias — kept only for dark-section type, but set to PURE WHITE */
  --cream:   #FFFFFF;

  /* Sky / water blue */
  --blue:        #2D6A8A;  /* main water blue */
  --blue-deep:   #0F2A3D;  /* night water (hero base) */
  --blue-dark:   #143046;  /* gradient mid */
  --blue-soft:   #B8D2E0;  /* misty horizon (tints) */
  --blue-haze:   #EAF0F3;  /* very pale blue tint section */

  /* Grass / fairway green */
  --green:       #4A8E54;  /* fresh fairway — main accent */
  --green-2:     #5FA86B;  /* hover / brighter */
  --green-deep:  #2E5C36;  /* forest / CTA block */
  --green-soft:  #DCE9DD;  /* very pale tint */

  --gold:        #B8853F;  /* warm accent, restrained */
  --warning:     #B8853F;  /* alias */

  --rule:        #DDE3DF;  /* cool hairline on white */
  --rule-2:      #BFC8C2;  /* stronger hairline */

  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --sans:  "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad-x: clamp(20px, 4.5vw, 80px);
  --pad-section-y: clamp(96px, 14vw, 200px);
  --maxw: 1440px;

  --ease: cubic-bezier(.2, .65, .25, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01", "cv11";
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--green); color: var(--cream); }

.skip {
  position: absolute; left: -9999px; top: -9999px;
  padding: 8px 14px; background: var(--ink); color: var(--bg);
  font-family: var(--mono); font-size: 12px;
}
.skip:focus { left: 16px; top: 16px; z-index: 200; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* ============================================================
   TOPBAR
   ============================================================ */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 24px;
  padding: 18px var(--pad-x);
  border-bottom: 1px solid var(--rule);
}

.menu-toggle { display: none; }

.brand {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: -0.01em;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.brand__logo {
  width: auto;
  height: 112px;                           /* enlarged, overhangs topbar */
  object-fit: contain;
  display: block;
  position: relative;
  /* Pull image up so its top edge stays inside topbar, push bottom past it */
  margin: -22px 0 -64px;
  /* Drop shadow falls onto content below */
  filter:
    drop-shadow(0 14px 26px rgba(15, 42, 61, 0.38))
    drop-shadow(0 4px 10px rgba(15, 42, 61, 0.24));
  pointer-events: none;
}
.brand__name em { font-style: italic; color: var(--green); }

.nav {
  display: flex; gap: 28px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  justify-content: center;
}
/* Wrapper is layout-transparent on desktop so flex gap on .nav still applies to anchors */
.nav__list { display: contents; }
.nav__cta--mobile { display: none; }
.nav a {
  position: relative;
  padding: 6px 0;
  color: var(--ink-2);
  transition: color .25s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--green);
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Topbar Rezerviraj — golf-style CTA. Tiny ball rolls in from the left on hover. */
.topbar__cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  background: var(--green); color: #FFFFFF;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  transition:
    background .4s var(--ease),
    color .3s var(--ease),
    transform .25s var(--ease),
    box-shadow .35s var(--ease),
    padding-left .4s var(--ease);
}
.topbar__cta > * { position: relative; z-index: 2; }

/* The little white golf ball */
.topbar__cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 14px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow:
    inset -1.5px -1.5px 0 rgba(0, 0, 0, 0.08),
    0 2px 5px rgba(0, 0, 0, 0.22);
  transform: translate(-26px, -50%) scale(0.7);
  opacity: 0;
  transition:
    transform .5s var(--ease-out),
    opacity .35s var(--ease);
  z-index: 1;
}

/* Soft "fairway" highlight that wakes up on hover */
.topbar__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 130%, rgba(255, 255, 255, 0.18), transparent 60%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  z-index: 0;
  pointer-events: none;
}

.topbar__cta:hover {
  background: var(--green-deep);
  padding-left: 34px;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(46, 92, 54, 0.32);
}
.topbar__cta:hover::before {
  transform: translate(0, -50%) scale(1);
  opacity: 1;
}
.topbar__cta:hover::after { opacity: 1; }

.topbar__cta-arrow {
  font-size: 14px;
  display: inline-block;
  transition: transform .35s var(--ease);
}
.topbar__cta:hover .topbar__cta-arrow { transform: translate(3px, -3px); }

/* Active state (we're on rezervacija page) — looks like resting hover */
.topbar__cta.is-active {
  background: var(--green-deep);
  padding-left: 34px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.topbar__cta.is-active::before {
  transform: translate(0, -50%) scale(1);
  opacity: 1;
}

.menu-btn { display: none; }

/* ============================================================
   HERO  — cream canvas, draggable ball, oversized italic
   ============================================================ */

.hero {
  position: relative;
  min-height: calc(100dvh - 60px);
  padding: 48px var(--pad-x) 64px;
  background: var(--blue-deep);
  color: var(--cream);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  isolation: isolate;
}

/* Photographic background — natural sky/water tonality, no warm cast */
.hero__photo {
  position: absolute; inset: 0;
  z-index: 0;
  display: block;
}
.hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: saturate(0.85) contrast(1.05) brightness(0.82);
}

/* Water-blue veil — natural depth, no cream warmth */
.hero__veil {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* deep water wash from top open → bottom solid */
    linear-gradient(180deg,
      rgba(15, 42, 61, 0.20) 0%,
      rgba(15, 42, 61, 0.50) 45%,
      rgba(15, 42, 61, 0.90) 80%,
      rgba(15, 42, 61, 1.00) 100%),
    /* subtle fairway-green tint where photo grass meets the page */
    linear-gradient(180deg,
      rgba(46, 92, 54, 0) 65%,
      rgba(46, 92, 54, 0.18) 100%),
    /* atmospheric vignette */
    radial-gradient(ellipse at 60% 40%,
      rgba(15, 42, 61, 0) 0%,
      rgba(15, 42, 61, 0.45) 100%);
}

/* SVG ground-plane perspective grid — fairway lines converge to a vanishing point
   above the hole, parallel "horizon" lines foreshorten as they recede. Same plane
   that the water ripples sit on. */
.hero__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 3;
  cursor: crosshair;
  touch-action: none;
}

.hero__static {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 3;
  pointer-events: none;
}

.hero__meta {
  position: relative; z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.hero__meta-l { text-align: left; }
.hero__meta-c {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--cream);
}
.hero__meta-c .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-2);
  box-shadow: 0 0 0 4px rgba(95, 168, 107, 0.18);
  animation: pulse 2.4s var(--ease) infinite;
}
.hero__meta-c strong { font-weight: 500; color: var(--green-2); }
.hero__meta-r { text-align: right; }
.hero__wind-arrow {
  width: 12px; height: 12px;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(95, 168, 107, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(95, 168, 107, 0.06); }
}

.hero__copy {
  position: relative; z-index: 5;
  align-self: end;
  display: grid; gap: 32px;
  max-width: 1100px;
  /* Let mouse pass through so canvas underneath can catch hover/click on the ball */
  pointer-events: none;
}
/* Re-enable interactivity on actual controls inside copy */
.hero__copy a,
.hero__copy button,
.hero__copy input,
.hero__copy .btn { pointer-events: auto; }

.hero__h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.92;
  color: var(--cream);
}
.hero__verb {
  display: block;
  font-size: clamp(64px, 11vw, 200px);
  font-style: italic;
  line-height: 0.92;
  margin-bottom: 0.18em;
}
.hero__verb em { font-style: italic; color: var(--cream); }
.hero__verb-two { margin-left: 0.18em; }
/* Period anchor — invisible space the ball will occupy */
.hero__period {
  visibility: hidden;
  display: inline-block;
}
.hero__sub {
  display: block;
  font-family: var(--sans);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: -0.005em;
  max-width: 560px;
}

.hero__hint {
  display: inline-flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.hero__hint-wind {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px 4px 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
}
.hero__hint-wind .hero__wind-arrow {
  color: var(--green-2);
  transition: transform 1.2s var(--ease);
}
.hero__hint-wind .hero__wind-speed { color: var(--cream); font-weight: 500; }
.hero__hint-wind .hero__wind-dir {
  color: rgba(255, 255, 255, 0.55);
  border-left: 1px solid rgba(255, 255, 255, 0.20);
  padding-left: 7px;
}
.hero__hint-key {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  animation: hintbob 2.4s var(--ease) infinite;
}
@keyframes hintbob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(2px); }
}

/* ────────────────────────────────────────────────────────────────
   Ball hover disc — expands from the period-ball on hover/tap
   Reveals wind, power slider, and short hint
   ──────────────────────────────────────────────────────────────── */
.hero__ball-disc {
  position: absolute;
  z-index: 10;                          /* above hero copy (z:5), under topbar (z:50) */
  top: var(--ball-y, 50%);
  left: var(--ball-x, 50%);
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%,
    rgba(20, 48, 70, 0.96) 0%,
    rgba(15, 42, 61, 0.94) 70%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px;

  transform: translate(-50%, -50%) scale(0.05);
  opacity: 0;
  pointer-events: none;

  transition:
    transform .42s cubic-bezier(.16, 1, .3, 1),
    opacity .28s var(--ease);
}
.hero__ball-disc.is-open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.hero__ball-disc > * {
  opacity: 0;
  transition: opacity .25s var(--ease) .12s;
}
.hero__ball-disc.is-open > * { opacity: 1; }

.hero__ball-disc-wind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
}
.hero__ball-disc-wind .hero__wind-arrow {
  color: var(--green-2);
  transition: transform 1.2s var(--ease);
}
.hero__ball-disc-wind #wind-speed { color: var(--cream); font-weight: 500; }
.hero__ball-disc-wind #wind-dir { color: rgba(255, 255, 255, 0.65); }
.hero__ball-disc-divider { color: rgba(255, 255, 255, 0.35); }

.hero__ball-disc-power {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 180px;
}
.hero__ball-disc-lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.hero__ball-disc-val {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--cream);
  min-width: 38px;
  text-align: right;
  letter-spacing: -0.01em;
}
.hero__ball-disc-power input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  width: 100%;
  height: 18px;
  margin: 0;
  cursor: pointer;
}
.hero__ball-disc-power input[type="range"]::-webkit-slider-runnable-track {
  height: 1px;
  background: rgba(255, 255, 255, 0.30);
  border: 0;
}
.hero__ball-disc-power input[type="range"]::-moz-range-track {
  height: 1px;
  background: rgba(255, 255, 255, 0.30);
  border: 0;
}
.hero__ball-disc-power input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--green-2);
  border: 2px solid var(--cream);
  margin-top: -6px;
  box-shadow: 0 0 0 4px rgba(95, 168, 107, 0.20);
}
.hero__ball-disc-power input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--green-2);
  border: 2px solid var(--cream);
  box-shadow: 0 0 0 4px rgba(95, 168, 107, 0.20);
}

.hero__ball-disc-hint {
  margin: 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  max-width: 160px;
  line-height: 1.5;
}
.hero__power-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.hero__power-val {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--cream);
  min-width: 56px;
  text-align: right;
}
.hero__power input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  width: 100%;
  height: 24px;
  margin: 0;
  cursor: pointer;
}
.hero__power input[type="range"]::-webkit-slider-runnable-track {
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
  border: none;
}
.hero__power input[type="range"]::-moz-range-track {
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
  border: none;
}
.hero__power input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--green-2);
  border: 2px solid var(--cream);
  margin-top: -7px;
  box-shadow: 0 0 0 5px rgba(95, 168, 107, 0.18);
  transition: transform .2s var(--ease);
}
.hero__power input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.hero__power input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--green-2);
  border: 2px solid var(--cream);
  box-shadow: 0 0 0 5px rgba(95, 168, 107, 0.18);
}
.hero__power input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 7px rgba(95, 168, 107, 0.35);
}

.hero__actions {
  display: flex; gap: 14px; flex-wrap: wrap;
}
.hero .btn--primary {
  background: var(--green); color: var(--cream); border-color: var(--green);
}
.hero .btn--primary:hover { background: var(--green-2); border-color: var(--green-2); }
.hero .btn--ghost {
  color: var(--cream); border-color: rgba(255, 255, 255, 0.45);
}
.hero .btn--ghost:hover { background: var(--cream); color: var(--blue-deep); border-color: var(--cream); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  cursor: pointer;
}
.btn--primary {
  background: var(--green-deep); color: var(--cream);
  border: 1px solid var(--green-deep);
}
.btn--primary:hover { background: var(--green); border-color: var(--green); transform: translateY(-1px); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateY(-1px); }
.btn--large {
  padding: 18px 28px;
  font-size: 13px;
}
.btn__num {
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.8;
}
.btn__lbl + .btn__num::before {
  content: "·";
  margin-right: 8px;
  opacity: 0.4;
}

.hero__ribbon {
  position: relative; z-index: 5;
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: 40px;
}
.hero__ribbon li {
  padding: 20px 4px 0;
  display: grid; gap: 4px;
}
.hero__ribbon span.num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1;
  color: var(--cream);
  font-weight: 400;
}
.hero__ribbon span.num i {
  font-style: italic;
  font-family: var(--serif);
  font-size: 0.55em;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 2px;
}
.hero__ribbon em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   GENERIC SECTION HEADERS
   ============================================================ */

.section__num {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 28px;
}

.rule {
  height: 1px;
  background: var(--rule);
  width: 100%;
}
.rule--top { margin-bottom: var(--pad-section-y); }

h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h2 em { font-style: italic; }

/* ============================================================
   COURSE — N° 01
   ============================================================ */

.course {
  padding: 0 var(--pad-x) var(--pad-section-y);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px clamp(40px, 6vw, 100px);
  max-width: var(--maxw);
  margin: 0 auto;
}
.course .rule--top { grid-column: 1 / -1; }
.course .section__num { grid-column: 1 / -1; }

.course__h2 {
  font-size: clamp(56px, 10vw, 160px);
  align-self: start;
}

.course__body {
  display: grid; gap: 24px;
  max-width: 540px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  align-self: start;
  padding-top: 12px;
}
.course__lede {
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.4;
  color: var(--ink);
  font-weight: 400;
}
.course__body p { margin: 0; }

.pull {
  margin: 24px 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--green);
}
.pull p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 12px;
}
.pull cite {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--ink-3);
}

/* Course stats ribbon — moved here from the hero, ink-on-white */
.course__ribbon {
  grid-column: 1 / -1;
  list-style: none;
  margin: 24px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--rule-2);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.course__ribbon li {
  display: grid; gap: 4px;
}
.course__ribbon span.num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.course__ribbon span.num i {
  font-style: italic;
  font-family: var(--serif);
  font-size: 0.55em;
  color: var(--ink-3);
  margin-left: 2px;
}
.course__ribbon em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================================
   HOLES — N° 02
   ============================================================ */

.holes {
  padding: 0 var(--pad-x) var(--pad-section-y);
  max-width: var(--maxw); margin: 0 auto;
}

.holes__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-bottom: 80px;
  align-items: end;
}
.holes__head .section__num { grid-column: 1 / -1; }

.holes__h {
  font-size: clamp(64px, 12vw, 200px);
  line-height: 0.92;
}
.holes__sub {
  margin: 0;
  max-width: 460px;
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.4;
  color: var(--ink-2);
  align-self: end;
  padding-bottom: 16px;
}

.holes__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
}

.holes__nine {
  border-top: 1px solid var(--rule-2);
  padding-top: 32px;
}
.holes__nine > header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 32px;
}
.holes__nine h3 {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 36px;
  font-weight: 400;
  color: var(--ink);
}
.holes__nine-stats {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.holes__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
}

.hole {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr 84px;
  align-items: start;
  gap: 16px 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  transition: background .35s var(--ease);
}
.hole:hover { background: var(--paper); }

.hole__plan {
  display: none;
  grid-column: 2 / 3;
  margin: 0;
  padding: 16px 0 4px;
}
.hole__plan img {
  width: 100%;
  border: 1px solid var(--rule-2);
  filter: contrast(0.95) saturate(0.7) brightness(0.92);
  border-radius: 2px;
}
.hole:hover .hole__plan { display: block; }

.hole__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(36px, 4vw, 48px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.hole__data {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: uppercase;
  align-items: baseline;
  padding-top: 14px;
}
.hole__par { color: var(--ink-2); font-weight: 500; }
.hole__d em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  margin-right: 2px;
  letter-spacing: 0;
}
.hole__d i {
  font-style: normal;
  font-size: 11px;
  color: var(--ink-3);
}
.hole__hcp {
  text-align: right;
  color: var(--ink-3);
}

.hole__desc {
  grid-column: 2 / 3;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 540px;
}

.hole[data-par="3"] .hole__par { color: var(--green-2); }
.hole[data-par="5"] .hole__par { color: var(--gold); }

.holes__total {
  margin-top: 48px;
  padding: 28px 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 24px;
}
.holes__total-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.holes__total-val {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 400;
  color: var(--ink);
  text-align: center;
}
.holes__total-val em { font-style: italic; }
.holes__total-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
}

/* ============================================================
   FEATURES — three columns
   ============================================================ */

.features {
  padding: 0 var(--pad-x) var(--pad-section-y);
  max-width: var(--maxw); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 64px);
}
.features .rule--top { grid-column: 1 / -1; }

.feat {
  display: grid;
  gap: 18px;
  align-content: start;
  padding-top: 8px;
}
.feat__num {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
}
.feat__h {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 4vw, 56px);
  line-height: 0.95;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.feat__h em { font-style: italic; color: var(--green); }
.feat p {
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
  max-width: 360px;
}
.feat__link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 4px;
  align-self: start;
  transition: color .25s var(--ease), border-color .25s var(--ease), gap .25s var(--ease);
}
.feat__link:hover { color: var(--green); border-color: var(--green); gap: 12px; }

/* ============================================================
   STATUS / WEATHER
   ============================================================ */

.status {
  padding: 0 var(--pad-x) var(--pad-section-y);
  max-width: var(--maxw); margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
}
.status .rule--top { grid-column: 1 / -1; }

.status__col--main { display: grid; gap: 16px; }
.status__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.status__title em { font-style: italic; color: var(--green); }
.status__sub {
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.55;
  max-width: 420px;
}

.status__data {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.status__data > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.status__data > div:nth-child(odd) { border-right: 1px solid var(--rule); padding-right: 24px; }
.status__data > div:nth-child(even) { padding-left: 24px; }
.status__data dt {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.status__data dd {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
}

/* ============================================================
   PRICING
   ============================================================ */

.pricing {
  padding: 0 var(--pad-x) var(--pad-section-y);
  max-width: var(--maxw); margin: 0 auto;
}
.pricing__head {
  display: grid;
  gap: 16px;
  margin-bottom: 64px;
  max-width: 700px;
}
.pricing__head h2 {
  font-size: clamp(64px, 10vw, 160px);
}
.pricing__sub {
  margin: 0;
  font-size: 16px;
  color: var(--ink-3);
}

.pricetable {
  width: 100%;
  border-collapse: collapse;
  font-feature-settings: "tnum" 1;
}
.pricetable thead th {
  text-align: left;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
}
.pricetable thead th:nth-child(2),
.pricetable thead th:nth-child(3),
.pricetable thead th:nth-child(4) { text-align: right; width: 18%; }

.pricetable__group th {
  background: var(--surface);
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--green) !important;
  padding: 14px 16px !important;
  font-style: normal !important;
  border-top: 1px solid var(--rule-2) !important;
  border-bottom: 1px solid var(--rule) !important;
}

.pricetable tbody th em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: none;
  margin-left: 6px;
}

.pricetable .dim { color: var(--ink-3); padding: 0 4px; }

.pricetable tbody th {
  text-align: left;
  padding: 22px 16px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 400;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.pricetable tbody td {
  padding: 22px 16px;
  text-align: right;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
}
.pricetable tbody td .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 2.4vw, 40px);
  color: var(--ink);
  margin-right: 4px;
  letter-spacing: -0.01em;
}

.pricetable__highlight th,
.pricetable__highlight td {
  background: var(--green-deep);
  color: var(--cream);
  border-bottom-color: var(--green-deep);
}
.pricetable__highlight th { color: var(--cream); }
.pricetable__highlight td .num { color: var(--cream); }

.pricing__note {
  margin: 32px 0 0;
  font-size: 14px;
  color: var(--ink-3);
  max-width: 640px;
  line-height: 1.6;
}
.pricing__note strong { color: var(--green); font-weight: 500; }

/* ============================================================
   EVENTS — Turnirji
   ============================================================ */

.events {
  padding: 0 var(--pad-x) var(--pad-section-y);
  max-width: var(--maxw); margin: 0 auto;
}
.events__h {
  font-size: clamp(64px, 11vw, 180px);
  margin-bottom: 64px;
}

.events__list {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--rule-2);
}
.events__list li {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: baseline;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
  transition: background .3s var(--ease), padding .3s var(--ease);
}
.events__list li:hover { background: rgba(74, 139, 94, 0.06); padding-left: 12px; padding-right: 12px; }

.events__list time {
  font-family: var(--serif);
  display: flex; align-items: baseline; gap: 8px;
}
.events__list time .d {
  font-style: italic;
  font-size: clamp(40px, 4vw, 56px);
  color: var(--ink);
  line-height: 1;
}
.events__list time .m {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.events__list h3 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  color: var(--ink);
}
.events__list p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.5;
  max-width: 540px;
}

.events__tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--rule-2);
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ============================================================
   CTA — rezervacija
   ============================================================ */

.cta {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(107, 171, 122, 0.18) 0%, rgba(44, 104, 64, 0) 60%),
    linear-gradient(180deg, var(--green-deep) 0%, #1F4D2E 100%);
  color: var(--cream);
  padding: var(--pad-section-y) var(--pad-x);
  position: relative;
  isolation: isolate;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255,0.04) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none;
  opacity: 0.5;
}
.cta__inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; gap: 28px;
  position: relative; z-index: 1;
}
.cta .section__num { color: rgba(255, 255, 255, 0.55); margin-bottom: 0; }
.cta__h {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(72px, 12vw, 200px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.cta__h em { font-style: italic; }
.cta__sub {
  margin: 0;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.78);
  max-width: 580px;
  line-height: 1.55;
}
.cta__actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 16px;
}
/* "Putt onto the green" — fairway green sweeps in from right on hover */
.cta .btn--primary {
  background-image: linear-gradient(to right, #FFFFFF 50%, var(--green) 50%);
  background-size: 220% 100%;
  background-position: 0% 0%;
  background-color: #FFFFFF;
  color: var(--ink);
  border-color: #FFFFFF;
  transition:
    background-position .55s var(--ease),
    color .35s var(--ease),
    transform .25s var(--ease),
    box-shadow .35s var(--ease),
    border-color .35s var(--ease);
}
.cta .btn--primary:hover {
  background-position: -100% 0%;
  color: #FFFFFF;
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(46, 92, 54, 0.28);
}
.cta .btn--primary [aria-hidden] {
  display: inline-block;
  transition: transform .35s var(--ease);
}
.cta .btn--primary:hover [aria-hidden] { transform: translate(3px, -3px); }
.cta .btn--ghost {
  color: var(--cream); border-color: rgba(255, 255, 255, 0.45);
}
.cta .btn--ghost:hover {
  background: var(--cream); color: var(--ink); border-color: var(--cream);
}
.cta__hours {
  margin: 24px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
}
.cta__hours strong { color: var(--cream); font-weight: 500; }

/* ============================================================
   VISIT — kontakt
   ============================================================ */

.visit {
  padding: 0 var(--pad-x) var(--pad-section-y);
  max-width: var(--maxw); margin: 0 auto;
}
.visit__h {
  font-size: clamp(72px, 12vw, 200px);
  margin-bottom: 64px;
}

.visit__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  border-top: 1px solid var(--rule-2);
  padding-top: 32px;
}
.visit__col h3 {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
}
.visit__col address,
.visit__col p {
  margin: 0;
  font-style: normal;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.visit__col a {
  border-bottom: 1px solid var(--rule-2);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.visit__col a:hover { color: var(--green); border-color: var(--green); }
.visit__nav {
  margin-top: 12px !important;
  font-family: var(--mono);
  font-size: 11.5px !important;
  letter-spacing: 0.04em;
  color: var(--ink-3) !important;
}

/* ============================================================
   WEATHER WIDGET (homepage)
   - Desktop: vertical right-side rail with leftward flyout
   - Mobile / tablet: bottom sticky bar with upward flyout (like resv__bar)
   ============================================================ */

.weather { display: none; }

/* Base resets for weather forecast list — must apply at any viewport */
.weather__forecast {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Close (X) button hidden on desktop (rail-arrow + outside-click handle close) */
.weather__close { display: none; }

@media (min-width: 1025px) {
  .weather {
    position: fixed;
    /* Centred between topbar (~80 px) and viewport bottom — never touches header */
    top: calc(50% + 40px);
    right: 0;
    transform: translateY(-50%);
    /* Hard floor so it can't ride into header on short viewports */
    max-height: calc(100vh - 200px);
    z-index: 45;
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    pointer-events: none;
  }
  .weather > * { pointer-events: auto; }

  /* Compact rail (always visible) */
  .weather__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 76px;
    padding: 18px 8px;
    background: var(--bg);
    border: 1px solid var(--rule-2);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    text-align: center;
    color: var(--ink);
    box-shadow: -4px 0 20px rgba(15, 42, 61, 0.06);
    transition: background .25s var(--ease), box-shadow .25s var(--ease), transform .3s var(--ease);
  }
  .weather__rail:hover {
    background: var(--surface);
    box-shadow: -6px 0 24px rgba(15, 42, 61, 0.10);
    transform: translateX(-1px);
  }

  /* Course status badge (top of rail) */
  .weather__rail-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 4px;
  }
  .weather__rail-status-lbl {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .weather__rail-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(74, 142, 84, 0.18);
    animation: pulse 2.4s var(--ease) infinite;
  }
  .weather__rail-status[data-state="closed"] .weather__rail-status-dot,
  .weather__rail-status[data-state="off-season"] .weather__rail-status-dot {
    background: var(--ink-4);
    box-shadow: 0 0 0 4px rgba(142, 154, 160, 0.14);
    animation: none;
  }
  .weather__rail-status-state {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--green);
    font-weight: 500;
    line-height: 1;
  }
  .weather__rail-status[data-state="closed"] .weather__rail-status-state,
  .weather__rail-status[data-state="off-season"] .weather__rail-status-state {
    color: var(--ink-3);
  }

  .weather__rail-pre,
  .weather__rail-loc {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    line-height: 1.1;
  }
  .weather__rail-loc { color: var(--green); }

  .weather__rail-icon {
    font-size: 24px;
    line-height: 1;
  }

  .weather__rail-temp {
    font-family: var(--serif);
    font-style: italic;
    font-size: 32px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.02em;
  }

  .weather__rail-cond {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-2);
    line-height: 1.2;
    max-width: 60px;
  }

  .weather__rail-wind {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--rule);
    margin-top: 4px;
    width: 100%;
    align-items: center;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--ink-3);
  }
  .weather__rail-wind > :first-child { color: var(--ink-2); font-weight: 500; }

  .weather__rail-slot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    width: 100%;
    padding-top: 10px;
    border-top: 1px solid var(--rule);
    margin-top: 2px;
  }
  .weather__rail-slot-lbl {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--green);
    line-height: 1.1;
  }
  .weather__rail-slot-time {
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.01em;
    text-align: center;
  }

  .weather__rail-arrow {
    margin-top: 6px;
    font-size: 11px;
    color: var(--green);
    transition: transform .35s var(--ease);
  }
  .weather.is-open .weather__rail-arrow { transform: rotate(180deg); }

  /* Flyout panel */
  .weather__flyout {
    width: 0;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--rule-2);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    margin-right: -1px;
    transition: width .4s var(--ease), padding .4s var(--ease);
    box-shadow: -8px 0 28px rgba(15, 42, 61, 0.10);
  }
  .weather.is-open .weather__flyout {
    width: 320px;
    padding: 24px 22px;
  }
  .weather__flyout > * { opacity: 0; transition: opacity .25s var(--ease); }
  .weather.is-open .weather__flyout > * { opacity: 1; transition-delay: .15s; }

  .weather__head { margin-bottom: 20px; }
  .weather__pre {
    display: block;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 6px;
  }
  .weather__h {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 32px;
    line-height: 0.95;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .weather__h em { font-style: italic; color: var(--green); }

  .weather__sec {
    padding: 14px 0;
    border-top: 1px solid var(--rule);
  }
  .weather__sec:first-of-type { border-top: 0; padding-top: 0; }
  .weather__lbl {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
  }
  .weather__now {
    margin: 0;
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.3;
    color: var(--ink);
  }

  .weather__forecast {
    list-style: none; margin: 0; padding: 0;
  }
  .weather__day {
    display: grid;
    grid-template-columns: 56px 32px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--rule);
  }
  .weather__day:last-child { border-bottom: 0; }
  .weather__day-name {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .weather__day-icon { font-size: 22px; line-height: 1; text-align: center; }
  .weather__day-cond {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: var(--ink-3);
  }
  .weather__day-range {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    text-align: right;
  }
  .weather__day-range em {
    font-family: var(--serif);
    font-style: italic;
    font-size: 18px;
    color: var(--ink);
    margin-right: 2px;
  }
  .weather__day-range i {
    font-style: normal;
    margin: 0 2px;
    color: var(--ink-4);
  }

  .weather__course {
    margin: 0;
    display: flex; align-items: center; gap: 10px;
    font-size: 14px;
    color: var(--ink-2);
  }
  .weather__course strong { color: var(--green); font-weight: 500; }
  .weather__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(74, 142, 84, 0.18);
  }

  .weather__next {
    margin: 0 0 12px;
    display: grid; gap: 2px;
  }
  .weather__next em {
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    color: var(--ink);
  }
  .weather__next-meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
  }
  .weather__cta {
    width: 100%;
    justify-content: center;
  }

  .weather__src {
    margin: 16px 0 0;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--ink-4);
    text-align: right;
  }
}

/* Mobile / tablet — bottom sticky bar with upward flyout */
@media (max-width: 1024px) {
  .weather {
    display: block;
    position: fixed;
    inset: auto 0 0 0;                  /* pin to bottom */
    transform: none;
    max-height: none;
    z-index: 50;
    pointer-events: none;
  }
  .weather > * { pointer-events: auto; }

  /* Compact horizontal bottom bar — single line, equal spacing between items + edges */
  .weather__rail {
    display: flex;                          /* override desktop column → row flex */
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    gap: 0;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0));
    background: var(--blue-deep);
    color: #FFFFFF;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    box-shadow: 0 -8px 24px rgba(15, 42, 61, 0.28);
    text-align: left;
    white-space: nowrap;
  }
  .weather__rail > * { flex-shrink: 0; }
  .weather__rail:hover {
    background: var(--blue-deep);
    transform: none;
    box-shadow: 0 -10px 28px rgba(15, 42, 61, 0.34);
  }

  .weather__rail-status {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    width: auto;
    padding: 0 10px 0 0;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    margin: 0;
  }
  .weather__rail-status-lbl { display: none; }
  .weather__rail-status-state { color: var(--cream); font-size: 11px; }
  .weather__rail-status[data-state="closed"] .weather__rail-status-state,
  .weather__rail-status[data-state="off-season"] .weather__rail-status-state {
    color: rgba(255, 255, 255, 0.55);
  }
  .weather__rail-status-dot { box-shadow: 0 0 0 4px rgba(95, 168, 107, 0.30); }

  .weather__rail-pre,
  .weather__rail-loc,
  .weather__rail-cond { display: none; }

  .weather__rail-icon { font-size: 22px; }

  .weather__rail-temp {
    font-family: var(--serif);
    font-style: italic;
    font-size: 26px;
    color: var(--cream);
  }

  .weather__rail-wind {
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    width: auto;
    padding: 0 10px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
  }
  .weather__rail-wind > :first-child { color: var(--cream); }

  .weather__rail-slot {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    width: auto;
    padding: 0 0 0 10px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    margin: 0;
  }
  .weather__rail-slot-lbl {
    color: var(--green-2);
    font-size: 9.5px;
  }
  .weather__rail-slot-time {
    font-family: var(--serif);
    font-style: italic;
    font-size: 18px;
    color: var(--cream);
  }

  .weather__rail-arrow {
    margin: 0;                              /* space-between handles right placement */
    color: var(--cream);
    font-size: 13px;
    transform: rotate(-90deg);               /* ▲ up — tap to open up */
    transition: transform .35s var(--ease);
  }
  .weather.is-open .weather__rail-arrow {
    transform: rotate(90deg);                /* ▼ down — tap to close */
  }

  .weather__rail { position: relative; z-index: 2; }

  /* Upward-sliding flyout — fills viewport from below topbar to bottom (rail overlays) */
  .weather__flyout {
    display: block;
    position: fixed;
    top: 69px;                          /* sit just below the sticky topbar */
    bottom: 0;                          /* extend all the way down — rail covers its base */
    left: 0; right: 0;
    z-index: 1;
    width: auto;
    height: auto;
    max-height: none;
    background: var(--blue-deep);
    color: var(--cream);
    border: 0;
    border-radius: 0;
    margin: 0;
    /* Reserve room at bottom so content doesn't hide behind the rail */
    padding: 0 var(--pad-x) calc(70px + env(safe-area-inset-bottom, 0));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
    transition: transform .4s var(--ease), padding .4s var(--ease), opacity .25s var(--ease);
    box-shadow: 0 -12px 30px rgba(15, 42, 61, 0.36);
  }
  .weather.is-open .weather__flyout {
    transform: translateY(0);
    padding: 24px var(--pad-x) calc(80px + env(safe-area-inset-bottom, 0));
    opacity: 1;
    pointer-events: auto;
  }

  /* Close (X) button in top-right of mobile flyout */
  .weather__close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 16px;
    right: var(--pad-x);
    width: 36px; height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--cream);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .25s var(--ease), border-color .25s var(--ease);
    z-index: 2;
  }
  .weather__close span { line-height: 1; transform: translateY(-1px); }
  .weather__close:hover,
  .weather__close:active {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.45);
  }
  .weather__flyout > * { opacity: 1; transition: none; }
  .weather.is-open .weather__flyout > * { opacity: 1; transition-delay: 0; }

  /* Re-color flyout content + scale down to match mobile reading rhythm */
  .weather__pre {
    color: var(--green-2);
    font-size: 10px;
    margin-bottom: 4px;
  }
  .weather__h {
    color: var(--cream);
    font-size: 24px;
  }
  .weather__h em { color: var(--green-2); }
  .weather__head { margin-bottom: 8px; }

  .weather__sec {
    border-top-color: rgba(255, 255, 255, 0.14);
    padding: 10px 0;
  }
  .weather__lbl {
    color: rgba(255, 255, 255, 0.55);
    font-size: 9.5px;
    margin-bottom: 4px;
  }
  .weather__now {
    color: var(--cream);
    font-size: 15px;
    line-height: 1.3;
    margin: 0;
  }

  .weather__day {
    border-bottom-color: rgba(255, 255, 255, 0.10);
    grid-template-columns: 50px 26px 1fr auto;
    gap: 8px;
    padding: 4px 0;
  }
  .weather__day-name {
    color: var(--cream);
    font-size: 10px;
  }
  .weather__day-icon { font-size: 18px; }
  .weather__day-cond {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
  }
  .weather__day-range { color: rgba(255, 255, 255, 0.55); font-size: 10px; }
  .weather__day-range em {
    color: var(--cream);
    font-size: 15px;
  }
  .weather__day-range i { color: rgba(255, 255, 255, 0.40); }

  .weather__course {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
  }
  .weather__course strong { color: var(--green-2); }

  .weather__next {
    margin: 0 0 8px;
    gap: 0;
  }
  .weather__next em {
    color: var(--cream);
    font-size: 18px;
  }
  .weather__next-meta {
    color: rgba(255, 255, 255, 0.55);
    font-size: 10.5px;
  }

  .weather__cta {
    background: var(--green);
    color: var(--cream);
    border-color: var(--green);
    padding: 10px 18px;
    font-size: 12px;
  }
  .weather__cta:hover { background: var(--green-2); border-color: var(--green-2); color: var(--cream); }

  /* Source line — very small print, near-bottom of flyout */
  .weather__src {
    color: rgba(255, 255, 255, 0.32);
    text-align: left;
    font-size: 8.5px;
    letter-spacing: 0.06em;
    margin-top: 8px;
    text-transform: uppercase;
  }

  /* Don't let the bottom bar cover the bottom-most page content (only when weather is present) */
  body:has(.weather) { padding-bottom: 88px; }
  /* Shrink hero so it ends right above the weather bar — touches it, no gap, no overlap.
     Topbar 69 px + weather rail 59 px = 128 px deducted from viewport. */
  body:has(.weather) .hero {
    min-height: calc(100dvh - 128px);
  }
}

/* Narrow viewport (250–320 px inclusive): drop wind + slot label */
@media (max-width: 320px) {
  .weather__rail-wind { display: none; }
  .weather__rail-slot-lbl { display: none; }
  .weather__rail-slot { gap: 0; }
}

/* Below 250 px the bar can't fit anything readable — hide widget entirely.
   At exactly 250 px the narrow view still shows. */
@media (max-width: 249px) {
  .weather { display: none !important; }
  body:has(.weather) { padding-bottom: 0; }
}

/* On rezervacija page hide the home weather widget — page has its own bar */
.page-rezervacija .weather { display: none !important; }

/* ============================================================
   FOOTER
   ============================================================ */

.foot {
  padding: 0 var(--pad-x) 48px;
  max-width: var(--maxw); margin: 0 auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}
.foot .rule--top { margin-bottom: 48px; }

.foot__top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px clamp(32px, 5vw, 80px);
  align-items: start;
  margin-bottom: 64px;
}
.foot__brand {
  display: inline-flex; align-items: center; gap: 18px;
  text-decoration: none;
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
}
.foot__logo {
  width: 120px;
  height: auto;
  display: block;
  filter:
    drop-shadow(0 6px 12px rgba(15, 42, 61, 0.16))
    drop-shadow(0 2px 4px rgba(15, 42, 61, 0.10));
  transition: transform .35s var(--ease);
}
.foot__brand:hover .foot__logo { transform: rotate(-3deg) scale(1.03); }
.foot__brand-text { display: grid; gap: 4px; }
.foot__brandname {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 44px);
  color: var(--ink);
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1;
}
.foot__brandname em { font-style: italic; color: var(--green); }
.foot__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 22px);
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0;
}

.foot__nav {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 18px 28px; flex-wrap: wrap;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-self: center;
  justify-content: flex-end;
}
.foot__nav a {
  color: var(--ink-2);
  transition: color .25s var(--ease);
}
.foot__nav a:hover { color: var(--green); }

/* Sponsor card grid — Triglav 2×2, others 1×1 */
.foot__sponsors {
  border-top: 1px solid var(--rule-2);
  padding-top: 32px;
  margin-bottom: 48px;
}
.foot__plabel {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 500;
  margin: 0 0 20px;
}
.foot__sponsors-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.foot__sponsor {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  aspect-ratio: 1;
  display: grid; place-items: center;
  padding: 14px;
  transition:
    background .25s var(--ease),
    border-color .25s var(--ease),
    transform .25s var(--ease);
}
.foot__sponsor img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(0.35) opacity(0.78);
  transition: filter .35s var(--ease);
}
.foot__sponsor:hover {
  background: #FFFFFF;
  border-color: var(--green);
  transform: translateY(-2px);
}
.foot__sponsor:hover img { filter: grayscale(0) opacity(1); }
.foot__sponsor--main {
  grid-column: span 2;
  grid-row: span 2;
  background: #FFFFFF;
  border-color: var(--green);
  padding: 28px;
}
.foot__sponsor--main img {
  filter: none;
  max-width: 78%;
  max-height: 78%;
}
.foot__sponsor--main:hover img { transform: none; }

.foot__legal {
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  display: flex; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 1100px) {
  .foot__top { grid-template-columns: 1fr; }
  .foot__nav { justify-content: flex-start; }
  .foot__sponsors-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 760px) {
  .foot__sponsors-grid { grid-template-columns: repeat(4, 1fr); }
  .foot__logo { width: 96px; }
  .foot__sponsor { padding: 10px; }
  .foot__sponsor--main { padding: 18px; }
}
@media (max-width: 460px) {
  .foot__sponsors-grid { grid-template-columns: repeat(3, 1fr); }
  .foot__sponsor--main { grid-column: span 3; grid-row: span 1; aspect-ratio: 3 / 1; }
}
.foot__legal p { margin: 0; }
.foot__credit a {
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule-2);
}
.foot__credit a:hover { color: var(--green); border-color: var(--green); }

/* ============================================================
   LUKNJE SUBPAGE — Course Atlas (Style C)
   ============================================================ */

.nav a.is-active {
  color: var(--ink);
}
.nav a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
  background: var(--green);
}

.atlas {
  padding: 64px var(--pad-x) clamp(80px, 8vw, 140px);
  max-width: var(--maxw);
  margin: 0 auto;
}
.atlas__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px clamp(40px, 5vw, 80px);
  margin-bottom: 56px;
  align-items: end;
}
.atlas__breadcrumb {
  grid-column: 1 / -1;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.atlas__breadcrumb a {
  color: var(--ink-3);
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.atlas__breadcrumb a:hover { color: var(--green); border-color: var(--green); }
.atlas__breadcrumb em { font-style: normal; color: var(--ink); }

.atlas__h {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(64px, 12vw, 200px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ink);
  align-self: end;
}
.atlas__h em { font-style: italic; color: var(--green); }
.atlas__sub {
  margin: 0;
  max-width: 480px;
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.4;
  color: var(--ink-2);
  padding-bottom: 14px;
}

.atlas__stats {
  grid-column: 1 / -1;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  padding: 20px 0;
}
.atlas__stats > div {
  border-right: 1px solid var(--rule);
  padding-left: 18px;
  display: grid;
  gap: 4px;
}
.atlas__stats > div:first-child { padding-left: 0; }
.atlas__stats > div:last-child { border-right: 0; }
.atlas__stats dt {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.atlas__stats dd {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 48px);
  color: var(--ink);
}
.atlas__stats dd em { font-style: italic; }
.atlas__stats dd i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 14px;
  color: var(--ink-3);
  letter-spacing: 0;
}

/* SVG MAP */
.atlas__map {
  margin: 56px 0 24px;
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  overflow: hidden;
  background: #F1F5EE;
}
.atlas__map svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--mono);
  font-size: 11px;
}

.atlas__nine-lbl {
  font-family: "Geist Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  fill: var(--ink-2);
}
.atlas__nine-stat {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  fill: var(--ink-3);
}

.atlas__hole {
  cursor: pointer;
  transition: transform .25s var(--ease);
  transform-origin: center;
}
.atlas__hole circle {
  fill: #FFFFFF;
  stroke: var(--ink);
  stroke-width: 1.5;
  transition: fill .25s var(--ease), stroke .25s var(--ease), r .25s var(--ease);
}
.atlas__hole text {
  font-family: "Geist Mono", monospace;
  font-size: 13px;
  font-weight: 500;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.atlas__hole[data-par="3"] circle { stroke: var(--green-2); }
.atlas__hole[data-par="5"] circle { stroke: var(--gold); }

.atlas__hole:hover circle,
.atlas__hole:focus circle {
  fill: var(--ink);
}
.atlas__hole:hover text,
.atlas__hole:focus text {
  fill: #FFFFFF;
}
.atlas__hole[data-par="3"]:hover circle { fill: var(--green); }
.atlas__hole[data-par="5"]:hover circle { fill: var(--gold); }

/* Tooltip */
.atlas__tip {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.atlas__tip rect {
  fill: var(--ink);
  rx: 3;
}
.atlas__tip-h {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  fill: #FFFFFF;
}
.atlas__tip-d {
  font-family: "Geist Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  fill: rgba(255, 255, 255, 0.75);
}
.atlas__hole:hover .atlas__tip,
.atlas__hole:focus .atlas__tip {
  opacity: 1;
  transform: translateY(0);
}

.atlas__compass-n {
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  fill: var(--ink-2);
}
.atlas__clubhouse-lbl {
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--ink-2);
}

.atlas__legend {
  margin: 0;
  display: flex; flex-wrap: wrap; gap: 20px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.atlas__legend-item { display: inline-flex; align-items: center; gap: 8px; }
.atlas__legend-dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--ink-2);
  background: #FFFFFF;
}
.atlas__legend-dot--p3 { border-color: var(--green-2); }
.atlas__legend-dot--p5 { border-color: var(--gold); }
.atlas__legend-dot--water {
  border: 0;
  background: linear-gradient(135deg, #B8D2E0, #7FA9C2);
}

/* HOLE DETAILS */
.holes-detailed {
  padding: 0 var(--pad-x) var(--pad-section-y);
  max-width: var(--maxw);
  margin: 0 auto;
}
.holes-detailed__head {
  display: grid;
  gap: 16px;
  margin-bottom: 64px;
  max-width: 800px;
}
.holes-detailed__h {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 9vw, 140px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.holes-detailed__h em { font-style: italic; color: var(--green); }

.holes-detailed__list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(40px, 4vw, 64px) clamp(32px, 4vw, 56px);
}

.hole-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto auto;
  gap: 12px 24px;
  padding-top: 28px;
  border-top: 1px solid var(--rule-2);
  scroll-margin-top: 100px;
  position: relative;
}
.hole-card__num {
  grid-row: 1 / 3;
  align-self: start;
}
.hole-card__num em {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(48px, 5vw, 80px);
  color: var(--ink);
  line-height: 0.9;
}
.hole-card[data-par="3"] .hole-card__num em { color: var(--green); }
.hole-card[data-par="5"] .hole-card__num em { color: var(--gold); }

.hole-card__h {
  grid-column: 2;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  color: var(--ink);
  line-height: 1.1;
}
.hole-card__meta {
  grid-column: 2;
  display: flex; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  align-items: baseline;
}
.hole-card__par {
  color: var(--ink);
  font-weight: 500;
}
.hole-card[data-par="3"] .hole-card__par { color: var(--green); }
.hole-card[data-par="5"] .hole-card__par { color: var(--gold); }
.hole-card__d {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
.hole-card__d i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hole-card__plan {
  grid-column: 1 / -1;
  margin: 8px 0 0;
}
.hole-card__plan img {
  width: 100%;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  filter: contrast(0.95) saturate(0.7) brightness(0.92);
}
.hole-card__desc {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 60ch;
}

/* responsive: single column on smaller */
@media (max-width: 900px) {
  .holes-detailed__list { grid-template-columns: 1fr; }
  .atlas__head { grid-template-columns: 1fr; }
  .atlas__stats { grid-template-columns: repeat(2, 1fr); }
  .atlas__stats > div:nth-child(2) { border-right: 0; }
  .atlas__stats > div:nth-child(3) { padding-left: 0; }
}
@media (max-width: 540px) {
  .atlas__h { font-size: clamp(48px, 14vw, 90px); }
  .holes-detailed__h { font-size: clamp(40px, 13vw, 80px); }
  .atlas__map svg { font-size: 14px; }
}

/* ============================================================
   SCORE CARD SUBPAGE
   ============================================================ */

.page-scorecard { background: var(--bg); }

.card {
  padding: 64px var(--pad-x) clamp(80px, 8vw, 140px);
  max-width: var(--maxw); margin: 0 auto;
}
.card__head {
  display: grid;
  gap: 16px;
  margin-bottom: 64px;
  max-width: 900px;
}
.card__h {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(64px, 11vw, 180px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.card__h em { font-style: italic; color: var(--green); }
.card__sub {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.4;
  color: var(--ink-2);
}
.card__sub em { font-style: italic; color: var(--ink); }

.card__stats {
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  padding: 18px 0;
}
.card__stats > div {
  border-right: 1px solid var(--rule);
  padding: 0 18px;
  display: grid; gap: 4px;
}
.card__stats > div:first-child { padding-left: 0; }
.card__stats > div:last-child { border-right: 0; }
.card__stats dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.card__stats dd {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 40px);
  color: var(--ink);
}
.card__stats dd em { font-style: italic; }
.card__stats dd i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0;
}

.card__actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 12px;
}

/* Each Nine block */
.card__nine {
  margin-bottom: 56px;
}
.card__nine-head {
  display: grid; gap: 8px;
  margin-bottom: 24px;
}
.card__nine-h {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 0.92;
  color: var(--ink);
}
.card__nine-h em { font-style: italic; color: var(--green); }
.card__nine-meta {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.card__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  background: var(--bg);
}

.scorecard {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  min-width: 720px;
}
.scorecard thead th {
  background: var(--surface);
  padding: 14px 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: center;
  border-bottom: 1px solid var(--rule-2);
}
.scorecard thead th.scorecard__lbl {
  text-align: left;
  width: 110px;
  padding-left: 18px;
  color: var(--green);
}
.scorecard thead th.scorecard__total {
  background: var(--ink);
  color: var(--cream);
  letter-spacing: 0.12em;
}
.scorecard thead th.scorecard__total--grand {
  background: var(--green);
}

.scorecard tbody th {
  text-align: left;
  padding: 14px 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--bg);
  border-right: 1px solid var(--rule);
}
.scorecard tbody th em {
  font-style: normal;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-3);
  text-transform: lowercase;
  letter-spacing: 0;
  margin-left: 4px;
}

.scorecard__row td {
  padding: 14px 4px;
  text-align: center;
  font-size: 14px;
  color: var(--ink);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  width: 7%;
}
.scorecard__row td.scorecard__total {
  background: var(--surface);
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
  border-left: 1px solid var(--rule-2);
}
.scorecard__row td.scorecard__total em { font-style: italic; }
.scorecard__row td.scorecard__total--grand {
  background: var(--green);
  color: var(--cream);
}
.scorecard__row td.scorecard__total--grand em { color: var(--cream); }

/* PAR row — color per par value */
.scorecard__row--par td {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: var(--ink);
  font-weight: 400;
}
.scorecard__row--par td[data-par="3"] { background: var(--green-soft); color: var(--green-deep); }
.scorecard__row--par td[data-par="5"] { background: rgba(184, 133, 63, 0.12); color: var(--gold); }

/* HCP row */
.scorecard__row--hcp td {
  background: var(--bg);
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* WHITE distance row */
.scorecard__row--white td em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* PLAYER row — input cells */
.scorecard__row--player td {
  padding: 6px 4px;
  background: #FFFFFF;
}
.scorecard__row--player input[type="number"] {
  width: 100%;
  height: 48px;
  border: 0;
  background: transparent;
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  color: var(--ink);
  text-align: center;
  letter-spacing: -0.01em;
  -moz-appearance: textfield;
  outline: none;
  border-radius: 3px;
}
.scorecard__row--player input[type="number"]:focus {
  background: var(--green-soft);
  box-shadow: inset 0 0 0 1px var(--green);
}
.scorecard__row--player input[type="number"]::-webkit-outer-spin-button,
.scorecard__row--player input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.scorecard__row--player input.is-eagle  { color: var(--green); font-weight: 500; }
.scorecard__row--player input.is-birdie { color: var(--green); }
.scorecard__row--player input.is-par    { color: var(--ink); }
.scorecard__row--player input.is-bogey  { color: var(--gold); }
.scorecard__row--player input.is-double { color: var(--gold); font-weight: 500; }

.scorecard__row--player .scorecard__name {
  width: 100%;
  height: 40px;
  border: 0;
  background: transparent;
  padding: 0 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  outline: none;
  border-radius: 3px;
}
.scorecard__row--player .scorecard__name::placeholder {
  color: var(--ink-4);
  font-style: italic;
}
.scorecard__row--player .scorecard__name:focus {
  background: var(--green-soft);
  box-shadow: inset 0 0 0 1px var(--green);
}

.scorecard__row--player td.scorecard__total--player {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  letter-spacing: -0.02em;
}
.scorecard__row--player td.scorecard__total--grand {
  background: var(--green);
  color: var(--cream);
}

/* Summary panel */
.card__summary {
  margin: 24px 0 0;
  padding: 24px;
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  background: var(--surface);
}
.card__summary-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
.card__summary-grid > div {
  display: grid; gap: 6px;
  padding: 16px 18px 12px;
  border-right: 1px solid var(--rule);
}
.card__summary-grid > div:last-child { border-right: 0; }
.card__summary-lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.card__summary-val {
  font-family: var(--serif);
  font-style: italic;
  font-size: 36px;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
#sum-vs-par[data-tone="good"]    { color: var(--green); }
#sum-vs-par[data-tone="neutral"] { color: var(--ink); }
#sum-vs-par[data-tone="bad"]     { color: var(--gold); }

/* HCP legend */
.card__legend {
  margin: 32px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--rule-2);
  max-width: 800px;
}
.card__legend p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.card__legend-meta { font-family: var(--mono); font-size: 12px !important; color: var(--ink-3) !important; letter-spacing: 0.04em; }
.card__legend-meta em { font-family: var(--serif); font-size: 18px; color: var(--ink); font-style: italic; letter-spacing: 0; }

/* Print */
@media print {
  body { background: #fff; color: #000; }
  .topbar, .foot, .cta, .card__actions, .card__legend, .card__summary { display: none !important; }
  .card { padding: 16px; }
  .scorecard__row--player input { background: transparent; }
}

/* Responsive */
@media (max-width: 900px) {
  .card__stats { grid-template-columns: repeat(2, 1fr); }
  .card__stats > div { padding: 6px 12px; border-right: 0; }
  .card__stats > div:nth-child(odd) { border-right: 1px solid var(--rule); }
  .card__summary-grid { grid-template-columns: repeat(2, 1fr); }
  .card__summary-grid > div:nth-child(odd) { border-right: 1px solid var(--rule); }
  .card__summary-grid > div:nth-child(even) { border-right: 0; }
  .card__summary-grid > div { border-bottom: 1px solid var(--rule); }
  .card__summary-grid > div:nth-last-child(-n+1):nth-child(odd) { grid-column: 1 / -1; }
}

/* ============================================================
   ŠOLA SUBPAGE
   ============================================================ */

.page-sola { background: var(--bg); }

/* Hero */
.sola {
  padding: 64px var(--pad-x) clamp(80px, 8vw, 120px);
  max-width: var(--maxw); margin: 0 auto;
}
.sola__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px clamp(40px, 5vw, 80px);
  align-items: end;
}
.sola__head .atlas__breadcrumb { grid-column: 1 / -1; }
.sola__h {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(64px, 11vw, 180px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.sola__h em { font-style: italic; color: var(--green); }
.sola__lede {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(20px, 1.7vw, 28px);
  line-height: 1.42;
  color: var(--ink-2);
  padding-bottom: 12px;
}
.sola__lede em { font-style: italic; color: var(--ink); }
.sola__intro {
  grid-column: 1 / -1;
  margin-top: 40px;
  border-top: 1px solid var(--rule-2);
  padding-top: 28px;
  max-width: 720px;
}
.sola__intro p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.sola__intro strong { color: var(--green); font-weight: 500; }

/* Tečaji 2026 */
.courses {
  padding: 0 var(--pad-x) var(--pad-section-y);
  max-width: var(--maxw); margin: 0 auto;
}
.courses__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px clamp(40px, 5vw, 80px);
  align-items: end;
  margin-bottom: 56px;
}
.courses__head .section__num { grid-column: 1 / -1; }
.courses__h {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.courses__h em { font-style: italic; color: var(--green); }
.courses__sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 60ch;
  padding-bottom: 12px;
}
.courses__sub em { font-style: italic; color: var(--ink); font-weight: 400; }

.courses__list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--rule-2);
  padding-top: 32px;
}

.course-card {
  display: grid; gap: 14px;
  padding: 24px;
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  background: var(--bg);
  transition: border-color .25s, transform .3s var(--ease);
}
.course-card:hover {
  border-color: var(--green);
  transform: translateY(-3px);
}
.course-card__num em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  color: var(--green);
  line-height: 1;
}
.course-card__h {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
}
.course-card__dates {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}
.course-card__dates time {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--serif);
}
.course-card__dates .d {
  font-style: italic;
  font-size: 24px;
  color: var(--ink);
  line-height: 1;
}
.course-card__dates .m {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.course-card__price {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  display: flex; align-items: baseline; justify-content: space-between;
}
.course-card__price em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.course-card__price::after {
  content: "tečaj";
  font-style: italic;
  font-family: var(--serif);
  text-transform: lowercase;
  letter-spacing: 0;
  font-size: 16px;
  color: var(--ink-3);
}

.courses__note {
  margin: 32px 0 0;
  font-size: 14px;
  color: var(--ink-3);
  max-width: 720px;
  line-height: 1.6;
}

/* Curriculum */
.curriculum {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--rule-2);
}
.curriculum__list {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
}
.curriculum__list li {
  display: flex; align-items: baseline; gap: 16px;
  padding: 22px 16px 22px 0;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
}
.curriculum__list li:nth-child(5n) { border-right: 0; }
.curriculum__n {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--green);
  border-radius: 50%;
  font-family: var(--mono);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--green);
  flex-shrink: 0;
}

/* Trener */
.coach {
  padding: 0 var(--pad-x) var(--pad-section-y);
  max-width: var(--maxw); margin: 0 auto;
}
.coach__grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  margin-top: 28px;
}
.coach__avatar {
  width: 220px; height: 220px;
  border: 1px solid var(--rule-2);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface);
  position: relative;
  overflow: hidden;
}
.coach__avatar::before {
  content: "";
  position: absolute; inset: 12px;
  border-radius: 50%;
  border: 1px dashed var(--rule-2);
  opacity: 0.6;
}
.coach__initials {
  font-family: var(--serif);
  font-style: italic;
  font-size: 96px;
  color: var(--green);
  letter-spacing: -0.04em;
  line-height: 1;
}
.coach__h {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.coach__h em { font-style: italic; color: var(--green); }
.coach__role {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.coach__bio {
  margin: 24px 0 0;
  max-width: 60ch;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.coach__contact {
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 24px;
}
.coach__contact > div {
  display: grid; gap: 4px;
}
.coach__contact dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.coach__contact dd {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
}
.coach__contact a {
  border-bottom: 1px solid var(--rule-2);
  transition: color .2s, border-color .2s;
}
.coach__contact a:hover { color: var(--green); border-color: var(--green); }

/* Mladi */
.youth {
  padding: 0 var(--pad-x) var(--pad-section-y);
  max-width: var(--maxw); margin: 0 auto;
}
.youth__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: end;
  margin-top: 28px;
}
.youth__h {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.youth__h em { font-style: italic; color: var(--green); }
.youth__lede {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.4;
  color: var(--ink-2);
}
.youth__lede em { font-style: italic; color: var(--ink); }
.youth__contacts {
  grid-column: 1 / -1;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
}
.youth__contacts > div {
  display: grid; gap: 6px;
  padding: 24px 0;
  border-right: 1px solid var(--rule);
}
.youth__contacts > div:nth-child(2) { border-right: 0; padding-left: 24px; }
.youth__contacts dt {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.youth__contacts dd {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--ink);
}
.youth__contacts a {
  border-bottom: 1px solid var(--rule-2);
  transition: color .2s, border-color .2s;
}
.youth__contacts a:hover { color: var(--green); border-color: var(--green); }

/* Oprema (gear) */
.gear {
  padding: 0 var(--pad-x) var(--pad-section-y);
  max-width: var(--maxw); margin: 0 auto;
}
.gear__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px clamp(40px, 5vw, 80px);
  align-items: end;
  margin-bottom: 56px;
}
.gear__head .section__num { grid-column: 1 / -1; }
.gear__h {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.gear__h em { font-style: italic; color: var(--green); }
.gear__sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 60ch;
  padding-bottom: 12px;
}

.gear__list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
}
.gear-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 24px;
  padding: 32px 24px 32px 0;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
.gear-item:nth-child(2n) { border-right: 0; padding-right: 0; padding-left: 24px; }
.gear-item:nth-last-child(-n+2) { border-bottom: 0; }
.gear-item__n {
  grid-row: 1 / 3;
}
.gear-item__n em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 48px;
  color: var(--green);
  line-height: 1;
}
.gear-item__h {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.05;
}
.gear-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.gear-item p em { font-style: italic; color: var(--ink); }
.gear-item p strong { color: var(--green); font-weight: 500; }

.gear__note {
  margin: 32px 0 0;
  font-size: 14px;
  color: var(--ink-3);
  font-style: italic;
  max-width: 60ch;
}

/* Servis */
.service {
  padding: 0 var(--pad-x) var(--pad-section-y);
  max-width: var(--maxw); margin: 0 auto;
}
.service__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: end;
  margin-top: 28px;
}
.service__h {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.service__h em { font-style: italic; color: var(--green); }
.service__lede {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.4;
  color: var(--ink-2);
}
.service__lede em { font-style: italic; color: var(--ink); }
.service__contact {
  grid-column: 1 / -1;
  margin: 24px 0 0;
}
.service__contact a {
  display: inline-flex; align-items: baseline;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-family: var(--serif);
  transition: gap .2s var(--ease), color .2s;
}
.service__contact a:hover { gap: 22px; color: var(--green); }
.service__contact-lbl {
  font-style: italic;
  font-size: 26px;
  color: var(--ink);
}
.service__contact-num {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* Responsive */
@media (max-width: 900px) {
  .sola__head,
  .courses__head,
  .gear__head,
  .youth__inner,
  .service__inner { grid-template-columns: 1fr; }
  .courses__list { grid-template-columns: 1fr; }
  .coach__grid { grid-template-columns: 1fr; gap: 32px; }
  .coach__avatar { width: 160px; height: 160px; }
  .coach__initials { font-size: 64px; }
  .gear__list { grid-template-columns: 1fr; }
  .gear-item { border-right: 0; padding-right: 0; padding-left: 0; }
  .gear-item:nth-child(2n) { padding-left: 0; }
  .youth__contacts { grid-template-columns: 1fr; }
  .youth__contacts > div:nth-child(2) { padding-left: 0; border-top: 1px solid var(--rule); }
  .youth__contacts > div { border-right: 0; }
  .curriculum__list li { border-right: 0; }
}

/* ============================================================
   REZERVACIJA — booking form
   ============================================================ */

.page-rezervacija { background: var(--bg); }

.resv {
  padding: 64px var(--pad-x) var(--pad-section-y);
  max-width: var(--maxw); margin: 0 auto;
}
.resv__head {
  display: grid; gap: 16px;
  margin-bottom: 64px;
  max-width: 720px;
}
.resv__h {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 10vw, 160px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.resv__h em { font-style: italic; color: var(--green); }
.resv__sub {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
}
.resv__sub em { font-style: italic; color: var(--green); }

.resv__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(40px, 4vw, 80px);
  align-items: start;
}

/* Form steps */
.resv__form { display: grid; gap: 56px; }
.resv__step {
  border: 0;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule-2);
  padding-top: 28px;
}
.resv__step legend {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 20px;
}
.resv__step-num {
  font-family: var(--mono);
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--green);
  border: 1px solid var(--green);
  padding: 4px 8px;
  border-radius: 999px;
}

/* Radio cards */
.resv__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.resv__cards--small { margin-top: 12px; }
.resv__card {
  position: relative;
  display: grid; gap: 4px;
  padding: 18px 18px 16px;
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease);
  background: var(--bg);
}
.resv__card input { position: absolute; opacity: 0; pointer-events: none; }
.resv__card-h {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  font-style: italic;
}
.resv__card-h em {
  font-style: italic;
  color: var(--green);
  font-size: 1.15em;
}
.resv__card-d {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.resv__card-d em { font-style: normal; color: var(--ink-2); }
.resv__card:hover { border-color: var(--ink-2); }
.resv__card:has(input:checked) {
  border-color: var(--green);
  background: var(--green-soft);
  box-shadow: 0 0 0 1px var(--green) inset;
}
.resv__card:has(input:checked) .resv__card-h { color: var(--green-deep); }
.resv__card--mini { padding: 12px 14px; }
.resv__card--mini .resv__card-h { font-size: 15px; }
.resv__card--mini .resv__card-h em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-left: 6px;
}

/* Day chips */
.resv__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.resv__day {
  display: grid;
  gap: 2px;
  padding: 14px 8px;
  background: var(--bg);
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  font-family: var(--mono);
  transition: border-color .2s, background .2s;
}
.resv__day-wd {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.resv__day-n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: var(--ink);
  line-height: 1;
}
.resv__day-m {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.resv__day:hover { border-color: var(--ink-2); }
.resv__day.is-today .resv__day-wd { color: var(--green); }
.resv__day.is-selected {
  background: var(--ink);
  border-color: var(--ink);
}
.resv__day.is-selected .resv__day-wd,
.resv__day.is-selected .resv__day-n,
.resv__day.is-selected .resv__day-m { color: var(--cream); }
.resv__day.is-selected .resv__day-n { color: #FFFFFF; }

/* Time selectors — two-stage: hour, then 10-min */
.resv__time-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(20px, 3vw, 40px);
}
.resv__time-lbl {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.resv__time-lbl em {
  font-style: normal;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0;
}

.resv__hours-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.resv__hour-btn {
  position: relative;
  padding: 18px 10px 14px;
  background: var(--bg);
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  cursor: pointer;
  display: grid; gap: 4px;
  text-align: center;
  font-family: var(--serif);
  transition: border-color .25s, background .25s, color .25s;
}
.resv__hour-btn-num {
  font-style: italic;
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.resv__hour-btn-meta {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.resv__hour-btn:hover:not(.is-full):not(.is-selected) {
  border-color: var(--ink-2);
}
.resv__hour-btn.is-selected {
  border-color: var(--green);
  background: var(--green-soft);
  box-shadow: 0 0 0 1px var(--green) inset;
}
.resv__hour-btn.is-selected .resv__hour-btn-num { color: var(--green-deep); }
.resv__hour-btn.is-full {
  opacity: 0.4;
  cursor: not-allowed;
}
.resv__hour-btn.is-full .resv__hour-btn-meta { color: var(--gold); }

.resv__mins-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-content: start;
  min-height: 110px;
}
.resv__mins-empty {
  grid-column: 1 / -1;
  margin: 0;
  align-self: center;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-3);
}
.resv__mins-empty em { font-style: italic; color: var(--green); }
.resv__min-btn {
  padding: 22px 12px;
  background: var(--bg);
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-align: center;
  transition: border-color .25s, background .25s, color .25s;
}
.resv__min-btn:hover:not(:disabled):not(.is-selected) {
  border-color: var(--green);
  background: var(--green-soft);
}
.resv__min-btn.is-selected {
  background: var(--green);
  border-color: var(--green);
  color: #FFFFFF;
  box-shadow: 0 0 0 4px var(--green-soft);
}
.resv__min-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  text-decoration: line-through;
}

.resv__strip-help {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}
.resv__strip-help em { font-style: italic; color: var(--ink-2); }

@media (max-width: 760px) {
  .resv__time-grid { grid-template-columns: 1fr; gap: 24px; }
  .resv__hours-grid { grid-template-columns: repeat(5, 1fr); }
  .resv__hour-btn { padding: 14px 6px 10px; }
  .resv__hour-btn-num { font-size: 24px; }
  .resv__min-btn { padding: 18px 10px; font-size: 22px; }
}

/* Stepper */
.resv__stepper {
  display: inline-grid;
  grid-template-columns: 44px auto 44px;
  align-items: center;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  overflow: hidden;
}
.resv__step-btn {
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  font-size: 20px;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s;
}
.resv__step-btn:hover { background: var(--paper); }
#players-val {
  width: 56px;
  border: 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  color: var(--ink);
  background: transparent;
  -moz-appearance: textfield;
}
#players-val::-webkit-outer-spin-button,
#players-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.resv__step-hint {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* Contact fields */
.resv__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
.resv__field {
  display: grid; gap: 6px;
}
.resv__field--full { grid-column: 1 / -1; }
.resv__field span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.resv__field input,
.resv__field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  background: var(--bg);
  font-family: var(--sans);
  font-size: 15.5px;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.resv__field textarea { font-family: var(--sans); resize: vertical; min-height: 88px; }
.resv__field input:focus,
.resv__field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.resv__field input:invalid:not(:placeholder-shown),
.resv__field input:user-invalid {
  border-color: var(--gold);
}

/* Submit */
.resv__submit {
  display: grid; gap: 12px;
  border-top: 1px solid var(--rule-2);
  padding-top: 28px;
}
.resv__submit .btn { justify-self: start; }
.resv__disclaimer {
  margin: 0;
  max-width: 60ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
}

/* Summary aside */
.resv__summary {
  position: sticky;
  top: 100px;
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  padding: 28px 24px 24px;
  background: var(--surface);
  display: grid; gap: 18px;
  align-self: start;
}
.resv__summary-num {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
}
.resv__summary-h {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 0.95;
  color: var(--ink);
}
.resv__summary-h em { font-style: italic; color: var(--green); }
.resv__summary-data {
  margin: 0;
  display: grid; gap: 12px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}
.resv__summary-data > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: baseline;
}
.resv__summary-data dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.resv__summary-data dd {
  margin: 0;
  text-align: right;
  font-size: 14.5px;
  color: var(--ink);
}
.resv__total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--ink);
  padding-top: 16px;
}
.resv__total-lbl {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.resv__total-val {
  font-family: var(--serif);
  font-style: italic;
  font-size: 40px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.resv__summary-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* Mobile sticky bar — current reservation status (mobile-only) */
.resv__bar {
  display: none;
}
@media (max-width: 1024px) {
  .resv__bar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 55;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px var(--pad-x) calc(14px + env(safe-area-inset-bottom, 0));
    background: var(--ink);
    color: #FFFFFF;
    box-shadow: 0 -8px 24px rgba(15, 42, 61, 0.22);
    transform: translateY(100%);
    transition: transform .35s var(--ease);
    pointer-events: none;
  }
  .resv__bar.is-visible {
    transform: translateY(0);
    pointer-events: auto;
  }
  .resv__bar-info {
    display: grid;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .resv__bar-label {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
  }
  .resv__bar-detail {
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    line-height: 1.2;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .resv__bar.is-prompt .resv__bar-label { color: var(--green-2); }
  .resv__bar.is-ready  .resv__bar-label { color: var(--green-2); }
  .resv__bar-price {
    font-family: var(--serif);
    font-style: italic;
    font-size: 24px;
    color: #FFFFFF;
    letter-spacing: -0.01em;
    flex-shrink: 0;
  }
  .resv__bar.is-ready .resv__bar-price { color: var(--green-2); }
  /* Add bottom padding to body so the bar doesn't cover form bottom */
  .page-rezervacija .resv__form { padding-bottom: 80px; }
}

/* Confirmation banner */
.resv__confirm {
  background: linear-gradient(180deg, var(--green-deep) 0%, #1F4D2E 100%);
  color: var(--cream);
  padding: var(--pad-section-y) var(--pad-x);
}
.resv__confirm-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; gap: 24px;
}
.resv__confirm-num {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.resv__confirm-h {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 10vw, 160px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.resv__confirm-h em { font-style: italic; }
.resv__confirm-sub {
  margin: 0;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.75);
  max-width: 60ch;
  line-height: 1.6;
}
.resv__confirm .btn--ghost {
  color: var(--cream); border-color: rgba(255, 255, 255, 0.45);
}
.resv__confirm .btn--ghost:hover { background: var(--cream); color: var(--ink); }

/* Responsive */
@media (max-width: 1024px) {
  .resv__layout { grid-template-columns: 1fr; }
  .resv__summary { position: static; }
}
@media (max-width: 760px) {
  .resv__days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .resv__day { padding: 10px 4px; }
  .resv__day-n { font-size: 18px; }
  .resv__fields { grid-template-columns: 1fr; }
  .resv__summary-data > div { grid-template-columns: auto 1fr; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .nav { gap: 18px; }
  .topbar { gap: 16px; }
  .topbar__cta { padding: 9px 14px; font-size: 11px; }
  .course { grid-template-columns: 1fr; gap: 32px; }
  .course__h2 { font-size: clamp(48px, 12vw, 110px); }
  .holes__head { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; gap: 56px; }
  .feat { border-top: 1px solid var(--rule); padding-top: 32px; }
  .features .feat:first-of-type { border-top: 0; padding-top: 0; }
  .status { grid-template-columns: 1fr; gap: 40px; }
  .visit__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .topbar {
    grid-template-columns: 1fr auto auto;
    padding: 12px var(--pad-x);
    gap: 12px;
  }
  /* Big mobile logo that overhangs ~30% past topbar bottom */
  .brand {
    position: relative;
    padding-left: 96px;          /* room for absolute logo */
    min-height: 44px;
    align-items: center;
    gap: 0;
  }
  .brand__logo {
    position: absolute;
    left: 0;
    top: -8px;                   /* slight peek above */
    height: 92px;                /* enlarged, overhangs into hero */
    width: auto;
    margin: 0;
    z-index: 99;                 /* above mobile menu (z:60), under close X (z:100) */
    filter:
      drop-shadow(0 8px 16px rgba(15, 42, 61, 0.28))
      drop-shadow(0 2px 4px rgba(15, 42, 61, 0.18));
    transition: height .28s var(--ease), top .28s var(--ease);
  }
  /* When the mobile menu is open, shrink logo into the topbar so it doesn't bleed into the nav */
  .menu-toggle:checked ~ .brand .brand__logo {
    height: 52px;
    top: 4px;
  }
  .brand__name { font-size: 22px; }
  /* Mobile menu drops under the topbar (logo + hamburger stay visible) */
  .nav {
    display: flex;
    position: fixed;
    top: 69px;
    left: 0; right: 0;
    width: 100%;
    height: calc(100dvh - 69px);
    background: var(--bg);
    z-index: 60;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0;
    gap: 0;
    font-size: 24px;
    font-family: var(--serif);
    font-style: italic;
    text-transform: none;
    letter-spacing: -0.01em;
    opacity: 0; pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
    border-top: 1px solid var(--rule);
    box-shadow: 0 12px 24px rgba(15, 42, 61, 0.10);
    overflow: hidden;
  }
  /* Items area fills available space, scrolls if too tall */
  .nav__list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--pad-x) 16px;        /* no top padding — menu butts up against topbar */
    gap: 0;
  }
  .nav a {
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    padding: 16px 0;
    width: 100%;
    display: block;
  }
  .nav a::after { display: none; }
  .nav a.is-active { color: var(--green); }
  .menu-toggle:checked ~ .nav {
    opacity: 1; pointer-events: auto; transform: translateY(0);
  }
  /* Sticky Rezerviraj CTA at bottom of menu (a.nav__cta--mobile beats .nav a) */
  .nav a.nav__cta--mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    width: auto;
    box-sizing: border-box;
    margin: 0 var(--pad-x) 24px;
    padding: 18px 24px;
    background: var(--green);
    color: #FFFFFF;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border: 0;
    border-radius: 999px;
    border-bottom: 0;
    box-shadow: 0 8px 24px rgba(46, 92, 54, 0.32);
    transition: background .25s var(--ease), transform .2s var(--ease), box-shadow .35s var(--ease);
  }
  .nav a.nav__cta--mobile .nav__cta--mobile-arrow {
    font-size: 18px;
    line-height: 1;
    transition: transform .3s var(--ease);
  }
  .nav a.nav__cta--mobile:hover,
  .nav a.nav__cta--mobile:active {
    background: var(--green-deep);
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(46, 92, 54, 0.40);
  }
  .nav a.nav__cta--mobile:hover .nav__cta--mobile-arrow,
  .nav a.nav__cta--mobile:active .nav__cta--mobile-arrow {
    transform: translate(2px, -2px);
  }
  /* Hide on rezervacija page */
  .page-rezervacija .nav a.nav__cta--mobile { display: none; }

  .menu-btn {
    display: inline-grid;
    place-items: center;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    cursor: pointer;
    position: relative;
    z-index: 100;               /* always above mobile menu and logo */
    color: var(--green-deep);   /* dark green, visible on white topbar */
    transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  }
  .menu-btn:hover { color: var(--green); border-color: var(--green); }
  .menu-toggle:checked ~ .menu-btn {
    background: var(--green-deep);
    color: #FFFFFF;
    border-color: var(--green-deep);
  }
  .menu-btn__bar {
    position: absolute;
    width: 16px; height: 1px;
    background: currentColor;
    transition: transform .3s var(--ease), opacity .25s var(--ease);
  }
  .menu-btn__bar:nth-child(1) { transform: translateY(-4px); }
  .menu-btn__bar:nth-child(3) { transform: translateY(4px); }
  .menu-btn__lbl { display: none; }
  .menu-toggle:checked ~ .menu-btn .menu-btn__bar:nth-child(1) {
    transform: rotate(45deg);
  }
  .menu-toggle:checked ~ .menu-btn .menu-btn__bar:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle:checked ~ .menu-btn .menu-btn__bar:nth-child(3) {
    transform: rotate(-45deg);
  }

  .topbar__cta { display: none; }

  .hero { padding-top: 32px; padding-bottom: 32px; }
  .hero__verb { font-size: clamp(72px, 22vw, 160px); }
  .hero__sub { font-size: 16px; }
  .hero__meta { grid-template-columns: 1fr; gap: 6px; text-align: left; }
  .hero__meta-c { justify-self: start; }
  .hero__meta-r { display: none; }
  .hero__ribbon { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .hero__ribbon li:nth-child(4),
  .hero__ribbon li:nth-child(5) { display: none; }

  .holes__split { grid-template-columns: 1fr; }
  .pricetable thead th { font-size: 10.5px; padding: 10px 8px; }
  .pricetable tbody th { font-size: 16px; padding: 14px 8px; }
  .pricetable tbody td { padding: 14px 8px; }
  .pricetable tbody td .num { font-size: 22px; }
  .events__list li { grid-template-columns: 90px 1fr; gap: 16px; }
  .events__list .events__tag { grid-column: 2; justify-self: start; }
  .events__list time .d { font-size: 36px; }
  .visit__grid { grid-template-columns: 1fr 1fr; gap: 24px; }

  .holes__total { grid-template-columns: 1fr; gap: 8px; text-align: left; }
  .holes__total-meta, .holes__total-val { text-align: left; }

  .foot__legal { flex-direction: column; gap: 12px; }
}

@media (max-width: 460px) {
  .visit__grid { grid-template-columns: 1fr; }
  .hero__ribbon { grid-template-columns: repeat(2, 1fr); }
  .hero__ribbon li:nth-child(3) { display: none; }
}

/* ============================================================
   PREFERS REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__canvas { display: none; }
  .hero__static { display: block; }
}

/* ============================================================
   REZERVACIJA — PREGLED / DETAIL / CANCEL
   ============================================================ */

.resv__layout--single {
  display: block;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}

.resv__detail {
  background: var(--bg);
  border: 1px solid var(--surface-2, #E5E9E5);
  border-radius: 10px;
  padding: clamp(28px, 5vw, 44px);
  margin-block: 32px 56px;
  box-shadow: 0 1px 2px rgba(14, 26, 31, 0.04);
}

.resv__detail-loading {
  color: var(--ink-3);
  font-style: italic;
  text-align: center;
  margin: 0;
  padding: 24px 0;
}

.resv__detail-state h2 { margin: 0 0 6px; }

.resv__detail-id {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  margin-bottom: 8px;
}
.resv__detail-lbl {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.resv__detail-id code {
  font-family: "Geist Mono", monospace;
  font-size: 13px;
  color: var(--ink-2);
  word-break: break-all;
}

.resv__detail-when {
  font-family: "Instrument Serif", serif;
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  margin: 8px 0 24px;
}
.resv__detail-when em { font-style: italic; color: var(--green); }
.resv__detail-time {
  display: block;
  font-family: "Geist Mono", monospace;
  font-size: 0.55em;
  color: var(--ink-2);
  margin-top: 8px;
  letter-spacing: 0.04em;
}

.resv__detail-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 24px;
  margin: 0 0 24px;
  padding: 20px 0;
  border-top: 1px solid var(--surface, #F4F6F4);
  border-bottom: 1px solid var(--surface, #F4F6F4);
}
.resv__detail-grid dt {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  align-self: center;
}
.resv__detail-grid dd { margin: 0; color: var(--ink); }

.resv__detail-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: var(--green-soft);
  color: var(--green-deep);
}
.resv__detail-status--cancelled {
  background: #F4E2E2;
  color: #8B1F1F;
}
.resv__detail-status--noshow {
  background: #F2EAD7;
  color: #8B6A1F;
}

.resv__detail-note {
  margin: 0 0 24px;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
}
.resv__detail-note--cancel {
  background: #F4E2E2;
  color: #8B1F1F;
}

.resv__detail-state--err {
  text-align: center;
  padding: 36px 12px;
}
.resv__detail-state--err h2 {
  font-family: "Instrument Serif", serif;
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 8px;
}
.resv__detail-state--err p {
  color: var(--ink-3);
  margin: 8px 0;
}

.resv__detail-actions {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.resv__detail-back {
  align-self: center;
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-3);
  padding-bottom: 1px;
}
.resv__detail-back:hover {
  color: var(--green-deep);
  border-bottom-color: var(--green);
}
.resv__detail-cancel {
  background: transparent;
  color: #8B1F1F;
  border: 1px solid #8B1F1F;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}
.resv__detail-cancel:hover {
  background: #8B1F1F;
  color: #FFFFFF;
}
.resv__detail-cancel:disabled {
  opacity: 0.55;
  cursor: progress;
}

.resv__confirm-link {
  display: inline-block;
  font-family: "Geist Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--green);
  padding-bottom: 2px;
}
.resv__confirm-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ============================================================
   TOPBAR — PRIJAVA / RAČUN LINK
   ============================================================ */

.topbar__login {
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-3);
  padding: 4px 2px;
  margin-right: 14px;
  transition: color 0.15s, border-color 0.15s;
}
.topbar__login:hover {
  color: var(--green-deep);
  border-bottom-color: var(--green);
}
.topbar__login.is-active {
  color: var(--green-deep);
  border-bottom-color: var(--green);
  border-bottom-style: solid;
}

@media (max-width: 760px) {
  .topbar__login { display: none; }
}

/* ============================================================
   PRIJAVA / MOJ RAČUN — pages
   ============================================================ */

.account {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 40px) 64px;
}
.account__head {
  text-align: center;
  margin-bottom: 32px;
}
.account__h {
  font-family: "Instrument Serif", serif;
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 8px;
}
.account__h em { color: var(--green); font-style: italic; }
.account__sub {
  color: var(--ink-3);
  font-size: 16px;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.5;
}

.account__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--surface-2, #E5E9E5);
  border-radius: 10px;
  padding: 28px clamp(24px, 4vw, 40px);
  margin-top: 16px;
  box-shadow: 0 1px 2px rgba(14, 26, 31, 0.04);
}
.account__form label {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.account__form input {
  font: 16px "Geist", system-ui, sans-serif;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  padding: 12px 14px;
  border: 1px solid var(--surface-2, #E5E9E5);
  border-radius: 6px;
}
.account__form input:focus {
  outline: 2px solid var(--green);
  outline-offset: -1px;
  border-color: var(--green);
}
.account__btn {
  align-self: flex-start;
  background: var(--green);
  color: white;
  font: 13px "Geist Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 28px;
  border: 1px solid var(--green);
  border-radius: 999px;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.15s, border-color 0.15s;
}
.account__btn:hover { background: var(--green-deep); border-color: var(--green-deep); }
.account__btn:disabled { opacity: 0.55; cursor: progress; }

.account__note {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 8px;
  text-align: center;
}
.account__note--ok { color: var(--green-deep); font-weight: 500; }
.account__note--err { color: #8B1F1F; }
.account__dev-link {
  display: block;
  margin-top: 8px;
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  word-break: break-all;
  background: var(--surface);
  padding: 12px;
  border-radius: 6px;
  color: var(--blue);
}

.racun__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 24px 0;
}
.racun__card {
  background: var(--bg);
  border: 1px solid var(--surface-2, #E5E9E5);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(14, 26, 31, 0.04);
}
.racun__card-label {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 6px;
}
.racun__card-value {
  font-family: "Instrument Serif", serif;
  font-size: 28px;
  font-weight: 400;
  margin: 0;
}
.racun__card-meta {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 8px;
}

.racun__resv-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.racun__resv {
  background: var(--bg);
  border: 1px solid var(--surface-2, #E5E9E5);
  border-radius: 8px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
}
.racun__resv--cancelled { opacity: 0.55; }
.racun__resv-time {
  font-family: "Geist Mono", monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.racun__resv-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.racun__resv-where { font-weight: 500; }
.racun__resv-detail { font-size: 13px; color: var(--ink-3); }
.racun__resv-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--green-soft);
  color: var(--green-deep);
}
.racun__resv-status--cancelled { background: #F4E2E2; color: #8B1F1F; }
.racun__resv-status--pending { background: var(--surface-2, #E5E9E5); color: var(--ink-2); }

.account__logout {
  margin-top: 32px;
  text-align: center;
}
.account__logout a {
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-4);
  padding-bottom: 1px;
}
.account__logout a:hover { color: var(--ink); border-bottom-color: var(--ink-2); }