/* ==========================================================================
   ORA International - responsive
   Breakpoints mirror the nchme.com reference: the desktop navigation survives
   down to 768px and the burger takes over at 767px. ORA carries a logo in the
   bar, so the nav tightens twice on the way down rather than once.

   Supported from 320px up. Nothing may scroll horizontally at any width.
   ========================================================================== */

@media (min-width: 768px) {
  .primary-nav { display: block; }
  .menu-toggle { display: none; }
}

/* ------------------------------------------------------------- 1280px -- */

@media (max-width: 1280px) {
  :root { --header-pad-x: 28px; }
  .hero-copy h1 { font-size: 56px; }
  .product-detail { gap: 44px; }
}

/* ------------------------------------------------------------- 1100px -- */

@media (max-width: 1100px) {
  :root { --header-pad-x: 40px; }
  .primary-nav > ul > li { padding: 0 14px; }
  .primary-nav > ul > li > a { font-size: 14px; letter-spacing: 1.4px; }
  .toolbar { grid-template-columns: 1fr 1fr; }
  .toolbar .btn { width: 100%; }
}

/* ------------------------------------------------------------- 1024px -- */

@media (max-width: 1024px) {
  /* Tablet row: 10px + 76px + 10px = 96px. */
  :root {
    --nav-h: 76px;
    --nav-h-stuck: 64px;
    --header-pad-x: 20px;
    --header-pad-bottom: 10px;
    --submenu-top: 92%;
  }

  .primary-nav > ul > li { padding: 0 18px; }
  .site-logo img { height: 54px; }
  .site-header.is-stuck .site-logo img { height: 44px; }

  h1 { font-size: 40px; }
  h2 { font-size: 31px; }
  h3 { font-size: 23px; }

  .section { padding: 66px 0 58px; }
  .section-head { margin-bottom: 40px; }

  .hero-copy h1 { font-size: 46px; }
  .hero-slide::after {
    background: linear-gradient(90deg, rgba(6, 31, 59, 0.8) 0%,
                                       rgba(6, 31, 59, 0.72) 52%,
                                       rgba(6, 31, 59, 0.5) 100%);
  }

  .page-banner { padding: calc(var(--header-h) + 14px) 0 22px; }
  .page-banner h1 { font-size: 32px; }

  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .channel-head { max-width: none; }
  .section.channel-section { padding-top: 56px; }
  /* Below the desktop width the tiles stretch to fill the row rather than
     holding their cap, so the grid never leaves wide empty gutters. */
  .channel-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .region-grid { grid-template-columns: repeat(2, 1fr); }
  .counter-grid { gap: 34px 16px; }
  .counter-value { font-size: 42px; }

  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .world-band { padding: 72px 0; }
  .world-band h2 { font-size: 34px; }
}

/* -------------------------------------------------------------- 900px -- */

@media (max-width: 900px) {
  .primary-nav > ul > li { padding: 0 8px; }
  .primary-nav > ul > li > a { font-size: 13px; letter-spacing: 1px; }
  .primary-nav .submenu { width: 210px; left: 0; }
  .site-logo img { height: 46px; }

  .media-split,
  .product-detail { grid-template-columns: 1fr; gap: 38px; }
  .media-split.is-reversed .media-split-text { order: 0; }
  .media-frame::before { left: -12px; bottom: -12px; }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .tile-grid { grid-template-columns: 1fr; }
  .channel-head { grid-template-columns: 1fr; gap: 10px; margin-bottom: 36px; }
  .channel-head-index { font-size: 44px; }
  .tile { min-height: 280px; }
}

/* -------------------------------------------------------------- 768px -- */

