/* fl718-quito.css — Quito desktop styles
   Version: 1.0.1
   Last updated: 2026-08-08
   Scoped to: body.fl718-quito-page
   All rules prefixed with body class — no unscoped selectors.
   Backport 2026-08-08: pulled live-only sitewide lightbox-arrow glyph fix
   (background removed, drop-shadow added, size/stroke tuned, matching
   the China reference implementation) that was applied live and never
   landed locally.
*/

/* ------------------------------------------------------------
   BASE RESET & BODY
   ------------------------------------------------------------ */
body.fl718-quito-page {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
  background-color: #f0f0ee;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
}

/* GP content wrappers stripped — prevents white box + padding from separate-containers layout */
body.fl718-quito-page .inside-article,
body.fl718-quito-page .site-main,
body.fl718-quito-page .content-area {
  padding: 0;
  margin: 0;
  background: transparent;
}

/* Box-sizing via :where() — zero specificity, never fights other rules */
:where(body.fl718-quito-page) *,
:where(body.fl718-quito-page) *::before,
:where(body.fl718-quito-page) *::after {
  box-sizing: border-box;
}

body.fl718-quito-page img {
  max-width: 100%;
  display: block;
}

/* ------------------------------------------------------------
   VISUALLY HIDDEN — accessible text, not visible on screen.
   ------------------------------------------------------------ */
body.fl718-quito-page .fl718-quito-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   HERO SECTION
   ============================================================ */

body.fl718-quito-page .fl718-quito-hero {
  position: relative;
  width: 100%;
  height: calc(100vh + 56px);
  margin-top: -56px; /* pull hero under fixed nav — eliminates gap when nav retracts */
  overflow: clip;
  background-color: #e8e9ea;
}

body.fl718-quito-page .fl718-quito-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  display: block;
  opacity: 0;
  transform-origin: center center;
}

/* ============================================================
   HERO GRADIENT — upper portion atmosphere.
   ============================================================ */
body.fl718-quito-page .fl718-quito-hero__gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 65%;
  background:
    linear-gradient(to bottom, rgba(8, 10, 14, 0.48) 0%, transparent 100%),
    radial-gradient(ellipse at 50% 0%, rgba(10, 14, 20, 0.50) 0%, transparent 70%);
  z-index: 5;
  pointer-events: none;
}

/* ============================================================
   HERO TITLE BLOCK
   ============================================================ */
body.fl718-quito-page .fl718-quito-hero__title-block {
  position: absolute;
  top: clamp(32px, 9vh, 72px);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Eyebrow — "Ecuador" */
body.fl718-quito-page .fl718-quito-hero__eyebrow {
  display: block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(8px, 0.72vw, 10px);
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.50em;
  text-transform: uppercase;
  color: rgba(240, 244, 248, 0.82);
  text-shadow: 0 1px 8px rgba(4, 6, 10, 0.45);
  margin-bottom: 16px;
  line-height: 1;
  opacity: 0;
}

/* "Quito" — Libre Baskerville 400, editorial weight, mixed case. */
body.fl718-quito-page .fl718-quito-hero__title {
  display: block;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: clamp(54px, 7.0vw, 106px);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.10em;
  color: rgba(240, 244, 248, 0.97);
  line-height: 0.92;
  margin: 0;
  opacity: 0;
  text-shadow: 0 2px 24px rgba(4, 6, 10, 0.50), 0 1px 6px rgba(4, 6, 10, 0.30);
}

/* Subtitle block */
body.fl718-quito-page .fl718-quito-hero__subtitle-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  gap: 10px;
  opacity: 0;
}

/* Thin horizontal rule */
body.fl718-quito-page .fl718-quito-hero__subtitle-rule {
  display: block;
  width: 28px;
  height: 1px;
  background: rgba(240, 244, 248, 0.38);
}

/* Subtitle text block */
body.fl718-quito-page .fl718-quito-hero__subtitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Location line — "South America" */
body.fl718-quito-page .fl718-quito-hero__location {
  display: block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(9px, 0.88vw, 12px);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.22em;
  color: rgba(240, 244, 248, 0.78);
  text-shadow: 0 1px 8px rgba(4, 6, 10, 0.45);
}

/* Year — Caveat handwriting */
body.fl718-quito-page .fl718-quito-hero__year {
  display: block;
  font-family: 'Caveat', cursive;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(240, 244, 248, 0.65);
  text-shadow: 0 1px 8px rgba(4, 6, 10, 0.45);
  margin-top: 6px;
  line-height: 1;
}

