/* ═══════════════════════════════════════════════════════════════
   pages.css — B5 owns this file.
   Styles for listings.html (.page-proyecto) + legal.html (.page-legal).
   Consumes core.css tokens; nothing is redefined here.
   All measures come from RESEARCH in px ÷ 15 → rem.
   SERENA-era modules that no longer exist (cols/lists/collage/slider/map…)
   have been removed along with proyecto.html.
   ═══════════════════════════════════════════════════════════════ */

/* ── vertical rhythm (pt-*/pb-* tokens from the module vocabulary, r3 §6) ── */
.page-proyecto .pt-xs { padding-top: 3rem; }        /* 45px  */
.page-proyecto .pt-sm { padding-top: 6rem; }        /* 90px  */
.page-proyecto .pt-md { padding-top: 7.8rem; }      /* 117px */
.page-proyecto .pt-l  { padding-top: 9rem; }        /* 135px */
.page-proyecto .pb-xs { padding-bottom: 3rem; }
.page-proyecto .pb-sm { padding-bottom: 6rem; }
.page-proyecto .pb-md { padding-bottom: 7.8rem; }
.page-proyecto .pb-l  { padding-bottom: 9rem; }

.page-proyecto .mod { position: relative; width: 100%; }
.page-proyecto .mod > * { position: relative; }

/* the chrome loader does not paint on the legal page (no .is-loading) */
.page-legal .loader__percent,
.page-legal .loader__progress { display: none; }

/* BK# legibility (client: the serif numeral 4 was unreadable) — every line
   carrying "BK# 3443361" on these pages renders in Archivo. The broker block
   (.broker__role) and the legal paragraphs are already --f-izmir; the contact
   modal note is the one serif holdout, so it switches to the sans here. */
.page-proyecto .modal-contact__note,
.page-legal .modal-contact__note {
  font-family: var(--f-izmir);
  font-style: normal;
}

/* ═══════════════ 01 · mod-header--proyecto ═══════════════
   The sandwich: <svg> in flow (back) · <figure> · absolute <svg> (front).
   The photo passes through the letters with no blend-mode or clip-path. (r3 §6) */

.page-proyecto .mod-header--proyecto {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 9rem var(--inset) 4rem;
}

.page-proyecto .ph__stage { width: 100%; display: flex; justify-content: center; }

.page-proyecto .ph__sandwich {
  position: relative;
  width: 100%;
  max-width: 86rem;          /* 1290px */
}

.page-proyecto .ph__text { display: block; width: 100%; height: auto; }

/* PORTFOLIO in the brand serif (--f-brand → Fraunces). 9 glyphs inside the 1200-unit viewBox:
   font-size 188px + tracking 4px ≈ 1120 units wide. Coupled to the baseline
   y="226" authored in BOTH svg layers of listings.html — retune together. */
.page-proyecto .ph__glyphs {
  font-family: var(--f-brand);
  font-weight: 400;
  font-size: 188px;          /* viewBox units, not document units */
  letter-spacing: 4px;
  fill: var(--black);
}

/* back layer: in flow, defines the block height */
.page-proyecto .ph__text--back { position: relative; z-index: 1; }

/* the photo, wedged between the two layers */
.page-proyecto .ph__photo {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 33%;
  aspect-ratio: 470 / 335;
}
.page-proyecto .ph__photo img { width: 100%; height: 100%; }

/* front layer: same viewBox → exact tracing. Semi-transparent so the photo
   reads through the letters; outside the photo it adds to the back layer
   and the stroke reads solid again. */
.page-proyecto .ph__text--front {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}
.page-proyecto .ph__text--front .ph__glyphs { fill-opacity: .62; }

/* sub-row: year · place · intro */
.page-proyecto .ph__meta {
  display: grid;
  grid-template-columns: 8rem 1fr 30rem;
  align-items: start;
  gap: var(--grid-gap);
  margin-top: 5rem;
}
.page-proyecto .ph__year {
  font-family: var(--f-edit);
  font-size: var(--t-parrafo-l);
  line-height: var(--t-parrafo-l-lh);
}
.page-proyecto .ph__place {
  font-family: var(--f-izmir);
  font-size: var(--t-subtitulo);
  line-height: var(--t-subtitulo-lh);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.page-proyecto .ph__intro {
  font-family: var(--f-izmir);
  font-size: var(--t-parrafo);
  line-height: var(--t-parrafo-lh);
  max-width: 30rem;
}
.page-proyecto .ph__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.65rem;
  transform: translateX(-50%);
  font-family: var(--f-edit);
  font-size: var(--t-parrafo);
}

/* ═══════════════ 02 · mod-search — IDX embed ═══════════════
   Same pattern as index.html's .idx-embed (duplicated here on purpose:
   listings.html loads only core.css + pages.css, so the page is
   self-contained). Fixed height keeps ScrollTrigger math stable when
   the iframe eventually lands. */
