/*
==================================================================
GALLERY PAGES (events.html, life-at-efrotech.html)

PERFORMANCE MODEL:
  1. PAGINATION - one page of album cards in the layout at a time.
  2. DEFERRED PHOTOS - a card shows ONE cover. The album's other
     photos are not requested until the card is opened.
  3. MODAL VIEWER - opening an album does NOT change the grid. An
     earlier build expanded the card inline (a <details> that grew to
     the full row and reshaped its own cover); every open reflowed
     the whole page and read as broken. The grid is now inert - cards
     never resize, and the album opens over the page instead.
==================================================================
*/

/* ==================================================================
   HERO
   ================================================================== */
.tt-ev-hero {
  max-width: 60rem;
  margin-inline: auto;
}
.tt-ev-hero .tt-hero-paragraph {
  max-width: 44rem;
  margin-inline: auto;
}

/* ==================================================================
   GROUP NAV
   ================================================================== */
.tt-ev-nav {
  position: sticky;
  top: calc(var(--tt-header-height, 96px) + 0.5rem);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.tt-ev-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.35rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--tt-border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  font-size: var(--tt-fs-body-sm);
  font-weight: 600;
  color: var(--tt-dark);
  text-decoration: none;
  transition: var(--tt-transition-fast);
}
.tt-ev-nav-link i { color: var(--tt-primary); font-size: 0.9rem; }
.tt-ev-nav-link:hover,
.tt-ev-nav-link:focus-visible {
  color: var(--tt-primary);
  border-color: rgba(var(--tt-primary-rgb), 0.4);
}

/* ==================================================================
   YEAR FILTER
   Deliberately NOT .tt-ev-nav above. That is position:sticky with
   z-index 20, which is right for a jump-nav (it should ride over the
   page) and wrong for a filter bar: stuck, it paints straight over the
   first row of album cards. This one stays in normal flow.
   ================================================================== */
.tt-ev-filter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.tt-ev-filter-years {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
/* The count sits under the pills rather than beside them: at the narrow end
   a right-floated count next to a wrapping pill row lands in its own ragged
   column. Centred under it survives every width. */
.tt-ev-filter-count {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tt-muted);
}

/* The pill itself matches .tt-ev-nav-link's shape - there is no reason for two
   pill shapes on one site - but it is a <button>, because it changes what the
   grid contains rather than navigating. The UA button reset is why font and
   colour are restated here. */
.tt-ev-year-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.35rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--tt-border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  font-family: var(--tt-font-primary);
  font-size: var(--tt-fs-body-sm);
  font-weight: 600;
  color: var(--tt-dark);
  cursor: pointer;
  transition: var(--tt-transition-fast);
}
.tt-ev-year-btn:hover,
.tt-ev-year-btn:focus-visible {
  color: var(--tt-primary);
  border-color: rgba(var(--tt-primary-rgb), 0.4);
}
/* Matches the active pager button, so "which year am I looking at" and
   "which page am I on" read as the same kind of state. */
.tt-ev-year-btn.is-active {
  background: var(--tt-gradient-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(var(--tt-primary-rgb), 0.75);
}


/* ==================================================================
   GROUP HEADINGS
   ================================================================== */
.tt-ev-group { scroll-margin-top: calc(var(--tt-header-height, 96px) + 5rem); }
.tt-ev-group + .tt-ev-group { margin-top: clamp(2.5rem, 5vw, 4rem); }

.tt-ev-group-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
}
.tt-ev-group-title {
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-weight: 800;
  font-size: var(--tt-fs-h3);
  color: var(--tt-dark);
  margin: 0;
  white-space: nowrap;
}
.tt-ev-group-rule {
  flex: 1 1 auto;
  height: 2px;
  border-radius: 2px;
  background: none;
}
.tt-ev-group-count {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tt-muted);
  white-space: nowrap;
}

/* ==================================================================
   ALBUM CARDS — fixed size, never resize
   ================================================================== */
/* TWO columns, not three (2026-09-14). It pairs with PER_PAGE = 4 in
   gallery.js: four cards in a 2-wide grid is two full rows, where four in a
   3-wide grid left a single card stranded on its own row on every page.
   Change one and change the other - the page size and the column count only
   make sense together. It also matches the news hub, which is 2-wide and
   paginates 4 at a time, so the two card grids on the site read alike. */
.tt-ev-albums {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.6vw, 1.35rem);
}

.tt-ev-album {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  background: #fff;
  border: 1px solid var(--tt-border);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04),
              0 10px 26px -16px rgba(16, 24, 40, 0.22);
  overflow: hidden;
  cursor: pointer;
  transition: var(--tt-transition-standard);
}
.tt-ev-album:hover {
  border-color: rgba(var(--tt-primary-rgb), 0.42);
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.05),
              0 20px 40px -14px rgba(var(--tt-primary-rgb), 0.3);
  transform: translateY(-5px);
}
.tt-ev-album:focus-visible {
  outline: 2px solid var(--tt-primary);
  outline-offset: 3px;
}
/* Paginated-away cards must leave the grid, not just go invisible. */
.tt-ev-album[hidden] { display: none !important; }

.tt-ev-cover-wrap {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(var(--tt-dark-rgb), 0.06);
  border-bottom: 1px solid var(--tt-border);
}
.tt-ev-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.tt-ev-album:hover .tt-ev-cover { transform: scale(1.05); }

