/* ============================================================
   HISTORIAS DE BODA — las ocho páginas mallorca-wedding-*
   Estructura de Jack Henry (oct 2026): nombres en versalitas, H1
   con palabras clave en cursiva, intro corta, UN carrusel con las
   30–40 fotos que eligió Augusto, la historia completa plegada en
   «Read the story» (sigue en el HTML para Google), proveedores y
   navegación. Ver STYLEGUIDE § 4.9.
   ============================================================ */

/* ── CABECERA ── */
.story-head {
  padding: calc(var(--header-h) + var(--space-xl)) var(--gutter) 0;
  text-align: center;
}
.story-eyebrow {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dust);
  margin-bottom: var(--space-sm);
}
.story-names {
  font-family: var(--cg);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 50px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.12;
  color: var(--ink);
}
.story-title {
  font-family: var(--cg);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.4;
  color: var(--stone);
  margin-top: 10px;
}

/* Hijos directos de body: el ancho de lectura va un nivel más adentro (§ 2.4) */
.story-intro { padding: var(--space-lg) var(--gutter) 0; }
.story-intro p {
  max-width: 640px;
  margin: 0 auto 18px;
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--stone);
}
.story-intro p:last-child { margin-bottom: 0; }

/* ── CARRUSEL ── */
.story-carousel { margin-top: var(--space-xl); }
/* De borde a borde también en monitores de más de 1600px: algunas historias
   llevan body.constrained, cuya regla (0,1,4) limita cada hijo del body a
   1600px. Este selector (0,2,1) le gana. Ver STYLEGUIDE § 2.4. */
body.constrained > .story-carousel { max-width: none; }
.strip {
  position: relative;  /* offsetLeft de las fotos, relativo al carrusel (story.js) */
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.strip::-webkit-scrollbar { display: none; }
.strip img {
  height: clamp(320px, 62vh, 640px);
  width: auto;
  max-width: none;
  flex: none;
  scroll-snap-align: center;
  background: var(--linen);
}
/* Escritorio con bucle (story.js): de borde a borde, foto actual centrada,
   clic en la mitad derecha = siguiente, en la izquierda = anterior */
.story-carousel.is-loop .strip { padding: 0; gap: 20px; }
.story-carousel.is-loop .strip img { scroll-snap-align: center; }
.strip.to-next { cursor: e-resize; }
.strip.to-prev { cursor: w-resize; }

.strip-ctl {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  margin-top: 16px;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--dust);
  font-variant-numeric: tabular-nums;
}
.strip-ctl button {
  background: none;
  border: 0;
  cursor: pointer;
  font: 15px var(--ui);
  color: var(--stone);
  padding: 4px 8px;
  transition: color 0.2s;
}
.strip-ctl button:hover { color: var(--ink); }

/* ── HISTORIA PLEGADA ── */
.story-read { padding: var(--space-xl) var(--gutter) 0; }
.story-read details { max-width: 640px; margin: 0 auto; }
.story-read summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  border-top: 0.5px solid var(--linen);
  border-bottom: 0.5px solid var(--linen);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
}
.story-read summary::-webkit-details-marker { display: none; }
.story-read details[open] summary { border-bottom-color: transparent; }
.read-i { width: 10px; height: 10px; position: relative; }
.read-i::before,
.read-i::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--ink);
  transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
}
.read-i::after { transform: rotate(90deg); }
.story-read details[open] .read-i::after { transform: rotate(0deg); }
.story-text { padding-top: var(--space-md); }
.story-text h2 {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dust);
  margin: var(--space-lg) 0 12px;
}
.story-text h2:first-child { margin-top: 0; }
.story-text p {
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--stone);
  margin-bottom: 18px;
}
.story-text a { color: var(--ink); border-bottom: 0.5px solid var(--dust); }

/* ── CIERRE ── */
.story-closing { padding: var(--space-xl) var(--gutter) 0; }
.story-closing p {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--cg);
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink);
}

/* ── PROVEEDORES ── */
.story-vendors { padding: var(--space-2xl) var(--gutter) 0; text-align: center; }
.story-vendors h2 {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dust);
  margin-bottom: var(--space-md);
}
.story-vendors dl {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 24px;
}
.story-vendors dt {
  font-family: var(--cg);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.story-vendors dt a { border-bottom: 0.5px solid transparent; transition: border-color 0.2s; }
.story-vendors dt a:hover { border-bottom-color: var(--dust); }
.story-vendors dd {
  margin-top: 6px;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dust);
}

/* ── ENLACES DEL FINAL ── */
.same-venue { padding: var(--space-2xl) var(--gutter) 0; text-align: center; }
.story-cta { padding: var(--space-xl) var(--gutter) 0; }
.story-cta p {
  max-width: 640px;
  margin: 0 auto;
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--dust);
  text-align: center;
}
.story-cta a { color: var(--ink); border-bottom: 0.5px solid var(--dust); }
/* Anterior / siguiente: discretos, en una línea, dentro de la caja de 1200px */
.story-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding: var(--space-lg) max(var(--gutter-sm), calc((100% - 1152px) / 2));
  border-top: 0.5px solid var(--linen);
}
.story-nav-item.next { text-align: right; }
.story-nav-dir {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dust);
  margin-bottom: 8px;
}
.story-nav-title {
  font-family: var(--cg);
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.2s;
}
.story-nav-item a:hover .story-nav-title { color: var(--stone); }

@media (max-width: 900px) {
  .story-head { padding: calc(var(--header-h) + var(--space-lg)) var(--gutter-sm) 0; }
  .story-intro, .story-read, .story-closing, .story-cta, .same-venue, .story-vendors {
    padding-left: var(--gutter-sm);
    padding-right: var(--gutter-sm);
  }
  .strip { padding: 0 var(--gutter-sm); gap: 8px; }
  .story-vendors dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-nav-title { font-size: 14px; letter-spacing: 0.1em; }
}