section { position: relative; z-index: 1; }
/* Masthead height and the hero pattern now live in global.css (inner-page masthead).
   They used to be duplicated here; the bare min-height had no media query and beat
   global's own mobile rule at every width. Do not re-add them. */
.page-hero-content p { font-family: 'Source Sans 3', sans-serif; font-size: 22px; font-weight: 400; color: #ffffff; }

/* ── TAB TOGGLE ── */
.gallery-tabs-bar {
  background: var(--off-white);
  background-image: url('../images/bg-pattern.svg');
  background-repeat: repeat;
  padding: 40px 0;
}
.gallery-tab-pills {
  display: flex;
  gap: 8px;
}
.gallery-tab-pill {
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 400;
  letter-spacing: 0.5px;
  padding: 10px 26px; border-radius: 100px;
  border: 1.5px solid var(--grey);
  background: transparent; color: #505050;
  cursor: pointer; transition: all 0.18s;
}
.gallery-tab-pill.active {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.gallery-tab-pill:hover:not(.active) { border-color: var(--navy); color: var(--navy); }

/* ── PHOTO GRID ── */
.gallery-section {
  padding: 0 0 64px;
  background: var(--off-white);
  background-image: url('../images/bg-pattern.svg');
  background-repeat: repeat;
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.photo-grid-item {
  overflow: hidden;
  background: #ccc;
  /* it's a <button> now — strip native chrome */
  padding: 0; border: none; margin: 0;
  cursor: pointer; position: relative;
  font: inherit; color: inherit;
}
.photo-grid-item.tall { grid-row: span 2; }
.photo-grid-item img,
.photo-grid-item .photo-bg {
  width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform 0.4s;
}
.photo-grid-item .photo-bg {
  background: center/cover no-repeat;
  min-height: 240px;
}
.photo-grid-item.tall .photo-bg { min-height: 486px; }
.photo-grid-item:hover .photo-bg { transform: scale(1.04); }
/* subtle zoom-cursor affordance on hover */
.photo-grid-item::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(4, 48, 66, 0); transition: background 0.25s;
  pointer-events: none;
}
.photo-grid-item:hover::after { background: rgba(4, 48, 66, 0.12); }
.photo-grid-item:focus-visible { outline: 3px solid var(--cerise); outline-offset: -3px; }

.gallery-instagram-link {
  text-align: center; margin-top: 20px;
  font-family: var(--font-body); font-size: 16px; color: #505050;
}
.gallery-instagram-link a { color: var(--cerise); font-weight: 600; text-decoration: none; }
.gallery-instagram-link a:hover { text-decoration: underline; }
.gallery-instagram-link .arrow-animate {
  display: inline-block; color: var(--cerise); margin-left: 6px;
}
.gallery-instagram-link a:hover .arrow-animate { animation: arrowBounce 0.6s ease infinite; }
@keyframes arrowBounce {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}

/* ── VIDEOS GRID ── */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ── MIXED VIDEO MASONRY ──
   The Videos tab mixes 16:9 YouTube films with 9:16 Instagram Reels, so the
   cards are genuinely different heights.

   CSS COLUMNS, NOT GRID, ON PURPOSE. A grid sizes every row to its tallest
   item, so a row holding one portrait Reel leaves a tall gap under each
   landscape card beside it. Columns flow each card directly under the previous
   one, which is what makes it read as masonry. The trade is reading order:
   columns fill top-to-bottom then left-to-right, so the sequence is
   column-major. That is fine for a gallery, where there is no "first" item.

   Nothing here embeds a third party. Every card is a poster; the embed loads
   into the modal only on click. */
.videos-grid--masonry {
  display: block;      /* override the 3-col grid above */
  columns: 3;
  column-gap: 24px;
}
.videos-grid--masonry > * {
  break-inside: avoid;             /* never split a card across columns */
  -webkit-column-break-inside: avoid;
  margin-bottom: 24px;
}

/* The card variants live BELOW, after `.video-thumb-img` is defined. Putting
   them here cost an hour: `.video-thumb-img--titled` ties with
   `.video-thumb-img` on specificity, so the base rule's `display: block` and
   `background: center/cover` won simply by being later in the file, and the
   gradient silently never appeared. */
.video-thumb {
  border-radius: var(--radius); overflow: hidden;
  background: #111; position: relative;
  box-shadow: 0 2px 16px rgba(0,0,0,0.12);
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
}
.video-thumb:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
.video-thumb-img {
  aspect-ratio: 16/9;
  background: center/cover no-repeat;
  display: block;
  position: relative;
}
.video-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  background: var(--cerise);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
.video-thumb:hover .video-play-btn { background: var(--cerise-dk); transform: translate(-50%, -50%) scale(1.1); }
.video-play-btn svg { margin-left: 4px; }
.video-meta { padding: 18px 20px 20px; background: #fff; }
.video-title {
  font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 700;
  color: #043042;
}

/* ── CARD VARIANTS ──
   These must stay AFTER `.video-thumb-img` above: they tie with it on
   specificity, so being later in the file is the only thing making them win. */

/* Reels are portrait. Capped short of a true 9:16 because at three columns a
   full 9:16 card runs to ~635px against a ~180px landscape poster, which reads
   as a column of blank space rather than a gallery. 3:4 keeps the portrait
   shape legible while staying in proportion to the films beside it. */
.video-thumb--portrait .video-thumb-img { aspect-ratio: 3/4; }

/* No cover, and none obtainable — a Reel has no thumbnail (Meta removed
   `thumbnail_url` from Instagram oEmbed on 3 Nov 2025). The title carries the
   card, so the viewer still learns what the clip is. This is a normal state for
   Reels, not an error, so it has to look deliberate. */
.video-thumb-img--titled {
  background: linear-gradient(150deg, #0b5670 0%, var(--navy) 55%, #0a2f3f 100%);
  display: flex;
  flex-direction: column;   /* title ABOVE the play button, not behind it */
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 28px 24px;
  text-align: center;
}
/* On a poster the play button is centred over the image; on a title card it is
   part of the stack, or it lands on top of the words. */
.video-thumb--titled .video-play-btn {
  position: static;
  transform: none;
  flex: 0 0 auto;
}
.video-thumb--titled:hover .video-play-btn { transform: scale(1.1); }
.video-thumb-titletext {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px; font-weight: 700; line-height: 1.35;
  color: #fff;
  /* A long title must not push the play button out of the card. */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The title is already the poster — repeating it underneath is noise. */
.video-thumb--titled .video-meta { display: none; }

/* ── VIDEO MODAL ── */
.video-modal {
  display: none;
  position: fixed; inset: 0; z-index: 9000;
  align-items: center; justify-content: center;
}
.video-modal.active { display: flex; }
.video-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.82);
}
.video-modal-box {
  position: relative; z-index: 1;
  width: 90%; max-width: 900px;
}
.video-modal-close {
  position: absolute; top: -44px; right: 0;
  background: none; border: none; color: #fff;
  font-size: 36px; line-height: 1; cursor: pointer;
  padding: 4px 10px;
  transition: color 0.2s;
}
.video-modal-close:hover { color: var(--cerise); }
.video-modal-player {
  position: relative; padding-bottom: 56.25%;
  background: #000; border-radius: 4px; overflow: hidden;
}
/* A Reel is portrait, and Instagram's embed card adds its own header and
   action row on top of the video, so its height is not a clean 9:16. Rather
   than guess an aspect, give it a viewport-relative height and a narrow box —
   that adapts instead of letterboxing or clipping the comment row. */
.video-modal-box--portrait { max-width: 400px; }
.video-modal-player--portrait {
  padding-bottom: 0;
  height: min(80vh, 720px);
  background: #fff;   /* Instagram's card is white; black would frame it oddly */
}
.video-modal-player iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none;
}

/* ── PHOTO LIGHTBOX ── */
.photo-lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 9500;
  flex-direction: column;
  align-items: center; justify-content: center;
}
.photo-lightbox.active { display: flex; }
.photo-lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 16, 22, 0.92);
}
.photo-lightbox-close {
  position: absolute; top: 18px; right: 22px; z-index: 3;
  background: none; border: none; color: #fff;
  font-size: 40px; line-height: 1; cursor: pointer;
  padding: 4px 12px; transition: color 0.2s;
}
.photo-lightbox-close:hover { color: var(--cerise); }

