/* page.css — plantilla "page" (contenido corrido: nosaltres / nosotras,
   recepcio / recepcion). PROPIEDAD: agente de esta plantilla.
   Tokens, reset, header y footer están en base.css (no los redefinas).
   Contrato: DESIGN.md §10.

   La plantilla `page` no tiene un diseño propio en el WordPress original: es
   contenido corrido dentro del ancho de columna del tema. Hasta ahora se
   quedaba sin hoja y el texto salía a sangre completa (1280px+ de línea) en
   escritorio. Esta hoja aporta lo mínimo: contenedor centrado con el mismo
   `--nm-container` que el resto de plantillas, cabecera de página con el H1 en
   la escala de display de `service`, y una prosa con la misma tipografía y
   ritmo vertical que `.svc .prose` para que las páginas no parezcan de otro
   sitio. Nada de esto pisa selectores de otras plantillas: todo cuelga de
   `.page`. */

.page {
  font-family: var(--nm-font-ui);
  color: var(--nm-taupe);
  /* Ancho de línea cómodo dentro del contenedor del sitio. */
  --page-measure: 820px;
}

/* ---------- Cabecera (H1 + meta) ----------------------------------------- */
.page-header {
  width: 100%;
  max-width: var(--nm-container);
  margin-inline: auto;
  padding: var(--nm-space-6) var(--nm-space-3) var(--nm-space-4);
}
.page-header h1 {
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-display); /* 50px, como el hero de `service` */
  font-weight: 600;
  line-height: var(--nm-lh-tight);
  color: var(--nm-taupe);
  margin: 0;
}
.page-header .meta {
  margin: var(--nm-space-2) 0 0;
  font-family: var(--nm-font-body);
  font-size: var(--nm-fs-sm);
  color: var(--nm-muted);
}

/* ---------- Cuerpo -------------------------------------------------------- */
.page > .prose {
  width: 100%;
  max-width: var(--nm-container);
  margin-inline: auto;
  padding: 0 var(--nm-space-3) 100px;
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-xl); /* 18px, como `.svc .prose` */
  font-weight: 400;
  line-height: 28px;
  color: var(--nm-taupe);
}

/* La medida de lectura la limitan los propios bloques de texto, no el
   contenedor: así las imágenes y las citas pueden usar todo el ancho. */
.page > .prose > p,
.page > .prose > ul,
.page > .prose > ol,
.page > .prose > blockquote {
  max-width: var(--page-measure);
}

.page > .prose h2 {
  font-family: var(--nm-font-ui);
  font-size: 40px; /* mismo H2 que `.svc h2` */
  font-weight: 600;
  line-height: var(--nm-lh-tight);
  color: var(--nm-taupe);
  margin: var(--nm-space-6) 0 var(--nm-space-3);
}
.page > .prose > h2:first-child {
  margin-top: 0;
}
.page > .prose h3 {
  font-family: var(--nm-font-ui);
  font-size: 28px;
  font-weight: 300;
  line-height: var(--nm-lh-tight);
  color: var(--nm-taupe);
  margin: var(--nm-space-5) 0 var(--nm-space-2);
}
.page > .prose h4 {
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-h3); /* 32px */
  font-weight: 300;
  color: var(--nm-taupe);
  margin: var(--nm-space-4) 0 var(--nm-space-2);
}
.page > .prose ul,
.page > .prose ol {
  padding-inline-start: var(--nm-space-3);
}
.page > .prose li {
  margin-bottom: var(--nm-space-1);
}
.page > .prose strong {
  font-weight: 600;
}
.page > .prose a {
  color: var(--nm-link);
}
.page > .prose img {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--nm-space-6) 0;
  border-radius: var(--nm-radius);
}
.page > .prose blockquote {
  margin: var(--nm-space-6) 0;
  padding-inline-start: var(--nm-space-5);
  border-inline-start: 3px solid var(--nm-beige);
  font-size: 28px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--nm-taupe);
}
.page > .prose blockquote p {
  margin-bottom: var(--nm-space-2);
}
.page > .prose blockquote p:last-child {
  font-size: var(--nm-fs-md);
  color: var(--nm-muted);
  margin-bottom: 0;
}

/* =========================================================================
   MODO "LAYOUT" (post-557: /ca/nosaltres/ y /es/nosotras/)
   =========================================================================
   Se activa cuando el frontmatter trae `banner`, `quote_image` o `two_col`
   (ver src/content/schema.ts y src/views/templates/Page.tsx). Todo lo de abajo
   cuelga de `.page--layout` o de clases nuevas: las páginas corridas (recepcio,
   avis-legal, polítiques) no ven ni una regla de esta sección. Ver DESIGN.md §11.

   En modo layout el cuerpo son varios `.prose` sueltos, uno por bloque, así que
   el relleno inferior de 100px sobra en todos menos en el último. */
.page--layout > .prose {
  padding-bottom: 0;
}
.page--layout > .prose:last-child {
  padding-bottom: 100px;
}

/* ---------- Banda de foto a ancho completo (widget c289141) --------------- */
/* El original la saca del contenedor de 1140px a uno de 1450px y le da el alto
   en vh (84/70/32 según el breakpoint), no una proporción fija. */
.page-banner {
  width: 100%;
  max-width: 1450px;
  margin-inline: auto;
  padding: 0;
}
.page--layout .page-banner img {
  display: block;
  width: 100%;
  height: 84vh;
  object-fit: cover;
  object-position: center center;
}

