/*
Theme Name: Andrés Quintero
Description: Tema del portafolio fotográfico de Andrés Quintero — la versión WordPress del sitio estático, alimentado por el plugin AQ Portfolio (proyectos, imágenes de portada, biografía y contacto).
Version: 1.1.0
Author: Simón Dezubiria
Text Domain: andres-quintero
*/

/* ————— Andrés Quintero — prototype styles —————
   One design (ref. emmanuelsmonsalve.com): full-bleed intro with the name on
   top; work is one photograph at a time — two verticals pair up as a diptych —
   displaced with arrow cursors, scroll, keys or swipe. A few project titles on
   top (Show more expands them); «Thumbnails» opens one cover per project.
   Clicking inside the print opens a zoomable lightbox with its own
   thumbnail sheet. Texts in the mono, titles in the serif.
   Photographs never change aspect ratio: they scale by their own intrinsic
   size with max-width/max-height (letterboxed, never cropped). */

/* Fonts (per AQ brandbook) */
@font-face {
  font-family: 'Libertinus Math';
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/libertinus-math@latest/latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/dm-mono@latest/latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #202020;
  --paper: #ffffff;
  --accent: #bd2828;
  --line: #d9d9d9;
  --serif: 'Libertinus Math', 'Libertinus Serif', Georgia, serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --margin: 32px;
}

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

html { height: 100%; }

body {
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.03em;   /* brandbook: body tracking 3% */
  line-height: 1.25;        /* brandbook: body leading 125% */
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
}
/* the lightbox covers the page, so the page behind it must not scroll */
body.lb-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

/* photographs are looked at, not selected or dragged (no blue veil) */
img {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.serif {
  font-family: var(--serif);
  letter-spacing: 0;        /* brandbook: titles tracking 0 */
  line-height: 1;           /* brandbook: titles leading 100% */
}

.category {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;   /* brandbook: category tracking 12% */
  line-height: 1.35;        /* brandbook: category leading 135% */
  font-size: 11px;
}

/* ————— InDesign-style placeholder frame —————
   Only for boxes with no photograph yet. A real photograph carries the extra
   class .photo and keeps the layout rules below without the X and the frame. */
.ph:not(.photo) {
  position: relative;
  background:
    linear-gradient(to top right,
      transparent calc(50% - 0.5px), var(--line) calc(50% - 0.5px),
      var(--line) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right,
      transparent calc(50% - 0.5px), var(--line) calc(50% - 0.5px),
      var(--line) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  border: 1px solid var(--line);
}

/* A photo box: keeps its aspect-ratio, scales to fit its wrapper, never crops */
.fit-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
}
/* Both real photographs and placeholders are <img>s with the photograph's
   intrinsic size, so the browser scales them by their own proportions.
   width and height must both stay `auto` — with a fixed width, a max-height
   would squash the picture instead of scaling it down. The inline
   aspect-ratio set in JS keeps the box the right shape while the file loads. */
.fit-wrap > .ph {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
}

/* ————— Inner-page nav ————— */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--margin);
  flex: none;
  background: var(--paper);
}
.nav .brand { font-family: var(--serif); font-size: 22px; }
.nav .links { display: flex; gap: 24px; }
.nav a.active { color: var(--accent); }

main.work, main.about { flex: 1; }

/* ════════════ LANDING ════════════
   Full-bleed photograph, the name centred on top, the menu at the bottom. */
.landing {
  position: fixed;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.landing img.hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* full-bleed crop, ratio intact */
  display: block;
}
/* The blurred edge copy: everywhere but iOS it simply stays hidden. */
.landing img.hero-blur { display: none; }

/* iOS Safari only (-webkit-touch-callout exists only there): the same
   photograph, blurred, masked so it shows just at the top and bottom edges —
   the image melts into the status bar above and into the search-bar strip
   below (whose flat colour is the sampled bottom edge via theme-color). */
