/**
 * Aeostara Theme — Responsive Styles
 * =====================================
 * Breakpoints: 1024px, 768px, 480px
 * Mobile-first adjustments for all components.
 *
 * @package Aeostara
 * @since   0.1.0
 */


/* ==========================================================================
   1024px — Navigation collapse, grid adjustments
   ========================================================================== */

@media (max-width: 1024px) {

  /* --- Typography Scale-Down --- */

  h1, .hero__title, .page-hero__title {
    font-size: var(--text-4xl);
  }

  h2, .section-heading__title, .final-cta__title {
    font-size: var(--text-3xl);
  }

  h3 {
    font-size: var(--text-2xl);
  }

  /* --- Navigation Collapse --- */

  .menu-toggle {
    display: flex;
  }

  .main-navigation {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(11, 14, 20, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: var(--space-6);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
    z-index: 999;
  }

  .main-navigation.is-open {
    transform: translateX(0);
  }

  .nav-menu {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }

  .nav-menu a {
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }

  .nav-menu li:last-child a {
    border-bottom: none;
  }

  /* --- Grids — 2 columns --- */

  .info-grid--three,
  .feature-grid,
  .audience-grid,
  .principles-grid,
  .contact-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Footer --- */

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  /* --- Recovery Loop --- */

  .recovery-loop {
    gap: var(--space-2);
  }

  .recovery-loop__step {
    max-width: 200px;
  }

  /* --- Comparison --- */

  .comparison {
    gap: var(--space-4);
  }
}


/* ==========================================================================
   768px — Single-column grids, stacked hero, mobile nav
   ========================================================================== */

@media (max-width: 768px) {

  /* --- Container --- */

  .container {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  /* --- Section Spacing --- */

  .section {
    padding: var(--space-12) 0;
  }

  .section--compact {
    padding: var(--space-8) 0;
  }

  /* --- Hero --- */

  .hero {
    padding: var(--space-16) 0 var(--space-12);
  }

  .hero__title {
    font-size: var(--text-3xl);
  }

  .hero__subtitle {
    font-size: var(--text-base);
  }

  .hero__actions {
    flex-direction: column;
    align-items: center;
  }

  .hero__actions .btn {
    width: 100%;
    max-width: 320px;
  }

  /* --- Page Hero --- */

  .page-hero {
    padding: var(--space-16) 0 var(--space-8);
  }

  .page-hero__title {
    font-size: var(--text-3xl);
  }

  /* --- Section Heading --- */

  .section-heading {
    margin-bottom: var(--space-8);
  }

  .section-heading__title {
    font-size: var(--text-3xl);
  }

  /* --- All Grids — Single Column --- */

  .info-grid,
  .info-grid--three,
  .feature-grid,
  .pattern-grid,
  .audience-grid,
  .comparison,
  .cta-split,
  .principles-grid,
  .detail-grid,
  .contact-info-grid {
    grid-template-columns: 1fr;
  }

  /* --- Recovery Loop — Stacked --- */

  .recovery-loop {
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
  }

  .recovery-loop__step {
    max-width: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    text-align: left;
    padding: 0;
  }

  .recovery-loop__step:not(:last-child)::after {
    display: none;
  }

  .recovery-loop__icon {
    margin: 0;
    flex-shrink: 0;
  }

  .recovery-loop__content {
    flex: 1;
  }

  /* --- CTA Split --- */

  .cta-split__card {
    padding: var(--space-6);
  }

  /* --- Final CTA --- */

  .final-cta {
    padding: var(--space-12) 0;
  }

  .final-cta__title {
    font-size: var(--text-3xl);
  }

  .final-cta__actions {
    flex-direction: column;
    align-items: center;
  }

  .final-cta__actions .btn {
    width: 100%;
    max-width: 320px;
  }

  /* --- Footer --- */

  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .site-footer__bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }

  .footer-legal-menu {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  /* --- Platform Stack --- */

  .platform-stack {
    max-width: 100%;
  }

  /* --- About Prose --- */

  .about-section__title {
    font-size: var(--text-2xl);
  }

  .about-section {
    margin-bottom: var(--space-10);
  }
}


/* ==========================================================================
   480px — Tighter spacing, smaller headings
   ========================================================================== */

@media (max-width: 480px) {

  /* --- Container --- */

  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* --- Typography --- */

  h1, .hero__title, .page-hero__title {
    font-size: var(--text-2xl);
  }

  h2, .section-heading__title, .final-cta__title {
    font-size: var(--text-2xl);
  }

  .hero__subtitle,
  .page-hero__subtitle {
    font-size: var(--text-sm);
  }

  /* --- Section --- */

  .section {
    padding: var(--space-10) 0;
  }

  /* --- Cards — Reduced Padding --- */

  .info-card,
  .feature-card,
  .pattern-card,
  .audience-card,
  .principle-card,
  .detail-card,
  .contact-info-card,
  .comparison__col,
  .cta-split__card {
    padding: var(--space-5);
  }

  /* --- Pattern Card — Stack --- */

  .pattern-card {
    flex-direction: column;
    gap: var(--space-3);
  }

  /* --- Buttons — Full Width --- */

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

  /* --- Hero --- */

  .hero {
    padding: var(--space-12) 0 var(--space-8);
  }

  .hero__badge .badge {
    font-size: 0.65rem;
  }

  /* --- Section Heading --- */

  .section-heading {
    margin-bottom: var(--space-6);
  }

  /* --- Recovery Loop — Compact --- */

  .recovery-loop__icon {
    width: 40px;
    height: 40px;
    font-size: var(--text-base);
  }

  /* --- Contact Form --- */

  .contact-form__input,
  .contact-form__textarea {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
  }

  /* --- Footer --- */

  .site-footer {
    padding-top: var(--space-10);
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer-legal-menu {
    flex-direction: column;
    gap: var(--space-2);
  }
}


/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .main-navigation {
    transition: none;
  }
}


/* ==========================================================================
   High Contrast
   ========================================================================== */

@media (forced-colors: active) {
  .info-card,
  .feature-card,
  .pattern-card,
  .audience-card,
  .principle-card,
  .detail-card,
  .contact-info-card,
  .comparison__col,
  .cta-split__card,
  .platform-stack__tier {
    border: 1px solid ButtonText;
  }

  .btn {
    border: 1px solid ButtonText;
  }

  .site-header {
    border-bottom: 1px solid CanvasText;
  }
}