/* =========================================================================
   Study-trip photo galleries  —  the individual trip pages
   -------------------------------------------------------------------------
   Namespaced `tg-*`. Replaces `.gallery img { width:320px; height:260px }`
   from event_style.css, which forced every photo into a fixed box regardless
   of its real aspect ratio and could not reflow at any viewport.

   The lightbox is untouched: each tile is still an <a data-lightbox> and the
   existing event_lightbox script binds to it exactly as before.
   ========================================================================= */

.tg-section {
  padding: clamp(18px, 3vw, 40px) 0 clamp(26px, 4vw, 56px);
  background: #f6f7f9;
}

.tg-wrap {
  width: min(1280px, calc(100% - 24px));
  margin-inline: auto;
}

/* ---- Page heading ------------------------------------------------------ */
.tg-head {
  text-align: center;
  margin-bottom: clamp(16px, 2.4vw, 30px);
}

/* text-align is set on every text element here, not inherited from .tg-head.
   style.css declares `h1 { text-align: left }` and a justified `p`, and a
   direct rule on the element always beats an inherited value regardless of
   specificity - inheritance only fills in where nothing else matched. */
.tg-head__title {
  margin: 0;
  font-size: clamp(21px, 3.2vw, 36px);
  font-weight: 800;
  line-height: 1.15;
  color: #16181d;
  letter-spacing: -.01em;
  text-align: center;
}

.tg-head__rule {
  width: 54px;
  height: 3px;
  margin: 10px auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #b8292f, #ff8a3d);
}

.tg-head__meta {
  margin: 9px 0 0;
  font-size: 13px;
  color: #6b7080;
  letter-spacing: normal;
  text-align: center;
}

.tg-back {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #b8292f;
  text-decoration: none;
}

.tg-back:hover,
.tg-back:focus-visible {
  text-decoration: underline;
}

/* ---- Grid -------------------------------------------------------------- */
/* Two up on phones, auto-fill above. Same reasoning as the index gallery:
   a minmax() wide enough for desktop can only fit one column on a phone. */
.tg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 640px) {
  .tg-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: clamp(12px, 1.4vw, 18px);
  }
}

.tg-item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: #e4e6ea;
  box-shadow: 0 2px 6px rgba(16, 18, 24, .10), 0 8px 20px rgba(16, 18, 24, .12);
  /* Transform only. box-shadow cannot be composited, so transitioning it
     repaints the tile every frame - with up to 38 tiles on a page that is
     what made hovering feel laggy. */
  transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}

.tg-item:hover,
.tg-item:focus-visible {
  transform: translateY(-4px);
}

.tg-item:focus-visible {
  outline: 3px solid #b8292f;
  outline-offset: 3px;
}

.tg-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* keeps the zoom on the compositor rather than re-rasterising the photo */
  transform: translateZ(0);
  transition: transform .38s cubic-bezier(.22, .61, .36, 1);
}

.tg-item:hover img,
.tg-item:focus-visible img {
  transform: scale(1.055) translateZ(0);
}

/* A quiet affordance that the tile opens: no text, just a tint and a glyph. */
.tg-item::after {
  content: '\2922';                     /* diagonal resize arrow */
  position: absolute;
  right: 8px;
  bottom: 7px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(12, 13, 16, .58);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .25s ease, transform .25s ease;
}

.tg-item:hover::after,
.tg-item:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

/* Touch devices never hover, so the cue would never show. */
@media (hover: none) {
  .tg-item::after {
    opacity: .85;
    transform: none;
  }
}

@media (max-width: 639px) {
  .tg-section {
    padding: 14px 0 22px;
  }

  .tg-item {
    border-radius: 8px;
  }

  .tg-item::after {
    width: 21px;
    height: 21px;
    font-size: 11px;
    right: 5px;
    bottom: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tg-item,
  .tg-item img,
  .tg-item::after {
    transition: none !important;
  }
  .tg-item:hover,
  .tg-item:focus-visible {
    transform: none;
  }
  .tg-item:hover img {
    transform: none;
  }
}

/* ---- Lightbox polish --------------------------------------------------- */
/* Lightbox2 sizes .lb-outerContainer with jQuery .animate and swaps .lb-image
   underneath it. js/trip-lightbox.js matches the two durations; these rules
   soften the edges of the same movement and modernise the chrome. */
.lb-outerContainer,
.lb-dataContainer {
  border-radius: 10px !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
}

.lb-image {
  border-radius: 8px !important;
  border: none !important;
}

.lb-nav a.lb-prev,
.lb-nav a.lb-next {
  transition: opacity .25s ease;
}

.lb-data .lb-caption,
.lb-data .lb-number {
  letter-spacing: normal;
}

/* The default backdrop is a flat 80% black that appears instantly. */
.lightboxOverlay {
  background: rgba(8, 9, 12, .88) !important;
}

@media (prefers-reduced-motion: reduce) {
  .lb-nav a.lb-prev,
  .lb-nav a.lb-next {
    transition: none;
  }
}

/* Belt and braces for the resize seam: clip anything drawn outside the frame
   while it changes size, so a mid-swap image can never paint past its edge. */
.lb-outerContainer,
.lb-container {
  overflow: hidden !important;
}

/* Lightbox2 gives .lb-image a white border by default, which reads as a line
   against a photo. Removed above; repeated here for the container edge. */
.lb-outerContainer {
  background-color: #fff;
}

/* ---- Kill the 34% seam --------------------------------------------------
   event_lightbox.min.css lays the two nav hotspots as floats over the photo:
   .lb-prev is 34% wide and .lb-next 64%, leaving a 2% gap between them. That
   makes .lb-prev's right edge land INSIDE the picture - the one element
   boundary that does - and it is exactly where the reported vertical line
   appears. Nothing should ever paint there, so every property that could
   draw an edge is zeroed explicitly (a focus ring after clicking "next" is
   the most likely culprit: a mouse click sets :focus on the anchor).
   The floats are left alone - .lb-outerContainer:after clears them. */
.lb-nav a.lb-prev,
.lb-nav a.lb-next,
.lb-nav a:focus,
.lb-nav a:active {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  -webkit-tap-highlight-color: transparent;
}

/* The white 4px frame Lightbox2 puts on the photo reads as a line too. */
.lightbox .lb-image {
  border: 0 !important;
}