/* ============================================
   CourseraVoyant Inc. — Responsive Styles
   Tablet (768–1023px) · Mobile (≤767px)
   ============================================ */

/* ============================================
   TABLET — 768px to 1023px
   ============================================ */
@media (max-width: 1023px) {
  :root {
    --space-4xl: 4rem;
    --space-5xl: 5rem;
    --header-height: 72px;
  }

  /* ---- Header ---- */
  .main-nav { display: none; }
  .header-cta { display: none; }
  .menu-toggle { display: flex; }

  /* ---- Footer ---- */
  .footer-top {
    padding-bottom: var(--space-2xl);
  }

  .footer-brand__desc {
    max-width: 560px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }

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

  /* ---- Home: Company Intro ---- */
  .company-intro__content {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .company-intro__visual {
    min-height: 320px;
  }

  .company-intro__features {
    grid-template-columns: 1fr 1fr;
  }

  /* ---- Home: Metrics ---- */
  .metrics-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .metric-item:nth-child(2)::after { display: none; }

  /* ---- Home: Services Overview ---- */
  .services-overview__grid {
    grid-template-columns: 1fr;
  }

  /* ---- Home: Latest Insights ---- */
  .latest-insights__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ---- Home: Why Choose ---- */
  .why-choose__grid {
    grid-template-columns: 1fr;
  }

  /* ---- About: Mission/Vision ---- */
  .mission-vision {
    grid-template-columns: 1fr;
  }

  /* ---- About: Core Values ---- */
  .core-values__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ---- About: Global Reach ---- */
  .global-reach__content {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  /* ---- About: Leadership ---- */
  .leadership-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ---- Services: Service Detail ---- */
  .service-detail {
    grid-template-columns: 60px 1fr;
    gap: var(--space-md);
  }

  .service-detail__features {
    grid-template-columns: 1fr;
  }

  /* ---- Services: Process Timeline ---- */
  .process-timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
  }

  .process-timeline::before { display: none; }

  /* ---- Insights Grid ---- */
  .insights-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ---- Related Articles ---- */
  .related-articles__grid {
    grid-template-columns: 1fr;
  }

  /* ---- Contact Layout ---- */
  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  /* ---- Sidebar Layout ---- */
  .sidebar-layout {
    grid-template-columns: 1fr;
  }

  /* ---- Split Layout ---- */
  .split-layout {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  /* ---- Content Row ---- */
  .content-row {
    flex-direction: column;
    gap: var(--space-2xl);
  }

  .content-row--reverse {
    flex-direction: column;
  }

  /* ---- Article Footer ---- */
  .article-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================
   MOBILE — ≤767px
   ============================================ */
@media (max-width: 767px) {
  :root {
    --space-3xl: 2.5rem;
    --space-4xl: 3rem;
    --space-5xl: 4rem;
    --container-padding: 1rem;
    --header-height: 64px;
  }

  /* ---- Typography Scale Down ---- */
  .hero-home__title { font-size: 2rem; }
  .page-hero__title { font-size: 1.75rem; }
  .article-hero__title { font-size: 1.5rem; }
  .section-title { font-size: 1.5rem; }
  .cta-section__title { font-size: 1.5rem; }
  .error-404__title { font-size: 1.5rem; }

  /* ---- Header ---- */
  .logo__name { font-size: 1rem; }
  .logo__tagline { display: none; }
  .logo__icon { width: 42px; height: 42px; }

  .mobile-nav {
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
  }

  /* ---- Hero ---- */
  .hero-home {
    min-height: auto;
    padding-bottom: var(--space-4xl);
  }

  .hero-home__content {
    padding: var(--space-2xl) 0;
  }

  .hero-home__desc {
    font-size: var(--fs-body);
  }

  .hero-home__actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-home__actions .btn {
    width: 100%;
  }

  .hero-home__scroll { display: none; }

  /* ---- Page Hero ---- */
  .page-hero {
    padding-top: calc(var(--header-height) + var(--space-2xl));
    padding-bottom: var(--space-2xl);
  }

  /* ---- Section Padding ---- */
  .section {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
  }

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

  /* ---- Home: Company Intro Features ---- */
  .company-intro__features {
    grid-template-columns: 1fr;
  }

  /* ---- Home: Metrics ---- */
  .metrics-row {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .metric-item::after { display: none; }

  .metric-item {
    padding: var(--space-md);
  }

  .metric-value { font-size: 2.25rem; }

  /* ---- Home: Latest Insights ---- */
  .latest-insights__grid {
    grid-template-columns: 1fr;
  }

  /* ---- CTA Section ---- */
  .cta-section__actions {
    flex-direction: column;
    width: 100%;
  }

  .cta-section__actions .btn {
    width: 100%;
  }

  /* ---- About: Core Values ---- */
  .core-values__grid {
    grid-template-columns: 1fr;
  }

  /* ---- About: Leadership ---- */
  .leadership-grid {
    grid-template-columns: 1fr;
  }

  /* ---- About: Global Reach Locations ---- */
  .global-reach__locations {
    grid-template-columns: 1fr;
  }

  /* ---- Services: Service Detail ---- */
  .service-detail {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .service-detail__number {
    font-size: 2rem;
  }

  /* ---- Services: Process Timeline ---- */
  .process-timeline {
    grid-template-columns: 1fr;
  }

  /* ---- Insights Grid ---- */
  .insights-grid {
    grid-template-columns: 1fr;
  }

  /* ---- Filter Tabs ---- */
  .filter-tabs {
    gap: var(--space-xs);
  }

  .filter-tab {
    padding: var(--space-2xs) var(--space-md);
    font-size: var(--fs-caption);
  }

  /* ---- Pagination ---- */
  .pagination__item {
    min-width: 36px;
    height: 36px;
  }

  /* ---- Contact Form ---- */
  .contact-form-wrap {
    padding: var(--space-lg);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  /* ---- Article Body ---- */
  .article-body p {
    font-size: var(--fs-body);
  }

  .article-body h2 {
    font-size: var(--fs-h4);
  }

  /* ---- Article Hero Meta ---- */
  .article-hero__meta {
    flex-direction: column;
    gap: var(--space-xs);
  }

  /* ---- 404 Page ---- */
  .error-404__actions {
    flex-direction: column;
    width: 100%;
  }

  .error-404__actions .btn {
    width: 100%;
  }

  /* ---- Back to Top ---- */
  .back-to-top {
    bottom: var(--space-md);
    right: var(--space-md);
    width: 40px;
    height: 40px;
  }

  /* ---- Blockquote ---- */
  blockquote {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--fs-body-lg);
  }

  /* ---- Service Card ---- */
  .service-card {
    padding: var(--space-lg);
  }

  .service-card__number {
    font-size: 2rem;
  }

  /* ---- Footer ---- */
  .footer-top {
    padding-bottom: var(--space-xl);
  }

  .footer-brand__desc {
    font-size: var(--fs-body-sm);
    max-width: 100%;
  }

  .footer-bottom__legal {
    flex-direction: column;
    gap: var(--space-xs);
    text-align: center;
  }

  /* ---- Contact Map ---- */
  .contact-map {
    height: 240px;
  }

  /* ---- Share Buttons ---- */
  .share-buttons {
    flex-wrap: wrap;
  }
}

/* ============================================
   SMALL MOBILE — ≤375px
   ============================================ */
@media (max-width: 375px) {
  :root {
    --container-padding: 0.75rem;
  }

  .hero-home__title { font-size: 1.75rem; }
  .page-hero__title { font-size: 1.5rem; }
  .section-title { font-size: 1.25rem; }

  .btn {
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--fs-body-sm);
  }

  .btn--lg {
    padding: var(--space-md) var(--space-lg);
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .site-header,
  .site-footer,
  .back-to-top,
  .menu-toggle,
  .mobile-nav,
  .hero-home__scroll {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .section {
    padding: 1rem 0;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}

/* ============================================
   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;
  }
}