/*
════════════════════════════════════════════════════════
  style.css — Remy Lapord portfolio
  Single stylesheet shared by all pages.

  SECTION MAP:
    1.  Fonts (Anybody variable family)
    2.  Reset & Base
    3.  Design Tokens
    4.  Shared Nav
    5.  Home Page
    6.  Photography Grid (Gridstack overview)
    7.  Photography Project (slideshow)
    8.  Direction & Design Grid (Gridstack overview)
    9.  Direction & Design Project (freeform canvas)
   10.  Info Page
   11.  Contact Page
   12.  Admin overrides (imported in admin pages only)
   13.  Responsive
════════════════════════════════════════════════════════
*/


/* ─────────────────────────────────────────────────────
   1. FONTS — shipped local files only
   Path: ../fonts/ (relative from css/)
───────────────────────────────────────────────────── */

@font-face {
  font-family: 'Anybody';
  src: url('../fonts/Anybody-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Anybody';
  src: url('../fonts/Anybody-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Anybody';
  src: url('../fonts/Anybody-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Anybody';
  src: url('../fonts/Anybody-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}


/* ─────────────────────────────────────────────────────
   2. RESET & BASE
───────────────────────────────────────────────────── */

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

html, body {
  overflow-x: clip;
}

body {
  font-family: var(--site-font, 'Anybody'), sans-serif;
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }


/* ─────────────────────────────────────────────────────
   3. DESIGN TOKENS
───────────────────────────────────────────────────── */

:root {
  --bg:      #f1ebe1;
  --text:    #000000;
  --muted:   #989898;
  --border:  #000000;

  /* Logo placeholder — swap this class when real logo arrives */
  --logo-w:  120px;
  --logo-h:  40px;
  --logo-mobile-w: 90px;
  --logo-mobile-h: 30px;
  --logo-bg: #c8c8c8;

  /* Typography */
  --size-xs:   13px;
  --size-sm:   15px;
  --size-nav:  17px;
  --size-md:   20px;
  --size-lg:   28px;
  --size-xl:   36px;
  --size-hero: 48px;

  /* Layout */
  --page-pad: 80px;
  --nav-h: 56px;
  --nav-pad-x: var(--page-pad);
  --nav-pad-y: 0px;
  --extra-top: 0px;      /* extra gap below nav, set per-page by JS from settings.navSpacing */
  --slide-buffer: 80px;  /* vertical breathing room in photo slideshow; set by JS from settings */
  --photo-project-top-buffer: clamp(44px, 5vh, 72px);
}


/* ─────────────────────────────────────────────────────
   4. SHARED NAV
   Persistent top nav on all inner pages.
   (Home page has its own full-viewport layout.)
───────────────────────────────────────────────────── */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nav-pad-y) var(--nav-pad-x);
  z-index: 100;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

/* ── Logo placeholder ──────────────────────────── */
/* SWAP: replace .logo-placeholder with <img class="site-logo-img" src="logo.png">
   and set --logo-w / --logo-h to real dimensions. */
.logo-placeholder {
  display: block;
  width: var(--logo-w);
  height: var(--logo-h);
  background: var(--logo-bg);
  flex-shrink: 0;
}
.site-logo-link { display:block; width:var(--logo-w); height:var(--logo-h); max-height:100%; flex-shrink:0; }
.site-logo-img { display:block; width:100%; height:100%; max-height:100%; object-fit:contain; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
}

.nav-links a {
  font-family: 'Anybody', sans-serif;
  font-weight: 400;
  font-size: var(--size-nav);
  letter-spacing: 0.17px;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.15s;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
}
.nav-links a.active { font-weight: 900; }

@media (max-width: 767px) {
  .logo-placeholder, .site-logo-link { width:var(--logo-mobile-w); height:var(--logo-mobile-h); }
  .nav-links a { font-size:var(--size-nav-mobile, var(--size-nav)); }
}

/* Spacer so page content clears the fixed nav + any per-page extra gap */
.nav-spacer { height: calc(var(--nav-h) + var(--extra-top)); }


/* ─────────────────────────────────────────────────────
   5. HOME PAGE
   Full-viewport layout matching frame 19:12.
   Left half: grey logo placeholder + numbered nav.
   Right half: editorial photo.
   Film strip across the mid-lower section.
───────────────────────────────────────────────────── */

.home-page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
}

/* Outer wrapper — receives computed height from JS after scaling */
.canvas-scale-outer {
  width: 100%;
  min-height: 100vh;
  overflow-x: clip;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* ── Freeform canvas ─── */
/* Width matches the admin editor reference (1440px).
   JS applies transform:scale() for narrower viewports,
   scaling the whole composition proportionally.          */
.home-canvas {
  position: relative;
  width: 1440px;
  min-height: 900px;
  transform-origin: top center;
  pointer-events: none;
  flex: 0 0 1440px;
}

.home-canvas-el {
  pointer-events: auto;
}

.home-canvas-el {
  position: absolute;
  text-decoration: none;  /* when used as <a> wrapper */
}

.home-canvas-el img,
.home-canvas-el video {
  display: block;
}

/* D&D canvas linked elements */
.dd-element[href] {
  text-decoration: none;
}


/* ─────────────────────────────────────────────────────
   6. PHOTOGRAPHY GRID  (Gridstack overview)
   Zero gutter between tiles, full-bleed thumbnails.
   Tiles link to individual photo project pages.
───────────────────────────────────────────────────── */

.grid-page {
  min-height: 100vh;
  /* No padding-top here — .nav-spacer inside each page handles the offset */
}

/* Override Gridstack defaults to remove all gaps */
.grid-stack {
  background: var(--bg);
}

.grid-stack > .grid-stack-item > .grid-stack-item-content {
  inset: 0 !important; /* removes default 2px margin Gridstack adds */
  overflow: hidden;
}
.grid-stack > .grid-stack-item { margin: 0 !important; }
.grid-stack > .grid-stack-item > .grid-stack-item-content { border: 0 !important; }

.grid-tile {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: block;
  background: #1a1a1a;
}

.grid-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform 0.4s ease;
}

.grid-tile:hover img {
  transform: scale(1.03);
}

/* Empty grid message */
.grid-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60vh;
  font-size: var(--size-nav);
  text-transform: uppercase;
  letter-spacing: 0.17px;
  color: var(--muted);
}


/* ─────────────────────────────────────────────────────
   7. PHOTOGRAPHY PROJECT — click-through slideshow
   Layout: three columns — left meta | center photo | right text.
   Clicking the center photo advances to the next slide.
───────────────────────────────────────────────────── */

.photo-project-page {
  min-height: 100vh;
  background: var(--bg);
}

.photo-project-header {
  padding: 56px var(--page-pad) 0;
}

.photo-project-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}

.photo-project-contact {
  font-size: var(--size-nav);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.17px;
  color: var(--muted);
}

.photo-project-instagram {
  font-size: var(--size-nav);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.17px;
  color: var(--muted);
  text-align: right;
}

.photo-project-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

/* "REMY SKYE LAPORD" heading on project pages */
.photo-project-name {
  font-family: 'Anybody', sans-serif;
  font-weight: 900;
  font-size: var(--size-hero);
  text-transform: uppercase;
  letter-spacing: -0.48px;
  line-height: 1;
  color: var(--text);
}

.photo-project-nav-right {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: var(--size-nav);
  text-transform: uppercase;
  letter-spacing: 0.17px;
}

.photo-project-nav-right a { color: var(--text); }
.photo-project-nav-right a:hover { color: var(--muted); }
.photo-project-nav-sep { color: var(--muted); }

/* ── Three-column body ─── */
/* 1fr auto 1fr gives equal flanks → viewer is always centered */
.photo-project-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  padding: var(--photo-project-top-buffer) var(--page-pad) 32px;
  align-items: start;
}

