/* ============================================================
   estudio.css — Estilos propios de la página "El Estudio".
   Reusa los componentes de home.css (hero, ti-block, cta-band, footer).
   Aquí SOLO lo específico: galería (collage único) + ajustes de bloque filosofía/CTA.
   Tokens en tokens.css. Fuente de verdad visual: knowledge/despiece/estudio.png.
   ============================================================ */

/* ---------- Bloque "Nuestra filosofía de trabajo" (texto izq + galería der) ----------
   Mismo grid 2-col del ti-block. El texto es largo → alineamos al tope, no al centro,
   para que el primer párrafo arranque a la altura del título (como el diseño). */
.ti-block--filosofia .ti-block__inner {
  align-items: start;
}
.ti-block--filosofia .ti-block__body {
  max-width: 34em;   /* el cuerpo de filosofía es más ancho que el default de Home */
}
/* "Ver Galería" → estilo propio del diseño (manifiesto estudio.json):
   title case (NO uppercase), Jost-Medium 14px, color #9D7E9B, SIN flecha "›".
   Clase propia (no el .btn-link genérico que es uppercase + ::after flecha). */
.gallery-link {
  position: relative;
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 500;                 /* Jost-Medium */
  font-size: var(--fs-btn);         /* 14px */
  letter-spacing: .02em;
  text-transform: none;             /* title case, NO uppercase */
  color: #9D7E9B;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
/* subrayado sutil que crece desde la izquierda en hover (sin flecha) */
.gallery-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 1px;
  width: 0;
  background: currentColor;
  transition: width .25s ease;
}
.gallery-link:hover::after { width: 100%; }

/* "Ver Galería" → debajo de la galería, alineado a la derecha (igual que el diseño).
   El link es el último hijo del .ti-block__media--gallery, fuera del grid de fotos. */
.ti-block__gallery-link {
  align-self: flex-end;   /* derecha dentro del media column (flex column) */
  margin-top: 18px;
}

/* ---------- GALERÍA — grid CSS masonry (único de Estudio) ----------
   El diseño (rosso-galeria.png, 2423×2491) es un collage 2col × 3filas con anchos alternados
   por fila. Se reproduce con CSS grid sobre las 6 fotos individuales (im1..6), NO una imagen
   composite aplanada (preserva responsive, nitidez e interactividad). Ratios de columna medidos
   del composite:  Fila 1 = 59/41 · Fila 2 = 38/62 · Fila 3 = 58/42.
   Grid de 100 columnas finas → cada celda toma el span correspondiente a su % de ancho.
   Filas de alto parejo (--gal-row); object-fit:cover → la celda da la proporción, la foto se
   recorta al cell sin deformar. El media column es flex-column: grid arriba + link abajo-der. */
.ti-block__media--gallery {
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* anula el centrado horizontal del ti-block__media */
  justify-content: flex-start;
  overflow: visible;
  border-radius: 0;
}
.gallery {
  --gal-gap: 10px;        /* gutter chico, ~8-12px del diseño */
  --gal-row: 168px;       /* alto parejo de cada fila */
  display: flex;
  flex-direction: column;
  gap: var(--gal-gap);
  margin: 0;
  width: 100%;
  min-width: 0;
}
/* Cada fila es un grid 2-col con su ratio. minmax(0,…) anula el piso min-content de cada
   columna → las imgs nunca fuerzan ancho intrínseco (sin overflow a ningún ancho). */
.gallery__row {
  display: grid;
  gap: var(--gal-gap);
  height: var(--gal-row);
  min-width: 0;
}
.gallery__row--1 { grid-template-columns: minmax(0, 59fr) minmax(0, 41fr); }
.gallery__row--2 { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); }
.gallery__row--3 { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }

.gallery__cell {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: var(--c-beige);
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
}
.gallery__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* la celda da la proporción; la foto se recorta sin deformar */
  display: block;
  transition: transform .5s ease;
}
.gallery__cell:hover img,
.gallery__cell:focus-visible img { transform: scale(1.04); }
.gallery__cell:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* ---------- CTA "Nuestro compromiso" — línea destacada "¿Tiene una consulta…?" ---------- */
.cta-band__lead {
  display: block;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--c-gray);
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  /* En móvil el ti-block ya pasa a 1 columna (home.css). */
  .ti-block--filosofia .ti-block__inner { align-items: stretch; }
}
@media (max-width: 640px) {
  /* Mobile: filas a 2-col parejo (sin anchos alternados), object-fit:cover evita deformación. */
  .gallery { --gal-row: 150px; }
  .gallery__row--1,
  .gallery__row--2,
  .gallery__row--3 { grid-template-columns: 1fr 1fr; }
}

/* prefers-reduced-motion: sin zoom en hover */
@media (prefers-reduced-motion: reduce) {
  .gallery__cell img { transition: none; }
  .gallery__cell:hover img,
  .gallery__cell:focus-visible img { transform: none; }
  .gallery-link::after { transition: none; }
}

/* ============================================================
   LIGHTBOX — modal de galería (vanilla JS, lightbox.js)
   On-brand: backdrop morado oscuro, acento lila #A27EA0.
   ============================================================ */
body.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .28s ease;
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(46, 38, 45, 0.92);   /* morado muy oscuro derivado de la paleta */
  backdrop-filter: blur(2px);
}

.lightbox__dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 1100px);
  max-height: 92vh;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "prev stage next"
    "thumbs thumbs thumbs";
  align-items: center;
  gap: 14px;
  transform: scale(0.98);
  transition: transform .28s ease;
}
.lightbox.is-open .lightbox__dialog { transform: scale(1); }

.lightbox__stage {
  grid-area: stage;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.lightbox__img {
  max-width: 100%;
  max-height: 74vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  background: #000;
}
.lightbox__counter {
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: var(--fs-btn);
  letter-spacing: .06em;
  color: #F4F2ED;
}

.lightbox__close {
  position: absolute;
  top: -10px;
  right: -6px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #F4F2ED;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease, transform .2s ease;
}
.lightbox__close:hover,
.lightbox__close:focus-visible { color: var(--c-accent); transform: scale(1.08); }

.lightbox__nav {
  width: 48px;
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(244,242,237,.35);
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: #F4F2ED;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.lightbox__nav--prev { grid-area: prev; }
.lightbox__nav--next { grid-area: next; }
.lightbox__nav:hover,
.lightbox__nav:focus-visible {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}

.lightbox__thumbs {
  grid-area: thumbs;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
}
.lightbox__thumb {
  width: 64px;
  height: 48px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  opacity: .55;
  transition: opacity .2s ease, border-color .2s ease;
}
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox__thumb:hover,
.lightbox__thumb:focus-visible { opacity: .85; }
.lightbox__thumb.is-active { opacity: 1; border-color: var(--c-accent); }

@media (max-width: 640px) {
  .lightbox__dialog {
    grid-template-columns: 1fr;
    grid-template-areas:
      "stage"
      "thumbs";
    gap: 10px;
  }
  .lightbox__nav {
    position: absolute;
    top: 38%;
    z-index: 2;
  }
  .lightbox__nav--prev { left: 4px; }
  .lightbox__nav--next { right: 4px; }
  .lightbox__img { max-height: 64vh; }
  .lightbox__thumb { width: 48px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__dialog,
  .lightbox__close,
  .lightbox__nav,
  .lightbox__thumb { transition: none; }
  .lightbox__dialog { transform: none; }
}