/* ============================================================
   FLEETPRO MOBILITY & HAULAGE LIMITED
   Responsive Design — Breakpoints & Mobile Layouts
   ============================================================ */

/* ============================================================
   LARGE DESKTOP — 1440px+
   ============================================================ */
@media (min-width: 1440px) {
  .container {
    padding-inline: var(--space-12);
  }
}

/* ============================================================
   DESKTOP — 1280px
   ============================================================ */
@media (max-width: 1280px) {
  :root {
    --section-padding-y: var(--space-20);
  }

  .founder-inner {
    grid-template-columns: 300px 1fr;
    gap: var(--space-14);
  }
}

/* ============================================================
   LAPTOP — 1024px
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --section-padding-y: var(--space-16);
    --nav-height: 68px;
  }

  .container {
    padding-inline: var(--space-8);
  }

  .section-header {
    margin-bottom: var(--space-12);
  }

  .hero-inner {
    grid-template-columns: 1fr;
    padding-block: var(--space-24) var(--space-20);
  }

  .hero-visual {
    display: none;
  }

  .hero-content {
    max-width: 100%;
    text-align: center;
  }

  .hero-actions,
  .hero-trust {
    justify-content: center;
  }

  .about-inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .about-img-badge {
    right: var(--space-4);
  }

  .founder-inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .founder-visual {
    max-width: 320px;
    margin-inline: auto;
  }

  .airport-inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .testimonials-grid {
    grid-template-columns: 1fr 1fr;
  }

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

/* ============================================================
   TABLET — 768px
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --section-padding-y:    var(--space-14);
    --section-padding-y-lg: var(--space-20);
    --section-padding-y-sm: var(--space-10);
    --nav-height:           var(--nav-height-mobile);
  }

  .container {
    padding-inline: var(--space-6);
  }

  .section-header {
    margin-bottom: var(--space-10);
  }

  .heading-display {
    font-size: clamp(var(--fs-3xl), 8vw, var(--fs-5xl));
  }

  .heading-h2 {
    font-size: clamp(var(--fs-xl), 5vw, var(--fs-3xl));
  }

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

  .btn-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .whatsapp-float {
    bottom: var(--space-6);
    right: var(--space-6);
    width: 50px;
    height: 50px;
  }

  .back-to-top {
    bottom: var(--space-6);
    right: calc(var(--space-6) + 50px + var(--space-3));
    width: 40px;
    height: 40px;
  }

  /* Trust */
  .trust-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }

  .trust-item:nth-child(3)::after {
    display: none;
  }

  .trust-item:nth-child(4) {
    border-top: 1px solid var(--color-bluegrey-100);
  }

  .trust-item:nth-child(5) {
    border-top: 1px solid var(--color-bluegrey-100);
  }

  /* Services */
  .services-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Fleet */
  .fleet-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Airport */
  .airport-features {
    grid-template-columns: 1fr 1fr;
  }

  /* Testimonials */
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

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

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  /* Page Hero */
  .page-hero {
    padding-top: calc(var(--nav-height) + var(--space-14));
    padding-bottom: var(--space-14);
  }
}

/* ============================================================
   LARGE PHONE — 480px
   ============================================================ */
@media (max-width: 480px) {
  :root {
    --section-padding-y:    var(--space-12);
    --section-padding-y-lg: var(--space-16);
    --section-padding-y-sm: var(--space-8);
  }

  .container {
    padding-inline: var(--space-5);
  }

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

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

  .btn-group {
    width: 100%;
  }

  .btn-ghost {
    width: auto;
  }

  .cta-actions {
    flex-direction: column;
  }

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

  /* Trust */
  .trust-grid {
    grid-template-columns: 1fr 1fr;
  }

  .trust-item:nth-child(2)::after {
    display: none;
  }

  .trust-item:nth-child(3) {
    border-top: 1px solid var(--color-bluegrey-100);
  }

  .trust-item:nth-child(4) {
    border-top: 1px solid var(--color-bluegrey-100);
  }

  .trust-item:nth-child(5) {
    grid-column: 1 / -1;
    border-top: 1px solid var(--color-bluegrey-100);
  }

  .trust-item:nth-child(5)::after {
    display: none;
  }

  /* Airport */
  .airport-features {
    grid-template-columns: 1fr;
  }

  /* Founder Stats */
  .founder-stats {
    flex-wrap: wrap;
    gap: var(--space-6);
  }

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

  .footer-brand {
    max-width: none;
  }
}

/* ============================================================
   SMALL PHONE — 360px
   ============================================================ */
@media (max-width: 360px) {
  :root {
    --section-padding-y:  var(--space-10);
    --fs-base: 0.9375rem;
  }

  .container {
    padding-inline: var(--space-4);
  }

  .fleet-specs {
    flex-direction: column;
    gap: var(--space-3);
  }
}

/* ============================================================
   HERO — MOBILE FIX
   ============================================================ */

@media (max-width: 768px) {

  .hero {
    width: 100%;
    max-width: 100%;
    min-height: 100svh;
    overflow: hidden;
  }

  .hero-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    grid-template-columns: minmax(0, 1fr);

    padding-left: var(--space-6);
    padding-right: var(--space-6);
    padding-top: var(--space-16);
    padding-bottom: var(--space-12);

    gap: var(--space-8);
  }

  .hero-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    text-align: center;
  }

  .hero-badge {
    max-width: 100%;
    white-space: normal;
    justify-content: center;
    text-align: center;
    line-height: 1.4;
  }

  .hero-headline {
    width: 100%;
    max-width: 100%;

    font-size: clamp(
      2rem,
      9vw,
      3rem
    );

    overflow-wrap: break-word;
  }

  .hero-subheadline {
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    width: 100%;
    max-width: 100%;

    flex-direction: column;
    align-items: stretch;

    gap: var(--space-3);

    margin-bottom: var(--space-10);
  }

  .hero-actions .btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }

  .hero-trust {
    width: 100%;
    max-width: 100%;

    display: grid;
    grid-template-columns:
      repeat(4, minmax(0, 1fr));

    gap: 0;

    padding-top: var(--space-6);
  }

  .hero-trust-item {
    min-width: 0;
    align-items: center;
    text-align: center;

    padding-inline: 6px;
  }

  .hero-trust-value {
    font-size: var(--fs-lg);
  }

  .hero-trust-label {
    font-size: 9px;
    letter-spacing: 0.05em;
    overflow-wrap: anywhere;
  }

  .hero-trust-divider {
    display: none;
  }

  .hero-visual {
    display: none;
  }

}


@media (max-width: 400px) {

  .hero-inner {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .hero-headline {
    font-size: clamp(
      1.9rem,
      9.5vw,
      2.5rem
    );
  }

  .hero-trust {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    row-gap: var(--space-5);
  }

  .hero-trust-item {
    padding: var(--space-2);
  }

}