/* =============================================================================
   REDDY ANNA — RESPONSIVE
   Builds on style.css tokens. Mobile-first overrides.
   Breakpoints:  xl ≥1280  lg ≤1024  md ≤768  sm ≤480
   ============================================================================= */

/* =============================================================================
   LARGE DESKTOP (≥1280px)
   ============================================================================= */
@media (min-width: 1280px) {
    .container { padding-inline: 2.5rem; }
}

/* =============================================================================
   TABLET & BELOW (≤1024px)
   ============================================================================= */
@media (max-width: 1024px) {

    /* Nav collapses to hamburger */
    .site-nav              { display: none; }
    .nav-toggle            { display: flex; }
    .header-actions .btn-secondary { display: none; }

    /* Footer: 2-col */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }

    /* Grids */
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }

    /* Hero */
    .hero { min-height: 90vh; }
    .hero-content { padding-top: calc(var(--header-h) + 3rem); padding-bottom: 4rem; }
}

/* =============================================================================
   TABLET (≤768px)
   ============================================================================= */
@media (max-width: 768px) {

    /* Scale headings */
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl);  }

    /* Sections */
    .section    { padding-block: 4rem; }
    .section--lg{ padding-block: 5rem; }

    /* Container */
    .container { padding-inline: 1.25rem; }

    /* Header */
    .site-header { /* height auto — driven by padding */ }
    .header-inner { padding-block: var(--s4); }
    .header-offset { padding-top: var(--header-h-mob); }
    .mobile-nav { top: var(--header-h-mob); }
    .site-logo img { height: 42px; }

    /* Hero */
    .hero { min-height: 88vh; }
    .hero-content { padding-top: calc(var(--header-h-mob) + 2.5rem); padding-bottom: 3.5rem; }
    .hero h1 { font-size: clamp(2rem, 8vw, var(--text-4xl)); }
    .hero-desc { font-size: var(--text-base); }
    .hero-actions { flex-direction: column; align-items: flex-start; width: 100%; }
    .hero-actions .btn { width: 100%; justify-content: center; }

    /* Grids */
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

    /* Section header */
    .section-title  { font-size: clamp(1.5rem, 5.5vw, var(--text-2xl)); }
    .section-header { margin-bottom: 2rem; }

    /* Cards */
    .card      { padding: 1.5rem; }
    .form-card { padding: 2rem 1.5rem; }

    /* Stats */
    .stat-number { font-size: var(--text-3xl); }

    /* Footer */
    .footer-grid   { grid-template-columns: 1fr; gap: 2rem; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-legal  { justify-content: center; }
    .footer-tagline { max-width: none; }

    /* Page hero */
    .page-hero {
        padding-top:    calc(var(--header-h-mob) + 2.5rem);
        padding-bottom: 2.5rem;
    }

    /* Breadcrumb */
    .breadcrumb { font-size: var(--text-xs); }

    /* flex-between stacks on mobile */
    .flex-between { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* =============================================================================
   MOBILE (≤480px)
   ============================================================================= */
@media (max-width: 480px) {
    html { font-size: 15px; }

    .container { padding-inline: 1rem; }

    .hero        { min-height: 82vh; }
    .hero-content { padding-top: calc(var(--header-h-mob) + 2rem); padding-bottom: 3rem; }
    .hero-badge   { font-size: 10px; }

    .btn    { padding: 11px 1.25rem; }
    .btn-lg { padding: 13px 1.5rem; font-size: var(--text-sm); }

    .mobile-nav-links a { font-size: var(--text-base); padding: 1rem .75rem; }

    .form-card { padding: 1.5rem 1.25rem; }

    .section-title { font-size: clamp(1.35rem, 5vw, var(--text-2xl)); }

    .card { padding: 1.25rem; border-radius: var(--r-lg); }

    .stat-number { font-size: var(--text-2xl); }

    .grid { gap: 1rem; }
}

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:       0.01ms !important;
        animation-iteration-count: 1     !important;
        transition-duration:      0.01ms !important;
        scroll-behavior:          auto   !important;
    }
}

/* =============================================================================
   FORCED COLOURS (high-contrast accessibility)
   ============================================================================= */
@media (forced-colors: active) {
    .btn-primary,
    .btn-secondary { border: 2px solid ButtonText; }
    .card          { border: 1px solid ButtonText; }
}