@media (max-width: 768px) {
  :root { --gutter: 20px; }

  h1 { font-size: 34px; }
  h2 { font-size: 27px; }
  h3 { font-size: 21px; }

  .section { padding: 54px 0 46px; }
  .section-head { margin-bottom: 32px; }

  /* Stacked full-width CTAs grow the copy block, so reserve room below it or
     the slider dots sit on top of the second button. */
  .hero-inner { padding-bottom: 52px; }
  .hero-copy h1 { font-size: 38px; }
  .hero-copy p { font-size: 15.5px; }
  .hero-nav { width: 40px; height: 40px; margin-top: -20px; }
  .hero-dots { bottom: 20px; }

  .page-banner { padding: calc(var(--header-h) + 8px) 0 18px; }
  .page-banner h1 { font-size: 28px; }

  .grid { gap: 24px; }
  .brand-grid { gap: 20px; }
  .channel-grid { gap: 18px; }
  :root { --channel-bar-h: 54px; }
  .channel-nav a { padding: 14px 15px; font-size: 12px; letter-spacing: 1.3px; }
  .section.channel-section { padding-top: 48px; }
  .counter-grid { grid-template-columns: repeat(2, 1fr); }

  .toolbar { padding: 20px; gap: 14px; }
  .form-grid { grid-template-columns: 1fr; }
  .spec-list div { grid-template-columns: 130px 1fr; gap: 12px; }

  .footer-main { padding: 52px 0 42px; }
  .footer-bottom .container { justify-content: center; text-align: center; }

  .cta-band { padding: 56px 0; }
  .cta-band h2 { font-size: 27px; }
  .world-band { padding: 58px 0; }
}

/* ------------------------------------------------------------ 767.98px -- */

/* 767.98 rather than 767: a fractional viewport between 767 and 768 would
   otherwise match neither this block nor the min-width:768 one, and the header
   would keep the tablet row height while already showing the burger. */
@media (max-width: 767.98px) {
  /* Reference mobile row: 10px + 62px + 10px = 82px. */
  :root { --nav-h: 62px; --nav-h-stuck: 56px; }

  .site-logo img { height: 44px; }
  .site-header.is-stuck .site-logo img { height: 38px; }
}

/* -------------------------------------------------------------- 600px -- */

