/* ═══════════════════════════════════════════════════════════════
   Verkkosivut landing page — page-scoped styles.

   Loaded AFTER main.css, which owns the reset, palette, fonts and
   the shared chrome (nav + footer + custom cursor). Every rule here
   is scoped under .vs so nothing leaks into the shared chrome —
   this file and main.css both define .hero, .contact and .logo.

   Layout is the original design export; type and colour are mapped
   onto the site's own conventions (Syne/Lora, --orange, --dark).
   ═══════════════════════════════════════════════════════════════ */

.vs {
  /* --nav-h-lg / --nav-h-sm are computed server-side from the admin-configured
     logo height and set inline on this element; verkkosivut.js then refines
     --nav-h from the real measured nav. The literals are last-resort only. */
  --nav-h: var(--nav-h-lg, 109px);
  --subnav-h: 49px;
  --section-pad-top: 0px;   /* inherited default; each section overrides */
  --section-pad-x: 5vw;
}

/* ─── Page section nav (sticky, sits under the fixed site nav) ─── */
.vs-subnav {
  position: sticky;
  top: var(--nav-h);
  margin-top: var(--nav-h);
  z-index: 40;
  background: rgba(250,247,242,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.vs-subnav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 15px 5vw;
}

.vs-subnav-link {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
  cursor: none;
  transition: color 0.2s;
}
.vs-subnav-link:hover { color: var(--orange); }
.vs-subnav-link.active { color: var(--dark); font-weight: 700; }

/* ─── Section anchor offset ───
   A jump target must clear both sticky bars, but each section also opens with
   a large decorative top padding. Landing at (bars + padding) puts the section's
   real content — and the package cards especially — below the fold. So each
   section subtracts its own top padding: the empty padding tucks behind the
   bars and the first actual content lands just beneath them.

   Each section's padding-top IS --section-pad-top (single source of truth), so a
   breakpoint that changes the padding changes the offset with it and the two
   cannot drift apart. Override the variable, never padding-top directly. */
.vs section[id] {
  scroll-margin-top: calc(var(--nav-h) + var(--subnav-h) + 24px - var(--section-pad-top));
}

/* ─── Buttons ─── */
.vs .button {
  min-height: 54px;
  padding: 0 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
  cursor: none;
  transition: background 0.2s;
}
.vs .button.dark   { background: var(--dark); }
.vs .button.orange { background: var(--orange); }
.vs .button.dark:hover   { background: var(--orange); }
.vs .button.orange:hover { background: var(--orange-light); }

.vs .text-link {
  padding: 16px 6px;
  font-family: var(--font-display);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: none;
  transition: color 0.2s;
}
.vs .text-link:hover { color: var(--orange); }

/* ─── Eyebrow (mirrors .section-eyebrow in main.css) ─── */
.vs .eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.vs .eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}
.vs .orange-text { color: var(--orange); }

/* ─── Display headings + italic accent (mirrors .hero h1 em) ─── */
.vs h1,
.vs .packages h2,
.vs .cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.5vw, 5.2rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
}
.vs h1 span,
.vs .packages h2 span,
.vs .cta-band h2 span {
  color: var(--orange);
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ─── Hero ─── */
.vs .hero {
  --section-pad-top: 84px;
  min-height: 0;
  padding: var(--section-pad-top) var(--section-pad-x) 110px;
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(330px,.65fr);
  align-items: center;
  gap: 70px;
}
/* Grid items floor at min-content by default; without this the long word in the
   h1 sets the column width and pushes the whole hero past a narrow viewport. */
.vs .hero > * { min-width: 0; }

.vs .intro {
  max-width: 560px;
  margin: 37px 0 44px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-muted);
}

.vs .actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* ─── Hero price card ─── */
.vs .price-card {
  justify-self: end;
  width: min(100%, 380px);
  background: var(--dark);
  padding: 15px;
  box-shadow: -16px 16px 0 rgba(232,98,8,0.13);
}
.vs .price-inner {
  border: 1px solid rgba(232,98,8,0.55);
  padding: 52px 31px 30px;
  color: rgba(250,247,242,0.9);
  min-height: 425px;
}
.vs .price-card h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 35px;
  font-size: 20px;
  line-height: 1.25;
  color: rgba(250,247,242,0.95);
}
.vs .price-card dl { margin: 0; }
.vs .price-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,0.11);
}
.vs dt {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(250,247,242,0.55);
}
.vs dd {
  margin: 0;
  text-align: right;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: rgba(250,247,242,0.95);
}
.vs small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(250,247,242,0.4);
}