.tt-ev-count {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: rgba(28, 28, 32, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

/* "View album" affordance, revealed on hover/focus. */
.tt-ev-open {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 0.5rem;
  background: rgba(28, 28, 32, 0.45);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.tt-ev-open i { font-size: 1.3rem; }
.tt-ev-album:hover .tt-ev-open,
.tt-ev-album:focus-visible .tt-ev-open { opacity: 1; }

.tt-ev-album-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem 1rem;
}
.tt-ev-album-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-size: var(--tt-fs-h4);
  font-weight: 700;
  color: var(--tt-primary);
  margin: 0;
  line-height: 1.3;
}
.tt-ev-album-chevron {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--tt-primary-rgb), 0.1);
  color: var(--tt-primary);
  font-size: 0.8rem;
}

/* A cover whose file is missing collapses quietly. */
.tt-ev-missing { display: none !important; }

/* ==================================================================
   PAGINATION
   ================================================================== */
.tt-ev-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
}
.tt-ev-page {
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tt-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  font-family: var(--tt-font-primary);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tt-dark);
  cursor: pointer;
  transition: var(--tt-transition-fast);
}
.tt-ev-page:hover:not(:disabled) {
  border-color: rgba(var(--tt-primary-rgb), 0.45);
  color: var(--tt-primary);
}
.tt-ev-page.is-active {
  background: var(--tt-gradient-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(var(--tt-primary-rgb), 0.75);
}
.tt-ev-page:disabled { opacity: 0.4; cursor: default; }
.tt-ev-page-nav { font-size: 0.78rem; }

/* ==================================================================
   ALBUM VIEWER (modal)
   The only place album photos are ever requested.
   ================================================================== */
.tt-ev-viewer {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: none;
  background: rgba(10, 10, 12, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tt-ev-viewer.is-open { display: flex; }

.tt-ev-viewer-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  gap: clamp(0.6rem, 1.4vw, 1rem);
}

/* ---------- Head ---------- */
.tt-ev-viewer-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #fff;
}
.tt-ev-viewer-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 700;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tt-ev-viewer-counter {
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

.tt-ev-vbtn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--tt-transition-fast);
}
.tt-ev-vbtn:hover { background: var(--tt-primary); border-color: transparent; }

/* ---------- Stage ---------- */
/* THE PHOTO IS ABSOLUTELY POSITIONED AND CENTRED WITH `margin: auto`,
   NOT a grid item. That is the fix for an album photo overflowing the
   viewer and shoving the thumbnail strip off the bottom of the screen.

   The stage was `display: grid; place-items: center` with the photo as its
   only in-flow child. `place-items` sets align-ITEMS, not align-CONTENT,
   so the implicit row stayed auto-sized - i.e. sized to the photo's own
   max-content height. `max-height: 100%` on the photo then resolved
   against a row that was itself sized by the photo, which constrains
   nothing: a 3000px-tall original simply made a 3000px-tall row and ran
   off the viewport, taking the strip and the head with it.

   `position: absolute; inset: 0; margin: auto` is the bulletproof version:
   the containing block is the stage, whose height IS definite (a flex item
   with min-height: 0 in a 100%-height column), so max-width/max-height
   resolve against something real and the photo is centred on both axes at
   any aspect ratio. `overflow: hidden` on the stage is the belt to that
   braces - and is safe here; hard rule 1 is about html / body /
   .page-wrapper, where it would kill every position: sticky. */
.tt-ev-viewer-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.tt-ev-viewer-img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85);
}
/* z-index, because the photo is now positioned too. Without it the photo
   paints over the PREV button - it comes after it in the DOM - and only
   NEXT stays clickable. */
.tt-ev-viewer-prev,
.tt-ev-viewer-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  z-index: 2;
}
.tt-ev-viewer-prev { left: 0.25rem; }
.tt-ev-viewer-next { right: 0.25rem; }

/* ---------- Thumbnail strip ---------- */
.tt-ev-viewer-strip {
  flex: 0 0 auto;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0.25rem;
  scrollbar-width: thin;
}
.tt-ev-thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 60px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  opacity: 0.55;
  transition: var(--tt-transition-fast);
}
.tt-ev-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-ev-thumb:hover { opacity: 1; }
.tt-ev-thumb.is-current {
  opacity: 1;
  border-color: var(--tt-primary);
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */
/* The 2-column step here is now the same as the default above, so this rule
   is a no-op and is kept only as the explicit statement that tablet width is
   two columns. The 575.98px rule below is the one that still does work. */
@media (max-width: 991.98px) {
  .tt-ev-albums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .tt-ev-albums { grid-template-columns: minmax(0, 1fr); }
  .tt-ev-nav { position: static; }
  .tt-ev-thumb { width: 64px; height: 46px; }
  .tt-ev-viewer-prev,
  .tt-ev-viewer-next { width: 2.5rem; height: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-ev-album,
  .tt-ev-cover,
  .tt-ev-open,
  .tt-ev-page,
  .tt-ev-nav-link { transition: none; }
  .tt-ev-album:hover { transform: none; }
  .tt-ev-album:hover .tt-ev-cover { transform: none; }
}