@media (max-width: 600px) {
  .brand-grid { grid-template-columns: 1fr; }

  /* The hero copy is tallest here - eyebrow, two-line heading, a full
     paragraph and two stacked full-width buttons. Let the hero grow to fit it
     rather than capping at 100vh and clipping. */
  .hero { max-height: none; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .region-grid { grid-template-columns: 1fr; }
  .toolbar { grid-template-columns: 1fr; }
  .toolbar-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tabs { gap: 0; }
  .tabs button { flex: 1 1 auto; padding: 11px 14px; font-size: 14px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* -------------------------------------------------------------- 480px -- */

@media (max-width: 480px) {
  :root { --gutter: 16px; }

  h1 { font-size: 28px; }
  h2 { font-size: 23px; }
  h3 { font-size: 19px; }

  body { font-size: 15px; }

  .section { padding: 44px 0 38px; }

  .hero-inner { padding-bottom: 48px; }
  .hero-copy h1 { font-size: 31px; }
  .hero-copy p { font-size: 15px; }
  .hero-nav { top: auto; bottom: 10px; width: 34px; height: 34px; margin-top: 0; }
  .hero-prev { left: 12px; }
  .hero-next { right: 12px; }
  .hero-actions { gap: 10px; margin-top: 26px; }
  .hero-channels { margin-top: 20px; }
  .hero-channels-title { font-size: 12px; letter-spacing: 2.6px; }
  .hero-channels-list { gap: 6px; }
  .hero-channels-list li { padding: 6px 11px; font-size: 13px; }
  .hero-actions .btn { width: 100%; }
  .hero-dots { bottom: 16px; }

  .page-banner h1 { font-size: 24px; }
  .breadcrumb { font-size: 11.5px; letter-spacing: 1.2px; }

  .btn { min-height: 48px; padding: 12px 22px; font-size: 12.5px; letter-spacing: 1.5px; }
  .btn-sm { min-height: 42px; padding: 10px 20px; }

  .counter-value { font-size: 35px; }
  .counter-label { font-size: 11px; letter-spacing: 1.4px; }
  .counter-grid { gap: 28px 12px; }

  .brand-grid { gap: 12px; }
  .brand-mark { font-size: 17px; letter-spacing: 1.6px; }
  .channel-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
  .section.channel-section { padding-top: 42px; }
  .brand-card--channel .brand-logo { padding: 16px 10px; }
  .brand-card--channel .brand-mark { font-size: 14.5px; letter-spacing: 1.2px; }
  .brand-card--channel .brand-name { font-size: 13.5px; letter-spacing: 1.2px; }
  .brand-card--channel .brand-body { padding: 12px 10px 14px; }
  .brand-card--channel .brand-meta { font-size: 10.5px; letter-spacing: 1.4px; }
  .channel-head-index { font-size: 36px; }

  .feature-card, .office-card { padding: 26px 20px; }
  .cat-body, .product-body, .project-body, .news-body { padding: 20px 18px 22px; }

  .gallery-thumbs button { width: 68px; }
  .spec-list div { grid-template-columns: 1fr; gap: 2px; }

  .cta-actions .btn { width: 100%; }
  .mobile-nav-logo { width: 128px; margin-top: 44px; }
  .search-form input { font-size: 20px; }
  .to-top { right: 14px; bottom: 14px; width: 40px; height: 40px; }
}

/* -------------------------------------------------------------- 400px -- */

@media (max-width: 400px) {
  .hero-copy h1 { font-size: 27px; }
  .page-banner h1 { font-size: 23px; }
  .brand-grid { grid-template-columns: 1fr; }
  .filter-bar button { padding: 8px 12px; font-size: 12.5px; letter-spacing: 1.1px; }
  .tabs button { padding: 10px 10px; font-size: 13px; letter-spacing: 1px; }
}

/* -------------------------------------------- 360px and the 320px floor -- */

@media (max-width: 360px) {
  :root { --gutter: 14px; }

  h1 { font-size: 25px; }
  h2 { font-size: 21px; }

  .hero-copy h1 { font-size: 24px; letter-spacing: 0.4px; }
  .hero-copy p { font-size: 14.5px; }

  .page-banner h1 { font-size: 21px; }
  .breadcrumb { gap: 7px; font-size: 11px; }

  .site-logo img { height: 38px; }
  .site-header.is-stuck .site-logo img { height: 34px; }

  .btn { min-height: 48px; padding: 11px 16px; font-size: 12px; letter-spacing: 1.2px; }
  .btn-sm { min-height: 42px; padding: 9px 16px; }
  .counter-value { font-size: 30px; }
  .counter-label { font-size: 10.5px; letter-spacing: 1.1px; }

  .mobile-nav > ul { width: calc(100% - 32px); }
  .channel-grid { grid-template-columns: 1fr; }
  :root { --channel-bar-h: 51px; }
  .channel-nav a { padding: 13px 12px; font-size: 11.5px; letter-spacing: 1.1px; }
  .mobile-nav a { font-size: 17px; line-height: 29px; }
  .search-overlay { padding: 20px; }
  .search-form input { font-size: 17px; }
  .search-close { top: 12px; right: 12px; }

  .gallery-thumbs { gap: 8px; }
  .gallery-thumbs button { width: 58px; }
  .placeholder-note { padding: 12px 14px; font-size: 12.5px; }
}

/* Long unbroken strings - emails, SKUs - must not push the page sideways at
   the 320px floor. */
@media (max-width: 420px) {
  .footer-contact a,
  .office-card dd,
  .product-size,
  .breadcrumb li { overflow-wrap: anywhere; }
}

/* Specialized Retail has three cards. Where the grid drops to two columns the
   third would sit alone at the left, so centre it on its own row at the width
   of one column. Scoped to this section only. */
@media (min-width: 361px) and (max-width: 675px) {
  #specialized-retail .channel-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 18px) / 2);
  }
}
@media (min-width: 361px) and (max-width: 480px) {
  #specialized-retail .channel-item:last-child:nth-child(odd) { width: calc((100% - 14px) / 2); }
}