/* ==========================================================================
   OCEAN TRADEBIZ — Responsive layer
   style.css is mobile-first; this file progressively enhances layouts.
   sm 480 · md 768 · lg 992 · xl 1200 · 2xl 1440
   ========================================================================== */

/* ---------- Very small phones (≤ 359px) ---------- */
@media (max-width: 359px) {
  .site-header__inner {
    gap: 0.5rem;
  }

  .logo__img {
    height: 34px;
  }

  .hero__eyebrow {
    letter-spacing: 0.2em;
  }
}

/* ---------- Small phones (≤ 479px) ---------- */
@media (max-width: 479px) {
  .hero__content .btn,
  .page-hero .btn-row .btn,
  .cta-band .btn-row .btn,
  .footer-promise .btn,
  .overview__body .btn-row .btn,
  .catalogue-item__actions .btn {
    width: 100%;
  }

  .hero__eyebrow {
    gap: 0.6rem;
    letter-spacing: 0.22em;
  }

  .hero__eyebrow::before {
    width: 1.5rem;
  }

  .origin-card {
    position: relative;
    width: auto;
    margin: -2.5rem 1rem 0;
  }

  .about-intro__media {
    padding-bottom: 0;
  }

  .facts__row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .regions li {
    font-size: 1.15rem;
  }

  .tracker__name {
    letter-spacing: 0.02em;
  }
}

/* ---------- Phones (≤ 639px): compact icon-left cards ---------- */
@media (max-width: 639px) {
  .solutions-grid .card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    row-gap: 0.35rem;
    align-items: start;
    padding: 1.35rem 1.25rem;
  }

  .solutions-grid .card__icon {
    grid-row: span 2;
    width: 2.75rem;
    height: 2.75rem;
  }

  .solutions-grid .card__icon .icon {
    width: 1.3rem;
    height: 1.3rem;
  }

  .solutions-grid .card__title {
    font-size: 1.0625rem;
  }
}

/* ---------- ≥ 480px ---------- */
@media (min-width: 480px) {
  .pack-grid__list {
    grid-template-columns: repeat(4, 1fr);
  }

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

  .form-actions {
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .form-actions .btn {
    width: auto;
  }

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

/* ---------- ≥ 640px ---------- */
@media (min-width: 640px) {
  /* Panels hold different numbers of chips — let each size to its content
     instead of stretching the shorter one into empty space */
  .test-panels--row {
    align-items: start;
  }

  .responsible__grid,
  .values-grid,
  .future-grid,
  .flow,
  .gallery-grid,
  .why-list,
  .pillars,
  .test-panels--row {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .field--full {
    grid-column: 1 / -1;
  }

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

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

/* ---------- ≥ 768px (tablet) ---------- */
@media (min-width: 768px) {
  /* wider viewports use the landscape crops, so the right side can stay open */
  .hero__slide::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.82) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.55) 38%, rgba(0, 0, 0, 0.12) 72%, rgba(0, 0, 0, 0.05) 100%);
  }

  :root {
    --header-h: 84px;
  }

  .strengths {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }

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

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

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

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

  /* Shipment tracker becomes sticky under the header */
  .tracker {
    position: sticky;
    top: calc(var(--header-h-scrolled) - 1px);
  }

  .journey section[id] {
    scroll-margin-top: calc(var(--header-h-scrolled) + 4.5rem);
  }

  .tracker__name {
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
  }

  .tracker__num {
    display: inline;
    color: var(--color-orange-deep);
    margin-right: 0.35rem;
  }

  .table-hint {
    display: none;
  }

  .sourcing__panel {
    margin-inline: 2rem;
  }

  .gallery-grid {
    grid-auto-rows: minmax(300px, auto);
  }
}

@media (max-width: 767px) {
  .table-hint {
    display: block;
  }
}

@media (max-width: 991px) {
  /* When split sections stack, the ghost word sits above its heading and would
     overlap the image that now precedes it — keep it inside the text block. */
  .ghost {
    top: -0.18em;
    font-size: clamp(3rem, 9.5vw, 6rem);
  }

  /* Footer: brand full width, then balanced pairs (no lone column, no hole) */
  .footer-brand {
    grid-column: 1 / -1;
  }

  /* Inquiry form first on phones and tablets — it is the page's main job */
  .contact-grid .form-panel {
    order: -1;
  }

  .highlight:nth-child(odd) {
    border-right-width: 1px;
  }

  .highlight:nth-child(-n + 2) {
    border-bottom-width: 1px;
  }
}