@supports (-webkit-touch-callout: none) {
  .landing img.hero-blur {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(16px);
    transform: scale(1.04);   /* hides the blur's transparent fringe */
    z-index: 5;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom,
      black 0, transparent calc(env(safe-area-inset-top, 0px) + 70px),
      transparent calc(100% - env(safe-area-inset-bottom, 0px) - 80px), black 100%);
    mask-image: linear-gradient(to bottom,
      black 0, transparent calc(env(safe-area-inset-top, 0px) + 70px),
      transparent calc(100% - env(safe-area-inset-bottom, 0px) - 80px), black 100%);
  }
}

.landing .overlay { position: absolute; inset: 0; color: #fff; pointer-events: none; }
.landing .overlay a { color: inherit; pointer-events: auto; }
.landing .name, .landing .menu { position: absolute; }
.landing .name {
  font-family: var(--serif);
  font-size: 32px;
  left: 50%; transform: translateX(-50%);
  top: 24%;          /* both texts lean towards the centre of the photograph */
  white-space: nowrap;
}
.landing .menu {
  font-family: var(--serif);
  font-size: 28px;
  left: 50%; transform: translateX(-50%);
  bottom: 24%;
  text-shadow: 0 0 1px rgba(0,0,0,0.25);
}
.landing .overlay a { transition: opacity 0.25s; }
.landing .overlay a:hover { opacity: 0.6; color: #fff; }

/* ════════════ WORK ════════════
   One photograph at a time; the whole archive is one series. The page IS the
   viewer: the two halves of the room displace the series (the cursor is the
   arrow), so do the wheel, ← / → and a swipe. The project name lives only in
   the titles bar on top. «Thumbnails» opens one cover per project. */
.work {
  display: grid;
  align-items: start;
  gap: 20px;
  padding: 0 var(--margin) var(--margin);
  position: relative;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  flex: none;                      /* the page itself never scrolls */
  height: calc(100vh - 86px);
  height: calc(100dvh - 86px);
  height: calc(var(--vhpx, 100vh) - 86px);   /* measured: right on every iOS */
  overflow: hidden;
}

/* a few project titles on top, the rest behind «Show more» */
.projects { padding: 2px 0 14px; }
.projects ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.projects li { margin: 0; }
.projects .project-name {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #b5b5b5;
  cursor: pointer;
  transition: color 0.25s;
  display: inline-block;
}
.projects .project-name:hover { color: var(--ink); }
.projects li.active .project-name { color: var(--ink); }
.projects .meta { display: none; }
.projects li.x-hidden { display: none; }
li.x-more .project-name {
  font-size: 9px;
  color: #c9c9c9;
}
li.x-more .project-name:hover { color: var(--ink); }

.gallery {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* the photograph travels as one centred block */
  height: 100%;
  padding-bottom: 40px;      /* air under the photograph */
}
.gallery .thumbs { display: none; }
.gallery .main-wrap {
  flex: none;
  min-height: 0;
  /* gutters at both sides so the navigation halves always stay reachable,
     even when a diptych would otherwise span the full width */
  width: calc(100% - 160px);
  gap: 20px;                        /* air between the two prints of a diptych */
}
/* every photograph enters with a soft fade */
@keyframes photo-in { from { opacity: 0; } }
.gallery .main-wrap { position: relative; }
.gallery .main-wrap > .photo {
  animation: photo-in 0.45s ease;
  max-height: calc(100vh - 220px);   /* nav + titles + air below */
  max-height: calc(100dvh - 220px);
  max-height: calc(var(--vhpx, 100vh) - 220px);
  /* above the halves: inside the print you zoom, outside it you navigate */
  position: relative;
  z-index: 45;
  cursor: zoom-in;
}
/* two verticals of the same project hang side by side (ref. E. Monsalve) */
.gallery .main-wrap.pair > .photo { max-width: calc(50% - 10px); }

/* the two halves of the room: left goes back, right goes forward; the
   cursor itself is the arrow — the same dark one as the lightbox */
.x-nav {
  display: block;
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  z-index: 40;
}
.x-prev {
  left: 0;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M34%2020H6M16%2010L6%2020l10%2010' fill='none' stroke='%23202020' stroke-width='2'/%3E%3C/svg%3E") 20 20, w-resize;
}
.x-next {
  right: 0;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M6%2020h28M24%2010l10%2010-10%2010' fill='none' stroke='%23202020' stroke-width='2'/%3E%3C/svg%3E") 20 20, e-resize;
}

/* on a touch screen, a quiet reminder that the series moves sideways */
.x-swipe-hint { display: none; }

/* the photo number travels with the cursor over the photograph */
.cursor-tip {
  position: fixed;
  z-index: 60;
  display: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink);
  pointer-events: none;
  white-space: nowrap;
}

/* «Thumbnails» — quiet, in the lower left corner */
.x-sheet-btn {
  all: unset;
  display: block;
  position: fixed;
  left: 20px; bottom: 20px;
  z-index: 50;
  font-family: var(--mono);
  font-size: 9px;                  /* same voice as «Show more» */
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #c9c9c9;
  cursor: pointer;
  transition: color 0.2s;
}
.x-sheet-btn:hover { color: var(--ink); }

/* the sheet: one photograph per project, its name very subtle underneath */
main.work.x-grid { overflow-y: auto; }
.x-grid .gallery { height: auto; }
.x-grid .gallery .main-wrap,
.x-grid .x-nav { display: none; }
.x-grid .gallery .thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 20px;
  width: 100%;
  align-items: end;
  padding-bottom: 64px;
}
.x-grid .thumbs .cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
}
.x-grid .thumbs .cell > .photo {
  max-height: 32vh;
  transition: opacity 0.25s;
}
.x-grid .thumbs .cell:hover > .photo { opacity: 0.8; }
.x-grid .thumbs .cell::after {
  content: attr(data-caption);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #a3a3a3;
}