/* Reduced motion: show all hero text immediately at final state. */
@media (prefers-reduced-motion: reduce) {
  body.fl718-quito-page .fl718-quito-hero__image {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  body.fl718-quito-page .fl718-quito-hero__eyebrow,
  body.fl718-quito-page .fl718-quito-hero__title,
  body.fl718-quito-page .fl718-quito-hero__subtitle-block {
    opacity: 1 !important;
    transform: none !important;
  }
  body.fl718-quito-page .fl718-quito-hero__air-veil {
    opacity: 0 !important;
  }
  body.fl718-quito-page .fl718-quito-hero__lightbar {
    display: none !important;
  }
}

/* ============================================================
   GALLERY GRID — 3-column masonry layout
   ============================================================ */

body.fl718-quito-page .fl718-quito-grid {
  columns: 3;
  column-gap: 8px;
  padding: 8px;
  padding-top: 0;
  padding-bottom: 12vh;
}

@media (max-width: 768px) {
  body.fl718-quito-page .fl718-quito-grid {
    columns: 2;
    padding-top: 10vh;
  }
}

@media (max-width: 480px) {
  body.fl718-quito-page .fl718-quito-grid {
    columns: 1;
    padding: 8px;
    padding-top: 8vh;
    padding-bottom: 8vh;
  }
}

/* ------------------------------------------------------------
   GALLERY ITEMS — shared base
   ------------------------------------------------------------ */

body.fl718-quito-page .fl718-quito-item {
  break-inside: avoid;
  margin: 0 0 8px 0;
  overflow: clip;
  cursor: pointer;
  position: relative;
  display: block;
  opacity: 0;
}

body.fl718-quito-page .fl718-quito-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   HOVER EFFECT — "The Cloud Crosses"
   ============================================================ */

body.fl718-quito-page .fl718-quito-item__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(185, 200, 218, 0.30) 0%,
    rgba(185, 200, 218, 0.18) 35%,
    rgba(185, 200, 218, 0.08) 70%,
    rgba(185, 200, 218, 0.02) 100%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  body.fl718-quito-page .fl718-quito-item__veil {
    display: none !important;
  }
}

/* ============================================================
   LIGHTBOX — "The Window Opens"
============================================================ */

/* Dark veil — cool altitude sky */
body.fl718-quito-page .fl718-quito-lb-dark {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 60% at 50% 50%,
    rgba(14, 18, 26, 0.88) 0%,
    rgba(8, 12, 20, 0.96) 60%,
    rgba(4, 6, 12, 0.99) 100%
  );
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
}

/* Stage — positioning layer */
body.fl718-quito-page .fl718-quito-lb-stage {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
}

body.fl718-quito-page .fl718-quito-lb-stage--active {
  pointer-events: auto;
}

/* Backdrop — sibling of image-wrap, NOT child. */
body.fl718-quito-page .fl718-quito-lb-backdrop {
  position: fixed;
  inset: 0;
  cursor: pointer;
  z-index: 0;
}

/* Photo wrap */
body.fl718-quito-page .fl718-quito-lb-image-wrap {
  position: relative;
  z-index: 1;
  max-width: min(88vw, 1200px);
  max-height: 88vh;
  box-shadow:
    0 0 0 1px rgba(160, 180, 210, 0.10),
    0 12px 70px rgba(4, 6, 12, 0.65),
    0 0 140px rgba(4, 6, 12, 0.35);
}

body.fl718-quito-page .fl718-quito-lb-image {
  display: block;
  max-width: min(88vw, 1200px);
  max-height: 88vh;
  object-fit: contain;
  opacity: 0;
  filter: brightness(1.5) saturate(0);
}

/* Caption — analog photos only */
body.fl718-quito-page .fl718-quito-lb-caption {
  position: absolute;
  bottom: -1.8rem;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(220, 228, 236, 0.52);
  letter-spacing: 0.06em;
  margin: 0;
}

/* UI layer */
body.fl718-quito-page .fl718-quito-lb-ui {
  position: fixed;
  inset: 0;
  z-index: 9200;
  pointer-events: none;
  opacity: 0;
}

/* Rule 1 of the BUG-047 lightbox contract. This sheet is position:fixed
   inset:0 above the backdrop, so pointer-events:auto on the whole sheet
   swallows every tap-outside-to-close. Only the interactive children take
   pointers; the sheet itself stays transparent to them. */
body.fl718-quito-page .fl718-quito-lb-ui--active {
  pointer-events: none;
}

body.fl718-quito-page .fl718-quito-lb-ui--active .fl718-quito-lb-close-btn,
body.fl718-quito-page .fl718-quito-lb-ui--active .fl718-quito-lb-nav {
  pointer-events: auto;
}

/* Close button */
body.fl718-quito-page .fl718-quito-lb-close-btn {
  position: absolute;
  top: clamp(1rem, 2.5vw, 1.8rem);
  right: clamp(1rem, 2.5vw, 1.8rem);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 18, 26, 0.40);
  border: 1px solid rgba(220, 228, 240, 0.12);
  border-radius: 50%;
  cursor: pointer;
  color: rgba(220, 228, 240, 0.80);
  transition: background 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  body.fl718-quito-page .fl718-quito-lb-close-btn:hover {
    background: rgba(100, 130, 180, 0.25);
    color: #fff;
  }
}
@media (hover: none), (pointer: coarse) {
  body.fl718-quito-page .fl718-quito-lb-close-btn:hover,
  body.fl718-quito-page .fl718-quito-lb-close-btn:focus,
  body.fl718-quito-page .fl718-quito-lb-close-btn:active {
    background: rgba(14, 18, 26, 0.40);
    color: rgba(220, 228, 240, 0.80);
  }
  body.fl718-quito-page .fl718-quito-lb-close-btn:focus {
    outline: none;
  }
}