/* ---------- ≥ 992px (desktop) ---------- */
@media (min-width: 992px) {
  /* six future cards read best as two rows of three */
  .future-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  :root {
    --header-h: 92px;
    --header-h-scrolled: 72px;
  }

  .site-header .logo__img {
    height: 48px;
  }

  .site-header.is-scrolled .logo__img {
    height: 40px;
  }

  .nav {
    display: block;
    margin-left: auto;
  }

  .site-header__cta {
    display: inline-flex;
  }

  .nav-toggle {
    display: none;
  }

  /* Split layouts */
  .split {
    grid-template-columns: 1fr 1fr;
  }

  .split--60-40 {
    grid-template-columns: 1.15fr 0.85fr;
  }

  .split--40-60 {
    grid-template-columns: 0.85fr 1.15fr;
  }

  .split--top {
    align-items: start;
  }

  .section-head--split {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
  }

  .section-head--split .section-intro {
    margin-top: 0;
  }

  /* Hero */
  .hero__content {
    justify-content: center;
    padding-bottom: 4rem;
  }

  /* About intro: the image fills the full height of the text column */
  .about-intro .split {
    align-items: stretch;
  }

  .about-intro__media {
    display: flex;
    flex-direction: column;
    padding: 0 2.5rem 4rem 0;
  }

  .about-intro__img {
    flex: 1;
    aspect-ratio: auto;
    min-height: 34rem;
  }

  .origin-card {
    right: 0;
    bottom: 0;
  }

  /* Highlights: 4 across */
  .highlights__list {
    grid-template-columns: repeat(4, 1fr);
  }

  .highlight {
    border-right-width: 1px;
    padding-inline: 2rem;
  }

  .highlight:first-child {
    padding-left: 0;
  }

  .highlight:last-child {
    border-right-width: 0;
  }

  /* Tracker label */
  .tracker__label {
    display: block;
    flex-shrink: 0;
    padding-right: 1.5rem;
    border-right: 1px solid var(--color-line);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-dark);
  }

  .tracker__label span {
    color: var(--color-orange-deep);
  }

  /* Sourcing panel overlaps the image */
  .sourcing__panel {
    position: absolute;
    left: -3rem;
    bottom: -2.5rem;
    width: min(360px, 75%);
    margin: 0;
  }

  .sourcing__media {
    margin-bottom: 2.5rem;
  }

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

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

  /* Why choose us: full-bleed image left, content right */
  .why {
    grid-template-columns: 1fr 1fr;
  }

  .why__media {
    min-height: 100%;
  }

  .why__body {
    padding-left: clamp(3rem, 6vw, 6rem);
    padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2));
  }

  .packaging__img {
    aspect-ratio: 4 / 5;
    max-height: 720px;
  }

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

  .responsible__media {
    aspect-ratio: 21 / 7;
  }

  .responsible__panel {
    margin-top: -7rem;
  }

  .responsible__head {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: end;
  }

  .responsible__head .section-head {
    margin-bottom: 0;
  }

  .footer-promise__inner {
    grid-template-columns: 1fr auto;
  }

  .footer-main {
    grid-template-columns: 1.5fr 0.8fr 0.9fr 1fr 1.4fr;
    gap: 2.5rem;
  }

  /* Products page catalogue rows */
  .catalogue-item {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .catalogue-item__media {
    aspect-ratio: auto;
    min-height: 100%;
  }

  .catalogue-item--reverse .catalogue-item__media {
    order: 2;
  }

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

  .contact-grid {
    grid-template-columns: 0.8fr 1.2fr;
  }

  .contact-grid__aside,
  .sticky-col {
    position: sticky;
    top: calc(var(--header-h-scrolled) + 2rem);
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
  }

  .g-item--tall {
    grid-row: span 2;
  }

  .g-item--wide {
    grid-column: span 2;
  }

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

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

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

}

/* ---------- ≥ 1200px ---------- */
@media (min-width: 1200px) {
  .values-grid {
    grid-template-columns: repeat(5, 1fr);
  }

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

  .hero__aside {
    position: absolute;
    z-index: 3;
    right: 2rem;
    top: 50%;
    display: flex;
    align-items: center;
    gap: 1rem;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.72);
  }

  .hero__aside::before,
  .hero__aside::after {
    content: "";
    width: 1px;
    height: 3.5rem;
    background: rgba(255, 255, 255, 0.35);
  }

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

  .flow__step {
    padding: 1.5rem 1.25rem;
  }

}

/* ---------- ≥ 1440px ---------- */
@media (min-width: 1440px) {
  :root {
    --container: 1280px;
  }

  .hero__title {
    max-width: 16ch;
  }
}

/* ---------- Short landscape screens (e.g. 1366×768 laptops, phones in landscape) ---------- */
@media (min-width: 992px) and (max-height: 820px) {
  .hero__title {
    font-size: clamp(2rem, 1rem + 3.6vw, 4rem);
  }

  .hero__text {
    margin-bottom: 1.5rem;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .hero {
    min-height: 520px;
  }

  .hero__content {
    padding-bottom: 6rem;
  }

  .hero__text {
    display: none;
  }
}

/* ---------- Print ---------- */
@media print {
  .site-header,
  .mobile-nav,
  .back-to-top,
  .hero__pause,
  .tracker,
  .cta-band,
  .footer-promise {
    display: none !important;
  }

  .hero,
  .page-hero {
    min-height: 0;
    height: auto;
    color: #000;
    background: none;
  }

  .hero__slide:not(.is-active),
  .hero__media,
  .page-hero__media,
  .hero__slide::after,
  .page-hero::after {
    display: none;
  }

  .hero__slide {
    position: static;
    opacity: 1;
    visibility: visible;
  }

  .hero__title,
  .page-hero__title,
  .hero__text,
  .page-hero__text {
    color: #000;
  }

  body {
    font-size: 11pt;
  }
}