/* ==========================================================================
   kraflex  |  responsive.css   (LOAD THIS LAST)
   --------------------------------------------------------------------------
   Mobile-first. Everything above is already the phone layout; each block
   below only adds what a larger screen needs.

     BREAKPOINT MAP
     ------------------------------------------------------------------
     base            320px+     small phones (iPhone SE, older Android)
     480px+          large phones / phablets
     640px+          small tablets portrait
     768px+          tablets  (iPad portrait, Android tablets)
     1024px+         laptops + iPad landscape  -> desktop navigation ON
     1280px+         standard desktop monitors
     1536px+         large desktop / 2K
     1920px+         full-HD wide displays
     2560px+         4K TVs and ultra-wide monitors
     ------------------------------------------------------------------
   ========================================================================== */

/* ==========================================================================
   480px+   LARGE PHONES
   ========================================================================== */
@media (min-width: 480px) {

  .hero__actions .btn { flex: 0 1 auto; }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ==========================================================================
   640px+   SMALL TABLETS
   ========================================================================== */
@media (min-width: 640px) {

  :root { --header-h: 80px; --logo-h: 48px; }

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

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

  .stat { text-align: left; }
  .stat-grid--center .stat { text-align: center; }
}

/* ==========================================================================
   768px+   TABLETS  (iPad portrait)
   ========================================================================== */
@media (min-width: 768px) {

  .section-head { margin-bottom: var(--sp-8); }

  .card { padding: var(--sp-5); }

  /* Technology rows become two columns and alternate sides.
     Source order is always TEXT then IMAGE so it reads correctly on a phone
     and to a screen reader; --reverse only flips the visual columns. */
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .split--reverse .split__media { order: 1; }
  .split--reverse .split__body  { order: 2; }

  .gallery { gap: var(--sp-3); }

  .quote { padding: var(--sp-6); }

  /* There is room beside the headline now, so the hero photo comes forward. */
  .hero__figure {
    --hero-photo-w: 62%;
    --hero-photo-opacity: 0.8;
    --hero-photo-crop: 30%;
  }
}

/* ==========================================================================
   1024px+   LAPTOPS / iPad LANDSCAPE
   The hamburger disappears and the real navigation bar appears.
   ========================================================================== */
@media (min-width: 1024px) {

  :root { --header-h: 88px; --logo-h: 50px; }

  /* --- Header ---------------------------------------------------------- */
  .nav-toggle,
  .nav-backdrop { display: none !important; }

  .header-inner { gap: var(--sp-3); }

  .main-nav {
    position: static;
    inset: auto;
    max-height: none;
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .nav-list {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-1);
    padding: 0;
  }

  .nav-item { border: 0; position: relative; }

  /* Padding is deliberately tight here so all seven items plus the CTA fit
     on a 1024px laptop without wrapping or clipping. It relaxes at 1280px. */
  .nav-link {
    position: relative;
    min-height: var(--header-h);
    padding-inline: var(--sp-1);
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  /* Dropdown becomes a floating panel */
  .nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 268px;
    display: block;
    background: var(--clr-white);
    border: 1px solid var(--border-soft);
    border-top: 3px solid var(--accent);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-1) 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                visibility 0s linear var(--dur-fast);
  }
  .nav-link[aria-expanded="true"] + .nav-dropdown,
  .nav-item:hover > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }
  .nav-dropdown > ul { overflow: visible; }
  .nav-dropdown a {
    padding: 0.7em var(--sp-3);
    border-left: 3px solid transparent;
    min-height: 0;
  }
  .nav-dropdown a:hover { background: var(--clr-orange-soft); }

  .nav-cta { margin: 0 0 0 var(--sp-1); }
  .nav-cta .btn { white-space: nowrap; padding: 0.7em 1.1em; }

  /* --- Layout ----------------------------------------------------------- */
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--sp-6); }

  .split { gap: var(--sp-8); }

  .hero__title { letter-spacing: -0.015em; }

  /* 20% larger than the 220px base in layout.css. Deliberately desktop-only —
     on a phone the logo is already capped by its own max-width and a bigger
     one just crowds the headline. */
  .hero__logo { width: 264px; }

  .hero__figure {
    --hero-photo-w: min(66%, 900px);
    --hero-photo-opacity: 1;
    --hero-photo-crop: 34%;
  }
}

/* ==========================================================================
   1280px+   DESKTOP
   ========================================================================== */
@media (min-width: 1280px) {

  :root { --logo-h: 54px; }

  .nav-link { padding-inline: var(--sp-2); font-size: 0.95rem; }
  .nav-cta .btn { padding: 0.8em 1.4em; }

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

  .hero__content { max-width: 52rem; }
}