body.fl718-quito-page .fl718-quito-lb-close-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* Counter */
body.fl718-quito-page .fl718-quito-lb-counter {
  position: absolute;
  bottom: clamp(1rem, 2.5vw, 1.8rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: rgba(220, 228, 240, 0.36);
  white-space: nowrap;
  pointer-events: none;
}

/* Prev/next nav */
body.fl718-quito-page .fl718-quito-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(220, 228, 240, 0.68);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
  transition: color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  body.fl718-quito-page .fl718-quito-lb-nav:hover {
    background: none;
    color: rgba(220, 228, 240, 0.92);
  }
}
@media (hover: none), (pointer: coarse) {
  body.fl718-quito-page .fl718-quito-lb-nav:hover,
  body.fl718-quito-page .fl718-quito-lb-nav:focus,
  body.fl718-quito-page .fl718-quito-lb-nav:active {
    background: none;
    color: rgba(220, 228, 240, 0.68);
  }
  body.fl718-quito-page .fl718-quito-lb-nav:focus {
    outline: none;
  }
}

body.fl718-quito-page .fl718-quito-lb-nav svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.fl718-quito-page .fl718-quito-lb-prev { left: clamp(0.8rem, 2vw, 1.6rem); }
body.fl718-quito-page .fl718-quito-lb-next { right: clamp(0.8rem, 2vw, 1.6rem); }

body.fl718-quito-page .fl718-quito-lb-close-btn:focus-visible,
body.fl718-quito-page .fl718-quito-lb-nav:focus-visible {
  outline: 2px solid rgba(160, 190, 220, 0.60);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  body.fl718-quito-page .fl718-quito-lb-image-wrap {
    max-width: 100vw;
    max-height: 100svh;
  }
  body.fl718-quito-page .fl718-quito-lb-image {
    max-height: 88svh;
  }
  body.fl718-quito-page .fl718-quito-lb-prev { left: 0.25rem; }
  body.fl718-quito-page .fl718-quito-lb-next { right: 0.25rem; }
}

/* Reduced motion — lightbox appears instantly at final state. */
@media (prefers-reduced-motion: reduce) {
  body.fl718-quito-page .fl718-quito-lb-image {
    opacity: 1 !important;
    filter: none !important;
  }
}

/* ── AFTER-CONTENT ──────────────────────────────────────────────
   Deleted 2026-08-20 (BUG-061). The section is universal now: its styles live
   in css/fl718-after-content.css scoped to body.fl718-after-content, and the
   cards in css/fl718-ws-city-system.css — which this page never enqueued, the
   reason its cards had no styling of their own to lose.

   The byline block below is NOT part of that section. It sits between the hero
   and the grid and only borrowed the `after__` class name; its markup stays, so
   its rule stays.
   ──────────────────────────────────────────────────────────────── */

/* BYLINE BLOCK — between hero and grid */
body.fl718-quito-page .fl718-quito-byline-block {
  padding: 72px clamp(40px, 5vw, 80px) 64px;
}

body.fl718-quito-page .fl718-quito-after__byline-line {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
  color: #5a5e68;
  margin: 0;
  display: block;
}

body.fl718-quito-page:not(.fl718-js-loaded) .fl718-quito-item {
  opacity: 1;
  filter: none;
}
body.fl718-quito-page:not(.fl718-js-loaded) .fl718-quito-hero__image {
  opacity: 1;
}
body.fl718-quito-page:not(.fl718-js-loaded) .fl718-quito-hero__eyebrow,
body.fl718-quito-page:not(.fl718-js-loaded) .fl718-quito-hero__title,
body.fl718-quito-page:not(.fl718-js-loaded) .fl718-quito-hero__subtitle-block {
  opacity: 1;
}

/* ------------------------------------------------------------
   HERO ANIMATION SUPPORT — air veil + lightbar
   ------------------------------------------------------------ */
body.fl718-quito-page .fl718-quito-hero__air-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(232, 236, 240, 0.40);
  pointer-events: none;
  opacity: 1;
}

body.fl718-quito-page:not(.fl718-js-loaded) .fl718-quito-hero__air-veil {
  opacity: 0;
}

body.fl718-quito-page .fl718-quito-hero__lightbar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3vh;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.13) 50%,
    transparent 100%
  );
  z-index: 3;
  pointer-events: none;
  opacity: 0;
}