.page-proyecto .mod-search {
  padding-left: var(--inset);
  padding-right: var(--inset);
}
.page-proyecto .msearch__pretitle {
  font-family: var(--f-edit-italic);
  font-style: italic;
  font-size: var(--t-parrafo-l);
  line-height: var(--t-parrafo-l-lh);
  color: var(--red);                       /* gold as text accent — allowed */
  margin-bottom: 1rem;
}
.page-proyecto .msearch__heading {
  font-family: var(--f-regular);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: var(--t-titulo-xxl);
  line-height: var(--t-titulo-xxl-lh);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.page-proyecto .msearch__copy {
  font-family: var(--f-izmir);
  font-size: var(--t-parrafo);
  line-height: var(--t-parrafo-lh);
  max-width: 30rem;
  margin-bottom: 3rem;
}

.page-proyecto .idx-embed {
  position: relative;
  height: 85vh;
  height: 85svh;                            /* FIXED: no reflow when the iframe loads */
  background: var(--beige);
  border: 1px solid var(--red);             /* hairline gold frame */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.page-proyecto .idx-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.page-proyecto .idx-embed__placeholder { padding: 0 var(--inset); }
.page-proyecto .idx-embed__headline {
  font-family: var(--f-regular);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: var(--t-titulo-l);
  line-height: var(--t-titulo-l-lh);
  margin-bottom: 1rem;
}
.page-proyecto .idx-embed__sub {
  font-family: var(--f-izmir);
  font-size: var(--t-parrafo);
  line-height: var(--t-parrafo-lh);
  max-width: 30rem;
  margin: 0 auto 2.4rem;
}
.page-proyecto .idx-embed__sub a { text-decoration: underline; }

/* ═══════════════ 03 · page close: broker contact block ═══════════════ */
.page-proyecto .proj-broker {
  text-align: center;
  padding-left: var(--inset);
  padding-right: var(--inset);
}
.page-proyecto .broker__intro {
  font-family: var(--f-edit);
  font-size: var(--t-titulo);
  line-height: var(--t-titulo-lh);
  max-width: 44rem;
  margin: 0 auto 3rem;
}
/* opaque grey-gradient png → multiply blends it into the champagne (light bg only) */
.page-proyecto .broker__logo {
  display: block;
  width: 9rem;
  margin: 0 auto 2.4rem;
  mix-blend-mode: multiply;
}
.page-proyecto .broker__card {
  font-family: var(--f-edit);
  font-size: var(--t-parrafo-l);
  line-height: 1.9rem;
}
.page-proyecto .broker__name {
  font-family: var(--f-edit-reg);
  font-weight: 500;
  font-size: var(--t-titulo);
  line-height: var(--t-titulo-lh);
}
.page-proyecto .broker__role {
  font-family: var(--f-izmir);
  font-size: var(--t-subtitulo);
  line-height: var(--t-subtitulo-lh);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: .4rem;
}
.page-proyecto .broker__phone { margin: 2.2rem 0 2.6rem; }
.page-proyecto .broker__addr,
.page-proyecto .broker__ig {
  font-family: var(--f-izmir);
  font-size: var(--t-parrafo);
  line-height: 1.9rem;
}
.page-proyecto .broker__small {
  font-family: var(--f-izmir);
  font-size: var(--t-subtitulo);
  line-height: var(--t-subtitulo-lh);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 4.5rem;
  opacity: .6;
}
.page-proyecto .broker__small a { text-decoration: underline; }

/* ═══════════════ sticky availability bar (.modal--alert heritage) ═══════════
   GOLD background — a deliberate small surface, the one place gold may be a bg.
   Dark text on top; pill and close stay black/white. */
.page-proyecto .alert {
  position: fixed;
  z-index: 60;
  left: 0;
  bottom: 0;
  width: 23.67rem;              /* 355px */
  background: var(--red);
  color: var(--black);
  padding: 2.4rem var(--inset) 1.65rem;
  visibility: hidden;
  opacity: 0;
  transform: translateY(100%);
}
.page-proyecto .alert.is-dismissed { display: none; }
.page-proyecto .alert__label {
  font-family: var(--f-edit);
  font-size: var(--t-parrafo-l);
  line-height: var(--t-parrafo-l-lh);
  margin-bottom: 1rem;
}
.page-proyecto .alert__pill { background: var(--black); color: var(--white); }
.page-proyecto .alert__close {
  position: absolute;
  top: -1.1rem;
  right: -1.1rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  display: grid;
  place-items: center;
}
.page-proyecto .alert__close svg { width: .8rem; height: .8rem; }

/* ═══════════════════════════════════════════════════════════════
   LEGAL PAGE — a single mod-content--w100 over champagne (r3 §7)
   ═══════════════════════════════════════════════════════════════ */
.page-legal { background: var(--beige); }
.page-legal .mod-content--w100 {
  min-height: 100vh;
  padding: 12rem var(--inset) 6rem;
}
.page-legal .legal__lead {
  font-family: var(--f-regular);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: var(--t-titulo-l);
  line-height: var(--t-titulo-l-lh);
  margin-bottom: 4rem;
}
.page-legal .legal__intro {
  font-family: var(--f-izmir);
  font-weight: 500;
  font-size: var(--t-parrafo-l);
  line-height: var(--t-parrafo-l-lh);
  max-width: 46rem;
  margin-bottom: 5rem;
}
.page-legal .legal__intro a { text-decoration: underline; }
.page-legal .legal__body { max-width: 46rem; }
.page-legal .legal__body h2 {
  font-family: var(--f-regular);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: var(--t-titulo-l);
  line-height: var(--t-titulo-l-lh);
  margin: 4.5rem 0 1.2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--red);        /* gold hairline rule — accent only */
}
.page-legal .legal__body h2:first-child { margin-top: 0; }
.page-legal .legal__body h3 {
  font-family: var(--f-izmir);
  font-weight: 500;
  font-size: var(--t-parrafo-l);
  line-height: var(--t-parrafo-l-lh);
  margin: 2.2rem 0 .6rem;
}
.page-legal .legal__body p {
  font-family: var(--f-izmir);
  font-size: var(--t-parrafo);
  line-height: var(--t-parrafo-lh);
}
.page-legal .legal__body p + p { margin-top: .8rem; }
.page-legal .legal__body a { text-decoration: underline; }
.page-legal .legal__body ul {
  list-style: none;
  margin: .8rem 0;
}
.page-legal .legal__body li {
  font-family: var(--f-izmir);
  font-size: var(--t-parrafo);
  line-height: var(--t-parrafo-lh);
  padding: .4rem 0 .4rem 1.4rem;
  position: relative;
}
.page-legal .legal__body li::before {
  content: "·";
  position: absolute;
  left: .2rem;
  color: var(--red);
}
.page-legal .legal__body code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .9em;
  background: rgba(0, 0, 0, .06);
  padding: .1em .4em;
  border-radius: .25em;
}
.page-legal .legal__back { margin-top: 5rem; }
.page-legal .legal__copyright {
  font-family: var(--f-izmir);
  font-size: var(--t-subtitulo);
  line-height: var(--t-subtitulo-lh);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 3rem;
  opacity: .6;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE ≤950 — mobile.css does not cover these pages
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 950px) {

  /* no seam-filler shadow on mobile (r2) */
  .page-proyecto .bg-white,
  .page-proyecto .bg-black,
  .page-proyecto .bg-beige,
  .page-proyecto .bg-blue,
  .page-proyecto .bg-grey,
  .page-legal .bg-beige { box-shadow: none; }

  .page-proyecto .pt-md, .page-proyecto .pt-l { padding-top: 5rem; }
  .page-proyecto .pt-sm { padding-top: 3.6rem; }
  .page-proyecto .pb-md, .page-proyecto .pb-l { padding-bottom: 5rem; }
  .page-proyecto .pb-sm { padding-bottom: 3.6rem; }

  /* hero */
  .page-proyecto .mod-header--proyecto { padding: 7rem var(--inset) 6rem; }
  .page-proyecto .ph__sandwich { max-width: none; }
  .page-proyecto .ph__photo { width: 56%; aspect-ratio: 223 / 272; }
  .page-proyecto .ph__meta {
    grid-template-columns: 1fr;
    gap: .6rem;
    margin-top: 4rem;
  }
  .page-proyecto .ph__intro { max-width: none; margin-top: 1rem; }
  .page-proyecto .ph__scroll { display: none; }

  /* search / idx */
  .page-proyecto .msearch__heading { font-size: var(--t-titulo-l); line-height: var(--t-titulo-l-lh); }
  .page-proyecto .msearch__copy { max-width: none; }
  .page-proyecto .idx-embed { height: 70vh; height: 70svh; }

  /* broker close */
  .page-proyecto .broker__intro { font-size: var(--t-parrafo-l); line-height: var(--t-parrafo-l-lh); }
  .page-proyecto .broker__logo { width: 7rem; }

  /* sticky bar full-width */
  .page-proyecto .alert { width: 100%; padding: 2rem var(--inset) 1.4rem; }
  .page-proyecto .alert__close { right: 1rem; top: -1.1rem; }

  /* legal */
  .page-legal .mod-content--w100 { padding: 8rem var(--inset) 4rem; }
  .page-legal .legal__lead { font-size: var(--t-titulo); line-height: var(--t-titulo-lh); }
  .page-legal .legal__intro,
  .page-legal .legal__body { max-width: none; }
}

/* ── accessibility: no motion, everything in place ── */
@media (prefers-reduced-motion: reduce) {
  .page-proyecto .alert { transform: none; }
}