/* ════════════ ABOUT ════════════
   Portrait and text centred on each other. */
.about {
  display: grid;
  gap: 20px;
  padding: 0 var(--margin) var(--margin);
  grid-template-columns: repeat(7, 1fr);
  align-items: center;     /* the two columns centre on each other */
  align-content: center;   /* and the whole row centres in the page */
}
.about .portrait {
  max-height: calc(100vh - 140px);
  cursor: default;
}
.about .portrait:not(.photo) { aspect-ratio: 3 / 4; }   /* only the empty frame */
.about .portrait-col { grid-column: 1 / span 3; }
.about .text-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  grid-column: 4 / span 4;
  max-width: 620px;
}
.about .lede {
  font-family: var(--serif);
  line-height: 1.2;
  font-size: clamp(20px, 3.4vh, 32px);
  margin-bottom: 5vh;
}
.about .text-col p + p { margin-top: 1.2em; }
.about .body-block { font-size: 15px; }
.about .contact { margin-top: 6vh; }

/* ════════════ LIGHTBOX ════════════ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  cursor: zoom-out;
  background: var(--paper);
}
.lightbox[hidden] { display: none; }
.lightbox .lb-btn {
  position: fixed;
  top: var(--margin);
  z-index: 210;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #999;
  cursor: pointer;
}
.lightbox .lb-btn:hover { color: var(--ink); }
.lightbox .lb-close { right: var(--margin); }
.lightbox .lb-grid-btn { left: var(--margin); }
.lightbox .lb-btn[hidden] { display: none; }

/* The two halves of the room: left goes back, right goes forward. The cursor
   itself is the arrow (ref. emmanuelsmonsalve.com). */
.lightbox .lb-nav {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  z-index: 205;
}
.lightbox .lb-prev {
  left: 0;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M34%2020H6M16%2010L6%2020l10%2010' fill='none' stroke='%23202020' stroke-width='2'/%3E%3C/svg%3E") 20 20, w-resize;
}
.lightbox .lb-next {
  right: 0;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M6%2020h28M24%2010l10%2010-10%2010' fill='none' stroke='%23202020' stroke-width='2'/%3E%3C/svg%3E") 20 20, e-resize;
}
.lightbox .lb-nav[hidden] { display: none; }

