/* =====================================================================
   GGR TRADE — FINALISATION CORRECTIONS (v2)
   Loaded after main.css/app.css. Uses the same @layer names so overrides
   stay predictable: icons, imagery, hero, page-hero, division cards,
   brand cells, mobile grids, product-filter drawer, bottom nav.
   ===================================================================== */
@layer base {
  /* Global inline-icon default: tames untamed SVGs; component classes still win. */
  svg { inline-size: 1.2em; block-size: 1.2em; flex-shrink: 0; vertical-align: middle; }
  img, picture { max-inline-size: 100%; }
  html, body { overflow-x: clip; }
}

@layer components {
  /* ---- Icon sizing system (contextual) ---- */
  .btn svg { inline-size: 1.05em; block-size: 1.05em; }
  .btn-lg svg { inline-size: 1.1em; block-size: 1.1em; }
  .utilbar svg { inline-size: 16px; block-size: 16px; }
  .icon-btn svg { inline-size: 22px; block-size: 22px; }
  .primary-nav .caret { inline-size: 14px; block-size: 14px; }
  .crumbs svg, .link svg { inline-size: 16px; block-size: 16px; }
  .dc-chev { inline-size: 18px; block-size: 18px; }
  .ct-ico svg { inline-size: 24px; block-size: 24px; }
  .ti-ico svg { inline-size: 22px; block-size: 22px; }
  .hs-ico svg, .mi svg { inline-size: 20px; block-size: 20px; }
  .es-ico svg { inline-size: 34px; block-size: 34px; }

  /* ---- Responsive photo primitive ---- */
  .ph-pic { display: block; inline-size: 100%; block-size: 100%; }
  .ph-pic img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

  /* ---- Utility bar tidy ---- */
  .utilbar .wrap-wide { min-block-size: 36px; }
  .utilbar a { gap: .35em; }
  .nowrap { white-space: nowrap; }
  @media (max-width: 1180px) { .utilbar .util-cue { display: none; } }

  /* ---- Header polish ---- */
  .header-main { min-block-size: 76px; }
  .header-actions { gap: .25rem; }
  @media (max-width: 900px) {
    .header-main { min-block-size: 62px; }
    .brand-logo img { block-size: 34px; }
    .brand-logo .bl-sub { display: none; }
    .brand-logo .bl-name { font-size: 1.05rem; }
    .header-actions { gap: .1rem; }
    .icon-btn { inline-size: 42px; block-size: 42px; }
  }
  @media (max-width: 360px) { .brand-logo .bl-text { display: none; } }

  /* ---- HERO (image-led, correct mobile order) ---- */
  .hero-grid { align-items: center; }
  .hero h1 { font-size: clamp(2.1rem, 6.5vw, 3.4rem); margin-block: var(--sp-3) var(--sp-4); }
  .hero .lede { font-size: clamp(1rem, 2.5vw, 1.25rem); }
  .hero-copy, .hero-panel { min-inline-size: 0; }
  .hero-pic { display: block; border-radius: var(--r-4); overflow: clip; box-shadow: var(--sh-4); aspect-ratio: 16/11; border: 1px solid rgba(255,255,255,.14); }
  .hero-pic img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .hero-search input { min-inline-size: 0; }
  .hero-valuestrip { border-block-start: 1px solid rgba(255,255,255,.14); margin-block-start: var(--sp-6); }
  .hero-valuestrip .wrap-wide { display: flex; flex-wrap: wrap; gap: var(--sp-4); padding-block: var(--sp-4); }
  .hvs-item { display: inline-flex; align-items: center; gap: .5em; color: var(--ink-inv-2); font-weight: 600; font-size: .92rem; }
  .hvs-item svg { color: #8FD0FF; }
  @media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; gap: var(--sp-5); padding-block: var(--sp-6); }
    .hero-copy { order: -1; }
    .hero-panel { order: 0; }
    .hero-pic { aspect-ratio: 16/10; }
    .hero h1 { font-size: clamp(2.05rem, 9vw, 2.9rem); }
    .hero-valuestrip .wrap-wide { gap: var(--sp-3); overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .hero-valuestrip .wrap-wide::-webkit-scrollbar { display: none; }
    .hvs-item { white-space: nowrap; }
  }

  /* ---- PAGE HERO (industry / service / about) ---- */
  .page-hero { position: relative; color: #fff; overflow: clip; isolation: isolate; }
  .page-hero-media { position: absolute; inset: 0; z-index: -2; }
  .page-hero-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .page-hero-overlay { position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(115deg, rgba(6,16,38,.92) 0%, rgba(6,27,85,.8) 48%, rgba(11,58,140,.55) 100%); }
  .page-hero-copy { padding-block: clamp(var(--sp-7), 8vw, var(--sp-9)); max-inline-size: 60ch; }
  .page-hero-copy h1 { color: #fff; }
  .page-hero-copy .lede { color: var(--ink-inv-2); }

  /* ---- DIVISION cards: image-led, compact ---- */
  .division-card { display: flex; flex-direction: column; padding: 0; min-block-size: 0; color: inherit;
    background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-3); overflow: clip; }
  .division-card::before { content: none; }
  .division-card .dc-media { aspect-ratio: 3/2; overflow: clip; }
  .division-card .dc-media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .5s var(--ease); }
  .division-card:hover .dc-media img { transform: scale(1.05); }
  .division-card .dc-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: .35rem; border-block-start: 3px solid var(--brand); }
  .division-card.a-blue .dc-body { border-block-start-color: var(--c-blue); }
  .division-card.a-navy .dc-body { border-block-start-color: var(--c-navy); }
  .division-card.a-teal .dc-body { border-block-start-color: var(--c-teal); }
  .division-card h3 { color: var(--ink-1); font-size: var(--fs-600); }
  .division-card p { color: var(--ink-3); font-size: .92rem; }
  .division-card .dc-tag { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 700; color: var(--brand-strong); }
  .division-card .dc-link { margin-block-start: .4rem; font-weight: 700; color: var(--brand-strong); display: inline-flex; align-items: center; gap: .3em; }
  .division-card:hover .dc-link { gap: .55em; }

  /* ---- Category hero media ---- */
  .cat-hero-media { border-radius: var(--r-3); overflow: clip; box-shadow: var(--sh-2); aspect-ratio: 16/10; }
  .cat-hero-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

  /* ---- Hazard selector grid ---- */
  .hazard-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
  .hazard-tile { align-items: center; text-align: center; }
  .hazard-tile h4 { font-size: .95rem; }
  @media (max-width: 900px) { .hazard-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 520px) { .hazard-grid { grid-template-columns: repeat(2, 1fr); } }

  /* ---- BRAND cells ---- */
  .brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
  .brand-cell { display: grid; place-items: center; min-block-size: 92px; background: #fff;
    border: 1px solid var(--c-line); border-radius: var(--r-2); padding: 1rem; transition: border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2); }
  .brand-cell:hover { border-color: var(--brand); box-shadow: var(--sh-2); transform: translateY(-2px); }
  .brand-wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--c-navy); letter-spacing: .02em; text-align: center; line-height: 1.15; }
  .brand-wordmark.lg { font-size: clamp(1.6rem, 5vw, 2.4rem); }
  .brand-hero { padding: clamp(2rem, 6vw, 3rem); display: grid; place-items: center; background: var(--c-surface-2); }
  @media (max-width: 480px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } }

  /* ---- Bottom nav (5 items incl Menu button) ---- */
  .bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: .5em 0; min-block-size: var(--bottomnav-h); font-size: .66rem; font-weight: 600; color: var(--ink-3); position: relative; inline-size: 100%; }
  .bottom-nav a svg, .bottom-nav button svg { inline-size: 23px; block-size: 23px; }
  .bottom-nav a[aria-current="page"] { color: var(--brand); }
  .bottom-nav .bn-fab svg { inline-size: 26px; block-size: 26px; }
}

