/* ==========================================================================
   AWAKE — responsive.css
   Wider-viewport enhancements (mobile-first: the base styles in style.css and
   pages.css are the small-screen layout). Loaded last so it can override.
   Checked breakpoints: 320, 375, 430, 768, 1024, 1440, 1920.
   ========================================================================== */

/* ---------- Very small phones ---------- */
@media (max-width: 520px) {
  .btn { padding-inline: 1.25rem; }
  .btn-row, .cta-panel__actions { flex-direction: column; align-items: stretch; }
  .btn-row .btn, .cta-panel__actions .btn { width: 100%; }
  .final-cta .btn-row { align-items: stretch; }
}
@media (max-width: 440px) {
  .hero__badge { position: static; max-width: none; margin-top: 0.75rem; }
}

/* ---------- >= 600px ---------- */
@media (min-width: 600px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--sp-5); }
  .item-list { grid-template-columns: repeat(2, 1fr); column-gap: var(--sp-4); }
  .custom-groups { grid-template-columns: repeat(2, 1fr); }
  .collections { grid-template-columns: repeat(2, 1fr); }
  .enquiry-blocks { grid-template-columns: repeat(2, 1fr); }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .form-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- >= 768px (tablet) ---------- */
@media (min-width: 768px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: var(--sp-5); }
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .split--reverse .split__media { order: 2; }
  .split--media-wide { grid-template-columns: 1.2fr 0.8fr; }
  .split--media-wide.split--reverse { grid-template-columns: 0.8fr 1.2fr; }
  .story { grid-template-columns: 0.8fr 1.2fr; gap: var(--sp-6); align-items: start; }
  .story__media { position: sticky; top: calc(var(--header-h) + 2rem); }
  .catalog-section__grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-6); }
  .catalog-section--reverse .catalog-section__media { order: 2; }
  .catalog-section--reverse .catalog-section__grid { grid-template-columns: 1.15fr 0.85fr; }
  .contact-layout { grid-template-columns: 0.8fr 1.2fr; align-items: start; gap: var(--sp-6); }
  .contact-aside { position: sticky; top: calc(var(--header-h) + 2rem); }
  .error-grid { grid-template-columns: 1.1fr 0.9fr; }
  .footer-grid { grid-template-columns: 1.3fr 0.8fr 1fr 1.2fr; gap: var(--sp-4); }
  .footer-brand { grid-column: auto; }
  .campaign__copy { max-width: 30ch; }
  .duo { grid-template-columns: 1fr 1fr; }
}

/* ---------- >= 1024px: full desktop navigation ---------- */
@media (min-width: 1024px) {
  .js .nav-toggle { display: none; }
  .js .primary-nav,
  .primary-nav {
    display: flex; position: static; flex-direction: row; align-items: center; width: auto; padding: 0;
    background: transparent; border: 0; box-shadow: none; gap: 2.25rem;
  }
  .js .primary-nav ul, .primary-nav ul { flex-direction: row; gap: 2.25rem; }
  .js .primary-nav .nav-link { display: inline-block; padding: 0.6rem 0; border-bottom: 0; font-size: 0.875rem; }
  .js .primary-nav .nav-link::after { display: block; }
  .js .primary-nav .nav-link[aria-current="page"] { color: var(--blue); }
  .header-inner { flex-wrap: nowrap; }

  .category-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .why-grid { grid-template-columns: repeat(3, 1fr); }
  .why-item { grid-template-columns: 1fr; gap: 1rem; padding-right: 1.5rem; border-bottom: 1px solid var(--line); }
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .item-list--3 { grid-template-columns: repeat(3, 1fr); }

  .campaign { min-height: min(46rem, 80vh); display: flex; align-items: center; }
  .campaign__media { position: absolute; inset: 0; aspect-ratio: auto; z-index: -1; }
  .campaign__media img { object-position: right center; }
  .campaign__body { padding-block: var(--sp-6); width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; }
  .campaign__body > * { max-width: 42%; }
  .campaign h2 { font-size: clamp(2.4rem, 3.4vw, 4rem); }
  .hero__badge { left: -2rem; bottom: 2rem; }
}

/* ---------- >= 1280px ---------- */
@media (min-width: 1280px) {
  .custom-groups { grid-template-columns: repeat(4, 1fr); }
  .collections { grid-template-columns: repeat(4, 1fr); }
  .enquiry-blocks { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- >= 1440px ---------- */
@media (min-width: 1440px) {
  :root { --container: 1320px; }
  .page-hero h1 { max-width: 16ch; }
}

/* ---------- >= 1920px ---------- */
@media (min-width: 1920px) {
  :root { --container: 1480px; --header-h: 84px; }
  html { font-size: 112.5%; }
  .campaign { min-height: 52rem; }
}

/* ---------- Short landscape screens (menu must stay scrollable) ---------- */
@media (max-height: 520px) and (max-width: 1023px) {
  .js .primary-nav.is-open { max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
}

/* Inner-page hero: two columns from tablet up, image kept short */
@media (min-width: 768px) {
  .inner-hero__grid--media { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--sp-5); }
  .inner-hero__media img { aspect-ratio: 4 / 3; max-height: 22rem; }
}

@media (min-width: 900px) { .office__grid { grid-template-columns: 1.2fr 1fr 1.2fr; } }