/*
 * Bridge Consulting — Responsive Styles
 * =======================================
 * Breakpoint overrides for tablet (1024px) and mobile (768px).
 * Loaded last — overrides all previous stylesheets.
 * No @import. Loaded via separate link tag.
 */

/* =============================================
 * TABLET — max-width: 1024px
 * ============================================= */

@media (max-width: 1024px) {

  /* --- Typography scale down --- */
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }

  .hero__heading {
    font-size: clamp(2rem, 4.5vw, var(--text-5xl));
    max-width: 100%;
  }

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

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

  /* --- Sections --- */
  .section {
    padding-top: var(--section-padding-y-tablet);
    padding-bottom: var(--section-padding-y-tablet);
  }

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

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

  .grid-content {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .grid-content--wide-left,
  .grid-content--wide-right {
    grid-template-columns: 1fr;
  }

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

  /* Stats bar */
  .stats-bar__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6) 0;
  }

  .stats-bar__grid > * + * {
    border-left: none;
    padding-left: 0;
  }

  .stats-bar__grid > *:nth-child(2n) {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: var(--space-6);
  }

  /* --- Region cards --- */
  .region-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Hero visual --- */
  .hero__visual {
    display: none;
  }

  /* --- D365 card padding --- */
  .d365-section__card {
    padding: var(--space-8) var(--space-6);
  }

  /* --- Gallery first item span --- */
  .gallery-grid .gallery-item:first-child {
    grid-column: span 1;
    aspect-ratio: 1 / 1;
  }

  /* --- Container padding --- */
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

}


/* =============================================
 * MOBILE — max-width: 768px
 * ============================================= */

@media (max-width: 768px) {

  /* --- HTML base --- */
  html {
    scroll-padding-top: var(--header-height-mobile, 64px);
  }

  /* --- Typography further reduction --- */
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
  h4 { font-size: var(--text-lg); }

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

  .hero__heading {
    font-size: clamp(1.75rem, 6vw, var(--text-4xl));
  }

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

  .section-header__heading {
    font-size: var(--text-2xl);
  }

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

  .cta-section__heading {
    font-size: var(--text-2xl);
  }

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

  /* --- Section padding --- */
  .section {
    padding-top: var(--section-padding-y-mobile);
    padding-bottom: var(--section-padding-y-mobile);
  }

  .section--sm {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  /* --- Container --- */
  .container {
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
  }

  /* --- Section header --- */
  .section-header {
    margin-bottom: var(--space-8);
  }

  /* =============================================
   * HEADER / NAV
   * ============================================= */

  .header {
    height: var(--header-height-mobile);
  }

  /* Hide desktop nav links */
  .nav-links {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  /* Show hamburger */
  .hamburger {
    display: flex;
  }

  /* =============================================
   * HERO
   * ============================================= */

  .hero {
    min-height: 60vh;
  }

  .hero__inner {
    padding: var(--space-12) var(--container-padding-mobile);
  }

  .hero__visual {
    display: none;
  }

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

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero__scroll-cue {
    display: none;
  }

  /* =============================================
   * GRIDS — all collapse to 1 column
   * ============================================= */

  .grid-2,
  .grid-3,
  .grid-4,
  .grid-content,
  .grid-content--wide-left,
  .grid-content--wide-right,
  .region-cards {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* =============================================
   * GALLERY GRID
   * ============================================= */

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .gallery-grid .gallery-item:first-child {
    grid-column: span 1;
    aspect-ratio: 16 / 9;
  }

  .gallery-item {
    aspect-ratio: 4 / 3;
  }

  /* =============================================
   * CARDS
   * ============================================= */

  .card,
  .service-card,
  .team-card,
  .region-card,
  .testimonial-card {
    padding: var(--space-6);
  }

  /* Team card photo size reduction */
  .team-card__photo {
    width: 160px;
    height: 160px;
  }

  /* =============================================
   * BUTTONS
   * ============================================= */

  .btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
  }

  /* =============================================
   * D365 SECTION
   * ============================================= */

  .d365-section__card {
    padding: var(--space-6) var(--space-5);
    border-left-width: 3px;
  }

  .d365-section__heading {
    font-size: var(--text-2xl);
  }

  /* =============================================
   * CTA SECTION
   * ============================================= */

  .cta-section__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

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

  /* =============================================
   * STATS BAR
   * ============================================= */

  .stats-bar__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-bar__grid > *:nth-child(2n) {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: var(--space-4);
  }

  .stat-block__number {
    font-size: var(--text-4xl);
  }

  /* =============================================
   * FOOTER — single column
   * ============================================= */

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

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

  .footer__tagline {
    max-width: 100%;
  }

  .footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

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

  /* =============================================
   * BRIDGE DIVIDER
   * ============================================= */

  .bridge-divider {
    height: 48px;
  }

  .bridge-divider__arc {
    width: 95vw;
  }

  /* =============================================
   * PAGE HERO
   * ============================================= */

  .page-hero {
    padding: calc(var(--header-height-mobile) + var(--space-10)) 0 var(--space-10);
  }

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

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

  /* =============================================
   * PROCESS LIST
   * ============================================= */

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

  .process-step {
    flex-direction: column;
    gap: var(--space-3);
  }

  /* =============================================
   * FEATURE ITEMS
   * ============================================= */

  .feature-item {
    flex-direction: column;
    gap: var(--space-3);
  }

  /* =============================================
   * MOBILE MENU — full screen takes over
   * ============================================= */

  .mobile-nav-link {
    font-size: var(--text-2xl);
    padding: var(--space-3) var(--space-4);
  }

}


/* =============================================
 * SMALL MOBILE — max-width: 480px
 * ============================================= */

@media (max-width: 480px) {

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

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

  .hero__actions .btn {
    font-size: var(--text-sm);
  }

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

  .team-card__photo {
    width: 140px;
    height: 140px;
  }

  /* Stack footer legal links */
  .footer__legal-links {
    flex-direction: column;
    gap: var(--space-2);
  }

}


/* =============================================
 * REDUCED MOTION — accessibility
 * ============================================= */

@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;
  }

  .hero__scroll-cue {
    animation: none;
  }

}