/* ================================================================
   BANO STUDIOS — EVENTS PAGE CSS (D03)
   Events-specific styles extracted from
   Website Resources/BANO STUDIOS/d03-site/events.html lines 12–50
   Plus a "dark" variant for the Bano Short Film Festival panel
   (3rd flagship — added in port, not in designer reference).
   Loaded via $pageCSSFile = 'events-d03.css' by events-d03.php.
   Sits alongside the base tokens/chrome from assets/css/d03-theme.css.
   ================================================================ */

/* Events hero — split (1.1fr / 1fr) */
.ev-hero {
  display: grid; grid-template-columns: 1.1fr 1fr;
  border-bottom: 2px solid var(--d03-ink);
}
.ev-hero > .left {
  padding: clamp(40px, 6vw, 96px) clamp(20px, 5vw, 56px);
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 620px;
}
.ev-hero > .right {
  border-left: 2px solid var(--d03-ink);
  position: relative; overflow: hidden;
  min-height: 620px;
  background: var(--d03-ink);
}
.ev-hero > .right img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.05);
}
.ev-hero h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; letter-spacing: -0.05em; line-height: 0.88;
  font-size: clamp(56px, 11vw, 168px);
  margin: 0;
}
@media (max-width: 900px) {
  .ev-hero { grid-template-columns: 1fr; }
  .ev-hero > .left { min-height: auto; }
  .ev-hero > .right {
    border-left: none;
    border-top: 2px solid var(--d03-ink);
    min-height: 340px;
  }
}

/* Stats strip — same as films page */
.d03-stats-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--d03-ink);
  border-bottom: 2px solid var(--d03-ink);
  background: var(--d03-ink); color: var(--d03-paper);
}
.d03-stats-strip > div {
  padding: clamp(28px, 3.5vw, 48px);
  border-right: 1px solid #ffffff22;
}
.d03-stats-strip > div:last-child { border-right: none; }
.d03-stats-strip .n {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; letter-spacing: -0.04em; line-height: 0.9;
  font-size: clamp(44px, 6vw, 96px);
}
.d03-stats-strip .l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.15em; margin-top: 14px; opacity: 0.75;
}
@media (max-width: 900px) {
  .d03-stats-strip { grid-template-columns: 1fr 1fr; }
  .d03-stats-strip > div { border-right: none; border-bottom: 1px solid #ffffff22; }
  .d03-stats-strip > div:nth-child(odd) { border-right: 1px solid #ffffff22; }
}
@media (max-width: 600px) {
  .d03-stats-strip { grid-template-columns: 1fr 1fr; }
  .d03-stats-strip > div, .d03-stats-strip > div:nth-child(odd) { padding: 24px 18px; }
  .d03-stats-strip > div:nth-child(2n) { border-right: none; }
  .d03-stats-strip > div:nth-child(2n-1) { border-right: 1px solid #ffffff22; }
  .d03-stats-strip .n { font-size: clamp(32px, 8vw, 56px); }
  .d03-stats-strip .l { font-size: 10px; margin-top: 8px; }
}

/* Feature event split panel (Bootcamp / Competition / Festival) */
.feat-event {
  display: grid; grid-template-columns: 1fr 1.1fr;
  border-bottom: 2px solid var(--d03-ink);
}
.feat-event > .info {
  padding: clamp(32px, 5vw, 72px);
  border-right: 2px solid var(--d03-ink);
  display: flex; flex-direction: column;
  gap: 24px;
  justify-content: center;
  min-height: 560px;
}
.feat-event > .img {
  position: relative; overflow: hidden;
  min-height: 560px;
  background: var(--d03-ink);
}
.feat-event > .img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.05);
}
.feat-event > .img .tag {
  position: absolute; top: 24px; left: 24px;
  background: var(--d03-red-text); color: #fff;   /* darker red so white text passes WCAG AA 4.5:1 */
  padding: 8px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
}
/* Inverted variant (image left, info right) */
.feat-event.inv > .info {
  order: 2;
  border-right: none;
  border-left: 2px solid var(--d03-ink);
}
/* Festival = ink dark variant (3rd flagship — port-only, not in designer ref) */
.feat-event.dark {
  background: var(--d03-ink);
  color: var(--d03-paper);
}
.feat-event.dark > .info { border-right-color: var(--d03-paper); }
.feat-event.dark.inv > .info {
  border-right: none;
  border-left-color: var(--d03-paper);
}
@media (max-width: 900px) {
  .feat-event, .feat-event.inv { grid-template-columns: 1fr; }
  .feat-event > .info {
    border-right: none;
    border-left: none;
    border-top: 2px solid var(--d03-ink);
    order: 2;
    min-height: auto;
  }
  .feat-event.dark > .info { border-top-color: var(--d03-paper); }
  .feat-event > .img { min-height: 320px; }
}

/* Agenda table (bootcamp 6-week) */
.agenda {
  display: grid; grid-template-columns: 1fr;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  border: 1px solid var(--d03-ink);
}
.agenda > div {
  display: grid; grid-template-columns: 100px 1fr 120px;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--d03-ink);
}
.agenda > div:last-child { border-bottom: none; }
.agenda .wk { color: var(--d03-red); font-weight: 600; }
.agenda > div.highlight { background: var(--d03-paper2); }
@media (max-width: 600px) {
  .agenda > div { grid-template-columns: 80px 1fr; }
  .agenda > div > span:last-child {
    grid-column: 1 / -1;
    opacity: 0.6;
    font-size: 10px;
  }
}

/* Calendar / upcoming strip (3-col) */
.cal-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 2px solid var(--d03-ink);
}
.cal-strip > div {
  padding: clamp(28px, 3vw, 48px);
  border-right: 2px solid var(--d03-ink);
  min-height: 300px;
  display: flex; flex-direction: column;
  gap: 14px;
}
.cal-strip > div:last-child { border-right: none; }
.cal-strip .date-big {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(44px, 5vw, 72px);
  letter-spacing: -0.04em; line-height: 0.85;
  color: var(--d03-red);
}
.cal-strip .date-big small {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  font-weight: 400;
  opacity: 0.7;
  color: var(--d03-ink);
  display: block;
  margin-top: 6px;
}
@media (max-width: 900px) {
  .cal-strip { grid-template-columns: 1fr; }
  .cal-strip > div {
    border-right: none;
    border-bottom: 2px solid var(--d03-ink);
    min-height: auto; padding: 32px 24px;
  }
  .cal-strip > div:last-child { border-bottom: none; }
  .cal-strip .date-big { font-size: clamp(36px, 8vw, 48px); }
}

/* Past events grid (4-col / 2-row) */
.past-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 2px solid var(--d03-ink);
}
.past-grid > div {
  aspect-ratio: 4/5;
  border-right: 1px solid var(--d03-ink);
  border-bottom: 1px solid var(--d03-ink);
  overflow: hidden;
  position: relative;
  background: var(--d03-ink);
}
.past-grid > div img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.25);
  transition: filter 220ms ease, transform 400ms ease;
}
.past-grid > div:hover img {
  filter: grayscale(0);
  transform: scale(1.04);
}
.past-grid > div .lbl {
  position: absolute; bottom: 16px; left: 16px; right: 16px;
  background: var(--d03-ink); color: var(--d03-paper);
  padding: 10px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.15em;
}
@media (max-width: 900px) { .past-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .past-grid { grid-template-columns: 1fr; } }