/* HKC Shipping — Responsive Overrides */

@media (max-width: 1023px) {
  .header__nav-list,
  .header__dropdown {
    display: none;
  }

  .header__menu-toggle {
    display: flex;
  }

  .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero__stats {
    max-width: 28rem;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .certs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-featured {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-article,
  .news-article:nth-of-type(even) {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .news-article:nth-of-type(even) .news-article__media,
  .news-article:nth-of-type(even) .news-article__content {
    order: initial;
  }

  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-steps::before {
    display: none;
  }

  .service-block,
  .service-block--reverse {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .service-block--reverse .service-block__media,
  .service-block--reverse .service-block__content {
    order: initial;
  }

  .about-map__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .why-fleet-stats__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .fleet-showcase {
    grid-template-columns: repeat(2, 1fr);
  }

  .three-col {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .contact-section__grid {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-banner__content {
    flex-direction: column;
    text-align: center;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .timeline::before {
    left: 0.75rem;
    transform: none;
  }

  .timeline__item {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding-inline-start: var(--space-6);
  }

  .timeline__item::before {
    left: 0.75rem;
    top: 1.25rem;
    transform: translate(-50%, 0);
  }

  .timeline__item:nth-child(odd) .timeline__content,
  .timeline__item:nth-child(even) .timeline__content,
  .timeline__item:nth-child(odd) .timeline__media,
  .timeline__item:nth-child(even) .timeline__media {
    order: initial;
    justify-self: stretch;
    text-align: start;
    max-width: none;
  }

  [dir="rtl"] .timeline__item:nth-child(odd) .timeline__content,
  [dir="rtl"] .timeline__item:nth-child(even) .timeline__content {
    text-align: start;
  }

  [dir="rtl"] .timeline::before {
    left: auto;
    right: 0.75rem;
  }

  [dir="rtl"] .timeline__item {
    padding-inline-start: 0;
    padding-inline-end: var(--space-6);
  }

  [dir="rtl"] .timeline__item::before {
    left: auto;
    right: 0.75rem;
    transform: translate(50%, 0);
  }
}

@media (max-width: 767px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .certs-grid {
    grid-template-columns: 1fr;
  }

  .process-steps {
    grid-template-columns: 1fr;
  }

  .news-grid {
    grid-template-columns: 1fr;
  }

  .fleet-showcase {
    grid-template-columns: 1fr 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    justify-content: center;
  }

  .quote-wizard__options {
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .job-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }

  .header__actions .btn--primary {
    display: none;
  }
}
