/**
 * El Attareen Group - Responsive Breakpoints Architecture
 * Tested against 320, 375, 430, 768, 1024, 1440, 1920, 2560px
 */

/* Desktops & Large Displays (> 1440px) */
@media (min-width: 1440px) {
  .portal-hero-container {
    padding-block: var(--space-xl);
  }
}

/* Tablets & Small Laptops (< 1024px) */
@media (max-width: 1023px) {
  .nav-list {
    display: none;
  }

  .nav-desktop {
    display: flex;
    gap: var(--space-xs);
  }

  .grid-split,
  .grid-split-reversed {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

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

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

  .sector-environment-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .sector-card-media {
    min-height: 320px;
  }

  .founders-editorial-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .mid-disciplines-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

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

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

  .footer-top-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}

/* Mobile & Small Tablets (< 768px) */
@media (max-width: 767px) {
  :root {
    --header-height: var(--header-height-mobile);
  }

  .portal-actions {
    flex-direction: column;
    width: 100%;
  }

  .btn-portal-enter,
  .btn-portal-secondary {
    width: 100%;
    justify-content: center;
  }

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

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

  .journey-timeline-grid {
    grid-template-columns: 1fr;
  }

  .convergence-pillars-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .mego-capabilities-grid {
    grid-template-columns: 1fr;
  }

  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

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

  .sector-card-content {
    padding: var(--space-lg) var(--space-md);
  }

  .inquiry-form-card {
    padding: var(--space-lg) var(--space-md);
  }
}

/* Small Phones (< 380px) */
@media (max-width: 379px) {
  .brand-text {
    display: none;
  }

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