/* ==========================================================================
   Gallery  —  /page/gallery/  and  /page/gallery/<album>/
   Loaded ALONGSIDE page-head.css (the photo banner and the heading with its
   rule) and tabs.css (the pill row, which this page does not restyle).

   THE PALETTE IS THE SITE'S, NOT A NEW ONE
   Red for what you click and for focus rings, gold for eyebrows and rules,
   ink and muted for text, paper cards on a page-alt ground. That is what
   every other page here does - the tab pills come from tabs.css untouched,
   which is why they are the same blue-and-red as the department pages.

   TWO GRIDS
   Photographs, and album covers. The covers carry a stacked paper edge above
   them - the one piece of decoration on the page, and it says something true:
   there are more photographs underneath this one.

   RESPONSIVE
   Four across, then three under 992px, two under 768px, one under 576px -
   the same three breakpoints the rest of the site steps at.
   ========================================================================== */

.gal-section { background: var(--page-alt); }

/* --------------------------------------------------------- the heading --- */
/* page-head.css colours the second half of a heading, and the rule beneath
   it, in --red. That is right on the other forty-five pages that use it, but
   this one is now gold throughout - the tabs, the eyebrow, the album dates,
   the button - and a red word was the only red left on the page.
   
   Scoped to .gal-section so the other forty-five are untouched. The heading
   is 21px and up at weight 800, which counts as large text, so gold on white
   at about 3.3:1 clears the 3:1 it needs. Body copy in this gold would not,
   which is why nothing smaller uses it. */

/* ------------------------------------------------------------- the tabs --- */
/* The gallery does not use the filled blue-and-red pills that tabs.css gives
   the department pages. Two saturated blocks at the top of a page of
   photographs compete with the photographs, which are the reason anybody
   came. These are outlined instead: white with a hairline when idle, a gold
   border over a faint gold wash when active.
   
   Only the skin changes. The pills are still .tab-btn inside a [data-tabs]
   block, so initTabPanels drives them, the toggle still collapses the row
   under 768px, and the pages with five tabs are untouched - every rule here
   is scoped to .gal-tabset.
   
   THE ACTIVE LABEL IS A DARKENED GOLD, not --accent itself. var(--accent) on the
   pale wash behind it comes to about 3.3:1, and this text is 14px, which
   needs 4.5:1. The darker tone reads as the same colour and is legible. */
.gal-tabset .tabset__nav { gap: 10px; margin-bottom: 30px; }

.gal-tabset .tab-btn {
  flex: 0 0 auto;
  min-height: 0;
  padding: 10px 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .88rem;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition);
}
.gal-tabset .tab-btn:hover {
  background: var(--paper);
  border-color: var(--accent);
  color: var(--ink);
}
.gal-tabset .tab-btn.is-active {
  /* 8%, not 10%. --accent-deep on a 10% tint reads 4.20:1 over the page's
     #f7f7f7 - under the 4.5 a 13px label needs. Lightening the tint fixes it
     without touching the token, which is 4.80:1 on plain white and is used
     for text all over the site. */
  background: rgb(var(--accent-rgb) / 8%);
  border-color: var(--accent);
  color: var(--accent-deep);
}
/* tabs.css rings these in gold, which disappears against a gold border. */
.gal-tabset .tab-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ------------------------------------------------------- album heading --- */
.gal-eyebrow {
  margin: 0 0 5px;
  color: var(--accent-deep);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.gal-album-head { margin: 0 0 22px; }

.gal-album-title { margin: 0 0 6px; font-size: 1.25rem; }
.gal-album-title a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--transition);
}
.gal-album-title a:hover { color: var(--accent-deep); }
.gal-album-title a:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.gal-meta {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  font-variant-numeric: tabular-nums;
}
.gal-meta i { font-style: normal; margin: 0 7px; opacity: .55; }

.gal-album-note {
  max-width: 68ch;
  margin: 12px 0 0;
  color: var(--ink-soft);
  font-size: .93rem;
  line-height: 1.75;
}

.gal-crumbs { margin: 0 0 18px; font-size: .82rem; color: var(--muted); }
.gal-crumbs a { color: var(--muted); }
.gal-crumbs a:hover { color: var(--accent-deep); }
.gal-crumbs span { margin: 0 7px; }

