/* ==========================================================================
   JNBA Invest – Ylläsröhkö B3
   Brand colors from JNBA Brand Guide 2025: Blue #294561 / White / Black
   Same design system as the JNBA Control website.
   ========================================================================== */

:root {
  --jnba-blue: #294561;
  --jnba-blue-dark: #1c2f42;
  --jnba-blue-light: #3f6089;
  --jnba-blue-tint: #eef2f6;
  --jnba-blue-tint-2: #e2e9f0;
  --white: #ffffff;
  --black: #000000;
  --gray-nav: #8b93a0;
  --gray-text: #4a5261;
  --gray-border: #e4e7ec;

  --font-head: "Jost", "Century Gothic", "Poppins", sans-serif;
  --font-body: "Inter", "Halogen", "Helvetica Neue", Arial, sans-serif;

  --max-width: 1180px;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(41, 69, 97, 0.08);

  /* header container (84px) + its 1px border-bottom — the sticky header's
     total footprint, used to size/position the cinematic sections below it */
  --header-height: 85px;

  /* the gap between gallery scenes is twice this vertical padding — scales
     down with viewport width so it stays proportionate to the photos
     (which shrink with the viewport) instead of reading as fixed dead
     space, capped at 12px so wide screens keep today's spacing */
  --scene-gap-v: clamp(6px, 1vw, 12px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--gray-text);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--jnba-blue);
  line-height: 1.15;
  margin: 0 0 0.6em;
  font-weight: 500;
}

h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); font-weight: 600; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; letter-spacing: 0.02em; }

p { margin: 0 0 1em; }
button { font-family: inherit; } /* browsers don't pass the page font into buttons by default */

a { color: var(--jnba-blue); text-decoration: none; }

ul { margin: 0; padding: 0; list-style: none; }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: block;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--jnba-blue-light);
  font-weight: 600;
  margin-bottom: 0.9em;
}

.section { padding: 56px 0; }
.section[id] { scroll-margin-top: 100px; }

/* ---------- Section quick-nav ---------- */

.section-nav {
  border-bottom: 1px solid var(--gray-border);
}
.section-nav .container {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 24px;
}
.section-nav a {
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--gray-nav);
  padding: 9px 18px;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
}
.section-nav a:hover { color: var(--jnba-blue); background: var(--jnba-blue-tint); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-primary { background: var(--jnba-blue); color: var(--white); }
.btn-primary:hover { background: var(--jnba-blue-dark); transform: translateY(-1px); }

.btn-outline { background: transparent; border-color: var(--jnba-blue); color: var(--jnba-blue); }
.btn-outline:hover { background: var(--jnba-blue); color: var(--white); }

/* ---------- Page not found (404.html) ---------- */

.not-found { text-align: center; padding: 96px 0 72px; }
.not-found .container { max-width: 640px; }
.not-found-code {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--jnba-blue-light);
  margin-bottom: 14px;
}
.not-found-lang + .not-found-lang { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--gray-border); }
.not-found-lang p { margin-bottom: 22px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gray-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { height: 58px; width: auto; }

.lang-switch { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.lang-switch a {
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray-nav);
  padding: 9px 16px;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
}
.lang-switch a:hover { color: var(--jnba-blue); background: var(--jnba-blue-tint); }
.lang-switch a.active { color: var(--white); background: var(--jnba-blue); }

/* ---------- Scroll-in reveal (see assets/js/reveal.js) ----------
   Same animation as the JNBA Control site. .reveal-ready is added by an
   inline script in <head> (only when the visitor hasn't asked for reduced
   motion), so these start hidden from the very first paint, like the hero
   photo, instead of flashing before the script runs. The same transition
   plays in reverse when an element is hidden again on scrolling back up. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.65, 0.2, 1);
}
.reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
@media (max-width: 700px) {
  .reveal-ready [data-reveal] { transform: translateY(20px); }
  .reveal-ready [data-reveal].is-revealed { transform: none; }
}

/* ---------- Cinematic hero: typographic split-reveal ---------- */

.cinematic-hero {
  position: relative;
}

/* Each gallery scene adds --scene-gap-v above and below its photo, so two
   neighbours are 2 × --scene-gap-v apart. The hero box ends exactly at the
   photo's bottom edge, so give it the same space below (only below — the
   top stays flush against the header) to match the gap to Takapiha. */
#cinematicHero { padding-bottom: var(--scene-gap-v); }


/* Exactly the photograph's own rendered height (width: min(1100px, 82vw) at
   aspect-ratio 16/10, so height = width * 0.625) — the image is centered in
   this box, so at full size it sits flush against the header with no gap,
   and the box shrinks with the picture on narrower screens. */
.cinematic-hero-pin {
  height: calc(min(1100px, 82vw) * 0.625);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  position: relative;
  overflow: hidden;
}

.hero-text-group {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.hero-columns {
  position: relative;
  margin: 0;
  line-height: 1.15; /* same as h1, so the outro copy (a plain div) matches the hero */
  display: flex;
  align-items: center;
  justify-content: center;
  /* no gap: "Ylläs" + "röhkö" read as one word, Ylläsröhkö, until the
     columns split apart on scroll */
  gap: 0;
}

.hero-col {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.title-word {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2.6rem, 10.5vw, 9.5rem);
  color: var(--jnba-blue);
  line-height: 1;
  display: block;
  white-space: nowrap;
}

/* the photograph starts hidden, centered exactly on the gap between the two title words */
.hero-image-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(1100px, 82vw);
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  transform: translate3d(-50%, -50%, 0) scale(0.4);
  opacity: 0;
  will-change: transform, opacity;
  cursor: pointer;
  border: none;
  padding: 0;
  background: var(--jnba-blue-tint);
}
.hero-image-center img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
}