/* The thumbnail sheet: the whole project at a glance, scrolled if it is long */
.lightbox .lb-thumbs {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 206;
  overflow-y: auto;
  flex-wrap: wrap;
  gap: 14px;
  align-content: flex-start;
  justify-content: center;
  padding: 90px var(--margin) var(--margin);
  cursor: default;
  background: var(--paper);
}
.lightbox .lb-thumbs img {
  height: 24vh;
  width: auto;
  cursor: pointer;
  transition: opacity 0.2s;
}
.lightbox .lb-thumbs img:hover { opacity: 0.7; }
.lightbox.lb-grid-mode figure { display: none; }
.lightbox.lb-grid-mode .lb-nav { display: none; }
.lightbox.lb-grid-mode .lb-thumbs { display: flex; }
.lightbox figure { display: contents; }
.lightbox .lb-box { max-width: 88vw; max-height: 80vh; }
.lightbox img.lb-box {
  width: auto;
  height: auto;
  animation: photo-in 0.45s ease;
  cursor: zoom-in;
  position: relative;   /* above the halves: inside the print you zoom… */
  z-index: 206;         /* …outside it you navigate */
}
.lightbox figcaption { font-family: var(--mono); }
/* zoomed: the file at full size, panned by scrolling */
.lightbox.lb-zoomed {
  display: block;
  overflow: auto;
  cursor: zoom-out;
}
.lightbox.lb-zoomed figure { display: block; min-width: min-content; }
.lightbox.lb-zoomed img.lb-box {
  display: block;
  margin: 0 auto;
  cursor: zoom-out;
}
.lightbox.lb-zoomed figcaption { display: none; }
.lightbox.lb-zoomed .lb-nav { display: none; }   /* panning, not navigating */

/* iOS Safari: while panning the full-size file, the same progressive blur
   melts its top and bottom edges into the browser chrome */
@supports (-webkit-touch-callout: none) {
  .lightbox.lb-zoomed::before, .lightbox.lb-zoomed::after {
    content: '';
    position: fixed;
    left: 0; right: 0;
    z-index: 220;
    pointer-events: none;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .lightbox.lb-zoomed::before {
    top: 0;
    height: calc(env(safe-area-inset-top, 0px) + 32px);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
    mask-image: linear-gradient(to bottom, black, transparent);
  }
  .lightbox.lb-zoomed::after {
    bottom: 0;
    height: calc(env(safe-area-inset-bottom, 0px) + 48px);
    -webkit-mask-image: linear-gradient(to top, black, transparent);
    mask-image: linear-gradient(to top, black, transparent);
  }
}

/* ════════════ MOBILE ════════════ */
@media (max-width: 700px) {
  :root { --margin: 16px; }
  body { font-size: 12px; }
  .nav .brand { font-size: 18px; }
  .nav .links { gap: 16px; }

  /* — landing — */
  .landing .name { font-size: 30px; }
  .landing .menu { font-size: 20px; }

  /* — viewer — tap either half or swipe; the photo fills the width — */
  .work {
    height: calc(100vh - 62px);
    height: calc(100dvh - 62px);
    height: calc(var(--vhpx, 100vh) - 62px);
    padding-bottom: 16px;
  }
  .gallery .main-wrap > .photo {
    max-height: calc(100vh - 200px);
    max-height: calc(100dvh - 200px);
    max-height: calc(var(--vhpx, 100vh) - 200px);
  }
  .gallery { padding-bottom: 30px; }
  .gallery .main-wrap { gap: 10px; width: calc(100% - 48px); }
  .gallery .main-wrap.pair > .photo { max-width: calc(50% - 5px); }
  .projects ul { gap: 6px 16px; }
  .x-sheet-btn { left: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); }

  /* the reminder that the series moves sideways; it bows out after the
     first swipe (the script fades it) */
  .x-swipe-hint {
    display: block;
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #a3a3a3;
    text-align: center;
    transition: opacity 0.4s;
  }
  .x-grid .x-swipe-hint { display: none; }
  .x-grid .gallery .thumbs { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
  .x-grid .thumbs .cell > .photo { max-height: none; }

  /* — about stacks — */
  .about { display: flex; flex-direction: column; }
  .about .portrait { max-height: 60vh; }
  .about .text-col { max-width: none; }
  .about .contact { margin-top: 5vh; }

  /* lightbox chrome */
  .lightbox .lb-box { max-width: 94vw; max-height: 72vh; }
  .lightbox .lb-thumbs { padding: 70px 16px 16px; gap: 10px; }
  .lightbox .lb-thumbs img { height: 16vh; }
}