/* ==========================================================================
   AROOS AL MOHIT — Responsive Stylesheet
   Mobile-first: base styles are mobile, scale UP at each breakpoint.
   Breakpoints: 480px | 640px | 768px | 1024px | 1280px | 1440px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base mobile — table scroll always available, regardless of breakpoint
   -------------------------------------------------------------------------- */
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.charter-table { min-width: 560px; }

/* --------------------------------------------------------------------------
   480px — Small mobile
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .container { padding: 0 1.5rem; }
}

/* --------------------------------------------------------------------------
   640px — Large mobile / small tablet
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .section { padding: 4.5rem 0; }
  .container { padding: 0 1.75rem; }

  /* 2-col grids expand */
  .grid-3 { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .icon-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

  /* Stats: all 4 in a row */
  .stats__grid { grid-template-columns: repeat(4, 1fr); }
  .stats__item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 15%; bottom: 15%;
    width: 1px;
    background: var(--border);
  }

  /* Form row 2-col */
  .form-row { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   768px — Tablet
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .section { padding: 5.5rem 0; }
  .container { padding: 0 2rem; }

  /* Nav — show desktop links, hide hamburger; restore gap */
  .nav__links { display: flex; }
  .nav__cta   { display: inline-flex; }
  .nav__hamburger { display: none; }
  .nav__mobile { display: none !important; }
  .nav__inner { gap: 2rem; }

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

  /* Timeline: 3-col on tablet */
  .timeline { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1.5rem; }

  /* Team: 2-col on tablet */
  .team-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }

  /* Footer: 2-col on tablet */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer__brand { grid-column: 1 / -1; }

  /* Why block: stacked on tablet */
  .why-block { grid-template-columns: 1fr; gap: 2.5rem; }
  .why-block.reverse { direction: ltr; }
  .why-block.reverse > * { direction: ltr; }

  /* Stats bar: full dividers */
  .stats__item::after {
    content: '';
    position: absolute;
    right: 0; top: 15%; bottom: 15%;
    width: 1px;
    background: var(--border);
  }
  .stats__item:last-child::after { display: none; }
}

/* --------------------------------------------------------------------------
   1024px — Desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .section { padding: 6.5rem 0; }
  .container { padding: 0 2.5rem; }

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

  /* Why blocks: side-by-side */
  .why-block { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .why-block.reverse { direction: rtl; }
  .why-block.reverse > * { direction: ltr; }
  .why-block.reverse .why-block__image { order: 0; }

  /* Timeline: all 6 in a row with connector line */
  .timeline {
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
  }
  .timeline::before {
    content: '';
    position: absolute;
    top: 2.5rem;
    left: calc(100% / 12);
    right: calc(100% / 12);
    height: 1px;
    background: linear-gradient(90deg, var(--gold), rgba(201,168,76,0.2));
    z-index: 0;
  }

  /* Footer: full 4-col */
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 3rem; }
  .footer__brand { grid-column: auto; }

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

  /* Contact: side-by-side */
  .contact-grid { grid-template-columns: 1fr 1.6fr; gap: 4rem; }

  /* Parallax hero — desktop only (not supported on mobile browsers) */
  .hero__bg { background-attachment: fixed; }
}

/* --------------------------------------------------------------------------
   1280px — Wide desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .container { padding: 0 2rem; max-width: 1280px; margin: 0 auto; }
  .section { padding: 7rem 0; }
}

/* --------------------------------------------------------------------------
   1440px — Large screens
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  :root { --max-width: 1360px; }
  .hero__title { font-size: 5.5rem; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .nav, .whatsapp-float, .scroll-progress, .hero__scroll { display: none !important; }
  body { background: white; color: black; }
  a { color: inherit; }
  .section { padding: 2rem 0; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__bg { background-attachment: scroll; }
}