/* ============================================================
   WEDDING DETAIL PAGE (detalle-de-boda.html) — page layout
   Load AFTER styles/main.css and styles/home.css. Reuses the
   navbar, footer, hero, .section, .section-head, .split, the
   .project-card carousel and button helpers; this file only
   carries the wedding-detail-specific blocks. Consumes design
   tokens only; no raw hex/px values except layout-only aspect
   ratios. Mobile breakpoint: 768px (in sync with --breakpoint-md).
   ============================================================ */

/* ============================================================
   HERO — full-bleed photo with the couple name pinned to the
   bottom-left and a quiet caption below it. Same mechanics as
   the home hero (see home.css → .hero).
   ============================================================ */
.hero--detail {
  /* Bottom scrim keeps the name + caption legible over the photo */
  background-image: linear-gradient(180deg, rgba(5, 7, 6, 0.35) 0%, rgba(5, 7, 6, 0) 30%, rgba(5, 7, 6, 0.6) 100%),
                    url("https://placehold.co/1600x900");
}

/* Name centred in the flexible upper area; caption pinned to the
   bottom edge — same two-row split as the home hero. */
.hero__content--detail { grid-template-rows: 1fr auto; }

.hero__title--project {
  align-self: center;
  justify-self: start;
  font-size: var(--font-size-headline-2);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
}

/* Quiet caption at the very bottom-left of the hero */
.hero__caption--detail {
  align-self: end;
  justify-self: start;
  color: rgba(255, 255, 255, 0.75);
}

/* ============================================================
   META BAR — Lugar / Destino / Fecha / Fotógrafo, centred as a
   group on a light-grey band with hairline dividers between
   each item. Each item stacks a muted label over its value.
   ============================================================ */
.wedding-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wedding-meta__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
  padding-inline: calc(var(--space-24) * 2);
  padding-top: 24px;
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}
.wedding-meta__item + .wedding-meta__item {
  border-left: 0.25px solid #000;
}

.wedding-meta__label {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-black);
}
.wedding-meta__value {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-book);
  color: var(--color-text);
}

.wedding-custom-history-width {
  max-width: 100ch;
}

/* ============================================================
   LA HISTORIA — reuses home's .split (text left, image right).
   The story image is a taller portrait crop than the square
   default used elsewhere.
   ============================================================ */
.split__img--portrait {
  max-width: 327px;
}

/* ============================================================
   GALLERY — a stack of rows with varied compositions:
     .gallery-row--pair  → two equal landscape frames
     .gallery-row--full  → one full-width frame
     .gallery-row--trio  → three equal frames
   Every frame crops its image with object-fit: cover.
   ============================================================ */
.gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.gallery-row {
  display: grid;
  gap: var(--space-16);
}
.gallery-row--pair { grid-template-columns: 1fr 1fr; }
.gallery-row--full { grid-template-columns: 1fr; }
.gallery-row--trio { grid-template-columns: repeat(3, 1fr); }

.gallery-figure {
  margin: 0;
  overflow: hidden;
  background-color: var(--color-grey-light);
}
.gallery-figure img,
.gallery-figure video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Aspect ratios per composition (layout-only, not tokenised) */
.gallery-row--pair .gallery-figure { aspect-ratio: 3 / 2; }
.gallery-row--full .gallery-figure { aspect-ratio: 16 / 9; }
.gallery-row--trio .gallery-figure { aspect-ratio: 4 / 5; }

/* ---- Video frame — full-width image with a centred play button */
.gallery-video { position: relative; }
.gallery-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(var(--space-24) * 2.5);
  height: calc(var(--space-24) * 2.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  color: var(--color-black);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.gallery-video__play:hover {
  background-color: var(--color-black);
  transform: scale(1.06);
}

/* ---- "Ver más" — hidden on desktop, shown only on mobile (see media query) */
.gallery-more { display: none; }

/* ============================================================
   RESPONSIVE  (<= 768px)
   ============================================================ */
@media (max-width: 768px) {
  .wedding-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-24);
  }

  .wedding-meta :nth-child(1) { order: 2; }
  .wedding-meta :nth-child(2) { order: 1; }
  .wedding-meta :nth-child(3) { order: 3; }
  .wedding-meta :nth-child(4) { order: 4; }

  .wedding-meta__item {
    padding: var(--space-16) 0;
    flex-direction: column-reverse;
  }
  .wedding-meta__item + .wedding-meta__item {
    border-left: 0;
    border-top: 0;
  }
  .wedding-meta__label {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0;
    text-transform: uppercase;
    text-align: center;
  }
  .wedding-meta__value {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-book);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0;
    text-align: center;
  }

  .detalle_boda_split { display: flex; flex-direction: column-reverse; }
  .detalle_boda_split .subtitle--label { font-size: 14px; font-weight: var(--font-weight-bold); text-transform: uppercase; }
  .detalle_boda_split .split__lead { color: var(--color-black); }
  .detalle_boda_split .split__img--portrait { background-color: transparent; max-width: 100%; }

  .gallery-row--pair,
  .gallery-row--trio { grid-template-columns: 1fr; }

  .gallery-row--pair .gallery-figure,
  .gallery-row--trio .gallery-figure { aspect-ratio: 4 / 3; }

  /* Collapsed by default: show only the first 4 images. The extra
     figures / rows stay hidden until the gallery is expanded via JS. */
  .gallery:not(.is-expanded) .gallery-figure--extra,
  .gallery:not(.is-expanded) .gallery-row--extra { display: none; }

  .gallery-more {
    display: block;
    width: fit-content;
    margin: var(--space-24) auto 0;
    text-align: center;
  }
  /* Once everything is visible there is nothing more to reveal. */
  .gallery.is-expanded ~ .gallery-more { display: none; }
  
  .detalle_boda_proyectos_card_title { font-size: 14px; font-weight: var(--font-weight-bold); text-transform: uppercase; }
  .detalle_boda_proyectos_card_year { font-size: 14px; }
  .detalle_boda_proyectos_card_subtitle { font-size: 14px; }
}