/* ----------------------------------------------------- the photo grid --- */
.gal-shots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.gal-shot {
  appearance: none;
  padding: 0;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  background: var(--paper);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  aspect-ratio: 4 / 3;
  transition: box-shadow var(--transition);
}
.gal-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}
.gal-shot:hover { box-shadow: var(--shadow-sm); }
.gal-shot:hover img { transform: scale(1.05); }
.gal-shot:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* Which album a thumbnail came from. The Recent grid mixes every album now,
   so without this a picture from a sports day and one from a convocation sit
   side by side with nothing to tell them apart.
   
   It rides on the image rather than under it so the grid stays a grid and the
   rows keep their rhythm. Always legible - it sits on its own gradient rather
   than trusting the photograph underneath to be dark. */
.gal-shot { position: relative; }
.gal-shot__from {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 10px 8px;
  background: linear-gradient(0deg, rgba(15, 12, 6, .84), rgba(15, 12, 6, 0));
  text-align: left;
  pointer-events: none;
}
.gal-shot__album {
  display: block;
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  /* One line. A long album name must not push the date out of the frame. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gal-shot__date {
  display: block;
  margin-top: 1px;
  color: var(--gold-bright, #f0d75f);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.gal-more { margin: 24px 0 0; text-align: center; }
/* The one call to action on the panel, so it carries more weight than a tab -
   but the same gold, not the blue it used to be. It fills on hover, which is
   the difference between a control you may press and one you are meant to. */
.gal-more__link {
  display: inline-block;
  padding: 12px 30px;
  border-radius: var(--radius-pill);
  background: var(--paper);
  border: 1px solid var(--accent);
  color: var(--accent-deep);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.gal-more__link:hover,
.gal-more__link:focus-visible {
  background: var(--accent);
  color: var(--ink);
}
.gal-more__link:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ---------------------------------------------------- the album covers --- */
.gal-albums {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 22px;
}
.gal-album {
  position: relative;
  display: block;
  padding-top: 9px;      /* room for the stacked edge above the cover */
  text-decoration: none;
}

/* Two hairline slivers peeking out above the cover. They are the reason the
   card reads as an album rather than a single photograph, and they cost
   nothing - no extra elements, no images. */
.gal-album__stack::before,
.gal-album__stack::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 3px 3px 0 0;
  background: var(--paper);
  box-shadow: 0 -1px 2px rgba(0, 0, 0, .10);
}
.gal-album__stack::before { top: 0; width: 84%; height: 5px; opacity: .55; }
.gal-album__stack::after  { top: 4px; width: 93%; height: 6px; opacity: .8; }

.gal-album__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  aspect-ratio: 13 / 10;
  background: var(--page);
  transition: box-shadow var(--transition);
}
.gal-album:hover .gal-album__frame { box-shadow: var(--shadow-sm); }
.gal-album__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}
.gal-album:hover .gal-album__frame img { transform: scale(1.05); }
.gal-album:focus-visible .gal-album__frame { outline: 3px solid var(--red); outline-offset: 2px; }

/* An album with no cover and no photographs yet still needs a readable card. */
.gal-album__blank {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--accent), var(--gold-dark));
}

