/* ============================================================
   Kim Trần Import Export — responsive rules.
   Enqueued AFTER kt-components.css, so these overrides win at their
   breakpoint regardless of source order elsewhere. Two breakpoints
   only, matching Kadence's own editor breakpoints:
     tablet ≤ 1024px · mobile ≤ 767px
   Each block first re-declares the token values that change at that
   breakpoint (mirrors kt-tokens.css §"tablet/mobile" originally),
   then the component overrides that depend on them.
   ============================================================ */

/* ================= Tablet ≤ 1024px ================= */
@media (max-width:1024px){
  :root{
    --kt-fs-display:46px;
    --kt-fs-h2:32px;
    --kt-pad:var(--kt-pad-tablet);
    --kt-section-y:64px;
    --kt-grid-gutter:20px;
  }

  /* §1 header: nav gap tightens, row otherwise unchanged (hamburger
     only appears at the mobile breakpoint below — nav stays inline
     here, matching the original spec's tablet row). */
  .kt-nav{gap:var(--kt-sp-5)}

  /* §2 hero: 2 columns → 1, copy above image; image ratio 4∶3 → 16∶9;
     material-sample frame no longer needs the desktop max-width cap */
  .kt-hero{grid-template-columns:1fr;gap:40px;padding-bottom:56px}
  .kt-hero__visual{max-width:420px}
  .kt-media--4x3 img{aspect-ratio:16/9}
  .kt-hero__title{max-width:none}

  /* §3 capabilities: stack to a single column with horizontal
     dividers instead of the desktop row's vertical ones — a wrapped
     flex row would put a left-border divider in the wrong place
     against its new row-neighbour, so this switches axis instead.
     Fix (mobile-refinement pass): the desktop rule's flex:1 1 240px
     sets a 240px flex-BASIS, which is a WIDTH hint in row mode but
     becomes a HEIGHT hint once flex-direction flips to column here —
     that forced every step to ~240px tall regardless of its actual
     (much shorter) content, which is exactly the "dư khoảng trắng"
     mobile bug. Resetting flex-basis to auto makes each item size to
     its own content again. */
  .kt-values{flex-direction:column}
  .kt-value{flex:0 1 auto;border-left:none;padding-left:0;border-top:1px solid var(--kt-border-hairline);padding-top:var(--kt-sp-6)}
  .kt-value:first-child{border-top:none;padding-top:0}
  .kt-value + .kt-value{margin-top:var(--kt-sp-6)}

  /* §4 company: 2 columns → 1 (straight to 1, not 2→1.something) */
  .kt-about{grid-template-columns:1fr;gap:32px}

  /* §5 journey: 4 columns → 2×2 */
  .kt-journey{grid-template-columns:repeat(2,1fr);gap:32px}

  /* §6/§7 timber grid + technical profile: 4 compact → 2×2 (the
     featured card already spans the full row at every breakpoint via
     its own base rule, grid-column:1/-1); asymmetric two-column tech
     body collapses to one column, natural stack order (prose → image
     swatch → specs) via re-declared grid-template-areas — a mismatched
     column count against the desktop area string would otherwise make
     the whole area assignment invalid. */
  .kt-timber-grid{grid-template-columns:repeat(2,1fr)}
  .kt-timber-card--featured{grid-template-columns:1fr}
  .kt-timber-card--featured .kt-timber-card__media img{min-height:220px}
  .kt-tech__body{grid-template-columns:1fr;grid-template-areas:"prose" "swatch" "specs"}
  .kt-tech__swatch{justify-self:stretch;max-width:420px}
  .kt-tech__swatch img{aspect-ratio:16/9}

  /* §7c/7d editorial splits + principles/inspection: 2 columns → 1,
     natural DOM order (text/principles first, image second — matches
     the brief's "text immediately below or above" flexibility for
     mobile, and keeps principles readable before the image on
     tablet). --material's desktop-only image-left reorder is undone
     here so it doesn't fight the single-column stack. */
  .kt-editorial{grid-template-columns:1fr;gap:var(--kt-sp-6)}
  .kt-editorial--material .kt-editorial__media{order:0}
  .kt-principles-split{grid-template-columns:1fr;gap:var(--kt-sp-8)}

  /* §9 quotation: 2 columns → 1. Natural DOM order applies (no CSS
     `order` override) — the heading orients first, then the download
     CTA, then the form panel; putting the form first with no heading
     above it read wrong when checked in the browser preview. Fields
     themselves stay 2-up through tablet (spec calls for "2-up until
     640px"; Kadence/this build only exposes tablet/mobile breakpoints,
     so 2-up is kept through tablet and collapses at the mobile
     breakpoint below — documented adaptation, see
     docs/KADENCE-BUILD-MAP.md §9). */
  .kt-enquiry{grid-template-columns:1fr}

  /* §10 footer: 2 columns → 1 (contacts stay 2-up until mobile) */
  .kt-footer__top{grid-template-columns:1fr}
}

