/**
 * NovaFolio — Artist Extras
 *
 * Premium components for artist / gallery portfolios:
 *   1. Marquee (infinite-scroll text banner)
 *   2. Hero full-viewport (100vh hero with overlay)
 *   3. Statement typographique XXL
 *   4. Horizontal scroll gallery
 *   5. Artwork-optimised portfolio cards
 *   6. Art-gallery dark colour preset
 *
 * @since 1.8.0
 */

/* ═══════════════════════════════════════════════════════════
   1. MARQUEE — Dual-element infinite scrolling text (Orbius-style)
   GPU-optimised: translateZ(0), will-change, backface-visibility.
   Usage:
     <div class="nvf-marquee" data-nvf-marquee>
       <span class="nvf-marquee__text">Your text here&ensp;—&ensp;</span>
     </div>
   The JS creates two copies: original scrolls left (0→−100%),
   copy enters from right (100%→0). Seamless loop at any width.
   ═══════════════════════════════════════════════════════════ */

.nvf-marquee {
  --nvf-marquee-speed: 30s;
  --nvf-marquee-font-size: clamp(2.5rem, 5vw, 6rem);
  --nvf-marquee-color: var(--nvf-color-ink, #1a1d23);

  overflow: hidden;
  white-space: nowrap;
  padding: clamp(1rem, 3vw, 2.5rem) 0;
  user-select: none;
}

.nvf-marquee__content {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}

.nvf-marquee__text {
  display: inline-block;
  font-size: var(--nvf-marquee-font-size);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--nvf-marquee-color);
  text-transform: uppercase;
  white-space: nowrap;
  width: 100%;
  min-width: 100%;
  /* GPU paint layer */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Original: 0 → −100% */
.nvf-marquee__text--original {
  animation: nvf-marquee-original var(--nvf-marquee-speed) linear infinite;
}

/* Copy: absolute, starts at +100%, animates to 0 */
.nvf-marquee__text--copy {
  position: absolute;
  top: 0;
  left: 0;
  animation: nvf-marquee-copy var(--nvf-marquee-speed) linear infinite;
}

@keyframes nvf-marquee-original {
  0%   { transform: translateX(0) translateZ(0); }
  100% { transform: translateX(-100%) translateZ(0); }
}

@keyframes nvf-marquee-copy {
  0%   { transform: translateX(100%) translateZ(0); }
  100% { transform: translateX(0) translateZ(0); }
}

/* Reverse direction */
.nvf-marquee--reverse .nvf-marquee__text--original {
  animation-name: nvf-marquee-original-reverse;
}
.nvf-marquee--reverse .nvf-marquee__text--copy {
  animation-name: nvf-marquee-copy-reverse;
}

@keyframes nvf-marquee-original-reverse {
  0%   { transform: translateX(0) translateZ(0); }
  100% { transform: translateX(100%) translateZ(0); }
}

@keyframes nvf-marquee-copy-reverse {
  0%   { transform: translateX(-100%) translateZ(0); }
  100% { transform: translateX(0) translateZ(0); }
}

/* Outline / stroke variant */
.nvf-marquee--stroke .nvf-marquee__text {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--nvf-marquee-color);
}

/* Alternating fill + stroke */
.nvf-marquee--alternate .nvf-marquee__text:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--nvf-marquee-color);
}

/* Separator dot between repetitions */
.nvf-marquee--dots .nvf-marquee__text::after {
  content: "\2022";
  margin: 0 0.6em;
  opacity: 0.35;
  font-size: 0.6em;
  vertical-align: middle;
}

/* Em-dash separator */
.nvf-marquee--dash .nvf-marquee__text::after {
  content: "\2014";
  margin: 0 0.8em;
  opacity: 0.3;
}

