/* ===========================================================================
   FERONEX SPICES THAILAND — RESPONSIVE LAYER
   ---------------------------------------------------------------------------
   Breakpoints (max-width, largest first):
     1200px  large laptop
     1024px  tablet landscape  -> desktop nav becomes the glass hamburger menu
      860px  tablet portrait
      768px  mobile large      -> sticky bottom CTA appears
      560px  mobile
      400px  small mobile
      340px  smallest supported (320px viewport)
   Verified with no horizontal scrolling at 320/375/768/1024/1440.
   ======================================================================== */

/* The five-item nav needs roughly 1210px of header before it starts to
   crowd the quotation button, so it becomes the glass menu below that. */
@media (max-width: 1240px) {
  .glass-nav {
    display: none;
  }

  .nav-toggle {
    display: grid;
  }
}

/* --------------------------------------------------- 1200px : large laptop */
@media (max-width: 1200px) {
  :root {
    --space-xl: 68px;
    --space-2xl: 96px;
  }

  .hero .hero__visual {
    width: clamp(420px, 56vw, 820px);
  }
}

/* ------------------------------------------------ 1024px : tablet landscape */
@media (max-width: 1024px) {
  :root {
    --header-height: 80px;
    --gutter: 22px;
  }

  /* Desktop nav swaps to the full-screen glass menu. The header CTA stays
     visible on tablets, since the sticky bottom CTA only appears below 768px. */
  .glass-nav {
    display: none;
  }

  .nav-toggle {
    display: grid;
  }

  .hero {
    min-height: auto;
    padding-top: calc(var(--header-height) + 48px);
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .hero__text {
    max-width: 60ch;
  }

  .hero__visual {
    order: 2;
    min-height: 0;
  }

  .hero .hero__visual {
    position: static;
    width: auto;
    height: auto;
    margin-inline: calc(-1 * var(--gutter));
  }

  /* Stacked under the copy, the footage only needs to fade top and bottom. */
  .hero .hero__media {
    height: auto;
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, #000 10%, #000 78%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, transparent 0%, #000 10%, #000 78%, transparent 100%);
  }

  .hero__copy {
    max-width: none;
  }

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

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

  .tabs__tab {
    flex: 1 1 100%;
    text-align: center;
  }

  /* The zig-zag becomes a vertical timeline: one rail down the left, every
     step hanging off it in order. */
  .flow {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 14px;
    padding-left: 46px;
  }

  .flow::before {
    grid-row: auto;
    grid-column: 1;
    position: absolute;
    left: 15px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    height: auto;
    margin-inline: 0;
    align-self: stretch;
  }

  /* :nth-child(n) matches every step and carries the same weight as the
     per-column rules in style.css, so it can undo them here. */
  .flow__step:nth-child(n) {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
    text-align: left;
    padding: 18px 20px;
  }

  .flow__step:nth-child(n)::after {
    left: -31px;
    top: 50%;
    bottom: auto;
    width: 20px;
    height: 2px;
    transform: none;
    background: var(--accent);
    opacity: 0.4;
  }

  .flow__step:nth-child(n) .flow__dot {
    left: -42px;
    top: calc(50% - 11px);
    bottom: auto;
    transform: none;
  }

  .flow__step:nth-child(n):hover {
    transform: translateX(6px);
  }

  .flow__step:hover .flow__dot {
    transform: scale(1.22);
  }

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

  /* The connecting line only works while every step is on one row. */
  .steps::before {
    display: none;
  }

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

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

/* -------------------------------------------------- 860px : tablet portrait */
@media (max-width: 860px) {
  :root {
    --space-lg: 40px;
    --space-xl: 56px;
    --space-2xl: 76px;
  }

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

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

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

/* ---------------------------------------------------- 768px : mobile large */
@media (max-width: 768px) {
  :root {
    --header-height: 72px;
    --radius-lg: 22px;
    --radius-xl: 26px;
  }

  body {
    /* Room for the sticky bottom CTA bar. */
    padding-bottom: 84px;
  }

  /* Below 768px the sticky bottom CTA takes over from the header button,
     leaving the language lever sitting directly beside the hamburger. */
  .header__actions .btn {
    display: none;
  }

  .header__actions {
    gap: 10px;
  }

  .lang-lever {
    width: 74px;
    height: 34px;
  }

  .brand__logo {
    display: none;
  }

  .brand__logo--mobile {
    display: block;
    height: 40px;
  }

  .site-header.is-scrolled .brand__logo--mobile {
    height: 34px;
  }


  .hero .btn-group .btn,
  .cta-band .btn-group .btn {
    width: 100%;
  }

  .hero .btn-group,
  .cta-band .btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

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

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

  .mobile-cta {
    display: flex;
  }

  /* The floating WhatsApp button moves above the sticky CTA bar. */
  .fab-whatsapp {
    bottom: 92px;
    width: 52px;
    height: 52px;
  }

  .fab-whatsapp svg {
    width: 25px;
    height: 25px;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  /* Thumb-friendly hit areas. */
  .btn {
    padding: 15px 24px;
    min-height: 48px;
  }

  .glass-input {
    padding: 15px 16px;
    font-size: 16px; /* prevents iOS zoom-on-focus */
  }
}

/* ---------------------------------------------------------- 560px : mobile */
@media (max-width: 560px) {
  :root {
    --gutter: 18px;
    --space-xl: 48px;
    --space-2xl: 62px;
  }

  .spec-box {
    grid-template-columns: 1fr;
  }

  .tabs__list {
    border-radius: var(--radius);
  }

  .tabs__tab {
    padding: 12px 16px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
  }

  .tag-row li {
    font-size: 0.66rem;
    padding: 7px 12px;
  }

  .hero__title {
    font-size: clamp(2.1rem, 11vw, 3rem);
  }

  .hero__title .hero__title-sub {
    font-size: clamp(1.05rem, 5vw, 1.4rem);
  }

  .glass-card,
  .glass-panel {
    padding: 22px 18px;
  }

  .statement h2 {
    font-size: clamp(2rem, 13vw, 3rem);
  }

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

  .mobile-menu nav a {
    padding: 15px 18px;
    font-size: 1.08rem;
  }

  .spec-table th,
  .spec-table td {
    padding: 13px 14px;
  }
}

/* ----------------------------------------------------- 400px : small phone */
@media (max-width: 400px) {
  :root {
    --gutter: 14px;
  }

  .brand {
    gap: 9px;
  }

  .brand__logo--mobile {
    height: 36px;
  }

  .brand__word strong {
    font-size: 0.95rem;
    letter-spacing: 0.1em;
  }

  .brand__word small {
    display: none;
  }

  .lang-lever {
    width: 66px;
    height: 32px;
  }

  .lang-lever__labels span {
    font-size: 0.58rem;
    letter-spacing: 0.06em;
  }

  .btn {
    padding: 14px 18px;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
  }

  .mobile-cta .btn {
    font-size: 0.7rem;
    padding: 12px 10px;
  }

  .product-card__media {
    min-height: 220px;
  }
}

/* -------------------------------------------- 340px : smallest supported UI */
@media (max-width: 340px) {
  .hero__title {
    font-size: 1.95rem;
  }

  .eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
  }
}

/* ------------------------------------------------- Landscape phone: compact */
@media (max-height: 520px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--header-height) + 32px);
  }

  .mobile-menu {
    justify-content: flex-start;
    overflow-y: auto;
  }
}

/* ------------------------------------------------------------------ Print */
@media print {
  .site-header,
  .mobile-menu,
  .mobile-cta,
  .fab-whatsapp,
  .scroll-progress,
  .hero__canvas {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    padding-bottom: 0;
  }

  body::before,
  body::after {
    display: none;
  }

  .glass,
  .glass-card,
  .glass-panel {
    background: none;
    border: 1px solid #ccc;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  h1, h2, h3, p, li, td, th {
    color: #000 !important;
  }
}

/* --------------------------------------- Fallback: no backdrop-filter support
   Older browsers get solid surfaces instead of transparent ones, so text
   never sits on an unreadable background. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .glass-card,
  .glass-nav,
  .glass-panel,
  .glass-input,
  .mobile-menu,
  .mobile-cta,
  .nav-toggle {
    background: #ffffff;
  }

  .on-dark .glass,
  .on-dark .glass-card,
  .on-dark .glass-panel {
    background: rgba(255, 255, 255, 0.1);
  }
}