/* ================================================
   Fjord Villages in Norway — Editorial CSS
   Prefix: fjv-
   Theme: Fjord blue / glacier tones
   ================================================ */

:root {
  --art-accent:           #2d4a5e;
  --art-accent-dark:      #1e3444;
  --art-accent-glow:      rgba(45, 74, 94, 0.35);
  --art-accent-subtle:    rgba(45, 74, 94, 0.06);
  --art-link:             var(--color-pine, #2d6a3f);
  --art-link-hover:       var(--color-forest, #1a4d2e);
  --art-link-underline:   var(--color-aurora, #7dd3c0);
  --art-ornament:         var(--color-glacier, #8fb8ca);
  --art-subtitle-color:   var(--color-glacier, #8fb8ca);
  --art-hero-accent-line: var(--color-glacier, #8fb8ca);
}


/* ------------------------------------------------
   Sticky scene requires overflow-x: clip
   ------------------------------------------------ */
html, body {
  overflow-x: clip;
}


/* ------------------------------------------------
   Hero adjustments
   ------------------------------------------------ */
.art-hero__media img {
  object-position: center 40%;
  animation: fjvHeroKB 30s ease-out forwards;
}

@keyframes fjvHeroKB {
  0%   { transform: scale(1.10); }
  100% { transform: scale(1); }
}

.art-hero__overlay {
  background: linear-gradient(
    to top,
    rgba(10, 22, 40, 0.85) 0%,
    rgba(10, 22, 40, 0.5) 35%,
    rgba(10, 22, 40, 0.15) 65%,
    rgba(10, 22, 40, 0.05) 100%
  );
}

.art-hero__category {
  background: linear-gradient(135deg, #2d4a5e, #8fb8ca);
}


/* ------------------------------------------------
   fjv-chapter-gate — Dark cinematic chapter opener
   Signals the start of the fjord types exploration
   ------------------------------------------------ */
.fjv-chapter-gate {
  position: relative;
  padding: clamp(6rem, 5rem + 6vw, 12rem) clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  overflow: hidden;
}

.fjv-chapter-gate__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}

.fjv-chapter-gate__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 40, 0.78);
  z-index: 1;
}

.fjv-chapter-gate__inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
}

.fjv-chapter-gate__title,
.fjv-chapter-gate__title::before {
  content: none;
}

.fjv-chapter-gate__title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  font-weight: 400;
  font-style: italic;
  color: var(--color-text-inverse, #faf8f5);
  line-height: 1.15;
  margin: 0 0 1.5rem;
}

.fjv-chapter-gate__lead {
  font-family: var(--font-body, 'Glacial Indifference', sans-serif);
  font-size: var(--text-lg, 1.125rem);
  color: rgba(251, 249, 246, 0.65);
  line-height: 1.7;
  margin: 0;
}


/* ------------------------------------------------
   fjv-section-label — Small caps type label
   Sits above the H3 to name the fjord type
   ------------------------------------------------ */
.fjv-section-label {
  font-family: var(--font-body, 'Glacial Indifference', sans-serif);
  font-size: var(--text-xs, clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem));
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-fjord, #2d4a5e);
  margin-bottom: 0.5rem;
  text-align: center;
}


/* ------------------------------------------------
   fjv-section-heading — H3 for each fjord type
   ------------------------------------------------ */
.fjv-section-heading {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  font-weight: 500;
  font-style: italic;
  color: var(--color-text-primary, #1a1a1a);
  text-align: center;
  margin: 0 0 2rem;
  line-height: 1.2;
}

.art-section--cream .fjv-section-heading {
  color: var(--color-text-primary, #1a1a1a);
}


/* ------------------------------------------------
   Pullquote spacing — tighter to preceding section
   ------------------------------------------------ */
.art-section .art-pullquote {
  margin-top: var(--space-2xl, 3rem);
  margin-bottom: var(--space-2xl, 3rem);
}

article > .art-pullquote {
  margin-top: var(--space-lg, 1.5rem);
  margin-bottom: var(--space-2xl, 3rem);
}

.art-pullquote--wall {
  margin-top: var(--space-xl, 2rem);
  margin-bottom: var(--space-xl, 2rem);
}


/* ------------------------------------------------
   Figure spacing — breathing room above when
   inside a section, flush between sections
   ------------------------------------------------ */
.art-section .art-figure--spread {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.art-figure--spread {
  margin-top: 0;
  margin-bottom: 0;
}


/* ------------------------------------------------
   Sticky scene — full viewport height
   ------------------------------------------------ */
.art-sticky-scene__media {
  height: 100vh;
  max-height: none;
}


/* ------------------------------------------------
   Sticky scene credit — overlay on image
   ------------------------------------------------ */
.fjv-sticky-credit {
  position: absolute;
  bottom: 1rem;
  right: 1.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  z-index: 1;
}


/* ------------------------------------------------
   Closing section adjustments
   ------------------------------------------------ */
.art-closing__heading {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  font-weight: 400;
  color: var(--color-text-primary, #1a1a1a);
  margin: 0 0 var(--space-xl, 2rem);
  line-height: 1.2;
}

.art-closing__cta {
  background: linear-gradient(135deg, #2d4a5e, #8fb8ca);
}

.art-closing__cta:hover {
  background: linear-gradient(135deg, #1e3444, #6fa8bc);
}


/* ------------------------------------------------
   Sources — consistent with article pattern
   ------------------------------------------------ */
.art-sources {
  padding-top: clamp(2rem, 1.5rem + 2vw, 4rem);
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 4rem);
}


/* ------------------------------------------------
   Prose links inside sections — keep underline subtle
   ------------------------------------------------ */
.art-prose a[href^="/village/"] {
  font-weight: 500;
}


/* ------------------------------------------------
   Reduced motion
   ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .art-hero__media img {
    animation: none;
  }
}


/* ------------------------------------------------
   Responsive: 768px
   ------------------------------------------------ */
@media (max-width: 768px) {
  .fjv-section-label {
    font-size: 0.7rem;
  }

  .art-section .art-figure--spread {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .art-section .art-figure--spread .art-figure__img-wrap {
    border-radius: var(--radius-md, 0.5rem);
  }
}