/* extra.css — runtime/animation/responsive styles (was inline in the prototype HTML) */

/* spinner */
.spinner { width: 17px; height: 17px; border: 2.5px solid rgba(255,255,255,.45); border-top-color: currentColor; border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; }
.btn-accent .spinner { border-color: rgba(10,44,63,.3); border-top-color: var(--brand-ink); }
.spinner-lg { width: 40px; height: 40px; border-width: 4px; border-color: var(--line); }
@keyframes spin { to { transform: rotate(360deg); } }

/* result pop-in */
.result-pop { animation: popIn .4s cubic-bezier(.2,.7,.2,1); }
@keyframes popIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* marquee */
.marquee { animation: marquee 30s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* hovers */
.course-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.course-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--line); }
.course-card:hover .course-cta { gap: 10px; }
.why-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.nav-link:hover { color: var(--brand) !important; background: rgba(10,63,90,.06) !important; }
.foot-link { transition: color .15s ease; }
.foot-link:hover { color: var(--accent) !important; }
details summary::-webkit-details-marker { display: none; }
details[open] summary svg { transform: rotate(180deg); }
details summary svg { transition: transform .2s ease; }

/* card style variants (Tweaks) */
body[data-cards="flat"] .card { box-shadow: none; border-color: var(--line-2); }
body[data-cards="outlined"] .card { box-shadow: none; border: 1.5px solid var(--line); }
body[data-cards="outlined"] .course-card:hover,
body[data-cards="flat"] .course-card:hover { box-shadow: var(--sh-md); }

/* image-slot warm placeholder skin */
image-slot {
  --is-bg: linear-gradient(135deg, #103f57 0%, #0a3349 100%);
  background: linear-gradient(135deg, #103f57 0%, #0a3349 100%);
  color: rgba(255,255,255,.6); border-radius: var(--r-lg);
}

/* responsive */
.burger { display: none; }
@media (max-width: 1024px) {
  .desk-nav { display: none !important; }
  .burger { display: grid !important; }
  .mobile-drawer { display: flex !important; }
  .hero-grid, .intro-grid, .detail-grid, .contact-strip, .contact-page, .verify-cta-grid, .mv-grid { grid-template-columns: 1fr !important; }
  .detail-aside { position: static !important; }
  .card-grid, .why-grid, .stat-grid, .gallery-grid, .timeline { grid-template-columns: repeat(2, 1fr) !important; }
  .masonry { column-count: 2 !important; }
  .hero-art { max-width: 520px; margin-inline: auto; }
  .timeline-line { display: none; }
}
@media (min-width: 1025px) { .mobile-drawer { display: none !important; } }
@media (max-width: 760px) {
  body { font-size: 16px; }
  .card-grid, .why-grid, .stat-grid, .gallery-grid, .timeline, .detail-grid { grid-template-columns: 1fr !important; }
  .masonry { column-count: 1 !important; }
  .gallery-grid > * { grid-column: span 1 !important; grid-row: span 1 !important; }
  .course-controls { flex-direction: column; }
  .course-controls > div { width: 100%; }
  .section { padding-block: 52px; }
  .hero-art { max-width: 100%; }
}