/* ==========================================================================
   1536px+   LARGE DESKTOP / 2K
   ========================================================================== */
@media (min-width: 1536px) {

  :root {
    --container-lg: 1320px;
    --container-xl: 1560px;
  }

  /* Enough room now for the full lock-up next to the logo */
  .brand__text { display: block; }
  .nav-link { padding-inline: var(--sp-2); font-size: 1rem; }
}

/* ==========================================================================
   1920px+   FULL-HD WIDE DISPLAYS
   Content is capped so lines never become unreadably long.
   ========================================================================== */
@media (min-width: 1920px) {

  html { font-size: 17px; }

  :root {
    --container-lg: 1480px;
    --container-xl: 1720px;
    --gutter: var(--sp-8);
  }

  .hero { min-height: clamp(620px, 70vh, 980px); }

  .hero__figure { --hero-photo-w: min(60%, 1100px); }
}

/* ==========================================================================
   2560px+   4K TVs & ULTRA-WIDE MONITORS
   Everything scales up via the root font size, so no layout is re-authored.
   Viewing distance on a TV is 3-4x a desktop, hence the larger base.
   ========================================================================== */
@media (min-width: 2560px) {

  html { font-size: 22px; }

  :root {
    --container-lg: 2000px;
    --container-xl: 2320px;
    --tap-min: 56px;
    --header-h: 112px;
    --logo-h: 76px;
    --logo-h-footer: 84px;
  }

  .hero { min-height: 76vh; }
  .card { padding: var(--sp-6); }

  /* TV remotes navigate by focus - make the ring unmissable */
  :focus-visible { outline-width: 5px; outline-offset: 5px; }
}

/* 3840px+ true 4K panels */
@media (min-width: 3840px) {
  html { font-size: 28px; }
  :root { --container-lg: 2800px; --container-xl: 3200px; }
}

/* ==========================================================================
   INPUT-CAPABILITY QUERIES
   Distinguish real mice from touch screens and TV remotes.
   ========================================================================== */

/* Touch devices: no hover lift, bigger targets */
@media (hover: none) {
  .card:hover,
  .product-card:hover,
  .download-card:hover { transform: none; box-shadow: var(--shadow-sm); }

  .gallery__item:hover img { transform: none; }
}

/* Touch devices, DESKTOP WIDTH ONLY: cancel the hover-opens-the-dropdown rule
   so the panel opens on a tap instead.

   The min-width matters. On a phone a tap leaves :hover stuck on the element
   until you tap somewhere else, and the drawer's dropdown has no opacity or
   visibility of its own - it opens by animating grid-template-rows. So without
   the breakpoint this rule fires the moment you tap Products, the row still
   expands, and you get a blank gap where the eight links should be. */
@media (hover: none) and (min-width: 1024px) {
  .nav-item:hover > .nav-dropdown { opacity: 0; visibility: hidden; }
}

/* Coarse pointers (touch, TV remote): enforce minimum hit areas */
@media (pointer: coarse) {
  .btn, .filter-btn, .nav-link, .footer-col a { min-height: var(--tap-min); }
}

/* Fine pointer + hover = desktop mouse; safe to enable subtle motion */
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { letter-spacing: 0.03em; }
}

/* The "drag it sideways" hint is only true while the diagram is too wide to
   fit. `.diagram-frame__scroll img` has `min-width: 900px`, and the figure
   reaches 900px at roughly a 940px viewport - so above that the picture fits,
   nothing pans, and the hint would be a lie. If you change that min-width,
   change this number with it. */
@media (min-width: 940px) {
  .diagram-frame__hint { display: none; }
}

/* ==========================================================================
   ORIENTATION
   Short landscape phones: trim the hero so the CTA stays above the fold.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 520px) {
  .hero { min-height: 100svh; }
  .hero__inner { padding-block: var(--sp-6); }
  .scroll-cue { display: none; }
  .main-nav { max-height: calc(100dvh - var(--header-h)); }
}

/* ==========================================================================
   ACCESSIBILITY PREFERENCES
   ========================================================================== */
@media (prefers-contrast: more) {
  :root {
    --text-muted: #3A434C;
    --border-soft: #7C868F;
  }
  .btn { border-width: 3px; }
}

/* Honour an OS-level dark preference only if the page opts in with
   <html data-theme="auto">. Keeps the default site light by design. */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg-page:     var(--clr-charcoal);
    --bg-alt:      var(--clr-charcoal-soft);
    --text-body:   #E7ECF1;
    --text-muted:  var(--clr-steel-300);
    --border-soft: #39424B;
    color-scheme: dark;
  }
}