/* ==========================================================================
   AGR Global EN — additive visual + motion override
   Contract: sites/agr-global/docs/global-en-visual-motion-contract.md
   Rule: load AFTER inherited JP chrome/interaction CSS. Do not edit JP CSS.
   Hybrid Industrial Light 70/25/5 · EN motion ~1.3–1.5× JP · reduced-motion mandatory
   ========================================================================== */

:root {
  /* Inherited palette lock (Hybrid Industrial Light) */
  --bg: #F5F6F7;
  --bg2: #ECEFF2;
  --bg-card: #FFFFFF;
  --text: #22313F;
  --graphite: #22313F;
  --steel-dark: #2B3D4F;
  --steel: #31495C;
  --brand: #A3211B;
  --brand-hover: #7C1712;
  --accent-blue: #1A5FA8;
  --link: #1A5FA8;
  --line: #D5DBE0;

  /* EN motion amplitude (~1.3–1.5× JP interaction-system baseline) */
  --agr-motion-fast: 220ms;
  --agr-motion-standard: 280ms;
  --agr-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --agr-card-lift: -4px;
  --agr-card-media-scale: 1.035;
  --agr-menu-shift: 6px;
  --agr-cta-lift: -2px;
}

/* Cards — lift ~4px, media scale 1.03–1.04 */
a.corp-card:hover,
a.cases-p2-card:hover,
a.knowledge-card:hover,
a.align-industry-card:hover,
a.about-align-group-card:hover,
a.pf-step:hover,
a.pf-step--entry:hover {
  transform: translateY(var(--agr-card-lift));
}

a.corp-card:hover .media img,
a.corp-card:hover .media .corp-ph,
a.corp-card:hover .panel-bg img,
a.corp-card:hover .panel-bg .corp-ph,
a.cases-p2-card:hover .media img,
a.cases-p2-card:hover .media .corp-ph,
a.cases-p2-card:hover .media .media-slot {
  transform: scale(var(--agr-card-media-scale));
}

/* P0-03: .mega-products-wide is a single <ul> of four product <li> items.
   corporate-chrome.css declared a 4-column grid on the wrapper, but the UL is
   the only child, so the four items stacked into column one. Move the
   responsive four-column grid onto the UL itself so the four products render
   as four columns at desktop widths. */
.mega-products-wide {
  display: block;
}

.mega-products-wide ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 20px;
}

.mega-products-wide li {
  min-width: 0;
}