/* ---------- Rótulo de sección + dos columnas (secciones 299caba/06d1899) --- */
.page-band {
  width: 100%;
  max-width: var(--nm-container);
  margin-inline: auto;
  padding: var(--nm-space-6) var(--nm-space-3);
}
/* La banda de dos columnas abre bloque: 100px por arriba (sección 299caba). */
.page-band--cols {
  padding-top: 100px;
}
.page--layout .page-band-title h2 {
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-display); /* 50px, como los H1 del original */
  font-weight: 600;
  line-height: var(--nm-lh-tight);
  color: var(--nm-taupe);
  margin: 0;
}
/* 06d1899: dos columnas al 50% con 45px de separación por lado. */
.page-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 90px;
  margin-top: var(--nm-space-4);
}
.page--layout .page-col h2 {
  font-family: var(--nm-font-ui);
  font-size: 22px; /* 02c1874 / 8a4c1d3 */
  font-weight: 700;
  line-height: var(--nm-lh-tight);
  color: var(--nm-taupe);
  margin: 0 0 var(--nm-space-3);
}
.page--layout .page-col p {
  margin: 0 0 var(--nm-space-3);
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-xl);
  line-height: 28px;
  text-align: justify; /* 7744e71 / 1c05098 */
  color: var(--nm-taupe);
}
.page--layout .page-cols .page-col p:last-child {
  margin-bottom: 0;
}

/* ---------- Fila cita + foto (sección a15e075) ---------------------------- */
.page-quote {
  width: 100%;
  max-width: var(--nm-container);
  margin-inline: auto;
  padding: var(--nm-space-6) var(--nm-space-3);
}
.page-quote-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
/* db4f46e: la caja blanca invade 150px la columna de la foto y va por encima. */
.page-quote-text {
  position: relative;
  z-index: 1;
}
.page--layout .page-quote-text blockquote {
  margin: 0 -150px 0 0;
  padding: 49px;
  border: 0;
  border-radius: var(--nm-radius);
  background: var(--nm-white);
  text-align: right; /* elementor-blockquote--align-right */
}
.page--layout .page-quote-text blockquote p {
  margin: 0;
  font-family: var(--nm-font-ui);
  font-size: 38px;
  font-weight: 600;
  line-height: var(--nm-lh-tight);
  color: var(--nm-beige);
}
/* La firma (el <cite> del original). */
.page--layout .page-quote-text blockquote p + p {
  margin-top: 11px;
  font-size: var(--nm-fs-xl);
  font-weight: 400;
  color: var(--nm-taupe);
}
/* 1c1e9e7 + spacer 4c0b84e: 570x560. Encuadre "center right" desde el
   cambio de la clínica del 19-oct-2026 en /ca/nosaltres/. */
.page--layout .page-quote-media img {
  display: block;
  width: 100%;
  height: 560px;
  object-fit: cover;
  object-position: 100% 50%;
  border-radius: var(--nm-radius);
}

/* ---------- Tablet (<=1024px) -------------------------------------------- */
@media (max-width: 1024px) {
  .page-header {
    padding: var(--nm-space-6) var(--nm-space-3) var(--nm-space-3);
  }
  .page > .prose {
    padding-bottom: var(--nm-space-6);
  }
  .page > .prose h2 {
    font-size: var(--nm-fs-h2);
  }

  .page--layout > .prose:last-child {
    padding-bottom: var(--nm-space-6);
  }
  .page-banner {
    padding: 0 var(--nm-space-3);
  }
  .page--layout .page-banner img {
    height: 70vh;
  }
  .page-band--cols {
    padding-top: var(--nm-space-6);
  }
  .page-cols {
    column-gap: 50px;
  } /* 25px de padding por lado */
  .page-quote {
    padding: var(--nm-space-6) var(--nm-space-3) 0;
  }
  .page--layout .page-quote-text blockquote {
    margin-right: -110px;
  }
  .page--layout .page-quote-text blockquote p {
    font-size: 24px;
  }
  .page--layout .page-quote-media img {
    height: 404px;
  }
}

/* ---------- Móvil (<=767px) ---------------------------------------------- */
@media (max-width: 767px) {
  .page > .prose h2 {
    margin-top: var(--nm-space-5);
  }
  .page > .prose h3,
  .page > .prose blockquote {
    font-size: var(--nm-fs-h3);
  }
  .page > .prose img {
    margin: var(--nm-space-5) 0;
  }

  .page--layout .page-banner img {
    height: 32vh;
  }
  .page-band {
    padding: var(--nm-space-5) var(--nm-space-3) var(--nm-space-4);
  }
  .page-band-title {
    text-align: center;
  }
  /* Una columna: los dos bloques se apilan, centrados como en el original. */
  .page-cols {
    grid-template-columns: 1fr;
    row-gap: var(--nm-space-4);
  }
  .page--layout .page-col h2,
  .page--layout .page-col p {
    text-align: center;
  }
  /* elementor-reverse-mobile: primero la foto, después la cita. */
  .page-quote {
    padding: var(--nm-space-5) var(--nm-space-3) 0;
  }
  .page-quote-row {
    grid-template-columns: 1fr;
    row-gap: var(--nm-space-4);
  }
  .page-quote-text {
    order: 2;
  }
  .page-quote-media {
    order: 1;
  }
  .page--layout .page-quote-text blockquote {
    margin-right: 0;
    padding: 35px;
  }
  .page--layout .page-quote-text blockquote p {
    font-size: 24px;
  }
  .page--layout .page-quote-media img {
    height: 420px;
  }
}