/* ==========================================================================
   Gallery page
   Extends css/home.css (tokens, header, footer, buttons all inherited).
   Source photos are 508x677 and cannot be enlarged, so the grid is sized so
   each tile renders AT OR BELOW native width: no upscaling, no soft tiles.
   ========================================================================== */

.jt-gallery {
  padding-block: var(--sec-y);
  background: var(--white);
}

/* 4-up at desktop keeps each cell near 285px, well under the 508px source.
   auto-fill with a max of 1fr means the last row never stretches oddly. */
.jt-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.jt-gallery-item {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--ice);
  box-shadow: var(--shadow-sm);
  /* every source is 3:4 portrait, so the grid stays perfectly even */
  aspect-ratio: 3 / 4;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}

.jt-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (hover: hover) {
  .jt-gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
  }
}

@media (max-width: 1100px) {
  .jt-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .jt-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .jt-gallery-grid { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .jt-gallery-item { transition: none; }
  .jt-gallery-item:hover { transform: none; }
}

/* Trust points in the closing CTA. The band is orange, so these are white
   with a check glyph rather than the orange ticks used on light sections. */
.jt-cta-points {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}
.jt-cta-points li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: .95rem;
  color: rgba(255,255,255,.95);
}
.jt-cta-points li::before {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
@media (max-width: 620px) {
  .jt-cta-points { flex-direction: column; gap: 9px; }
}

/* Hero crop. The shared .jt-phero-bg uses object-position: center 45%, which
   suits the portrait/wide photos on other pages. This hero photo is 4:3 with
   the subject high in frame, so at 45% the hero band starts 20% down and
   clips the top of his head. 22% starts the band near the top of the photo
   and clears him with headroom. Scoped to this page so no other hero moves. */
.jt-gallery-hero .jt-phero-bg img {
  object-position: center 22%;
}