/* ==========================================================================
   BLACKBRIDGE CAPITAL - COMPREHENSIVE RESPONSIVE & ADAPTIVE STYLES
   Fluid support for 4K / Large Desktop, Standard Desktop, Laptop, Tablet,
   Mobile Landscape / Phablet, and Mobile Portrait.
   ========================================================================== */

/* --------------------------------------------------------------------------
   GLOBAL OVERFLOW & VIEWPORT GUARD
   -------------------------------------------------------------------------- */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
}

/* --------------------------------------------------------------------------
   1. LAPTOP & SMALL DESKTOP (1024px - 1439px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1439px) {
  :root {
    --container-max: 1240px;
    --section-pad-y: clamp(4rem, 7vw, 7.5rem);
  }

  .nav-desktop {
    gap: 1.6rem;
  }

  .nav-link {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
  }

  /* Mega menu scaling at laptop viewports */
  .mega-menu {
    padding: 2.75rem 0 3.25rem;
  }

  .mega-grid {
    grid-template-columns: 1.35fr 1.35fr 1.4fr;
    gap: 2.5rem;
  }

  .mega-item-link {
    font-size: 1.35rem;
  }

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

  .stats-grid .stat-item:nth-child(3) {
    border-right: none;
  }

  .stats-grid .stat-item:nth-child(4),
  .stats-grid .stat-item:nth-child(5) {
    border-top: 1px solid var(--border-dark);
  }

  .grid-4 {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }

  .team-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .horizontal-panel {
    width: 60vw;
  }
}

/* --------------------------------------------------------------------------
   2. TABLET (768px - 1023px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
  :root {
    --container-pad: 2rem;
    --section-pad-y: clamp(3.5rem, 8vw, 6rem);
  }

  /* Header adjustments: Hide desktop nav and mega-menu, display mobile toggle */
  .nav-desktop,
  .mega-menu,
  .header-actions .header-contact-btn {
    display: none !important;
  }

  .mobile-toggle {
    display: block;
  }

  /* Generic Grid Layout Adaptations */
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* Editorial Intro */
  .editorial-intro-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Business Cards */
  .business-card.card-wide,
  .business-card.card-narrow,
  .business-card.card-half {
    grid-column: span 12;
    min-height: 440px;
  }

  /* Featured Story */
  .featured-story-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .featured-story-media {
    order: -1;
    height: 420px;
  }

  /* Horizontal Pinned Section fallback */
  .horizontal-scroll-container {
    overflow-x: auto;
  }

  .horizontal-track {
    width: 100%;
    flex-wrap: wrap;
    transform: none !important;
  }

  .horizontal-panel {
    width: 100%;
    min-height: auto;
    padding: 3rem 2rem;
    border-right: none;
    border-bottom: 1px solid var(--border-dark);
  }

  /* Headquarters Showcase Responsive */
  .headquarters-showcase {
    grid-template-columns: 1fr !important;
  }

  /* Offices */
  .offices-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

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

  .insights-featured-body {
    padding: 2.5rem 2rem;
  }

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

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

  /* Footer */
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }

  .footer-brand-col {
    grid-column: span 2;
  }

  .footer-newsletter-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .footer-newsletter-form {
    max-width: 100%;
  }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* Job Search */
  .job-search-grid {
    grid-template-columns: 1fr 1fr;
  }

  .job-search-grid button {
    grid-column: span 2;
  }
}

