/* ============================================================
   DESTINATION DETAIL PAGE (detalle-de-destino.html) — page layout
   Load AFTER styles/main.css and styles/home.css. Reuses the
   navbar, footer, home hero, .section, .section-head, .split,
   the .project-card / .destination-card carousels, the .cta band
   and button helpers; this file only carries the destination-
   detail-specific blocks (hero photo, intro image crop and the
   editorial gallery mosaic). 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 destination photo. Same mechanics as the
   home hero (see home.css → .hero): title centred in the upper
   area, caption + button pinned to the bottom row.
   ============================================================ */
.hero--destino {
  /* Slightly stronger bottom scrim keeps the caption + button
     legible over the night-city photo. Swap the URL for a real
     destination hero. */
  background-image: linear-gradient(180deg, rgba(5, 7, 6, 0.45) 0%, rgba(5, 7, 6, 0) 30%, rgba(5, 7, 6, 0.6) 100%),
                    url("https://placehold.co/1600x900");
}

.detalle_destino_hero_subtitle {
  max-width: 480px;
}

.detalle_destino_hero_btn {
  border-color: var(--color-white);
  color: var(--color-white);
}

/* Title pinned to the start of its column (left) rather than the
   home default, matching the destination reference. */
.hero__title--destino { justify-self: start; }

.destino-intro-width {
  max-width: 80ch;
}

/* ============================================================
   GALLERY — editorial mosaic that alternates a two-photo row
   (asymmetric: narrow + wide) with a three-photo row of equal
   portrait frames. Every frame crops its image with cover.
     .destino-gallery__row--pair → narrow + wide landscape pair
     .destino-gallery__row--trio → three equal portrait frames
   ============================================================ */
.destino-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

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

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

/* The pair frames share a fixed height so their top and bottom
   edges align despite the unequal column widths (layout-only). */
.destino-gallery__row--pair .destino-figure { height: clamp(240px, 32vw, 460px); }
.destino-gallery__row--trio .destino-figure { aspect-ratio: 4 / 5; }

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

/* ============================================================
   CTA — left-aligned prompt with a single action on the right.
   Reuses home's .cta flex layout; the title keeps sentence case
   (unlike the capitalised home CTA title).
   ============================================================ */
.destino-cta__title {
  font-weight: var(--font-weight-bold);
  max-width: 46ch;
  text-transform: none;
}

/* ============================================================
   RESPONSIVE  (<= 768px)
   ============================================================ */
@media (max-width: 768px) {
  .detalle_destino_split { display: flex; flex-direction: column-reverse; }
  .detalle_destino_intro_title { font-size: 14px; font-weight: var(--font-weight-bold); text-transform: uppercase; }
  .detalle_destino_intro_spec { color: var(--color-black); }
  .destino-intro__img { max-width: 100%; }

  .detalle_destino_proyecto_title { font-size: 14px; font-weight: var(--font-weight-bold); text-transform: uppercase; }
  .detalle_destino_proyecto_subtitle { font-size: 14px; }
  .detalle_destino_proyecto_year { font-size: 14px; }

  .detalle_destino_cta_title { text-transform: uppercase; }
  .detalle_destino_cta_btn { 
    color: var(--color-black);
    background-color: transparent;
    border: 1px solid var(--color-black);
    padding: var(--space-8) var(--space-16);
    border-radius: 4px;
    text-decoration: none;
    width: fit-content;
    text-transform: uppercase;
   }

  .destino-gallery__row--pair,
  .destino-gallery__row--trio { grid-template-columns: 1fr; }

  .destino-gallery__row--pair .destino-figure {
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .destino-gallery__row--trio .destino-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. */
  .destino-gallery:not(.is-expanded) .destino-figure--extra,
  .destino-gallery:not(.is-expanded) .destino-gallery__row--extra { display: none; }

  /* Soft blurred fade at the bottom of the collapsed gallery so the
     last visible image dissolves into the page and hints there's more
     behind "Ver más". */
  .destino-gallery { position: relative; }
  .destino-gallery:not(.is-expanded)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140px;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.75) 55%,
      var(--color-bg) 100%
    );
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 70%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 70%);
  }

  .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. */
  .destino-gallery.is-expanded ~ .gallery-more { display: none; }
}