.gal-album__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
              rgba(15, 12, 6, .88) 0%,
              rgba(15, 12, 6, .46) 34%,
              rgba(15, 12, 6, 0) 64%);
}
.gal-album__text {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  color: #fff;
}
.gal-album__date {
  display: block;
  margin-bottom: 4px;
  color: var(--gold-bright, #f0d75f);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gal-album__name {
  display: block;
  margin-bottom: 3px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.gal-album__meta {
  display: block;
  color: rgba(255, 255, 255, .9);
  font-size: .79rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.gal-album__meta i { font-style: normal; margin: 0 5px; opacity: .6; }

/* The strip at the foot of an album page. */
.gal-more-albums {
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.gal-albums--compact .gal-album__name { font-size: .93rem; }

.gal-empty {
  padding: 44px 0;
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
}

/* ==========================================================================
   Responsive  —  the site's own three steps, plus one for the smallest
   phones where two album cards leave the title with no room to sit.
   ========================================================================== */
@media (max-width: 991.98px) {
  .gal-albums,
  .gal-shots { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767.98px) {
  .gal-albums { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  .gal-shots  { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gal-album__text { left: 12px; right: 12px; bottom: 11px; }
  .gal-album__name { font-size: .92rem; }
  .gal-album__meta { font-size: .74rem; }
  .gal-album__date { font-size: .66rem; }
  .gal-album-title { font-size: 1.1rem; }
}

@media (max-width: 575.98px) {
  .gal-shot__from { padding: 16px 7px 6px; }
  .gal-shot__album { font-size: .68rem; }
  .gal-shot__date { font-size: .61rem; }
  .gal-albums { grid-template-columns: 1fr; gap: 18px; }
  .gal-shots  { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  /* One album per row is wide, so the cover gets shorter rather than
     turning into a poster that costs a whole screen to scroll past. */
  .gal-album__frame { aspect-ratio: 16 / 9; }
  .gal-album__name { font-size: 1rem; }
  .gal-meta { font-size: .8rem; }
  .gal-meta i { margin: 0 5px; }
  .gal-more__link { width: 100%; padding: 12px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .gal-shot,
  .gal-shot img,
  .gal-album__frame,
  .gal-album__frame img,
  .gal-album-title a,
  .gal-more__link { transition: none; }
  .gal-shot:hover img,
  .gal-album:hover .gal-album__frame img { transform: none; }
}

/* ==========================================================================
   Picture grids  —  .gallery-grid-lg / .gallery-cell / .gallery-lead
   --------------------------------------------------------------------------
   THESE ARE NOT LEFTOVERS. Eleven templates use them and none of them were
   styled: Appreciations, all eight Life at SVU pages, and the photo includes
   for Academic Activities and IIC. When this stylesheet was rewritten around
   the gal-* classes for the new gallery, these went with it, and every one of
   those pages quietly became a single column of full-width images - a page of
   78 certificates roughly forty screens long.

   Kept in gallery.css because that is the stylesheet all eleven already load,
   so no template needed a new <link> to get them back.

   They match the album and event cards: same radius, same shadow, same hover
   lift, same gold focus ring. A photograph here should look like a photograph
   anywhere else on the site.
   ========================================================================== */

.gallery-lead {
  max-width: 70ch;
  margin: 0 0 24px;
  color: var(--ink-soft);
  font-size: .96rem;
  line-height: 1.85;
}

.gallery-grid-lg {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery-grid-lg--three { grid-template-columns: repeat(3, 1fr); }

/* HEIGHT, NOT ASPECT-RATIO, AND 260px SPECIFICALLY. activities.css and iic.css
   both wrap a cell in their own 4:3 frame and override this with height:100%,
   and both say in a comment that gallery.css pins it at 260px. That is the
   contract they were written against, so it is the one restored here. */
.gallery-cell {
  position: relative;
  display: block;
  width: 100%;
  height: 260px;
  padding: 0;
  border: 0;
  margin: 0;
  cursor: pointer;
  overflow: hidden;
  background: var(--paper);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition);
}
.gallery-cell:hover { box-shadow: var(--shadow-sm); }
.gallery-cell:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.gallery-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}
.gallery-cell:hover img { transform: scale(1.04); }

/* --------------------------------------------------------- documents --- */
/* A certificate is not a photograph. Cropping one to fill a cell cuts the
   message off, which is the entire content - so on a grid marked --docs the
   whole sheet is fitted inside the cell against paper, and only the empty
   space around it varies. */
.gallery-grid-lg--docs .gallery-cell {
  height: 300px;                 /* taller: these are sheets of writing */
  background: #fff;
  border: 1px solid var(--line);
}
.gallery-grid-lg--docs .gallery-cell img { object-fit: contain; }
.gallery-grid-lg--docs .gallery-cell:hover img { transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991.98px) {
  .gallery-grid-lg--three { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .gallery-grid-lg, .gallery-grid-lg--three { gap: 14px; }
}
@media (max-width: 767.98px) {
  .gallery-cell { height: 220px; }
  .gallery-grid-lg--docs .gallery-cell { height: 260px; }
}
@media (max-width: 575.98px) {
  /* One across on a phone. Two columns of certificates at this width makes
     the writing on them too small to see, and the point of the grid is to
     let somebody pick one out to open. */
  .gallery-grid-lg,
  .gallery-grid-lg--three { grid-template-columns: 1fr; gap: 12px; }
  .gallery-cell { height: 240px; }
  .gallery-grid-lg--docs .gallery-cell { height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-cell, .gallery-cell img { transition: none; }
  .gallery-cell:hover img { transform: none; }
}

/* ==========================================================================
   Appreciations  —  /page/appreciations/
   ========================================================================== */
/* page-head.css colours the second half of every page heading, and the rule
   under it, in --red. Over a wall of certificates in every colour there is,
   red read as a warning rather than a title. Gold instead, matching the
   gallery and the events pages.

   Scoped to this page rather than changed in page-head.css: fifty-six pages
   load that stylesheet and the red is deliberate on the rest of them. */