/* ================= Mobile ≤ 767px ================= */
@media (max-width:767px){
  :root{
    --kt-fs-display:34px;
    --kt-fs-h2:26px;
    --kt-fs-lead:17px;
    --kt-pad:var(--kt-pad-mobile);
    --kt-section-y:48px;
  }

  /* §1 header: logo shrinks; full-label CTA swaps for the short "Báo
     giá" label; hamburger appears. .kt-nav only actually collapses
     behind the toggle once kt-interactions.js adds
     .kt-nav--collapsible to it — with JS disabled, .kt-nav never gets
     that class, so it stays visible here (wraps inline below the row)
     rather than being hidden with no way to reopen it.
     Mobile-refinement pass: kt-components.css sets the header logo to
     a fixed width:270px!important (a later manual patch, kept as-is
     for desktop) with no mobile counterpart — at 3.48:1 that rendered
     ~77px tall on phones and, combined with the row's own padding,
     made the whole bar feel oversized. Re-declared here with
     !important (required to win over the desktop !important rule) at
     a size that balances against the CTA/hamburger, plus tighter row
     padding/gap so the bar sits closer to a normal mobile header
     height. */
  .kt-header__inner{flex-wrap:wrap;padding-top:9px;padding-bottom:9px;gap:var(--kt-sp-4)}
  .kt-header__logo img{width:132px !important;height:auto !important;max-width:none !important}
  .kt-header .kt-header__cta--full{display:none}
  .kt-header .kt-header__cta--short{display:inline-flex}
  .kt-header__toggle{display:flex}
  /* Mobile-refinement pass: was a hard display:none/flex swap (no
     transition possible on a discrete display value). Replaced with a
     max-height + opacity + slight rise transition, timed off the same
     --kt-dur/--kt-ease tokens every other hover/press transition on
     the site already uses (so prefers-reduced-motion:reduce — which
     zeroes --kt-dur in kt-motion.css — collapses this to an instant
     toggle automatically, no extra query needed here). visibility is
     kept in the transition (delayed on close, immediate on open) so
     the closed menu is still removed from the tab order / a11y tree,
     same as the old display:none did — this is not a purely visual
     hide. */
  .kt-nav.kt-nav--collapsible{
    display:flex;flex-direction:column;gap:0;width:100%;order:10;margin-left:0;
    overflow:hidden;max-height:0;opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:max-height var(--kt-dur) var(--kt-ease),opacity var(--kt-dur) var(--kt-ease),transform var(--kt-dur) var(--kt-ease),visibility 0s linear var(--kt-dur);
  }
  .kt-nav.kt-nav--collapsible.kt-nav--open{
    max-height:480px;opacity:1;visibility:visible;transform:none;
    transition:max-height var(--kt-dur) var(--kt-ease),opacity var(--kt-dur) var(--kt-ease),transform var(--kt-dur) var(--kt-ease);
  }
  .kt-nav.kt-nav--collapsible a{padding:14px 0;font-size:16px;border-bottom:1px solid var(--kt-border-hairline)!important;color:var(--kt-green-700)}

  /* §2 hero: CTAs stack full-width, primary first (DOM order already
     primary-then-secondary in hero.php); frame goes full width */
  .kt-hero__actions{flex-direction:column;align-items:stretch;gap:14px}
  .kt-hero__visual{max-width:none}

  /* §4 company: statement scales down, no longer boxed so no padding
     to adjust */
  .kt-about__statement{font-size:23px}

  /* §5 journey: switch to vertical gold-railed timeline. Same markup —
     .kt-journey__num goes absolute, a gold rail is drawn as ::before on
     each step (this is the rail the task brief's example class
     kt-journey__rail names; implemented as a pseudo-element, not an
     extra DOM node, since it is decoration, not layout). */
  .kt-journey{grid-template-columns:1fr}
  .kt-journey__step{position:relative;padding-left:50px;padding-bottom:var(--kt-sp-8)}
  .kt-journey__step::before{content:"";position:absolute;left:16.25px;top:40px;bottom:0;width:1.5px;background:rgba(199,160,76,.45)}
  .kt-journey__step:last-child::before{display:none}
  .kt-journey__num{position:absolute;left:0;top:0;margin:0;color:var(--kt-green-700)}
  .kt-journey__step img{max-width:260px}

  /* §6 timber grid: 1 column, featured card stops trying to be
     horizontal (see kt-components.css §6) */
  .kt-timber-grid{grid-template-columns:1fr}
  .kt-timber-card--featured{grid-template-columns:1fr}

  /* §7 technical profile: spec rows become stacked key-above-value —
     no horizontal scrolling, no shrunken table. Swatch capped shorter
     again so it stays a compact accent, not a tall banner, on phones. */
  .kt-spec__row{display:block}
  .kt-spec__row dt{margin-bottom:4px}
  .kt-tech__swatch img{aspect-ratio:21/9;max-height:160px}

  /* §7c/7d editorial images: already 4:3 at every breakpoint (matches
     the brief's "roughly 4:3 or 5:4" mobile crop directly, no override
     needed) — just a height cap so a narrow phone can't stretch it
     into "a giant image that requires excessive scrolling". Placeholder
     art shrinks further too. */
  .kt-editorial__media img,
  .kt-principles-split__media img{max-height:280px}
  .kt-editorial__art{max-width:140px;margin:var(--kt-sp-8) auto}

  /* §9 quotation: fields collapse to 1-up; white panel padding trimmed
     so it doesn't eat too much of a narrow viewport */
  .kt-form__row{grid-template-columns:1fr}
  .kt-enquiry{gap:var(--kt-sp-10)}
  .kt-enquiry__panel{padding:var(--kt-sp-6)}

  /* §10 footer: contacts 2-up → 1-up, each on its own hairline (handled
     already by .kt-contact's own top border). Mobile-refinement pass:
     .kt-footer__top's 48px gap was written for a 2-column desktop
     layout — once §10 in the tablet block above collapses it to a
     single stacked column, that same 48px lands as one big vertical
     gap between the identity block and the contacts block, which read
     as loose/uneven stacking rhythm. Tightened here, plus a smaller
     inter-contact gap now that the two contact cards stack instead of
     sitting side by side. */
  .kt-footer__contacts{grid-template-columns:1fr;gap:var(--kt-sp-5)}
  .kt-footer__top{gap:28px}
  .kt-footer__inner{padding-top:28px}
  .kt-footer__logo{height:80px;max-width:220px}

  /* Buttons that opt in to full-width on mobile (hero CTAs, submit,
     download button) via .kt-btn--block-mobile */
  .kt-btn--block-mobile{display:flex;width:100%;justify-content:center}
}

@media (max-width: 640px){
  .kt-enquiry__lead{max-width:none}
}