@media (max-width: 1180px) {
  .mega-products-wide ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Menu panels — restrained fade + translate.
   P0-03: .mega (fixed, left:50vw) and .nav-dd (absolute, left:50%) are
   horizontally centered in corporate-chrome.css via translateX(-50%).
   Preserve that centering while adding vertical motion, so the panel stays
   centered on every open/close state. .d-panel (drawer accordion) has no
   horizontal centering baseline and keeps translateY only. */
.mega,
.nav-dd,
.d-panel {
  transition:
    opacity var(--agr-motion-standard) var(--agr-ease-standard),
    transform var(--agr-motion-standard) var(--agr-ease-standard),
    visibility var(--agr-motion-standard) var(--agr-ease-standard);
}

.mega[data-open="false"],
.nav-dd[data-open="false"] {
  opacity: 0;
  transform: translate(-50%, calc(var(--agr-menu-shift) * -0.5));
}

.mega[data-open="true"],
.nav-dd[data-open="true"] {
  opacity: 1;
  transform: translate(-50%, 0);
}

.d-panel[data-open="false"] {
  opacity: 0;
  transform: translateY(calc(var(--agr-menu-shift) * -0.5));
}

.d-panel[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
}

/* CTA feedback */
a.corp-btn,
a.btn-primary,
a.btn-outline,
.header-cta .corp-btn {
  transition:
    transform var(--agr-motion-standard) var(--agr-ease-standard),
    box-shadow var(--agr-motion-standard) ease,
    background-color var(--agr-motion-standard) ease,
    border-color var(--agr-motion-standard) ease,
    color var(--agr-motion-standard) ease,
    opacity var(--agr-motion-fast) ease;
}

a.corp-btn:hover,
a.btn-primary:hover,
.header-cta .corp-btn:hover {
  transform: translateY(var(--agr-cta-lift));
}

a.corp-btn:active,
a.btn-primary:active {
  transform: translateY(0);
  opacity: 0.92;
}

/* Drawer / mobile menu fade */
.drawer,
.drawer-scrim {
  transition:
    opacity var(--agr-motion-standard) var(--agr-ease-standard),
    transform var(--agr-motion-standard) var(--agr-ease-standard);
}

/* Mandatory reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --agr-motion-fast: 0ms;
    --agr-motion-standard: 0ms;
    --agr-card-lift: 0px;
    --agr-card-media-scale: 1;
    --agr-menu-shift: 0px;
    --agr-cta-lift: 0px;
  }

  a.corp-card,
  a.cases-p2-card,
  a.knowledge-card,
  a.align-industry-card,
  a.about-align-group-card,
  a.pf-step,
  a.pf-step--entry,
  a.corp-card .media img,
  a.corp-card .media .corp-ph,
  a.corp-card .panel-bg img,
  a.corp-card .panel-bg .corp-ph,
  a.cases-p2-card .media img,
  a.cases-p2-card .media .corp-ph,
  a.cases-p2-card .media .media-slot,
  a.corp-card .corp-card__cta,
  a.corp-card .corp-text-link,
  a.pf-step .pf-step__cta,
  a.pf-step--entry .pf-step__cta,
  a.corp-btn,
  a.btn-primary,
  a.btn-outline,
  .mega,
  .nav-dd,
  .d-panel,
  .drawer,
  .drawer-scrim {
    transition: none !important;
  }

  a.corp-card:hover,
  a.cases-p2-card:hover,
  a.knowledge-card:hover,
  a.align-industry-card:hover,
  a.about-align-group-card:hover,
  a.pf-step:hover,
  a.pf-step--entry:hover,
  a.corp-card:hover .corp-card__cta,
  a.pf-step:hover .pf-step__cta,
  a.pf-step--entry:hover .pf-step__cta,
  a.corp-btn:hover,
  a.btn-primary:hover,
  .header-cta .corp-btn:hover {
    transform: none !important;
  }

  a.corp-card:hover .media img,
  a.corp-card:hover .media .corp-ph,
  a.corp-card:hover .panel-bg img,
  a.corp-card:hover .panel-bg .corp-ph,
  a.cases-p2-card:hover .media img,
  a.cases-p2-card:hover .media .corp-ph,
  a.cases-p2-card:hover .media .media-slot {
    transform: none !important;
  }

  .mega[data-open="false"],
  .nav-dd[data-open="false"],
  .d-panel[data-open="false"],
  .mega[data-open="true"],
  .nav-dd[data-open="true"],
  .d-panel[data-open="true"] {
    /* Keep horizontal centering for fixed/absolute centered panels even when
       motion is reduced; only vertical shift is removed. */
    transition: none !important;
  }

  .mega[data-open="false"],
  .mega[data-open="true"],
  .nav-dd[data-open="false"],
  .nav-dd[data-open="true"] {
    transform: translate(-50%, 0) !important;
  }

  .d-panel[data-open="false"],
  .d-panel[data-open="true"] {
    transform: none !important;
  }
}

/* Multilingual chrome — hidden until 2+ route-published locales exist. */
.locale-switcher{position:relative;display:inline-flex;align-items:center}
.locale-switcher__toggle{min-height:38px;padding:0 10px;border:1px solid var(--border,#D5DBE0);background:transparent;color:inherit;font:inherit;cursor:pointer}
.locale-switcher__menu{position:absolute;right:0;top:calc(100% + 8px);min-width:150px;padding:6px;background:#fff;border:1px solid var(--border,#D5DBE0);box-shadow:0 12px 30px rgba(34,49,63,.14);z-index:120;display:none}
.locale-switcher:hover .locale-switcher__menu,.locale-switcher:focus-within .locale-switcher__menu{display:grid}
.locale-switcher__menu a{display:block;padding:8px 10px;color:#22313F;text-decoration:none;white-space:nowrap}
.locale-switcher__menu a[aria-current="page"]{font-weight:700}
.locale-switcher__menu a:hover,.locale-switcher__menu a:focus-visible{background:#F1F3F5}
@media (prefers-reduced-motion:reduce){.locale-switcher *{transition:none!important}}

/* P0-02: collapse unbound media slots instead of showing empty evidence frames. */
.pf-hero__media:has(> .agr-media-unbound),
.pf-page-hero__media:has(> .agr-media-unbound),
.product-list-item__media:has(> .agr-media-unbound),
.align-industry-card__media:has(> .agr-media-unbound),
.pf-application-media:has(> .agr-media-unbound),
.cases-p2-card > .media:has(> .agr-media-unbound),
.case-detail-hero__media:has(> .agr-media-unbound) {
  display: none !important;
}

.agr-media-unbound {
  display: none !important;
}

/* P1 mobile UX: the inquiry overlay must not compete with an open site drawer. */
body.corp-drawer-open #inquiry-os-online-inquiry {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* P1 mobile UX: the floating Inquiry launcher is a duplicate on the dedicated
   /contact/ page and can cover active form controls at narrow widths
   (observed around the workpiece field at 390px). Collapse it on that page
   instead of moving it over other controls — the page is itself the full
   technical-assessment / inquiry destination. */
body.agr-contact-page #inquiry-os-online-inquiry,
body.agr-contact-page #inquiry-os-online-inquiry .ios-fab {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 600px) {
  #inquiry-os-online-inquiry .ios-fab {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(20px, env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 24px);
  }
}