.photo-lightbox-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3; width: 56px; height: 56px;
  background: rgba(255,255,255,0.10); color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.photo-lightbox-arrow:hover { background: var(--cerise); border-color: var(--cerise); }
.photo-lightbox-arrow.prev { left: 24px; }
.photo-lightbox-arrow.next { right: 24px; }
.photo-lightbox-arrow:active { transform: translateY(-50%) scale(0.94); }

.photo-lightbox-stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  max-width: 88vw;
}
.photo-lightbox-img {
  max-width: 88vw; max-height: 66vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
  background: #111;
}
.photo-lightbox-caption {
  margin-top: 16px;
  font-family: var(--font-card), 'Montserrat', sans-serif;
  font-size: 17px; font-weight: 600; letter-spacing: 0.3px;
  color: #fff; text-align: center;
}
.photo-lightbox-counter {
  margin-top: 4px;
  font-family: var(--font-body); font-size: 13px;
  color: rgba(255,255,255,0.6);
}

.photo-lightbox-thumbs {
  position: relative; z-index: 2;
  margin-top: 20px;
  display: flex; gap: 8px;
  max-width: 92vw; overflow-x: auto;
  padding: 6px 4px 10px;
  scrollbar-width: thin;
}
.photo-lightbox-thumb {
  flex: 0 0 auto;
  width: 72px; height: 48px;
  padding: 0; border: 2px solid transparent; border-radius: 3px;
  background: center/cover no-repeat #333;
  cursor: pointer; opacity: 0.55;
  transition: opacity 0.2s, border-color 0.2s;
}
.photo-lightbox-thumb:hover { opacity: 0.85; }
.photo-lightbox-thumb.active { opacity: 1; border-color: var(--cerise); }