/* Left column — category label + project name */
.photo-project-sidebar-left {
  padding-top: 8px;
}

.photo-project-category {
  font-size: var(--size-nav);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.17px;
  color: var(--muted);
  margin-bottom: 4px;
  line-height: 1.4;
}

.photo-project-label {
  font-family: 'Anybody', sans-serif;
  font-weight: 900;
  font-size: var(--size-lg);
  text-transform: uppercase;
  letter-spacing: -0.28px;
  color: var(--text);
  line-height: 1;
}

/* Center column — slideshow viewer */
/* Height-constrained: images scale to fill available vertical space,
   width follows each image's own aspect ratio naturally. */
.photo-project-viewer {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.photo-project-slide-wrap {
  /* Height drives everything; --slide-buffer is breathing room (default 80px) */
  height: calc(100vh - var(--nav-h) - var(--extra-top) - var(--slide-buffer) - var(--photo-project-top-buffer));
  max-height: calc(100vh - var(--nav-h) - var(--extra-top) - var(--slide-buffer) - var(--photo-project-top-buffer));
  /* Width is set by JS from each image's aspect ratio; default 50vw prevents collapse on load */
  width: 50vw;
  max-width: min(80vw, 1400px);
  min-width: 200px;
  position: relative;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.photo-project-slide-wrap img {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
}

/* Fixed-width layout variant — width is constant, heights vary per image */
.photo-project-slide-wrap.layout-fixed-width {
  width: min(60vw, 900px) !important;
  height: auto !important;
  max-height: none !important;
  min-height: 200px;
  align-items: flex-start;
}
.photo-project-slide-wrap.layout-fixed-width img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}


/* Click hint overlay */
.photo-project-click-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.photo-project-slide-wrap:hover .photo-project-click-hint {
  opacity: 1;
}

.photo-project-click-hint span {
  font-size: var(--size-sm);
  text-transform: uppercase;
  letter-spacing: 0.17px;
  color: #fff;
  background: rgba(0,0,0,0.45);
  padding: 6px 14px;
}

/* Slide counter */

/* Right column — description */
.photo-project-sidebar-right {
  padding-top: 8px;
  text-align: right;
}

.photo-project-description {
  font-size: var(--size-nav);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.17px;
  color: var(--muted);
  line-height: 1.5;
}


/* ─────────────────────────────────────────────────────
   8. DIRECTION & DESIGN GRID  (same Gridstack system)
───────────────────────────────────────────────────── */

/* Inherits all .grid-page and .grid-tile styles from §6 */


/* ─────────────────────────────────────────────────────
   9. DIRECTION & DESIGN PROJECT — freeform canvas
   Elements positioned absolutely, can overlap.
   Container is a fixed-size canvas that scrolls.
───────────────────────────────────────────────────── */

.dd-project-page {
  background: var(--bg);
  min-height: 100vh;
}

.dd-canvas {
  position: relative;
  width: 1440px;
  min-height: 900px;
  transform-origin: top center;
  flex: 0 0 1440px;
  /* Elements placed inside via absolute positioning; JS scales the whole composition */
}
.dd-project-bar { padding: 24px var(--page-pad) 0; display:flex; justify-content:space-between; align-items:baseline; gap:24px; }
.dd-project-bar .photo-project-label { font-size:28px; }
.dd-project-back { font-size:15px; text-transform:uppercase; letter-spacing:.17px; color:var(--muted); white-space:nowrap; }
.project-back-link { font-size:15px; text-transform:uppercase; letter-spacing:.17px; color:var(--muted); white-space:nowrap; text-decoration:none; display:block; margin-bottom:12px; }
.project-error { margin: 24px var(--page-pad); color: #8b1a1a; font-size: var(--size-sm); text-transform: uppercase; }

.dd-element {
  position: absolute;
}

.dd-element img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dd-element-text {
  font-size: var(--size-nav);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.17px;
  color: var(--text);
  line-height: 1.5;
}

.dd-element-video {
  width: 100%;
  height: 100%;
}

.dd-element-video video,
.dd-element-video iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}


/* ─────────────────────────────────────────────────────
   10. CONTACT PAGE
   Based on frame 19:12 contact section.
───────────────────────────────────────────────────── */

.contact-page {
  position: relative;
  background: var(--bg);
  min-height: 100vh;
  /* No padding-top here — .nav-spacer inside handles the offset */
  overflow: hidden;
}

.contact-bg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0.35;
}

