/* ========== Gallery (Shared tokens) ========== */
.gallery-index {
  --card-gap: 1.25rem;
  --card-radius: 16px;
  --card-pad: 1rem;
  --card-shadow: 0 8px 20px rgba(0,0,0,.08);
  --card-shadow-hover: 0 10px 28px rgba(0,0,0,.14);
  --title-size: clamp(1.1rem, 1.2vw + .9rem, 1.4rem);
  padding: 1; /* container provides padding */
}
/* ========== Adventure On ========== */
.adventure_on {
  text-align: center;
  margin: 2rem 0;
  background-color: #3d84db;
}
.adventure_on img {
  max-width: 60%;
  height: auto;
  border-radius: 12px;
}
/* ========== Gallery Index ========== */

/* Grid: auto-fit → collapses gracefully */
.gallery-index .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--card-gap);
}

/* Card (your template uses .gallery-page as the card) */
.gallery-index .gallery-page {
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-pad);
  transition: box-shadow .18s ease, transform .18s ease;
}
@media (hover:hover) {
  .gallery-index .gallery-page:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
  }
}

/* Title inside the card (h2 with link) */
.gallery-index .gallery-page h2 {
  margin: 0 0 .6rem 0;
  font-size: var(--title-size);
  line-height: 1.25;
  color: #144a8b; /* Scout blue */
}
.gallery-index .gallery-page h2 a {
  color: inherit;
  text-decoration: none;
}
.gallery-index .gallery-page h2 a:hover {
  text-decoration: underline;
}

/* Thumb wrapper for consistent aspect + rounded edges */
.gallery-index .thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #f4f6f8;
  margin: .35rem 0 .25rem;
}
.gallery-index .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Optional blurb under image */
.gallery-index .gallery-blurb {
  margin-top: .4rem;
  color: #334155;
  font-size: .95rem;
}

/* ========== Gallery Detail ========== */

/* Wrapper + headings */
.gallery-detail h1 {
  margin: 0 0 1rem 0;
}
.gallery-detail .gallery-subtitle {
  margin: .25rem 0 1rem 0;
  color: var(--color-link);
}

/* Image grid on detail page */
.gallery-detail .gallery-images.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.gallery-detail .gallery-item {
  margin: 0;
}

/* Thumb on detail page */
.gallery-detail .thumb {
  width: 100%;
  aspect-ratio: 16 / 9; /* desktop/tablet */
  border-radius: 12px;
  overflow: hidden;
  background: #f4f6f8;
}
.gallery-detail .thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Caption */
.gallery-detail .gallery-caption {
  margin-top: .4rem;
  color: #334155;
  font-size: .95rem;
}

/* ========== Mobile polish (≤ 720px) ========== */
@media (max-width: 720px) {
  /* Index: page title */
  .gallery-index h1 {
    font-size: 1.6rem;
    line-height: 1.3;
    text-align: center;
    margin: 0 0 1rem 0;
    padding: 0 .5rem;
  }
  .adventure_on img {

  }
  /* Index: edge-to-edge single column */
  .gallery-index .gallery-grid {
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: .75rem;
    padding: 0; /* rely on outer container */
  }

  /* Index: full-width cards */
  .gallery-index .gallery-page {
    width: 100%;
    max-width: none;
    padding: .9rem;
    border-radius: 12px;
  }

  /* Index: smaller titles; taller thumbs */
  .gallery-index .gallery-page h2 { font-size: 1.2rem; }
  .gallery-index .thumb { aspect-ratio: 4 / 3; }

  /* Optional page bleed for true edge-to-edge feel inside container */
  .gallery-index {
    margin-left: calc(-1 * var(--container-pad, 1rem));
    margin-right: calc(-1 * var(--container-pad, 1rem));
  }

  /* Detail: headings and grid */
  .gallery-detail h1 {
    font-size: 1.6rem;
    line-height: 1.3;
    text-align: center;
    padding: 0 .5rem;
    margin: 0 0 1rem 0;
  }
  .gallery-detail .gallery-subtitle {
    font-size: 1.1rem;
    text-align: center;
  }
  .gallery-detail .gallery-images.gallery-grid {
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: .75rem;
    padding: 0;
  }
  .gallery-detail .thumb {
    aspect-ratio: 4 / 3; /* taller on phones */
    border-radius: 12px;
  }
}

/* Clip child shadows to rounded container corners (iOS fix) */
.container { overflow: clip; 
  padding: 1rem;
} /* use overflow: hidden; if clip unsupported */

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gallery-index .gallery-page { transition: none; }
}