/* ==========================================================================
   Python Animation Learning — Responsive Rules
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
  .container { padding: 0 24px; }

  .code-float--b { display: none; }

  .app-shell-section { padding: 48px 0 0; }
}

/* Small tablet / large phone */
@media (max-width: 768px) {
  .hero { min-height: 100svh; }

  .hero__title { font-size: clamp(2rem, 8vw, 2.8rem); }

  .hero__actions { flex-direction: column; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }

  .btn-cta, .btn-ghost { width: 100%; text-align: center; }

  .code-float { display: none; }

  .shape--tri, .shape--square { display: none; }

  .section-head { margin-bottom: 32px; padding: 0 24px; }
}

/* Phone */
@media (max-width: 480px) {
  .container { padding: 0 18px; }

  .hero__badge { font-size: 11.5px; padding: 6px 12px; }

  .section-head__title { font-size: 1.7rem; }
}

/* Reduce hero decoration on short viewports */
@media (max-height: 620px) {
  .py-glyph, .code-float { display: none; }
  .scroll-indicator { display: none; }
}