/* the outro has no photograph to grow into — it's just the converging
   text, so its pinned box only needs to be as tall as that text, with the
   same vertical rhythm as a normal section rather than a full-screen block */
.cinematic-outro .cinematic-hero-pin {
  height: auto;
  padding: 56px 24px;
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-hero-pin { height: auto; padding: 96px 24px; }
  .hero-image-center { position: relative; top: auto; left: auto; margin: 28px auto 0; transform: none !important; opacity: 1 !important; width: min(900px, 88vw); }
  .hero-col { transform: none !important; }
}

@media (max-width: 760px) {
  .title-word { font-size: clamp(1.9rem, 11vw, 3.2rem); }
  .cinematic-outro .cinematic-hero-pin { padding: 40px 24px; }
}

/* ---------- Editorial gallery scenes ----------
   Three-tier rhythm: major (single, large) / pair (two, equal) / detail (small, grouped). */

.scene { position: relative; }

.scene-media {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  border: none;
  background: var(--jnba-blue-tint);
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius);
  will-change: transform, opacity;
}
.scene-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.scene-media:hover img { transform: scale(1.035); }

/* major: one large photo at the same width as the hero image */
.scene-major {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--scene-gap-v) 24px;
}
.scene-major .scene-media { width: min(1100px, 82vw); aspect-ratio: 16 / 9; }

/* pair: two photos, always equal size — same overall width as the major image */
.scene-pair-equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: min(1100px, 82vw);
  padding: var(--scene-gap-v) 0;
  margin: 0 auto;
}
.scene-pair-equal .scene-media { aspect-ratio: 4 / 3; }

/* detail: small supporting photos, grouped — same overall width as the major image */
.scene-detail-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  width: min(1100px, 82vw);
  padding: var(--scene-gap-v) 0 4vh;
  margin: 0 auto;
}
.scene-detail-strip .scene-media { aspect-ratio: 1 / 1; }

@media (max-width: 900px) {
  .scene-detail-strip { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .scene-pair-equal { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 480px) {
  .scene-detail-strip { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 24, 34, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }

.lightbox-inner { position: relative; max-width: 1040px; width: 100%; }

.lightbox-close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--white);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-slide { position: relative; text-align: center; }
.lightbox-slide img {
  max-width: 100%;
  max-height: 72vh;
  display: inline-block;
  border-radius: var(--radius);
}

.lightbox .numbertext {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(20, 32, 46, 0.55);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 32, 46, 0.55);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background 0.15s ease;
  user-select: none;
}
.gallery-arrow:hover { background: var(--jnba-blue); }
.gallery-arrow.prev { left: 8px; }
.gallery-arrow.next { right: 8px; }

.lightbox .caption-container {
  text-align: center;
  padding: 14px 16px;
  color: var(--white);
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 500;
}

/* ---------- Info rows ---------- */

.info-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  align-items: stretch;
}

.info-card {
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius);
  padding: 8px 28px;
}

.info-row {
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-border);
}
.info-row:last-child { border-bottom: none; }
.info-row .info-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-nav);
  margin-bottom: 4px;
}
.info-row .info-value {
  display: block;
  font-weight: 600;
  color: var(--jnba-blue);
  font-size: 1rem;
}
a.info-value:hover { text-decoration: underline; }

.info-heading {
  font-size: 0.95rem;
  margin: 0 0 10px;
}
.info-heading:not(:first-child) { margin-top: 26px; }

.check-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--gray-border);
  font-size: 0.95rem;
}
.check-list li:last-child { border-bottom: none; }
.check-list .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--jnba-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.check-list .icon svg { width: 11px; height: 11px; }

/* ---------- Map / calendar embeds ---------- */

.embed-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--gray-border);
  line-height: 0;
}
.embed-card iframe { display: block; width: 100%; border: 0; }

.distances {
  margin: 16px 0 0;
  font-size: 0.92rem;
  color: var(--gray-text);
}
.distances strong { color: var(--jnba-blue); font-family: var(--font-head); font-weight: 600; }

/* ---------- Contact cards ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.contact-card {
  border: 1px solid var(--gray-border);
  border-radius: var(--radius);
  padding: 28px;
  background: var(--white);
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-border);
}
.contact-row:last-child { border-bottom: none; }

.contact-row .icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--jnba-blue-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-row .icon svg { width: 17px; height: 17px; stroke: var(--jnba-blue); }

.contact-row .label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-nav);
  margin-bottom: 2px;
}
.contact-row .value { font-weight: 600; color: var(--jnba-blue); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--jnba-blue-dark);
  color: rgba(255, 255, 255, 0.75);
  padding: 48px 0 28px;
  margin-top: 64px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-brand img { height: 56px; width: auto; margin-bottom: 14px; }

.site-footer h4 {
  color: var(--white);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.site-footer a { color: rgba(255,255,255,0.75); }
.site-footer a:hover { color: var(--white); }
.footer-links li { margin-bottom: 8px; font-size: 0.95rem; }

.footer-bottom {
  padding-top: 20px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
}

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
  .brand img { height: 50px; }
  .section-nav .container { gap: 4px; padding: 10px 16px; }
  .section-nav a { padding: 8px 12px; font-size: 0.85rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .info-card { padding: 4px 20px; }
  .section { padding: 40px 0; }
}