/* --------------------------------------------------------------------------
   3. MOBILE LANDSCAPE & PHABLET (481px - 767px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  :root {
    --container-pad: 1.25rem;
    --section-pad-y: clamp(3rem, 10vw, 4.5rem);
  }

  /* Typography override for mobile */
  .display-hero {
    font-size: clamp(2.6rem, 11vw, 4rem);
    line-height: 1.05;
  }

  .display-section {
    font-size: clamp(2.1rem, 8.5vw, 3rem);
    line-height: 1.1;
  }

  .display-statement {
    font-size: clamp(1.8rem, 6.5vw, 2.5rem);
    line-height: 1.2;
  }

  .hero {
    min-height: 90vh;
    padding: 8rem 0 3.5rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }

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

  .hero-footer-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  /* All Grid Utilities Collapse to 1 Column */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Statistics: Two-column grid */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    border-left: none;
  }

  .stat-item {
    padding: 2.25rem 1rem;
    border-right: none;
    border-bottom: 1px solid var(--border-dark);
  }

  .stat-item:nth-child(odd) {
    border-right: 1px solid var(--border-dark);
  }

  .stat-item:last-child {
    grid-column: span 2;
    border-right: none;
  }

  .stat-val-wrapper {
    font-size: clamp(2.6rem, 9vw, 3.8rem);
  }

  /* Horizontal story mobile conversion */
  .horizontal-panel {
    padding: 2.25rem 1.25rem;
  }

  .panel-title {
    font-size: 2rem;
  }

  /* Offices */
  .offices-grid {
    grid-template-columns: 1fr;
  }

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

  /* Team Grid */
  .team-grid {
    grid-template-columns: 1fr;
  }

  /* Article reading experience */
  .article-header {
    padding: 8.5rem 0 2.5rem;
  }

  .article-header h1 {
    font-size: 2rem;
  }

  .article-hero-media {
    height: 280px;
    margin-bottom: 2.5rem;
  }

  .article-content {
    font-size: 1.05rem;
    line-height: 1.75;
  }

  /* Job Listings & Search */
  .job-listing-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem;
  }

  .job-search-grid {
    grid-template-columns: 1fr;
  }

  .job-search-grid button {
    grid-column: span 1;
  }

  /* Contact Form */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* Bio Modal Window */
  .bio-modal-card {
    padding: 2rem 1.5rem;
    max-height: 85vh;
    overflow-y: auto;
  }

  /* Mobile Fullscreen Navigation Drawer */
  .mobile-nav-drawer {
    height: 100vh;
    height: 100dvh;
    padding: 6rem 1.5rem 2.5rem;
  }

  .mobile-nav-link {
    font-size: clamp(1.8rem, 6vw, 2.6rem);
  }

  .mobile-sub-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

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

  .footer-brand-col {
    grid-column: span 1;
  }

  .footer-newsletter-form {
    flex-direction: column;
    width: 100%;
  }

  .footer-newsletter-form .btn {
    width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .footer-legal-links {
    flex-direction: column;
    gap: 0.65rem;
  }

  /* Disable Custom Cursor & Magnetics on touch screens */
  .custom-cursor,
  .cursor-follower {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   4. SMALL MOBILE PORTRAIT (320px - 480px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
  :root {
    --container-pad: 1rem;
    --section-pad-y: clamp(2.5rem, 9vw, 3.75rem);
  }

  .display-hero {
    font-size: clamp(2.2rem, 9vw, 3rem);
    line-height: 1.08;
  }

  .display-section {
    font-size: clamp(1.85rem, 7.5vw, 2.4rem);
  }

  .hero {
    min-height: 85vh;
    padding: 7rem 0 2.5rem;
  }

  .hero-description {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  /* Single column stats on narrow phones */
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-item {
    border-right: none !important;
    padding: 1.75rem 1rem;
  }

  .stat-item:last-child {
    grid-column: span 1;
  }

  .stat-val-wrapper {
    font-size: 2.8rem;
  }

  /* Mobile sub-navigation in 1 clean column */
  .mobile-sub-list {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding-left: 1.5rem;
  }

  .mobile-sub-link {
    font-size: 0.95rem;
    padding: 0.2rem 0;
    display: block;
  }

  /* Filter buttons wrap comfortably */
  .filter-bar {
    gap: 0.5rem;
  }

  .filter-btn {
    padding: 0.5rem 0.9rem;
    font-size: 0.7rem;
  }

  /* World map container scaling */
  .world-map-wrapper {
    margin: 1.5rem 0;
    overflow-x: hidden;
  }

  /* Modals */
  .bio-modal {
    padding: 1rem;
  }

  .bio-modal-card {
    padding: 1.5rem 1.25rem;
  }

  .bio-name {
    font-size: 1.75rem !important;
  }
}

/* --------------------------------------------------------------------------
   5. ACCESSIBILITY: PREFERS 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;
  }

  .custom-cursor,
  .cursor-follower {
    display: none !important;
  }

  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-fade,
  .split-line-content {
    opacity: 1 !important;
    transform: none !important;
  }

  .image-reveal img,
  .image-reveal .reveal-media {
    clip-path: none !important;
    transform: none !important;
  }

  [data-parallax] {
    transform: none !important;
  }
}