/*
 * ASEAN in Focus + AI Literacy landing pages.
 *
 * Enqueued only by page-asean.php and page-ai-literacy.php. Layout lives in
 * the templates' inline styles (verbatim from the export); this file carries
 * what inline styles cannot: keyframes, hover states (the export's
 * style-hover attributes) and the responsive rules from each export's helmet.
 */

/* ---------- motion ---------- */
@keyframes asfade { 0% { opacity: 0 } 6% { opacity: 1 } 25% { opacity: 1 } 31% { opacity: 0 } 100% { opacity: 0 } }
@keyframes asticker { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes aspulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }

.as-fade { opacity: 0; animation: asfade 28s linear infinite }
.as-ticker { animation: asticker 48s linear infinite }
.as-pulse { animation: aspulse 2.4s ease-in-out infinite }

/* edit mode freezes the hero on its first photo so text can be clicked */
.as-fade--still { animation: none; opacity: 0 }
.as-fade--still:first-of-type { opacity: 1 }

@media (prefers-reduced-motion: reduce) {
  .as-fade { animation: none; opacity: 0 }
  .as-fade:first-of-type { opacity: 1 }
  .as-ticker, .as-pulse { animation: none }
}

/* ---------- hover (export style-hover) ---------- */
.lp-btn-solid:hover { transform: translateY(-2px) !important; color: var(--forest) !important }
.lp-btn-ghost:hover { background: rgba(220,232,225,.1) !important; color: #F8FAF8 !important }
.lp-pillar:hover { transform: translateY(-4px) !important; border-color: var(--sage) !important; box-shadow: 0 28px 50px -30px rgba(15,61,50,.45) !important }
.lp-tile:hover { transform: translateY(-3px) !important; box-shadow: 0 24px 44px -30px rgba(15,61,50,.45) !important }
.lp-slot:hover { background: var(--forest) !important; border-color: var(--forest) !important; transform: scale(1.04) !important }
.lp-start:hover { transform: translateY(-3px) !important; box-shadow: 0 34px 60px -34px rgba(15,61,50,.6) !important; color: #EAF2ED !important }
.lp-card:hover { transform: translateY(-4px) !important; border-color: var(--sage) !important; box-shadow: 0 24px 44px -30px rgba(15,61,50,.45) !important }
.lp-book:hover { transform: translateY(-6px) rotate(-.6deg) !important }
.lp-row:hover { transform: translateY(-2px) !important; box-shadow: 0 20px 40px -28px rgba(15,61,50,.4) !important }

/* ---------- AI Literacy filter chips ---------- */
.lp-chip { padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all .2s; background: #fff; border: 1px solid var(--line); color: var(--charcoal); white-space: nowrap }
.lp-chip.is-on { background: var(--forest); border-color: var(--forest); color: #fff }
.lp-chip:not(.is-on):hover { border-color: var(--emerald) }

/* the inline display:grid/flex would otherwise beat the hidden attribute */
.glossgrid[hidden], [data-lp-empty][hidden], [data-lp-card][hidden] { display: none !important }

/* ---------- edit-mode only helpers ---------- */
.lp-editpanel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; padding: 12px 14px; border: 1px dashed rgba(143,175,155,.6); border-radius: 12px; font: 500 12.5px/1.4 'IBM Plex Sans', system-ui, sans-serif; color: inherit }
.lp-editpanel b { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; opacity: .75 }
.lp-editpanel a { text-decoration: underline; text-underline-offset: 3px }
.lp-editthumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100% }
.lp-editthumbs > div { position: relative; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #0b2c24 }

/* ---------- responsive: ASEAN ---------- */
@media (max-width: 1180px) { .heros3 { display: none !important } }
@media (max-width: 980px) {
  .ashero, .asvoices, .asfellow, .aspartner { grid-template-columns: 1fr !important }
  .bento { grid-template-columns: 1fr 1fr !important }
  .bento .wide { grid-column: span 2 !important }
  .pillars { grid-template-columns: 1fr !important }
  .hoststrip { grid-template-columns: auto 1fr !important }
  .hoststrip .hq { grid-column: 1 / -1 }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr !important }
  .bento .wide { grid-column: auto !important }
  .slots { grid-template-columns: repeat(5, 1fr) !important }
  .asstats > div { padding-left: 12px !important; padding-right: 8px !important }
  .lp-editthumbs { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* ---------- responsive: AI Literacy ---------- */
@media (max-width: 960px) {
  .lithero, .startgrid { grid-template-columns: 1fr !important }
  .guidegrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
  .glossgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
}
@media (max-width: 640px) {
  .glossgrid { grid-template-columns: 1fr !important }
  .eprow { grid-template-columns: 84px minmax(0, 1fr) !important }
  .eprow > span:last-child { display: none !important }
}
@media (max-width: 600px) { .guidegrid { grid-template-columns: 1fr !important } }