/* E-MISSION 2K26 update: expanded non-technical lineup and calendar emphasis. */
.non-grid { grid-template-columns: repeat(4, 1fr); }
.non-card.film-card { background: linear-gradient(135deg, #123e51, #10244a); }
#calendar {
  background: var(--lime);
  border-color: var(--lime);
  color: #081126;
  box-shadow: 0 0 24px rgba(215,255,95,.22);
}
#calendar:hover { box-shadow: 0 8px 30px rgba(215,255,95,.32); }
@media (max-width: 800px) { .non-grid { grid-template-columns: 1fr; } }

/* Keep the hero logo on the left and use the right side for the signal visual. */
.emission-logo {
  margin-left: 0;
  margin-right: 0;
  position: static;
}

@media (min-width: 801px) {
  .hero-visual {
    display: block !important;
  }
}

/* Gold mission-control panel for the right side of the hero. */
@media (min-width: 801px) {
  .hero-visual {
    width: 42%;
    height: 420px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(217, 184, 102, .5);
    background:
      linear-gradient(rgba(217, 184, 102, .11) 1px, transparent 1px),
      linear-gradient(90deg, rgba(217, 184, 102, .11) 1px, transparent 1px),
      radial-gradient(circle at 70% 18%, rgba(217, 184, 102, .32), transparent 32%),
      #0a0905;
    background-size: 36px 36px, 36px 36px, auto, auto;
    box-shadow: inset 0 0 70px rgba(0, 0, 0, .7), 0 25px 60px rgba(0, 0, 0, .28);
  }

  .hero-visual > * {
    display: none;
  }

  .hero-visual::before {
    content: "E-MISSION\A 2K26\A\A // 19TH STATE LEVEL\A SYMPOSIUM\A\A ● SIGNAL ACTIVE";
    white-space: pre-line;
    position: absolute;
    inset: 42px;
    padding: 30px;
    border: 1px solid rgba(244, 212, 127, .65);
    color: #f4d47f;
    font: 600 13px/1.75 'DM Mono', monospace;
    letter-spacing: .12em;
    text-shadow: 0 0 18px rgba(244, 212, 127, .45);
    background: linear-gradient(135deg, rgba(217, 184, 102, .12), transparent 55%);
  }

  .hero-visual::after {
    content: "";
    position: absolute;
    top: -45%;
    left: -15%;
    width: 130%;
    height: 26%;
    background: linear-gradient(180deg, transparent, rgba(244, 212, 127, .18), transparent);
    transform: skewY(-12deg);
    animation: mission-scan 5s ease-in-out infinite;
  }
}

@keyframes mission-scan {
  0%, 100% { top: -45%; opacity: 0; }
  18% { opacity: 1; }
  70% { top: 115%; opacity: .8; }
}

/* Ideate → Create → Connect signal path. */
@media (min-width: 801px) {
  .hero-visual {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .hero-visual::before {
    content: "";
    inset: 48px auto 48px 50%;
    width: 1px;
    padding: 0;
    border: 0;
    background: linear-gradient(180deg, transparent, #d9b866 13%, #d9b866 87%, transparent);
    box-shadow: 0 0 12px rgba(217, 184, 102, .65);
  }

  .hero-visual::after {
    top: 62px;
    left: calc(50% - 6px);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    transform: none;
    background: #f4d47f;
    box-shadow: 0 0 0 7px rgba(244, 212, 127, .13), 0 0 22px #f4d47f;
    animation: signal-travel 4.8s ease-in-out infinite;
  }

  .hero-visual .core,
  .hero-visual .orbit {
    display: none !important;
  }

  .hero-visual .signal-card {
    display: flex !important;
    width: min(285px, 78%);
    min-height: 88px;
    padding: 18px 22px;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    color: #f8eac4;
    background: linear-gradient(100deg, rgba(27, 22, 11, .96), rgba(83, 62, 20, .7));
    border: 1px solid rgba(244, 212, 127, .68);
    box-shadow: 0 16px 35px rgba(0, 0, 0, .38);
    animation: signal-card 4.8s ease-in-out infinite;
  }

  .hero-visual .signal-card span {
    color: #d9b866;
    font: 500 11px 'DM Mono', monospace;
  }

  .hero-visual .signal-card b {
    font: 700 25px 'Space Grotesk', sans-serif;
    letter-spacing: .08em;
  }

  .hero-visual .c1 { top: 30px; left: 0; animation-delay: 0s; }
  .hero-visual .c2 { top: 162px; right: 0; animation-delay: 1.6s; }
  .hero-visual .c3 { top: 294px; left: 0; animation-delay: 3.2s; }
}

@keyframes signal-travel {
  0%, 12% { top: 62px; opacity: 0; }
  18%, 28% { opacity: 1; }
  45% { top: 196px; opacity: 1; }
  75% { top: 328px; opacity: 1; }
  88%, 100% { top: 350px; opacity: 0; }
}

@keyframes signal-card {
  0%, 100% { border-color: rgba(244, 212, 127, .48); transform: translateY(0); }
  18% { border-color: #f4d47f; box-shadow: 0 0 0 4px rgba(244, 212, 127, .12), 0 16px 35px rgba(0, 0, 0, .38); transform: translateY(-4px); }
  36% { border-color: rgba(244, 212, 127, .48); transform: translateY(0); }
}

/* Compact ECE microchip animation. */
@media (min-width: 801px) {
  .hero-visual {
    width: 300px;
    height: 270px;
    margin-right: 6vw;
    background: transparent;
  }

  .hero-visual .signal-card,
  .hero-visual .orbit {
    display: none !important;
  }

  .hero-visual::before {
    content: "";
    inset: 15px 0;
    width: auto;
    padding: 0;
    border: 0;
    background:
      linear-gradient(90deg, transparent 0 17%, rgba(217, 184, 102, .58) 17% 18%, transparent 18% 82%, rgba(217, 184, 102, .58) 82% 83%, transparent 83%),
      linear-gradient(transparent 0 48%, rgba(217, 184, 102, .58) 48% 49%, transparent 49%),
      repeating-linear-gradient(90deg, transparent 0 27px, rgba(217, 184, 102, .14) 28px 29px);
    opacity: .8;
    box-shadow: none;
  }

  .hero-visual::after {
    top: calc(50% - 4px);
    left: 18%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: none;
    background: #f4d47f;
    box-shadow: 0 0 14px #f4d47f;
    animation: chip-pulse 3.6s ease-in-out infinite;
  }

  .hero-visual .core {
    display: grid !important;
    width: 126px;
    height: 126px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background: linear-gradient(135deg, #5c4414, #161006 55%, #8e6922);
    border: 1px solid #f4d47f;
    box-shadow: 0 0 0 13px rgba(217, 184, 102, .12), 0 0 38px rgba(217, 184, 102, .3);
  }

  .hero-visual .core::before {
    content: "ECE";
    position: absolute;
    left: 50%;
    bottom: -31px;
    transform: translateX(-50%);
    color: #d9b866;
    font: 600 10px 'DM Mono', monospace;
    letter-spacing: .28em;
  }

  .hero-visual .core-inner {
    inset: 14px;
    border-radius: 5px;
    border-color: rgba(244, 212, 127, .7);
    animation: chip-glow 3.6s ease-in-out infinite;
  }

  .hero-visual .core-inner span {
    color: #f8eac4;
    font-size: 31px;
    text-shadow: 0 0 12px rgba(244, 212, 127, .55);
  }

  .hero-visual .core-inner i {
    display: none;
  }
}

@keyframes chip-pulse {
  0%, 15% { left: 18%; opacity: 0; }
  24% { opacity: 1; }
  68% { left: 78%; opacity: 1; }
  82%, 100% { left: 82%; opacity: 0; }
}

@keyframes chip-glow {
  0%, 100% { box-shadow: inset 0 0 0 rgba(244, 212, 127, 0); }
  45% { box-shadow: inset 0 0 24px rgba(244, 212, 127, .33); }
}

/* M.A.M. College emblem in place of the hero animation. */
@media (min-width: 801px) {
  .hero-visual {
    width: 260px;
    height: 260px;
    margin-right: 8vw;
    background: url("assets/mamce-logo.png") center / contain no-repeat;
    mix-blend-mode: screen;
    opacity: .98;
    position: relative;
    top: -150px;
    filter: sepia(1) saturate(1.7) hue-rotate(350deg) brightness(1.2) contrast(1.08)
      drop-shadow(0 0 18px rgba(244, 212, 127, .28));
  }

  .hero-visual::before,
  .hero-visual::after,
  .hero-visual .core,
  .hero-visual .signal-card,
  .hero-visual .orbit {
    display: none !important;
  }
}

/* Subtle presentation effects for the M.A.M. College emblem. */
@media (min-width: 801px) {
  .hero-visual::before {
    content: "";
    display: block !important;
    position: absolute;
    inset: 2px;
    padding: 0;
    width: auto;
    border: 1px dashed rgba(244, 212, 127, .5);
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    animation: emblem-ring 18s linear infinite;
  }

  .hero-visual::after {
    content: "";
    display: block !important;
    position: absolute;
    inset: 24px;
    width: auto;
    height: auto;
    border-radius: 50%;
    transform: none;
    background: radial-gradient(circle, rgba(244, 212, 127, .2), transparent 67%);
    box-shadow: 0 0 38px rgba(217, 184, 102, .32);
    animation: emblem-glow 3.8s ease-in-out infinite;
    pointer-events: none;
  }
}

@keyframes emblem-ring {
  to { transform: rotate(360deg); }
}

@keyframes emblem-glow {
  0%, 100% { opacity: .35; transform: scale(.93); }
  50% { opacity: .8; transform: scale(1.06); }
}

/* Downloadable image gallery. */
.gallery { background: linear-gradient(180deg, #0a0f23, #080d1e); }
.gallery-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; }
.gallery-card { margin: 0; min-height: 330px; position: relative; overflow: hidden; border: 1px solid var(--line); background: #101938; }
.gallery-card-featured { min-height: 430px; }
.gallery-card img { display: block; width: 100%; height: 100%; min-height: inherit; object-fit: cover; transition: transform .45s ease, filter .45s ease; }
.gallery-card:not(.gallery-card-featured) img { object-fit: contain; padding: 42px; background: radial-gradient(circle at 50% 35%, #243066, #080d1e 70%); }
.gallery-card:hover img { transform: scale(1.06); filter: brightness(.72); }
.gallery-card figcaption { position: absolute; inset: auto 0 0; padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(transparent, rgba(3, 7, 18, .96) 40%); color: var(--ink); font: 10px 'DM Mono', monospace; letter-spacing: .08em; }
.gallery-card figcaption a { padding: 10px 12px; color: #081126; background: var(--lime); text-decoration: none; font: 800 10px var(--font); letter-spacing: 0; white-space: nowrap; transition: transform .2s, box-shadow .2s; }
.gallery-card figcaption a:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(215,255,95,.25); }
.gallery-card figcaption b { margin-left: 5px; font-size: 16px; }
@media (max-width: 800px) { .gallery-grid { grid-template-columns: 1fr; } .gallery-card, .gallery-card-featured { min-height: 350px; } }