/* Pause on hover */
.nvf-marquee:hover .nvf-marquee__text {
  animation-play-state: paused;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nvf-marquee__text { animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   2. HERO FULL-VIEWPORT — 100vh immersive hero
   Usage: Add `nvf-hero--fullscreen` class to hero section.
   Works with the existing Hero block or manual markup.
   ═══════════════════════════════════════════════════════════ */

.nvf-hero--fullscreen {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh; /* Safari safe area */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.nvf-hero--fullscreen .nvf-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.nvf-hero--fullscreen .nvf-hero__media img,
.nvf-hero--fullscreen .nvf-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nvf-hero--fullscreen .nvf-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.55) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.nvf-hero--fullscreen .nvf-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  max-width: 900px;
  padding: 0 var(--nvf-space-l, 2rem);
}

.nvf-hero--fullscreen .nvf-hero__title {
  font-size: clamp(2.5rem, 7vw, 7rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 0.5em;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
}

.nvf-hero--fullscreen .nvf-hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Scroll indicator */
.nvf-hero__scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.nvf-hero__scroll-hint::after {
  content: "";
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.4);
  animation: nvf-scroll-line 2s ease-in-out infinite;
}

@keyframes nvf-scroll-line {
  0%, 100% { transform: scaleY(0); transform-origin: top; }
  50%      { transform: scaleY(1); transform-origin: top; }
  51%      { transform-origin: bottom; }
}


/* ═══════════════════════════════════════════════════════════
   3. STATEMENT / EDITORIAL TYPOGRAPHY XXL
   Usage: <div class="nvf-statement">Large editorial text</div>
   ═══════════════════════════════════════════════════════════ */

.nvf-statement {
  font-size: clamp(1.75rem, 4vw, 4rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 8rem) var(--nvf-space-l, 2rem);
  text-wrap: balance;
}

.nvf-statement--center {
  text-align: center;
}

.nvf-statement strong,
.nvf-statement b {
  font-weight: 500;
  color: var(--nvf-color-accent, #4f46e5);
}

.nvf-statement em,
.nvf-statement i {
  font-style: italic;
  font-family: var(--nvf-font-heading, Georgia, serif);
}


/* ═══════════════════════════════════════════════════════════
   4. HORIZONTAL SCROLL GALLERY
   Usage:
     <div class="nvf-hscroll-gallery">
       <div class="nvf-hscroll-gallery__track">
         <figure class="nvf-hscroll-gallery__item">
           <img src="..." alt="...">
           <figcaption>Title — Medium, Year</figcaption>
         </figure>
         ...
       </div>
     </div>
   ═══════════════════════════════════════════════════════════ */

.nvf-hscroll-gallery {
  --nvf-hsg-height: clamp(320px, 55vh, 680px);
  --nvf-hsg-gap: clamp(12px, 2vw, 28px);
  --nvf-hsg-padding: var(--nvf-space-l, 2rem);

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--nvf-color-border, #ddd) transparent;
  padding: 0 var(--nvf-hsg-padding);
}

.nvf-hscroll-gallery::-webkit-scrollbar {
  height: 4px;
}
.nvf-hscroll-gallery::-webkit-scrollbar-thumb {
  background: var(--nvf-color-border, #ccc);
  border-radius: 2px;
}

.nvf-hscroll-gallery__track {
  display: flex;
  gap: var(--nvf-hsg-gap);
  padding: clamp(2rem, 4vw, 5rem) 0;
  width: max-content;
}

.nvf-hscroll-gallery__item {
  flex: 0 0 auto;
  scroll-snap-align: center;
  height: var(--nvf-hsg-height);
  margin: 0;
  transition: opacity 0.5s cubic-bezier(.16, 1, .3, 1);
}

.nvf-hscroll-gallery__item img {
  height: 100%;
  width: auto;
  display: block;
  border-radius: var(--nvf-radius-m, 8px);
  object-fit: contain;
  background: var(--nvf-color-soft, #f5f5f5);
}

.nvf-hscroll-gallery__item figcaption {
  margin-top: 0.8rem;
  font-size: 0.8125rem;
  color: var(--nvf-color-slate, #64748b);
  letter-spacing: 0.02em;
}

/* Dim siblings on hover */
.nvf-hscroll-gallery:hover .nvf-hscroll-gallery__item {
  opacity: 0.55;
}
.nvf-hscroll-gallery:hover .nvf-hscroll-gallery__item:hover {
  opacity: 1;
}


/* ═══════════════════════════════════════════════════════════
   5. PORTFOLIO — ARTWORK MODE
   Optimised for paintings: no crop, subtle frame shadow,
   larger images, elegant captions.
   Add `nvf-portfolio--artwork` to the grid wrapper.
   ═══════════════════════════════════════════════════════════ */

.nvf-portfolio--artwork .nvf-portfolio-card {
  --nvf-pf-card-radius: 2px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.nvf-portfolio--artwork .nvf-portfolio-thumb {
  aspect-ratio: auto; /* preserve painting proportions */
  border-radius: 0;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.5s cubic-bezier(.16, 1, .3, 1);
}

.nvf-portfolio--artwork .nvf-portfolio-card:hover .nvf-portfolio-thumb {
  box-shadow:
    0 12px 50px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.06);
}

.nvf-portfolio--artwork .nvf-portfolio-thumb-img {
  object-fit: contain;
  background: var(--nvf-color-soft, #f5f5f5);
}

.nvf-portfolio--artwork .nvf-portfolio-card-title {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-style: italic;
}

.nvf-portfolio--artwork .nvf-portfolio-card-subtitle {
  font-size: 0.8125rem;
  color: var(--nvf-color-slate, #64748b);
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Artwork gallery — no overlay by default, subtle zoom */
.nvf-portfolio--artwork .nvf-portfolio-overlay {
  display: none;
}

.nvf-portfolio--artwork .nvf-portfolio-card:hover .nvf-portfolio-thumb-img {
  transform: scale(1.015);
}


/* ═══════════════════════════════════════════════════════════
   6. ART-GALLERY DARK PRESET
   Deep blacks, warm accent, Art Basel / White Cube vibe.
   Applied via body class `nvf-gallery-dark` or as overrides
   for html[data-theme="dark"].
   ═══════════════════════════════════════════════════════════ */

.nvf-gallery-dark,
html[data-theme="dark"].nvf-gallery-dark {
  /* Near-black surfaces (warmer than default dark) */
  --nvf-color-white: #0e0e0e;
  --nvf-color-surface: #141414;
  --nvf-color-soft: #1a1a1a;
  --nvf-color-border: rgba(255, 255, 255, 0.08);

  /* Typography */
  --nvf-color-ink: #e8e6e3;
  --nvf-color-ink-deep: #f2f0ed;
  --nvf-color-black: #ffffff;
  --nvf-color-slate: #817e7a;
  --nvf-color-gray: #5a5856;

  /* Warm gold accent (gallery / art world tone) */
  --nvf-color-accent: #c8a86e;
  --nvf-color-accent-soft: rgba(200, 168, 110, 0.12);
  --nvf-color-accent-hover: #d4b87e;

  /* Shadows — deeper for dark canvas */
  --nvf-shadow-card: 0 20px 60px rgba(0, 0, 0, 0.5);
  --nvf-shadow-card-hover: 0 30px 80px rgba(0, 0, 0, 0.6);

  /* Portfolio specifics */
  --nvf-portfolio-item-bg: transparent;
  --nvf-portfolio-content-bg: transparent;
  --nvf-portfolio-content-border: rgba(255, 255, 255, 0.06);

  /* Body */
  background-color: #0e0e0e;
  color: #e8e6e3;
  color-scheme: dark;
}

/* Gallery-dark header: transparent by default */
.nvf-gallery-dark .nvf-header {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.nvf-gallery-dark .nvf-header.is-scrolled {
  background: rgba(14, 14, 14, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Links in gallery dark */
.nvf-gallery-dark a {
  color: var(--nvf-color-accent, #c8a86e);
}

/* Portfolio cards on gallery dark — no visible card bg */
.nvf-gallery-dark .nvf-portfolio-card {
  background: transparent;
}

/* Artwork shadow on dark = more dramatic */
.nvf-gallery-dark .nvf-portfolio--artwork .nvf-portfolio-thumb {
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

.nvf-gallery-dark .nvf-portfolio--artwork .nvf-portfolio-card:hover .nvf-portfolio-thumb {
  box-shadow:
    0 16px 70px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Marquee on dark = ethereal */
.nvf-gallery-dark .nvf-marquee--stroke .nvf-marquee__text {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.2);
}

/* Horizontal gallery image bg on dark */
.nvf-gallery-dark .nvf-hscroll-gallery__item img {
  background: #1a1a1a;
}

/* Statement on gallery dark */
.nvf-gallery-dark .nvf-statement strong {
  color: var(--nvf-color-accent, #c8a86e);
}

/* Footer on gallery dark */
.nvf-gallery-dark .nvf-footer {
  background-color: #0a0a0a;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}


/* ═══════════════════════════════════════════════════════════
   7. EXHIBITION / TIMELINE
   Minimalist vertical timeline for exhibitions, awards, etc.
   Usage:
     <ol class="nvf-timeline">
       <li class="nvf-timeline__item">
         <time class="nvf-timeline__year">2024</time>
         <div class="nvf-timeline__body">
           <h3 class="nvf-timeline__title">Exhibition Name</h3>
           <p class="nvf-timeline__meta">Gallery, City</p>
         </div>
       </li>
     </ol>
   ═══════════════════════════════════════════════════════════ */

.nvf-timeline {
  list-style: none;
  padding: 0;
  margin: clamp(2rem, 5vw, 5rem) auto;
  max-width: 780px;
  border-left: 1px solid var(--nvf-color-border, #e2e8f0);
}

.nvf-timeline__item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0 clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1rem, 2vw, 1.5rem) 0;
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
}

.nvf-timeline__item::before {
  content: "";
  position: absolute;
  left: -4px;
  top: clamp(1.3rem, 2.5vw, 1.8rem);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nvf-color-accent, #4f46e5);
}

.nvf-timeline__item + .nvf-timeline__item {
  border-top: 1px solid var(--nvf-color-border, #e2e8f0);
}

.nvf-timeline__year {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--nvf-color-accent, #4f46e5);
  padding-top: 0.15em;
}

.nvf-timeline__title {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 0.25em;
}

.nvf-timeline__meta {
  font-size: 0.875rem;
  color: var(--nvf-color-slate, #64748b);
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════
   8. PROCESS / NUMBERED STEPS
   Like Orbius's numbered process (01, 02, 03, 04).
   Usage:
     <div class="nvf-steps">
       <div class="nvf-step">
         <span class="nvf-step__number">01</span>
         <h3 class="nvf-step__title">Consultation</h3>
         <p class="nvf-step__desc">Discussion about the project...</p>
       </div>
       ...
     </div>
   ═══════════════════════════════════════════════════════════ */

.nvf-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  padding: clamp(3rem, 6vw, 6rem) 0;
}

.nvf-step {
  position: relative;
  padding-top: 2.5rem;
}

.nvf-step__number {
  display: block;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--nvf-color-border, #e2e8f0);
  margin-bottom: 1rem;
  user-select: none;
}

.nvf-step__title {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}

.nvf-step__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--nvf-color-slate, #64748b);
  margin: 0;
}

/* Dark mode numbers */
.nvf-gallery-dark .nvf-step__number {
  color: rgba(255, 255, 255, 0.08);
}


/* ═══════════════════════════════════════════════════════════
   9. CLIP-PATH REVEAL ANIMATION (Orbius-style)
   Signature reveal effect: content slides in via clip-path.
   Far more cinematic than a simple opacity fade.
   Usage: data-nvf-anim="clip-reveal"      (right → left)
          data-nvf-anim="clip-reveal-left"  (left → right)
          data-nvf-anim="clip-reveal-up"    (bottom → top)
          data-nvf-anim="clip-reveal-down"  (top → bottom)
   ═══════════════════════════════════════════════════════════ */

[data-nvf-anim="clip-reveal"] {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transition: clip-path 0.8s cubic-bezier(.25, .46, .45, .94);
}
[data-nvf-anim="clip-reveal"].nvf-anim-visible {
  clip-path: inset(0 0 0 0);
}

[data-nvf-anim="clip-reveal-left"] {
  clip-path: inset(0 0 0 100%);
  opacity: 1;
  transition: clip-path 0.8s cubic-bezier(.25, .46, .45, .94);
}
[data-nvf-anim="clip-reveal-left"].nvf-anim-visible {
  clip-path: inset(0 0 0 0);
}

[data-nvf-anim="clip-reveal-up"] {
  clip-path: inset(100% 0 0 0);
  opacity: 1;
  transition: clip-path 0.8s cubic-bezier(.25, .46, .45, .94);
}
[data-nvf-anim="clip-reveal-up"].nvf-anim-visible {
  clip-path: inset(0 0 0 0);
}

[data-nvf-anim="clip-reveal-down"] {
  clip-path: inset(0 0 100% 0);
  opacity: 1;
  transition: clip-path 0.8s cubic-bezier(.25, .46, .45, .94);
}
[data-nvf-anim="clip-reveal-down"].nvf-anim-visible {
  clip-path: inset(0 0 0 0);
}

/* Clip-reveal with zoom: image starts scaled up, reveals + scales down */
[data-nvf-anim="clip-reveal-zoom"] {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transform: scale(1.15);
  transition:
    clip-path 0.8s cubic-bezier(.25, .46, .45, .94),
    transform 1.2s cubic-bezier(.25, .1, .14, .91);
}
[data-nvf-anim="clip-reveal-zoom"].nvf-anim-visible {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}


/* ═══════════════════════════════════════════════════════════
   10. SCALE-ON-SCROLL SECTION (Orbius-style)
   Sections zoom out from enlarged state as user scrolls.
   Applied via JS (nvf-scale-scroll). The JS sets the inline
   transform based on scroll progress; this CSS provides the
   initial state and smooth paint layer.
   Usage: add class "nvf-scale-scroll" + optional data attr
          data-nvf-scale-start="1.15" (default 1.12)
   ═══════════════════════════════════════════════════════════ */

.nvf-scale-scroll {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-origin: center center;
  overflow: hidden;
}

.nvf-scale-scroll > img,
.nvf-scale-scroll > video,
.nvf-scale-scroll > .nvf-scale-scroll__media {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}


/* ═══════════════════════════════════════════════════════════
   11. ENHANCED HOVER EFFECTS (portfolio / blog cards)
   Adopts Orbius's tighter easing for image zoom on hover:
   shorter duration + cushion curve for a snappy, premium feel.
   ═══════════════════════════════════════════════════════════ */

/* Image zoom on hover — snappier easing (Orbius: .785,.135,.15,.860) */
.nvf-portfolio-thumb-img,
.nvf-core-card__media img {
  transition: transform 0.5s cubic-bezier(.785, .135, .15, .86);
}

/* Portfolio cards: subtle lift + zoom */
.nvf-portfolio-card:hover .nvf-portfolio-thumb-img,
.nvf-core-card--portfolio:hover .nvf-core-card__media img {
  transform: scale(1.04);
}

/* Blog card image reveal on scroll (used with clip-reveal-zoom) */
.nvf-blog-card--reveal .nvf-post-thumbnail img {
  transition: transform 0.5s cubic-bezier(.785, .135, .15, .86);
}
.nvf-blog-card--reveal:hover .nvf-post-thumbnail img {
  transform: scale(1.06);
}

/* Overlay content entrance — spring-exit curve (Orbius carousel style) */
.nvf-card-hover-label,
.nvf-portfolio-overlay {
  transition:
    opacity 0.45s cubic-bezier(.165, .84, .44, 1),
    transform 0.45s cubic-bezier(.165, .84, .44, 1);
}


/* ═══════════════════════════════════════════════════════════
   13. CONTACT SPLIT — Two-column (image+social | form)
   Inspired by Orbius contact page layout
   ═══════════════════════════════════════════════════════════ */

.nvf-contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  max-width: var(--nvf-layout-max-width, 1440px);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 3vw, 2rem);
}

/* --- Left column: image + social links --- */
.nvf-contact-split__visual {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.nvf-contact-split__image {
  width: 100%;
  overflow: hidden;
  border-radius: var(--nvf-radius-lg, 16px);
}

.nvf-contact-split__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: inherit;
  aspect-ratio: 4 / 5;
  transition: transform 0.6s cubic-bezier(.25, .46, .45, .94);
}

.nvf-contact-split__image:hover img {
  transform: scale(1.03);
}

.nvf-contact-split__social-heading {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nvf-color-text-muted, #94a3b8);
  margin: 0 0 1rem;
}

.nvf-contact-split__social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nvf-contact-split__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--nvf-color-border, rgba(15, 23, 42, .12));
  color: var(--nvf-color-text, #111827);
  text-decoration: none;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.nvf-contact-split__social-link:hover {
  background: var(--nvf-color-accent, #111827);
  border-color: var(--nvf-color-accent, #111827);
  color: #fff;
  transform: translateY(-2px);
}

.nvf-contact-split__social-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* --- Right column: heading + form --- */
.nvf-contact-split__form-side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.nvf-contact-split__title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--nvf-color-heading, #111827);
  margin: 0;
}

.nvf-contact-split__subtitle {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--nvf-color-text-muted, #64748b);
  margin: 0;
  max-width: 42ch;
}

/* --- Underline-style form (Orbius mk-cf7-style-underline) --- */
.nvf-contact-split__form .wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 0;
}

.nvf-contact-split__form input[type="text"],
.nvf-contact-split__form input[type="email"],
.nvf-contact-split__form input[type="tel"],
.nvf-contact-split__form input[type="url"],
.nvf-contact-split__form textarea {
  width: 100%;
  padding: 14px 0;
  font-size: 1rem;
  font-family: inherit;
  color: var(--nvf-color-text, #111827);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--nvf-color-border, rgba(15, 23, 42, .18));
  border-radius: 0;
  outline: none;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  -webkit-appearance: none;
}

.nvf-contact-split__form input[type="text"]:focus,
.nvf-contact-split__form input[type="email"]:focus,
.nvf-contact-split__form input[type="tel"]:focus,
.nvf-contact-split__form input[type="url"]:focus,
.nvf-contact-split__form textarea:focus {
  border-bottom-color: var(--nvf-color-accent, #111827);
  box-shadow: 0 1px 0 0 var(--nvf-color-accent, #111827);
}

.nvf-contact-split__form input::placeholder,
.nvf-contact-split__form textarea::placeholder {
  color: var(--nvf-color-text-muted, #94a3b8);
  opacity: 1;
}

.nvf-contact-split__form textarea {
  min-height: 120px;
  resize: vertical;
}

.nvf-contact-split__form p {
  margin: 0 0 0.25rem;
}

.nvf-contact-split__form label {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nvf-color-text-muted, #64748b);
  display: block;
  margin-bottom: 0;
}

/* Submit button — pill, clean */
.nvf-contact-split__form input[type="submit"],
.nvf-contact-split__form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nvf-color-button-text, #fff);
  background: var(--nvf-color-button-bg, #111827);
  border: 1px solid var(--nvf-color-button-bg, #111827);
  border-radius: var(--nvf-btn-radius, 999px);
  cursor: pointer;
  margin-top: 1.5rem;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
  -webkit-appearance: none;
}

.nvf-contact-split__form input[type="submit"]:hover,
.nvf-contact-split__form .wpcf7-submit:hover {
  background: var(--nvf-color-button-bg-hover, #1f2937);
  border-color: var(--nvf-color-button-bg-hover, #1f2937);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(15, 23, 42, .15);
}

/* CF7 response messages */
.nvf-contact-split__form .wpcf7-response-output {
  margin: 1rem 0 0;
  padding: 12px 16px;
  font-size: 0.875rem;
  border-radius: 8px;
}

/* Dark mode support */
.nvf-dark .nvf-contact-split__form input[type="text"],
.nvf-dark .nvf-contact-split__form input[type="email"],
.nvf-dark .nvf-contact-split__form input[type="tel"],
.nvf-dark .nvf-contact-split__form input[type="url"],
.nvf-dark .nvf-contact-split__form textarea {
  color: var(--nvf-color-text, #e2e8f0);
  border-bottom-color: rgba(255, 255, 255, .15);
}

.nvf-dark .nvf-contact-split__form input::placeholder,
.nvf-dark .nvf-contact-split__form textarea::placeholder {
  color: rgba(255, 255, 255, .4);
}

.nvf-dark .nvf-contact-split__social-link {
  border-color: rgba(255, 255, 255, .15);
  color: var(--nvf-color-text, #e2e8f0);
}


/* ═══════════════════════════════════════════════════════════
   14. RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .nvf-marquee {
    --nvf-marquee-font-size: clamp(1.5rem, 8vw, 3rem);
  }

  .nvf-hero--fullscreen .nvf-hero__title {
    font-size: clamp(2rem, 10vw, 3.5rem);
  }

  .nvf-timeline__item {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .nvf-timeline__year {
    font-size: 0.8125rem;
  }

  .nvf-hscroll-gallery {
    --nvf-hsg-height: 260px;
  }

  /* Contact split → single column on mobile */
  .nvf-contact-split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .nvf-contact-split__image img {
    aspect-ratio: 16 / 9;
  }
}


/* ═══════════════════════════════════════════════════════════
   EXPERIENCE TIMELINE (centered, alternating)
   Used by the "Experience Timeline" pattern.
   Centered vertical line with alternating left/right entries.
   ═══════════════════════════════════════════════════════════ */

/* Header */
.nvf-exp-header {
  text-align: center;
  margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
}

.nvf-exp-header__label {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.5rem !important;
}
.nvf-exp-header__label:not(.has-text-color) {
  color: var(--nvf-color-accent, #e02b20);
}

/* Section heading — prominent display size */
.nvf-exp-header .wp-block-heading {
  font-size: clamp(2rem, 5vw, 3rem) !important;
}

/* Timeline container */
.nvf-exp-timeline {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 20px 0;
}

/* Center line — visible on both light and dark backgrounds */
.nvf-exp-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: var(--nvf-exp-line-color, rgba(255, 255, 255, 0.18));
}

/* Each entry (a wp-block-columns) */
.nvf-exp-timeline .wp-block-columns.nvf-exp-timeline__entry {
  position: relative;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  gap: clamp(2rem, 5vw, 4rem) !important;
}

/* Dot on timeline */
.nvf-exp-timeline .nvf-exp-timeline__entry::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1.2em;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--nvf-color-accent, #e02b20);
  z-index: 2;
  box-shadow:
    0 0 0 4px var(--nvf-exp-dot-ring, rgba(224, 43, 32, 0.2)),
    0 0 16px rgba(224, 43, 32, 0.12);
}

/* Info column headings */
.nvf-exp-timeline .nvf-exp-info h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem) !important;
  font-weight: 700;
  margin: 0 0 0.4em;
  line-height: 1.3;
}

.nvf-exp-timeline .nvf-exp-info .nvf-exp-company {
  font-size: 0.95rem !important;
  font-weight: 600;
  margin: 0 0 0.2em !important;
}

.nvf-exp-timeline .nvf-exp-info .nvf-exp-company a {
  text-decoration: none;
  color: inherit;
}

.nvf-exp-timeline .nvf-exp-info .nvf-exp-date {
  font-size: 0.85rem !important;
  margin: 0 !important;
  letter-spacing: 0.02em;
}
.nvf-exp-timeline .nvf-exp-info .nvf-exp-date:not(.has-text-color) {
  color: var(--nvf-color-accent, #e02b20);
}

/* Description column */
.nvf-exp-timeline .nvf-exp-desc p {
  font-size: 0.9375rem;
  line-height: 1.75;
  opacity: 0.78;
}

/* Alternating alignment */
.nvf-exp-timeline .nvf-exp-timeline__entry:nth-child(odd) .nvf-exp-info {
  text-align: right;
}
.nvf-exp-timeline .nvf-exp-timeline__entry:nth-child(even) .nvf-exp-info {
  text-align: left;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .nvf-exp-timeline::before {
    left: 16px;
  }

  .nvf-exp-timeline .wp-block-columns.nvf-exp-timeline__entry {
    flex-direction: column !important;
    padding-left: 36px;
  }

  .nvf-exp-timeline .nvf-exp-timeline__entry::before {
    left: 16px;
    top: 0.3em;
  }

  .nvf-exp-timeline .nvf-exp-timeline__entry:nth-child(odd) .nvf-exp-info,
  .nvf-exp-timeline .nvf-exp-timeline__entry:nth-child(even) .nvf-exp-info {
    text-align: left;
  }

  .nvf-exp-timeline .wp-block-column {
    flex-basis: 100% !important;
  }
}