/* ============================================================
   ZIPLINE OMIŠ — UI MATH LAYER
   Loaded LAST on every page. A thin, documented layer that
   applies the interface-calculation rules consistently across
   the whole site, without disturbing the established look.

   THE FORMULAS
   ------------------------------------------------------------
   1. NESTED RADIUS (concentric corners)
        Outer Radius = Inner Radius + Padding
        Inner Radius = Outer Radius − Padding
      → A child sitting inside a padded, rounded parent gets a
        radius that keeps both corners concentric. When padding
        ≥ the parent radius, the inner corner is square (correct).

   2. 8-POINT GRID
        every spacing value is a multiple of 8 (8/16/24/32/48/64)
        → predictable rhythm + clean responsive math.

   3. TYPE — GOLDEN RATIO (φ = 1.618)
        Header = Body × φ ;  small label = Body ÷ φ
        Line height for body copy 1.5–1.62.

   4. TOUCH TARGETS (ergonomics)
        interactive controls ≥ 44–48px, ≥ 8px apart.

   5. COLOUR 60-30-10
        60% page white · 30% --surface panels · 10% accents.
   ============================================================ */

:root{
  /* 8-point spacing scale */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px;

  /* rational radius scale (kept on-system: 8 · 10 · 12 · 16 · 22) */
  --r-xs:8px;
  /* concentric helpers — derive one radius from the other + padding */
  --r-in:12px;                                   /* default inner box   */
  --pad-2:16px; --pad-3:24px; --pad-4:32px;      /* inner padding steps */
  --r-out-2:calc(var(--r-in) + var(--pad-2));    /* 28 — inner 12 + 16  */
  --r-out-3:calc(var(--r-in) + var(--pad-3));    /* 36 — inner 12 + 24  */
  /* inverse: a child inside a 22px card, inset by its padding */
  --r-nest-2:max(4px, calc(var(--r-lg) - var(--pad-2)));   /* ≈ 6  */
  --r-nest-3:max(2px, calc(var(--r-lg) - var(--pad-3)));   /* ≈ 2  */

  --tap:44px;            /* ergonomic minimum touch target */
}

/* ---- RADIUS RHYTHM ----------------------------------------
   Snap the few stray icon-tile radii (11/13/14px) onto a single
   12px step so nested icon plates read consistently everywhere. */
.plancard .pc-ic,
.cxf-card .cxf-ic,
.ldoc .di,
.pf-fact .pf-ic,
.cxb-ic,
.fp-av{ border-radius:var(--r-in); }

/* ---- CONCENTRIC NESTING -----------------------------------
   Where a rounded child is inset by a known padding inside a
   rounded parent, set the child's radius = parent − padding so
   the corners stay concentric instead of guessed. */
.keyfacts{ border-radius:var(--r-out-3); }                 /* 12 + 24 = 36 */
.keyfacts .kf{ border-radius:var(--r-in); }                /* inner = 12   */
.authorbox{ border-radius:var(--r-out-3); }
.authorbox .ab-av{ border-radius:var(--r-in); }
/* booking summary: note panel nested in a 22px card → tighter inner */
.summ-note{ border-radius:var(--r-nest-2); }

/* ---- TOUCH TARGETS ----------------------------------------
   Standalone steppers / filter chips that live in roomy layouts
   are raised to the 44px ergonomic floor (tight in-widget
   steppers are intentionally left compact). */
.counter .cc button{ width:var(--tap); height:var(--tap); border-radius:var(--r-in); }
.rv-filters button,
.gal-cat button,
.faq-tab{ min-height:var(--tap); }
.kz-btns button{ width:48px; height:48px; }

/* keep interactive groups ≥ 8px apart */
.counter .cc{ gap:var(--s2); }
.rv-filters,
.gal-cat{ gap:var(--s1); }

/* ============================================================
   REFINED HOVER MOTION — applies a single, well-tuned lift to
   every card that already animates on hover. Loaded last so it
   supersedes the per-component hovers. The site easing
   (--ease = cubic-bezier(.16,1,.3,1)) settles fast then eases
   out — pairing it with a slightly longer duration and a
   layered shadow gives a smoother, more premium feel than the
   default quick pop. Gated to real hover + reduced-motion so
   touch screens don't get stuck hover states.
   ============================================================ */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .bcard,.feat,.fcard,.wd-card,.ns-card,.grp-card,.legal-card,.team-card,
  .blog-card,.gtk,.ldoc,.plancard,.pcard,.tcard,.art-pager a{
    transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s ease;
    will-change:transform;
  }
  .bcard:hover,.feat:hover,.fcard:hover,.wd-card:hover,.ns-card:hover,
  .grp-card:hover,.legal-card:hover,.team-card:hover,.blog-card:hover,
  .gtk:hover,.ldoc:hover,.plancard:hover,.pcard:hover,.tcard:hover,
  .art-pager a:hover{
    transform:translateY(-7px);
    box-shadow:0 26px 52px -24px rgba(16,28,72,.42), 0 8px 18px -12px rgba(16,28,72,.28);
  }
  /* media inside cards drifts in a touch slower + further for depth */
  .bcard .bimg img{transition:transform 1.1s var(--ease);}
  .bcard:hover .bimg img{transform:scale(1.08);}
  /* pre-flight quick-fact tiles: lift + whisper of scale */
  .pf-fact{transition:transform .45s var(--ease),background .3s var(--ease),border-color .3s var(--ease);}
  .pf-fact:hover{transform:translateY(-6px) scale(1.015);}
  /* blog-card corner arrow: smoother diagonal pop */
  .bcard .bcorner{transition:background .3s var(--ease),transform .45s var(--ease);}
  .bcard:hover .bcorner{transform:translate(4px,-4px);}
  /* tactile press — settles quickly on click */
  .bcard:active,.feat:active,.fcard:active,.grp-card:active,.team-card:active,
  .blog-card:active,.plancard:active,.pcard:active,.tcard:active,.ldoc:active,
  .art-pager a:active{transform:translateY(-2px);transition-duration:.12s;}
}