/* ==========================================================================
   TECHMATIC SYSTEMS - Events ("Mosaic")
   --------------------------------------------------------------------------
   INTEGRATION CONTRACT
     Loaded only by template-events.php. Every rule is scoped under .tmev and
     every class carries the ev- prefix, so nothing here can reach the
     theme's header, footer or other pages, and no Bootstrap / theme class
     name (.fade, .show, .card, .tab, .pulse ...) can collide with ours. The
     layout is its own CSS grid, so the theme's Bootstrap version is moot.

   ART DIRECTION - light and celebratory
     The memorable moment: the hero collage deals itself onto the page, then
     the filter tabs regroup the gallery. Bento tiles size themselves from
     each photo's shape. Brand red marks actions and the selected filter.

   THE THEME'S FIXED HEADER
     events-main.js measures how much of the block the fixed header covers
     and writes it to --ev-header-h; the hero padding and the sticky filter
     bar add it. 100px is the fallback before the script runs.
   ========================================================================== */

/* Fonts load here too, so the design keeps its type even if only the
   content block is pasted into a page. (@import must stay above all rules.) */
@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@600;800&family=Onest:wght@400;500;600&display=swap");

.tmev {
  --ev-header-h: 100px;   /* measured and replaced by events-main.js */
  --ev-paper: #FFFFFF;
  --ev-fog:   #F3F4F7;
  --ev-line:  #E6E8EE;
  --ev-ink:   #14161C;
  --ev-ink-2: #5B6170;
  --ev-red:   #C42032;
  --ev-ease:  cubic-bezier(.22, 1, .36, 1);
  --ev-disp:  "Unbounded", "Helvetica Neue", Arial, sans-serif;
  --ev-text:  "Onest", "Helvetica Neue", Arial, sans-serif;

  font-family: var(--ev-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ev-ink);
  background: var(--ev-paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Scoped reset. Text elements take the page's font, not the theme's. */
.tmev *, .tmev *::before, .tmev *::after { box-sizing: border-box; }
.tmev h1, .tmev h2 { font-family: var(--ev-disp); color: inherit; margin: 0; }
.tmev p, .tmev li, .tmev a, .tmev span, .tmev button { font-family: inherit; }
.tmev a { color: inherit; text-decoration: none; }
.tmev img, .tmev video { display: block; max-width: 100%; }
.tmev svg { display: block; }
.tmev :focus-visible { outline: 2px solid var(--ev-red); outline-offset: 3px; }
.tmev [id] { scroll-margin-top: calc(var(--ev-header-h) + 90px); }

.tmev .ev-wrap { width: min(1260px, 100% - 48px); margin-inline: auto; }
.tmev .ev-disp { font-family: var(--ev-disp); font-weight: 800; letter-spacing: -.04em; line-height: .95; }


/* ==========================================================================
   HERO - title beside a collage that deals itself in
   ========================================================================== */
.tmev .ev-hero { padding: calc(var(--ev-header-h) + 48px) 0 40px; overflow: hidden; }
.tmev .ev-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: center; min-height: 460px; }
.tmev .ev-hero h1 { font-size: clamp(64px, 9vw, 148px); }

.tmev .ev-deck { position: relative; height: 460px; }
.tmev .ev-print {
  position: absolute; overflow: hidden;
  border: 8px solid #fff; border-radius: 14px; background: var(--ev-fog);
  box-shadow: 0 24px 50px -20px rgba(20, 22, 28, .45);
  transform: rotate(var(--ev-r));
  transition: transform .6s var(--ev-ease);
}
.tmev .ev-print img { width: 100%; height: 100%; object-fit: cover; }
.tmev .ev-print:hover { transform: translateY(-10px) rotate(0deg) scale(1.04); z-index: 9; }
/* dealt in on load - hidden state gated on html.ev-js */
.ev-js .tmev .ev-deck .ev-print { transform: translateY(340px) rotate(calc(var(--ev-r) * 3)); opacity: 0; }
.ev-js .tmev .ev-deck.is-dealt .ev-print {
  transform: rotate(var(--ev-r)); opacity: 1;
  transition: transform 1s var(--ev-ease) var(--ev-d, 0s), opacity .5s ease var(--ev-d, 0s);
}
.ev-js .tmev .ev-deck.is-dealt .ev-print:hover { transform: translateY(-10px) rotate(0deg) scale(1.04); transition-delay: 0s; }


/* ==========================================================================
   FILTER BAR - sticks just under the theme's fixed header
   Hidden without the script (it only works with it).
   ========================================================================== */
.tmev .ev-tabs-bar { display: none; }
.ev-js .tmev .ev-tabs-bar {
  display: block; position: sticky; top: var(--ev-header-h); z-index: 50;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ev-line);
}
.tmev .ev-tabs { display: flex; gap: 8px; padding: 14px 0; overflow-x: auto; scrollbar-width: none; }
.tmev .ev-tabs::-webkit-scrollbar { display: none; }
.tmev .ev-tab {
  flex: none; margin: 0; padding: 11px 20px; border-radius: 40px; border: 1.5px solid #DADDE5; background: #fff; cursor: pointer;
  font-family: var(--ev-text); font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--ev-ink);
  transition: background-color .25s, color .25s, border-color .25s;
}
.tmev .ev-tab:hover { border-color: var(--ev-ink); }
.tmev .ev-tab[aria-pressed="true"] { background: var(--ev-ink); color: #fff; border-color: var(--ev-ink); }


/* ==========================================================================
   GALLERY - one bento grid per event
   ========================================================================== */
.tmev .ev-event { padding: 64px 0 8px; }
.tmev .ev-event[hidden] { display: none; }
.tmev .ev-event h2 { font-size: clamp(28px, 3.4vw, 46px); margin-bottom: 26px; }
.tmev .ev-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 190px; grid-auto-flow: dense; gap: 14px; }
.tmev .ev-tile { position: relative; display: block; overflow: hidden; border-radius: 16px; background: var(--ev-fog); cursor: zoom-in; }
.tmev .ev-tile.is-big  { grid-column: span 2; grid-row: span 2; }
.tmev .ev-tile.is-tall { grid-row: span 2; }
.tmev .ev-tile.is-wide { grid-column: span 2; }
.tmev .ev-tile img, .tmev .ev-tile video { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ev-ease); }
.tmev .ev-tile:hover img, .tmev .ev-tile:hover video { transform: scale(1.06); }
.tmev .ev-zoom {
  position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; display: grid; place-items: center;
  opacity: 0; transform: scale(.7); transition: opacity .3s, transform .4s var(--ev-ease);
}
.tmev .ev-tile:hover .ev-zoom, .tmev .ev-tile:focus-visible .ev-zoom { opacity: 1; transform: none; }
.tmev .ev-zoom svg { width: 18px; height: 18px; fill: none; stroke: var(--ev-ink); stroke-width: 2.2; stroke-linecap: round; }
.tmev .ev-play {
  position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px; border-radius: 40px; background: var(--ev-red); color: #fff;
  font-family: var(--ev-text); font-size: 14px; font-weight: 600; line-height: 1;
}
.tmev .ev-play svg { width: 14px; height: 14px; fill: #fff; }
/* tiles rise in when their group is shown (hidden until then, but only
   once the script runs - and it lights anything already on screen) */
.ev-js .tmev .ev-event:not(.is-in) .ev-tile { opacity: 0; }
.ev-js .tmev .ev-event.is-in .ev-tile { animation: evRise .7s var(--ev-ease) both; animation-delay: calc(var(--ev-i) * 45ms); }
@keyframes evRise { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }

.tmev .ev-end { height: 96px; }


/* ==========================================================================
   LIGHTBOX - built by events-main.js
   ========================================================================== */
.tmev .ev-lb { position: fixed; inset: 0; z-index: 100000; background: rgba(14, 15, 20, .94); display: grid; place-items: center; padding: 70px 80px 60px; }
.tmev .ev-lb[hidden] { display: none; }
.tmev .ev-lb-stage { width: 100%; height: 100%; display: grid; place-items: center; }
.tmev .ev-lb-stage img, .tmev .ev-lb-stage video { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; border-radius: 14px; }
.tmev .ev-lb-cap {
  position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; white-space: pre;
  font-family: var(--ev-text); font-size: 14px; font-weight: 600; color: #C9CCD6;
}
.tmev .ev-lb-btn {
  position: absolute; width: 50px; height: 50px; margin: 0; padding: 0; border-radius: 50%; border: 0;
  background: #fff; color: var(--ev-ink); cursor: pointer; display: grid; place-items: center;
}
.tmev .ev-lb-btn:hover { background: var(--ev-red); color: #fff; }
.tmev .ev-lb-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tmev .ev-lb-x { top: 16px; right: 16px; }
.tmev .ev-lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.tmev .ev-lb-next { right: 16px; top: 50%; transform: translateY(-50%); }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
  .tmev .ev-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .tmev .ev-deck { height: 340px; margin-top: 10px; }
  .tmev .ev-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; }
}
@media (max-width: 575.98px) {
  .tmev { font-size: 16px; }
  .tmev .ev-hero { padding: calc(var(--ev-header-h) + 32px) 0 28px; }
  .tmev .ev-deck { height: 280px; }
  .tmev .ev-print { border-width: 5px; }
  .tmev .ev-event { padding-top: 48px; }
  .tmev .ev-bento { gap: 10px; grid-auto-rows: 130px; }
  .tmev .ev-lb { padding: 64px 12px 72px; }
  .tmev .ev-lb-prev, .tmev .ev-lb-next { top: auto; bottom: 10px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tmev *, .tmev *::before, .tmev *::after { animation: none !important; transition: none !important; }
  .ev-js .tmev .ev-deck .ev-print { transform: rotate(var(--ev-r)); opacity: 1; }
}