@layer utilities {
  :root { --bottomnav-h: 72px; }

  /* ---- Product listing: sidebar becomes drawer on mobile ---- */
  .listing-grid { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 2rem; align-items: start; }
  @media (max-width: 960px) {
    .listing-grid { display: block; }
    .filter-panel { display: none; }
    .listing-toolbar #open-filters { display: inline-flex; }
  }
  @media (min-width: 961px) { .listing-toolbar #open-filters { display: none; } }

  /* ---- Kill inline repeat(N) grids on small screens ---- */
  @media (max-width: 900px) {
    [style*="grid-template-columns:repeat(6"] { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
    [style*="grid-template-columns:repeat(5"] { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
    [style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  }
  @media (max-width: 560px) {
    [style*="grid-template-columns:repeat(6"],
    [style*="grid-template-columns:repeat(5"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns:repeat(3"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  }

  /* ---- Single-column stacks on phones ---- */
  @media (max-width: 560px) {
    .trust-strip { grid-template-columns: 1fr !important; }
    .steps { grid-template-columns: 1fr !important; }
    .g-2, .g-3, .g-4 { grid-template-columns: 1fr !important; }
  }
  @media (min-width: 480px) and (max-width: 767px) {
    .trust-strip { grid-template-columns: 1fr 1fr !important; }
  }

  /* ---- Flexible children never overflow ---- */
  .grid > *, .cluster > *, .hero-grid > * { min-inline-size: 0; }
  .card, .cat-tile, .division-card, .brand-cell, table, form, .spec-table-wrap { max-inline-size: 100%; }
  .code, .card-title { overflow-wrap: anywhere; }

  @media (max-width: 560px) {
    .wrap, .wrap-wide, .wrap-narrow { inline-size: min(100% - 2rem, var(--wrap)); }
    section { padding-block: var(--sp-6); }
  }
}