/* tab panel visibility */
.gallery-panel { display: none; }
.gallery-panel.active { display: block; }

/* ══════════════════════════════════════
   RESPONSIVE — page-specific overrides
   (shared nav/footer/hero handled by global.css)
   ══════════════════════════════════════ */

/* ── 1024px ── */
@media (max-width: 1024px) {
  /* Videos: 3 → 2 cols (photos stay 3, they're small squares) */
  .videos-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .videos-grid--masonry { columns: 2; column-gap: 20px; }
  .videos-grid--masonry > * { margin-bottom: 20px; }
  .video-title { font-size: 17px; }
}

/* ── 768px ── */
@media (max-width: 768px) {
  /* Photos: 3 → 2 cols */
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-grid-item .photo-bg { min-height: 200px; }
  .photo-grid-item.tall .photo-bg { min-height: 406px; }

  /* Videos stay 2 cols but tighten */
  .videos-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .videos-grid--masonry { columns: 2; column-gap: 16px; }
  .videos-grid--masonry > * { margin-bottom: 16px; }

  .gallery-tabs-bar { padding: 28px 0; }

  /* Lightbox: taller image (no side room), smaller arrows inset */
  .photo-lightbox-img { max-height: 60vh; max-width: 92vw; }
  .photo-lightbox-arrow { width: 46px; height: 46px; }
  .photo-lightbox-arrow.prev { left: 10px; }
  .photo-lightbox-arrow.next { right: 10px; }
  .photo-lightbox-caption { font-size: 16px; }
}

/* ── 480px ── */
@media (max-width: 480px) {
  /* Photos: 2 → 1 col; drop tall span so masonry doesn't gap */
  .photo-grid { grid-template-columns: 1fr; gap: 6px; }
  .photo-grid-item.tall { grid-row: span 1; }
  .photo-grid-item .photo-bg,
  .photo-grid-item.tall .photo-bg { min-height: 240px; }

  /* Videos → single column */
  .videos-grid { grid-template-columns: 1fr; gap: 16px; }
  /* One column: no masonry to do, and a full-width 9:16 Reel poster would be
     enormous, so cap the portrait cards rather than letting them run. */
  .videos-grid--masonry { columns: 1; }
  .videos-grid--masonry > * { margin-bottom: 16px; }
  .video-thumb--portrait .video-thumb-img { aspect-ratio: 3/4; }
  .video-title { font-size: 16px; }

  /* Tab pills: keep on one row, allow wrap, tap-friendly */
  .gallery-tab-pills { flex-wrap: wrap; }
  .gallery-tab-pill { padding: 10px 22px; }

  /* Lightbox on phones: overlay arrows near bottom, smaller thumbs */
  .photo-lightbox-img { max-height: 56vh; }
  .photo-lightbox-thumb { width: 60px; height: 40px; }
  .photo-lightbox-close { top: 10px; right: 12px; font-size: 34px; }
  .gallery-instagram-link { font-size: 15px; }
}