/* =========================================================
   TECHWEEK — interaction styles (hovers, modal, calendar, nav)
   Layered on top of styles.css; behavior lives in assets/js/*.
   ========================================================= */

/* ---- Card hover lifts (organic-ish, single accent) ---- */
.tw-article-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 0 var(--acid);
  border-color: var(--acid) !important;
}
.tw-article-card:nth-child(3n+2):hover { box-shadow: 5px 5px 0 0 var(--cyan); border-color: var(--cyan) !important; }
.tw-article-card:nth-child(3n):hover   { box-shadow: 5px 5px 0 0 var(--magenta); border-color: var(--magenta) !important; }
.tw-article-card:hover .glitch-img img,
.tw-hero-card:hover .glitch-img img {
  filter: grayscale(0) contrast(1.05) brightness(0.95) saturate(1.1);
  transform: scale(1.02);
}

/* ---- Featured hero hover ---- */
.tw-hero-card:hover .tw-hero-image {
  border-color: var(--acid);
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 0 var(--acid);
}

/* ---- Interest tiles ---- */
.tw-interest-tile { transition: background 220ms ease, border-color 220ms ease; }
.tw-interest-tile.is-active .tw-tile-label,
.tw-interest-tile.is-active .tw-tile-arrow { color: #0a0c0f !important; }
.tw-interest-tile.is-active .tw-tile-dot { background: #0a0c0f !important; }
.tw-interest-tile.is-active .tw-tile-arrow { transform: translateY(3px); }

/* ---- Mobile menu ---- */
.tw-mobile-menu { display: none; }
.tw-mobile-menu:not([hidden]) { display: flex; }

/* ---- Events view toggle ---- */
[data-events-toggle] button.is-active { background: var(--ink); color: #0a0c0f; }

/* ---- Article cards: smooth glitch image even without hover JS ---- */
.tw-article-card .glitch-img img,
.tw-hero-card .glitch-img img { transition: filter 300ms ease, transform 400ms ease; }

/* ---- Calendar (JS-rendered) ---- */
.tw-cal-grid button:hover { filter: brightness(1.4); }

/* ---- Ticket modal field grid ---- */
.tw-modal-field { display: flex; flex-direction: column; gap: 6px; }
.tw-modal-field > .eyebrow { margin: 0; }

/* ---- Responsive: patterns not covered by mobile.css's substring selectors ---- */
@media (max-width: 900px) {
  /* Event-detail two-column sections (label / body) */
  [style*="grid-template-columns: 1fr 2fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Next-event banner meta row (where / time / price / button) */
  [style*="grid-template-columns: 1.5fr 1fr 1fr auto"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
  /* Coming-soon rows */
  [style*="grid-template-columns: 120px 1fr auto"] {
    grid-template-columns: 1fr auto !important;
    gap: 12px !important;
  }
}
@media (max-width: 520px) {
  [style*="grid-template-columns: 1.5fr 1fr 1fr auto"] {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-marquee-track] { transition: none !important; }
}