.contact-body {
  position: relative;
  z-index: 1;
  padding: 80px var(--page-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  min-height: calc(100vh - var(--nav-h));
}

.contact-num {
  font-family: 'Anybody', sans-serif;
  font-weight: 400;
  font-size: var(--size-lg);
  text-transform: uppercase;
  letter-spacing: 0.25px;
  color: var(--text);
  display: block;
  margin-bottom: 4px;
}

.contact-heading {
  font-family: 'Anybody', sans-serif;
  font-weight: 400;
  font-size: var(--size-xl);
  text-transform: uppercase;
  letter-spacing: 0.36px;
  color: var(--text);
  margin-bottom: 48px;
}

.contact-field {
  margin-bottom: 28px;
}

.contact-field-label {
  font-size: var(--size-sm);
  text-transform: uppercase;
  letter-spacing: 0.17px;
  color: var(--muted);
  margin-bottom: 6px;
}

.contact-field-value {
  font-size: var(--size-nav);
  text-transform: uppercase;
  letter-spacing: 0.17px;
  color: var(--text);
}

.contact-field-value a:hover { color: var(--muted); }

.contact-photo {
  width: 100%;
  max-width: 512px;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center;
}


/* ─────────────────────────────────────────────────────
   12. RESPONSIVE
───────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  :root { --page-pad: 40px; }
  /* 1fr auto 1fr stays — flanks shrink gracefully */
  .photo-project-slide-wrap { max-width: min(70vw, 900px); }
}

@media (max-width: 768px) {
  :root { --page-pad: 24px; --nav-h: 50px; }

  .nav-links { gap: 20px; }
  .nav-links a { font-size: 13px; }

  /* Home */
  .home-photo { display: none; }

  /* Photo project — stack vertically on mobile */
  .photo-project-body {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .photo-project-sidebar-right { text-align: left; }
  .photo-project-slide-wrap {
    height: auto;
    max-height: 70vh;
    width: 100%;
    max-width: 100%;
  }

  .photo-project-slide-wrap img {
    height: auto;
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
  }

  /* Contact */
  .contact-body { grid-template-columns: 1fr; gap: 40px; min-height: calc(100vh - var(--nav-h) - var(--extra-top)); }
}

@media (max-width: 480px) {
  :root { --page-pad: 16px; }
  .photo-project-name { font-size: 32px; }
}