/* Josh Magalong — portfolio shell
   Mirrors a classic Squarespace "strip gallery" layout:
   bold wordmark left, small bold nav right of it, full-bleed horizontal photo strip. */

:root {
  --ink: #000;
  --text: #111;
  --muted: #999;
  --rule: #e6e6e6;
  --ph-a: #ececec;
  --ph-b: #e2e2e2;
  --ph-label: #a8a8a8;
  --arrow-bg: rgba(0, 0, 0, 0.1);
  --strip-h: 600px;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: #fff;
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

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

.site-header {
  display: flex;
  align-items: flex-start;
  gap: 21px;
  padding: 36px 30px 30px;
  position: relative;
  z-index: 20;
}

.logo {
  margin: 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}

.main-nav { padding-top: 10px; margin-bottom: -10px; }

.main-nav > ul { display: flex; flex-wrap: wrap; }

.main-nav > ul > li { position: relative; margin-left: 25px; }
.main-nav > ul > li:first-child { margin-left: 0; }

.main-nav a {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.04em;
  padding: 7px 0;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.1s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible { color: var(--muted); }

/* Folder dropdowns — toggled open by clicking the parent (e.g. Services) */
.subnav {
  display: none;
  position: absolute;
  top: 36px;
  left: -12.5px;
  background: #fff;
  border: 1px solid var(--rule);
  padding: 6.25px 0;
  z-index: 999;
}

.folder.open .subnav { display: block; }
.folder.open > a { color: var(--muted); }

.subnav a {
  display: block;
  padding: 3.125px 12.5px;
  line-height: normal;
  white-space: nowrap;
}

/* ---------- Strip gallery ---------- */

.strip {
  position: relative;
  height: var(--strip-h);
  overflow: hidden;
  user-select: none;
}

.strip-track {
  display: flex;
  height: 100%;
  will-change: transform;
}

.strip-track.animate {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide {
  height: 100%;
  flex: 0 0 auto;
  cursor: pointer;
}

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

.placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ph-a);
  color: var(--ph-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.slide:nth-child(even) .placeholder { background: var(--ph-b); }

.strip-arrow {
  position: absolute;
  top: 50%;
  width: 42px;
  height: 60px;
  margin-top: -30px;
  border: 0;
  padding: 0;
  background: var(--arrow-bg);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 2;
}

.strip-arrow:hover { background: rgba(0, 0, 0, 0.25); }
.strip-arrow.prev { left: 0; }
.strip-arrow.next { right: 0; }
.strip-arrow svg { width: 12px; height: 22px; }

/* Page "stage": on Recent Work the header + carousel sit centered in the window as one block.
   Every page (and every screen size) uses the same top offset, so the header never moves between
   pages and content starts exactly where the carousel does. site.js measures the real header and
   sets --stage-h / --page-top; the values below are only a fallback. */
:root {
  --stage-h: max(240px, min(70vh, 800px, calc(90vh - 102px), 95vw));
  --page-top: max(0px, calc((100vh - 102px - var(--stage-h)) / 2));
}

body { padding-top: var(--page-top); }

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  /* Phones: same header as desktop, scaled with the screen width so name + menu fit on one line
     (even on 320px-wide phones). */
  .site-header { align-items: center; gap: clamp(8px, 3vw, 14px); padding: 22px 20px 20px; }
  .logo { font-size: clamp(13px, 4.3vw, 17px); line-height: 22px; }
  .main-nav { padding-top: 0; margin-bottom: 0; }
  .main-nav > ul { flex-wrap: nowrap; }
  .main-nav > ul > li { margin-left: clamp(8px, 3vw, 14px); }
  .main-nav a { font-size: clamp(9px, 2.8vw, 10.5px); letter-spacing: 0.03em; white-space: nowrap; }
  .subnav { left: auto; right: -12.5px; }   /* keep the Services dropdown on screen */

  /* Same carousel as desktop, smaller arrows. */
  .strip-arrow { width: 30px; height: 44px; margin-top: -22px; }
  .strip-arrow svg { width: 9px; height: 16px; }
}

/* ---------- Campaign tiles (Branding / Events) ---------- */

/* One row of tiles that scrolls sideways, with black "more" arrows underneath (added by site.js). Tile width = a 5-across row (4-across under 1200px), so tiles stay small.
   The row starts under the header and runs to the right edge of the window. */
.tiles-page {
  --tile-w: calc((100vw - 60px - 80px) / 5);
  --tile-gap: 20px;
  position: relative;
  padding: 0 0 80px;
}

@media (max-width: 1200px) {
  .tiles-page { --tile-w: calc((100vw - 60px - 60px) / 4); }
}

.tiles {
  display: flex;
  gap: var(--tile-gap);
  padding: 0 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 30px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.tiles::-webkit-scrollbar { display: none; }

.tiles > li { flex: 0 0 var(--tile-w); scroll-snap-align: start; }

/* "There's more" arrows: plain black chevrons under the row, right-aligned. */
.tile-nav {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  padding: 14px 18px 0 30px;
}

.tile-nav[hidden] { display: none; }

.tile-arrow {
  width: 40px;
  height: 36px;
  border: 0;
  padding: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease, color 0.1s ease;
}

.tile-arrow svg { width: 12px; height: 22px; }
.tile-arrow:hover { color: var(--muted); }
.tile-arrow.off { opacity: 0; cursor: default; }

.tile { display: block; }

.tile-img {
  display: block;
  height: auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ph-a);
}

.tile-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}

a.tile:hover .tile-img img { opacity: 0.85; }

.tile-name {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- Campaign page ---------- */

.campaign { padding: 0 30px 80px; }

.campaign-head {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 24px;
}

.campaign-head .back,
.campaign-head h2 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.campaign-head .back { color: var(--muted); transition: color 0.1s ease; }
.campaign-head .back:hover { color: var(--ink); }

/* Masonry columns keep each photo's own shape instead of cropping it */
.photo-grid { columns: 3; column-gap: 12px; }
.photo-grid li { break-inside: avoid; margin-bottom: 12px; }
.grid-photo { display: block; cursor: zoom-in; }
.grid-photo img { display: block; width: 100%; height: auto; background: var(--ph-a); transition: opacity 0.2s ease; }
.grid-photo:hover img { opacity: 0.85; }

/* ---------- Full-screen viewer ---------- */

.lightbox-open, .lightbox-open body { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 70px;
}

.lightbox[hidden] { display: none; }

.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: pointer;
}

.lightbox-close {
  position: absolute;
  top: 12px;
  right: 18px;
  border: 0;
  background: none;
  font: 300 34px/1 var(--font);
  color: var(--ink);
  cursor: pointer;
  padding: 4px 8px;
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  margin-top: -30px;
  width: 50px;
  height: 60px;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-arrow svg { width: 12px; height: 22px; }
.lightbox-arrow.prev { left: 10px; }
.lightbox-arrow.next { right: 10px; }
.lightbox-close:hover, .lightbox-arrow:hover { color: var(--muted); }

.lightbox-count {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
}

@media (max-width: 900px) {
  .tiles-page { --tile-w: calc((100vw - 60px - 40px) / 3); }
}

@media (max-width: 767px) {
  /* Phones: same layouts as desktop, scaled down. */
  .campaign { padding: 0 20px 60px; }
  .campaign-head { gap: 16px; margin-bottom: 16px; }
  .campaign-head .back, .campaign-head h2 { font-size: 10px; }
  .tiles-page { --tile-w: 40vw; --tile-gap: 12px; padding: 0 0 60px; }
  .tiles { padding: 0 20px; scroll-padding-left: 20px; }
  .tile-name { font-size: 9.5px; margin-top: 8px; }
  .tile-nav { padding: 8px 8px 0 20px; }
  .photo-grid { column-gap: 6px; }
  .photo-grid li { margin-bottom: 6px; }
  .lightbox { padding: 50px 36px; }
  .lightbox-arrow { width: 32px; }
  .lightbox-arrow.prev { left: 2px; }
  .lightbox-arrow.next { right: 2px; }
}

/* ---------- Weddings inquiry: one photo + contact details ---------- */

.inquiry {
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 0 30px 30px;
}

/* The photo fills exactly the left half of the page and is cropped to fit (centre kept).
   Its height matches the Recent Work carousel (same formula as sizeSlides() in site.js; header is 102px). */
.inquiry-photo { flex: 0 0 50%; min-width: 0; }

.inquiry-photo img {
  display: block;
  width: 100%;
  height: var(--stage-h);
  object-fit: cover;
  object-position: center;
}

.inquiry-text { flex: 0 1 420px; }

/* About: "CONTACT" on the left half, details on the right. The heading matches the header
   wordmark's size and sits on the same line as the first detail (Call/Text); the row is
   vertically centred in the same space the Weddings photo takes up. */
.inquiry.big-title {
  display: grid;
  /* Thirds: CONTACT fills the left third (right-aligned), details take the right two-thirds.
     The gap is centred on the 1/3 line of the window (30px = page side padding). */
  --title-gap: 56px;
  grid-template-columns: calc(100vw / 3 - 30px - var(--title-gap) / 2) minmax(0, 1fr);
  column-gap: var(--title-gap);
  align-items: baseline;
  align-content: center;
  height: var(--stage-h);
}

.inquiry-title { min-width: 0; text-align: right; }   /* right-aligned so it sits next to Call/Text */

.inquiry-title h2 {
  margin: 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* No photo (e.g. About for now): just the text, lined up under the header. */
.inquiry.no-photo { padding-top: 0; }

.inquiry-text h2 {
  margin: 0 0 22px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}

.inquiry-text p {
  margin: 0;
  font-size: 15px;
  line-height: 2;
}

.inquiry-body p { margin: 0 0 14px; line-height: 1.7; }
.inquiry-body { margin-bottom: 22px; }
.inquiry-body p:last-child { margin-bottom: 0; }

.inquiry-text a { text-decoration: underline; text-underline-offset: 3px; }
.inquiry-text a:hover { color: var(--muted); }

@media (max-width: 767px) {
  /* Phones: photo left / text right like desktop, scaled down. */
  .inquiry { gap: 16px; padding: 0 20px 30px; }
  .inquiry-text h2 { font-size: 13px; margin-bottom: 12px; }
  .inquiry.big-title {
    --title-gap: 16px;
    grid-template-columns: calc(100vw / 3 - 20px - var(--title-gap) / 2) minmax(0, 1fr);
  }
  .inquiry-title h2 { font-size: clamp(13px, 4.3vw, 17px); line-height: 22px; }
  .inquiry-text p, .inquiry-body p { font-size: 11px; line-height: 1.8; }
  .inquiry-body { margin-bottom: 12px; }
}