/* =========================================================
   ARIES MARINE — RESPONSIVE STYLESHEET
   Handles: tablet, mobile, and small-mobile layouts
   Depends on: css/style.css
   ========================================================= */

/* ---------------------------------------------------------
   LARGE DESKTOP (1440px and up)
   --------------------------------------------------------- */
@media (min-width: 1440px) {
  :root {
    --container: 1280px;
  }
  .hero { min-height: 85vh; }
}

/* ---------------------------------------------------------
   STANDARD DESKTOP (1200px – 1439px)
   --------------------------------------------------------- */
@media (max-width: 1439px) {
  :root {
    --container: 1140px;
  }
}

/* ---------------------------------------------------------
   TABLET / SMALL LAPTOP (max-width: 1024px)
   --------------------------------------------------------- */
@media (max-width: 1024px) {

  .section { padding: 4rem 0; }

  /* Two-column grids collapse */
  .intro-grid,
  .service-detail,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .service-detail.reverse .service-detail-text,
  .service-detail.reverse .service-detail-image {
    order: unset;
  }

  /* Strengths and Why cards → 2 columns */
  .strengths-grid,
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Services, Compliance, MVV → 2 columns */
  .services-grid,
  .compliance-grid,
  .mvv-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Seafarer categories → 2 columns */
  .seafarer-categories {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Process flow → 3 columns */
  .process-flow {
    grid-template-columns: repeat(3, 1fr);
  }

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

/* ---------------------------------------------------------
   MOBILE (max-width: 768px)
   --------------------------------------------------------- */
@media (max-width: 768px) {

  .section { padding: 3.5rem 0; }

  /* ---------- MOBILE NAVIGATION ---------- */
  .menu-toggle { display: flex; }

  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: var(--navy);
    padding: 5rem 2rem 2rem;
    transition: right 0.35s ease;
    box-shadow: -5px 0 25px rgba(0,0,0,0.2);
    overflow-y: auto;
    z-index: 999;
  }

  .main-nav.open { right: 0; }

  .main-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .main-nav a {
    font-size: 1rem;
  }

  .nav-cta {
    width: 100%;
    text-align: center;
  }

  body.menu-open {
    overflow: hidden;
  }

  /* ---------- HERO ---------- */
  .hero { min-height: 80vh; }
  .hero-content { padding-top: 5rem; padding-bottom: 3rem; }
  .hero p { font-size: 0.95rem; }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .hero-buttons .btn { width: 100%; text-align: center; }

  /* ---------- PAGE HERO ---------- */
  .page-hero { padding: 7rem 0 3.5rem; }

  /* ---------- ALL GRIDS COLLAPSE TO 1 COLUMN ---------- */
  .strengths-grid,
  .services-grid,
  .compliance-grid,
  .mvv-grid,
  .why-grid,
  .seafarer-categories {
    grid-template-columns: 1fr;
  }

  .process-flow { grid-template-columns: 1fr; }

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

  /* ---------- FOOTER ---------- */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* ---------- TIMELINE ---------- */
  .timeline { padding-left: 1.25rem; }
  .timeline-item { padding-left: 1.5rem; }

  /* ---------- IMAGES ---------- */
  .image-placeholder { min-height: 260px; }

  /* ---------- TYPOGRAPHY ---------- */
  h1 { font-size: clamp(1.75rem, 6vw, 2.25rem); }
  h2 { font-size: clamp(1.4rem, 5vw, 1.85rem); }
  h3 { font-size: 1.1rem; }
}

/* ---------------------------------------------------------
   SMALL MOBILE (max-width: 480px)
   --------------------------------------------------------- */
@media (max-width: 480px) {

  .container { padding: 0 1.1rem; }

  .section { padding: 3rem 0; }

  .section-header { margin-bottom: 2rem; }

  /* Tighter cards on small screens */
  .strength-card,
  .service-card,
  .compliance-card,
  .mvv-card,
  .why-card {
    padding: 1.5rem 1.25rem;
  }

  .seafarer-cat {
    padding: 1.5rem 1rem;
  }

  /* Smaller hero on very small devices */
  .hero { min-height: 75vh; }
  .hero-content { padding-top: 4.5rem; }

  /* Images */
  .image-placeholder { min-height: 220px; }

  /* Buttons */
  .btn { padding: 0.75rem 1.5rem; font-size: 0.8rem; }

  /* Footer text */
  .footer-brand p { font-size: 0.82rem; }
  .footer-col ul li { font-size: 0.82rem; }

  /* Timeline tighter */
  .timeline { padding-left: 1rem; }
  .timeline-item { padding-left: 1.25rem; padding-bottom: 2rem; }
  .timeline-item::before { left: -1.2rem; width: 12px; height: 12px; }
}

/* ---------------------------------------------------------
   LANDSCAPE MOBILE
   --------------------------------------------------------- */
@media (max-width: 900px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 6rem 0 4rem; }
  .hero-content { padding-top: 2rem; padding-bottom: 2rem; }
  .page-hero { padding: 6rem 0 3rem; }
}

/* ---------------------------------------------------------
   TOUCH DEVICES — Larger tap targets
   --------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .main-nav a { padding: 0.5rem 0; }
  .service-link { padding: 0.4rem 0; }
}