/* ─── Process strip ─── */
.vs .strip {
  --section-pad-top: 23px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(3,1fr);
  padding: var(--section-pad-top) var(--section-pad-x);
  gap: 20px;
}
.vs .strip p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--orange);
}
.vs .strip span {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
  margin-left: 20px;
}

/* ─── Packages ─── */
.vs .packages {
  --section-pad-top: 120px;
  padding: var(--section-pad-top) var(--section-pad-x);
}
.vs .packages h2 { font-size: clamp(2.4rem, 3.8vw, 3.6rem); }

.vs .grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  margin-top: 70px;
  border-top: 1px solid var(--dark);
}
.vs .grid article {
  min-height: 350px;
  padding: 28px 32px 30px 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.vs .grid article + article { padding-left: 32px; }
.vs .grid article:last-child { border-right: 0; }

.vs .label {
  margin: 0 0 30px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.vs .grid h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 31px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--dark);
}
.vs .grid p:not(.label) {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 260px;
  margin-top: 16px;
}
.vs .grid strong,
.vs .grid a {
  margin-top: auto;
  font-family: var(--font-display);
  color: var(--dark);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.vs .grid a {
  color: var(--orange);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: none;
  transition: color 0.2s;
}
.vs .grid a:hover { color: var(--orange-light); }

/* ─── Closing CTA band ─── */
.vs .cta-band {
  --section-pad-top: 112px;
  padding: var(--section-pad-top) var(--section-pad-x);
  background: #F1ECE4;
}
.vs .cta-band h2 {
  font-size: clamp(2.6rem, 4.2vw, 4rem);
  margin-bottom: 48px;
}

/* ─── Tablet ─── */
@media (max-width: 1024px) {
  .vs .hero { gap: 48px; }
  .vs .packages { --section-pad-top: 90px; }
}

/* ─── Mobile (matches main.css's 768px nav breakpoint) ─── */
@media (max-width: 768px) {
  .vs {
    --nav-h: var(--nav-h-sm, 97px);
    --subnav-h: 47px;
    --section-pad-x: 4vw;
  }

  /* Scroll the section nav sideways rather than stacking a second
     full-height bar on top of the site nav. */
  .vs-subnav-inner {
    gap: 20px;
    padding: 14px 4vw;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .vs-subnav-inner::-webkit-scrollbar { display: none; }

  .vs .hero {
    --section-pad-top: 56px;
    padding-bottom: 72px;
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }
  .vs h1 { font-size: clamp(1.9rem, 10vw, 3.4rem); }
  .vs .price-card { justify-self: stretch; }
  .vs .strip {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .vs .packages { --section-pad-top: 72px; }
  .vs .grid { grid-template-columns: 1fr; margin-top: 45px; }
  .vs .grid article,
  .vs .grid article + article {
    padding: 28px 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    min-height: 0;
  }
  .vs .grid article:last-child { border-bottom: 0; }
  .vs .grid p:not(.label) { max-width: none; }
  .vs .cta-band { --section-pad-top: 80px; padding-bottom: 80px; }
  .vs .button { width: 100%; }
  .vs .actions { gap: 12px; }
}


/* ─── Very narrow (≤360px) ───
   The Lora italic accent word is wider per character than the Syne it sits
   beside, so it needs one more step down to stay inside the viewport. */
@media (max-width: 360px) {
  .vs h1 { font-size: 8.8vw; }
  /* these clamp floors (2.4–2.6rem) are wider than a 320px viewport can hold */
  .vs .packages h2,
  .vs .cta-band h2 { font-size: 8.4vw; }
  .vs .grid h3 { font-size: 27px; }
}

/* ─── Touch devices: no custom cursor, so restore pointers ─── */
@media (hover: none) {
  .vs .button,
  .vs .text-link,
  .vs .grid a,
  .vs-subnav-link { cursor: pointer; }
}