/* ============================================================
   Victor Lander — Custom Portfolio Design System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* ── Variables ──────────────────────────────────────────── */
:root {
  --bg:        #0c0c0c;
  --bg-2:      #161616;
  --text:      #d8d8d8;
  --muted:     #555;
  --border:    rgba(255,255,255,0.08);
  --white:     #ffffff;
  --font:      'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --max-w:     740px;
}

/* ── Base ───────────────────────────────────────────────── */
html { background: var(--bg) !important; }

body {
  font-family: var(--font) !important;
  background:  var(--bg) !important;
  color:       var(--text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after { box-sizing: border-box; }

/* ── Navigation ─────────────────────────────────────────── */
.site-header {
  background:      rgba(12,12,12,0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom:   1px solid var(--border) !important;
  font-family:     var(--font) !important;
}

.nav-container a,
.gallery-title a,
.page-title a {
  font-family:    var(--font) !important;
  font-size:      11px !important;
  font-weight:    500 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color:          var(--muted) !important;
  transition:     color 0.2s !important;
  text-decoration: none !important;
}

.nav-container a:hover,
.nav-container a.active,
.gallery-title a.active { color: var(--white) !important; }

.logo-wrap a,
.logo a,
.logo-text a {
  font-family:    var(--font) !important;
  font-size:      14px !important;
  font-weight:    600 !important;
  letter-spacing: 0.04em !important;
  color:          var(--white) !important;
  text-decoration: none !important;
}

/* Mobile nav */
.responsive-nav {
  background:  var(--bg) !important;
  font-family: var(--font) !important;
  border-right: 1px solid var(--border) !important;
}

.responsive-nav a {
  font-family:    var(--font) !important;
  font-size:      13px !important;
  font-weight:    500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color:          var(--muted) !important;
}

.responsive-nav a:hover,
.responsive-nav a.active { color: var(--white) !important; }

.hamburger i { background: var(--white) !important; }

/* Social icons */
.social svg path,
.pf-nav-social svg path { fill: var(--muted) !important; transition: fill 0.2s !important; }
.social a:hover svg path,
.pf-nav-social a:hover svg path { fill: var(--white) !important; }

/* ── Page shell ─────────────────────────────────────────── */
.site-wrap,
.site-container,
.site-content,
.page-container,
.page,
.page-content { background: var(--bg) !important; }

section.back-to-top { display: none !important; }

.back-to-top-fixed {
  background:    rgba(255,255,255,0.06) !important;
  border-radius: 50% !important;
  transition:    background 0.2s !important;
}
.back-to-top-fixed:hover { background: rgba(255,255,255,0.14) !important; }
.icon-back-to-top path  { fill: var(--white) !important; }

.site-footer {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
  padding:    40px 5% !important;
  font-family: var(--font) !important;
  font-size:  12px !important;
  color:      var(--muted) !important;
}

.header-placeholder { background: var(--bg) !important; }

/* =============================================================
   NUCLEAR CDN RESET
   These rules fire immediately (no JS wrapper needed) and
   defeat any project-specific CDN stylesheet overrides.
   Specificity = 2 classes → later specific rules still win.
   ============================================================= */

/* Backgrounds */
.page.standard-modules,
.page-content,
.project-canvas-container,
#project-canvas,
#project-modules { background: var(--bg) !important; }

/* Kill CDN masthead on project pages */
.masthead.js-masthead-fixed { display: none !important; }

/* ALL text module typography reset */
.project-module-text .rich-text,
.project-module-text .module-text {
  font-family: var(--font) !important;
  color:       var(--text) !important;
  text-align:  left !important;
}

.project-module-text .rich-text *,
.project-module-text .module-text * {
  font-family: var(--font) !important;
  color:       var(--text) !important;
  text-align:  left !important;
}

/* Kill any inline font sizes on child spans (reset to inherit) */
.project-module-text span { font-size: inherit !important; }

/* Override CDN's `.align-center` utility everywhere in content */
#project-canvas .align-center,
#project-canvas .align-center .rich-text,
#project-canvas .align-center .module-text,
#project-canvas .align-center .rich-text *,
#project-canvas .align-center .module-text * { text-align: left !important; }

/* Links inside any module text */
.project-module-text a {
  color: var(--white) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* =============================================================
   HOMEPAGE — font override for revealed project titles
   ============================================================= */

/* The overlay label that appears on thumbnail hover */
.project-cover .title,
.project-cover .title.preserve-whitespace,
.gallery-panel .title,
.panel .title,
.project-caption,
.gallery-caption,
.cover-info,
.cover-title {
  font-family:    var(--font) !important;
  font-size:      13px !important;
  font-weight:    500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

/* Masthead text if shown */
.masthead .main-text,
.masthead h1,
.masthead p {
  font-family: var(--font) !important;
}

/* =============================================================
   PROJECT PAGES  –  Hero
   ============================================================= */

.vl-hero-module {
  position:  relative !important;
  width:     100% !important;
  max-width: none !important;
  margin:    0 !important;
  padding:   0 !important;
  float:     none !important;
  clear:     both !important;
  background: #000 !important;
  overflow:  hidden !important;
}

.vl-hero-module img.e2e-site-project-module-image {
  display:        block !important;
  width:          100% !important;
  height:         auto !important;
  max-height:     85vh !important;
  object-fit:     cover !important;
  padding-bottom: 0 !important;
}

/* Title overlay */
.vl-project-hero-title {
  position:   absolute !important;
  bottom:     0 !important;
  left:       0 !important;
  right:      0 !important;
  padding:    120px 60px 48px !important;
  background: linear-gradient(to top,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.35) 55%,
    transparent 100%) !important;
  z-index: 10 !important;
}

.vl-back-link {
  font-family:    var(--font) !important;
  font-size:      10px !important;
  font-weight:    500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color:          rgba(255,255,255,0.45) !important;
  text-decoration: none !important;
  margin-bottom:  18px !important;
  display:        block !important;
  transition:     color 0.2s !important;
}
.vl-back-link:hover { color: var(--white) !important; }

.vl-project-hero-title h1 {
  font-family:    var(--font) !important;
  font-size:      clamp(30px, 5vw, 62px) !important;
  font-weight:    300 !important;
  letter-spacing: -0.025em !important;
  color:          var(--white) !important;
  margin:         0 !important;
  line-height:    1.08 !important;
}

/* =============================================================
   PROJECT PAGES  –  Content area
   ============================================================= */

.vl-project-content { padding-bottom: 100px !important; }

/* ── Kill ALL inherited Adobe Portfolio alignment & font inline styles ── */
.vl-project-content *[style*="text-align"] { text-align: left !important; }
.vl-project-content *[data-style-network*="text-align"] { text-align: left !important; }
.vl-project-content .align-center { text-align: left !important; }

/* Reset inline font-family overrides */
.vl-project-content span[style*="font-family"],
.vl-project-content span[data-style-network*="font-family"] {
  font-family: var(--font) !important;
}

/* Reset inline color overrides so white text reads on dark bg */
.vl-project-content span[data-style-network*="color:#ffffff"],
.vl-project-content span[style*="color:#ffffff"],
.vl-project-content span[style*="color: rgb(255"] {
  color: var(--text) !important;
}

/* Reset inline font-size on spans — we set size via JS classes */
.vl-project-content span[style*="font-size"],
.vl-project-content span[data-style-network*="font-size"] {
  font-size: inherit !important;
}

/* ── LEAD TEXT  (first text block after hero) ─────────────── */
.vl-lead-text {
  max-width: 800px !important;
  width:     90% !important;
  margin:    0 auto !important;
  padding:   64px 0 56px !important;
  float:     none !important;
  clear:     both !important;
}

.vl-lead-text .rich-text,
.vl-lead-text .module-text {
  font-family: var(--font) !important;
  font-size:   20px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  color:       var(--text) !important;
  text-align:  left !important;
}

.vl-lead-text .rich-text div,
.vl-lead-text .module-text div {
  font-family:   var(--font) !important;
  font-size:     20px !important;
  font-weight:   300 !important;
  line-height:   1.7 !important;
  color:         var(--text) !important;
  margin-bottom: 1em !important;
  text-align:    left !important;
}

.vl-lead-text .rich-text span,
.vl-lead-text .module-text span {
  font-family: var(--font) !important;
  font-size:   inherit !important;
  color:       inherit !important;
}

.vl-lead-text a { color: var(--white) !important; text-decoration: underline !important; text-underline-offset: 3px !important; }

/* ── SECTION LABEL  (bold short heading modules) ────────────── */
.vl-section-label {
  max-width: 800px !important;
  width:     90% !important;
  margin:    48px auto 0 !important;
  padding:   20px 0 0 !important;
  float:     none !important;
  clear:     both !important;
  border-top: 1px solid var(--border) !important;
}

.vl-section-label .rich-text,
.vl-section-label .module-text {
  font-family:    var(--font) !important;
  font-size:      10px !important;
  font-weight:    600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color:          var(--muted) !important;
  text-align:     left !important;
}

.vl-section-label .rich-text * {
  font-family:    var(--font) !important;
  font-size:      10px !important;
  font-weight:    600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color:          var(--muted) !important;
  font-style:     normal !important;
  text-align:     left !important;
}

/* ── BODY TEXT  (regular text modules) ──────────────────────── */
.vl-body-text {
  max-width: 800px !important;
  width:     90% !important;
  margin:    0 auto !important;
  padding:   32px 0 8px !important;
  float:     none !important;
  clear:     both !important;
}

.vl-body-text .rich-text,
.vl-body-text .module-text {
  font-family: var(--font) !important;
  font-size:   15px !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  color:       var(--text) !important;
  text-align:  left !important;
}

.vl-body-text .rich-text div,
.vl-body-text .module-text div {
  font-family:   var(--font) !important;
  font-size:     15px !important;
  line-height:   1.8 !important;
  color:         var(--text) !important;
  margin-bottom: 1em !important;
  text-align:    left !important;
}

.vl-body-text .rich-text span,
.vl-body-text .module-text span {
  font-family: var(--font) !important;
  font-size:   inherit !important;
  color:       inherit !important;
}

.vl-body-text a  { color: var(--white) !important; text-decoration: underline !important; text-underline-offset: 3px !important; }
.vl-body-text em { font-style: italic !important; }

/* ── IMAGE MODULES (non-hero) ────────────────────────────────── */
.vl-content-image {
  width:   100% !important;
  margin:  3px 0 !important;
  float:   none !important;
  clear:   both !important;
  padding: 0 !important;
}

.vl-content-image img {
  display: block !important;
  width:   100% !important;
  height:  auto !important;
}

/* ── SPLIT SECTION  (lead text | image side by side) ──────── */
.vl-split {
  display:               grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:                   0 !important;
  width:                 100% !important;
  margin:                0 !important;
  align-items:           stretch !important;
}

.vl-split-text {
  padding:    64px 60px 56px !important;
  display:    flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.vl-split-text .rich-text,
.vl-split-text .module-text {
  font-family: var(--font) !important;
  font-size:   18px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  color:       var(--text) !important;
  text-align:  left !important;
}

.vl-split-text .rich-text div,
.vl-split-text .module-text div {
  font-family:   var(--font) !important;
  font-size:     18px !important;
  font-weight:   300 !important;
  line-height:   1.7 !important;
  color:         var(--text) !important;
  margin-bottom: 0.9em !important;
  text-align:    left !important;
}

.vl-split-text .rich-text span,
.vl-split-text .module-text span {
  font-family: var(--font) !important;
  font-size:   inherit !important;
  color:       inherit !important;
}

.vl-split-text a { color: var(--white) !important; text-decoration: underline !important; text-underline-offset: 3px !important; }

.vl-split-image {
  overflow: hidden !important;
  min-height: 400px !important;
}

.vl-split-image .project-module-image {
  width:   100% !important;
  height:  100% !important;
  margin:  0 !important;
  padding: 0 !important;
}

.vl-split-image img {
  display:    block !important;
  width:      100% !important;
  height:     100% !important;
  object-fit: cover !important;
}

@media (max-width: 768px) {
  .vl-split {
    grid-template-columns: 1fr !important;
  }
  .vl-split-text { padding: 40px 5% !important; }
  .vl-split-image { min-height: 260px !important; }
}

/* ── IMAGE PAIR  (two images side by side) ─────────────────── */
.vl-image-pair {
  display:               grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:                   3px !important;
  width:                 100% !important;
  margin:                3px 0 !important;
}

.vl-image-pair .project-module-image {
  width:   100% !important;
  margin:  0 !important;
  padding: 0 !important;
  float:   none !important;
}

.vl-image-pair img {
  display:    block !important;
  width:      100% !important;
  height:     100% !important;
  object-fit: cover !important;
}

@media (max-width: 600px) {
  .vl-image-pair { grid-template-columns: 1fr !important; }
}

/* ── CAPTION MODULE ──────────────────────────────────────────── */
.vl-project-content .project-module-caption {
  max-width: 800px !important;
  width:     90% !important;
  margin:    0 auto !important;
  padding:   10px 0 28px !important;
  float:     none !important;
  clear:     both !important;
}

.vl-project-content .project-module-caption .rich-text,
.vl-project-content .project-module-caption .module-caption {
  font-family:    var(--font) !important;
  font-size:      12px !important;
  color:          var(--muted) !important;
  letter-spacing: 0.02em !important;
  text-align:     left !important;
}

/* ── EMBED MODULE ────────────────────────────────────────────── */
.vl-project-content .project-module-embed {
  max-width: 800px !important;
  width:     90% !important;
  margin:    48px auto !important;
  padding:   0 !important;
  float:     none !important;
  clear:     both !important;
}

.vl-project-content .project-module-embed .embed-dimensions {
  max-width: 100% !important;
}

/* ── MEDIA COLLECTION (image grid) ──────────────────────────── */
.vl-project-content .project-module-media_collection {
  width:   100% !important;
  margin:  3px 0 !important;
  padding: 0 !important;
  float:   none !important;
  clear:   both !important;
}

.grid--main { gap: 3px !important; }

/* ── CREDITS / FALLBACK text module ─────────────────────────── */
.vl-project-content .project-module-text:not(.vl-lead-text):not(.vl-section-label):not(.vl-body-text) {
  max-width: 800px !important;
  width:     90% !important;
  margin:    0 auto !important;
  padding:   32px 0 8px !important;
  float:     none !important;
  clear:     both !important;
}

/* =============================================================
   ABOUT PAGE
   ============================================================= */

.vl-about-layout {
  display:               grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:                   80px !important;
  max-width:             1140px !important;
  margin:                80px auto !important;
  padding:               0 5% !important;
  align-items:           start !important;
}

@media (max-width: 800px) {
  .vl-about-layout {
    grid-template-columns: 1fr !important;
    gap:    40px !important;
    margin: 48px auto !important;
  }
}

.vl-about-image .project-module-image,
.vl-about-image { width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; }
.vl-about-image img { display: block !important; width: 100% !important; height: auto !important; }

.vl-about-bio { font-family: var(--font) !important; padding-top: 8px !important; }

.vl-about-bio-label {
  font-size:      10px !important;
  font-weight:    600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color:          var(--muted) !important;
  margin:         0 0 36px !important;
  display:        block !important;
}

.vl-about-bio .project-module-text {
  max-width: 100% !important;
  width:     100% !important;
  margin:    0 !important;
  padding:   0 !important;
  float:     none !important;
  clear:     both !important;
}

.vl-about-bio .rich-text,
.vl-about-bio .module-text {
  font-family: var(--font) !important;
  font-size:   15px !important;
  line-height: 1.85 !important;
  color:       var(--text) !important;
}

.vl-about-bio .rich-text div,
.vl-about-bio .module-text div {
  font-family:   var(--font) !important;
  font-size:     15px !important;
  line-height:   1.85 !important;
  color:         var(--text) !important;
  margin-bottom: 1em !important;
  text-align:    left !important;
}

.vl-about-bio .rich-text span  { font-family: var(--font) !important; color: inherit !important; }
.vl-about-bio .rich-text a,
.vl-about-bio .module-text a   { color: var(--white) !important; text-decoration: underline !important; text-underline-offset: 3px !important; }

.vl-about-bio .rich-text,
.vl-about-bio .module-text,
.vl-about-bio .rich-text div,
.vl-about-bio .module-text div { text-align: left !important; }

/* =============================================================
   CONTACT PAGE
   ============================================================= */

.vl-contact-layout {
  max-width: 560px !important;
  margin:    80px auto !important;
  padding:   0 5% 100px !important;
}

.vl-contact-label {
  font-size:      10px !important;
  font-weight:    600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color:          var(--muted) !important;
  margin:         0 0 40px !important;
  display:        block !important;
}

.vl-contact-layout .project-module-text {
  max-width: 100% !important;
  width:     100% !important;
  margin:    0 0 48px !important;
  padding:   0 !important;
  float:     none !important;
  clear:     both !important;
}

.vl-contact-layout .rich-text,
.vl-contact-layout .module-text {
  font-family: var(--font) !important;
  font-size:   18px !important;
  line-height: 1.75 !important;
  color:       var(--text) !important;
}

.vl-contact-layout .rich-text div,
.vl-contact-layout .module-text div {
  font-family:   var(--font) !important;
  font-size:     18px !important;
  line-height:   1.75 !important;
  color:         var(--text) !important;
  margin-bottom: 0.6em !important;
  text-align:    left !important;
}

.vl-contact-layout .rich-text span  { font-family: var(--font) !important; color: inherit !important; }
.vl-contact-layout .rich-text a,
.vl-contact-layout .module-text a   { color: var(--white) !important; text-decoration: underline !important; text-underline-offset: 3px !important; }

.vl-contact-layout .project-module-form {
  max-width: 100% !important;
  width:     100% !important;
  margin:    0 !important;
  padding:   0 !important;
  float:     none !important;
}

.vl-contact-layout .form-input    { margin-bottom: 28px !important; }

.vl-contact-layout label {
  display:        block !important;
  font-family:    var(--font) !important;
  font-size:      10px !important;
  font-weight:    600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color:          var(--muted) !important;
  margin-bottom:  10px !important;
}

.vl-contact-layout input[type="text"],
.vl-contact-layout textarea {
  width:         100% !important;
  background:    var(--bg-2) !important;
  border:        1px solid var(--border) !important;
  border-radius: 3px !important;
  padding:       14px 16px !important;
  font-family:   var(--font) !important;
  font-size:     15px !important;
  color:         var(--text) !important;
  outline:       none !important;
  transition:    border-color 0.2s !important;
  box-sizing:    border-box !important;
  -webkit-appearance: none !important;
}

.vl-contact-layout input[type="text"]:focus,
.vl-contact-layout textarea:focus { border-color: rgba(255,255,255,0.26) !important; }

.vl-contact-layout textarea { min-height: 140px !important; resize: vertical !important; }

.vl-contact-layout input::placeholder,
.vl-contact-layout textarea::placeholder { color: var(--muted) !important; }

.vl-contact-layout .js-submit,
.vl-contact-layout .submit-button {
  display:        inline-block !important;
  background:     var(--white) !important;
  color:          #0c0c0c !important;
  font-family:    var(--font) !important;
  font-size:      11px !important;
  font-weight:    600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding:        14px 36px !important;
  border:         none !important;
  border-radius:  2px !important;
  cursor:         pointer !important;
  transition:     opacity 0.2s !important;
  margin-top:     8px !important;
}

.vl-contact-layout .js-submit:hover,
.vl-contact-layout .submit-button:hover { opacity: 0.8 !important; }

.vl-contact-layout .contact-form-sent {
  font-family: var(--font) !important;
  font-size:   16px !important;
  color:       var(--text) !important;
  padding:     20px 0 !important;
}

/* =============================================================
   LIGHTBOX
   ============================================================= */
.lightbox-container, .lightbox-caption { font-family: var(--font) !important; }

/* Lazy-loaded image placeholder */
.js-lazy[data-src] { display: block !important; background-color: var(--bg-2) !important; }