/* ==========================================================================
   Kontron FSM — InnoTrans 2026 website styles
   Loaded after assets/brand/brand.css (tokens + @font-face + print-style
   base rules). This file defines the actual site design system and
   overrides brand.css's document-oriented body/heading rules for web use.
   All colors/fonts come from the --kontron-* custom properties in brand.css.
   ========================================================================== */

/* --- Local design tokens (spacing / type / layout) ---------------------- */
:root {
  /* Fluid type scale */
  --fs-100: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --fs-200: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-300: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-400: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --fs-500: clamp(1.75rem, 1.5rem + 1.1vw, 2.375rem);
  --fs-600: clamp(2.25rem, 1.85rem + 1.8vw, 3.25rem);
  --fs-700: clamp(2.75rem, 2.1rem + 2.8vw, 4.25rem);

  /* 8px spacing base */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 5rem;
  --space-8: 6rem;

  --section-padding: clamp(3rem, 8vw, 7rem);
  --container-max: 1200px;
  --header-height: 76px;

  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-card: 0 10px 30px -12px color-mix(in srgb, var(--kontron-black-blue) 18%, transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--kontron-blue) 45%, transparent);
}

/* --- Local color extensions ----------------------------------------------
   Not present in branding/brand.json. These are local, documented light-tint
   and overlay extensions of the brand palette used only in this event site,
   for light text/surfaces on dark brand backgrounds and photo scrims. Alpha
   overlays of colors that DO exist in the brand palette use color-mix() with
   the --kontron-* tokens directly instead (see above and throughout file).
   ========================================================================== */
:root {
  --local-white: #ffffff;
  --local-tint-050: #f2f6f9; /* near-white text on dark sections / nav links */
  --local-tint-100: #dce7ef; /* hero lead text over dark scrim */
  --local-tint-200: #cfdce6; /* trustbar / footer nav text on dark */
  --local-tint-300: #8fa5b8; /* muted footer copyright text on dark */
  --local-navy-overlay: #091b2b; /* darkest navy for photo scrims/backdrops */
  --local-error-tint: #ff9fc4; /* light pink error text, readable on dark form bg */
}

/* --- Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Kontron', 'Calibri Light', 'Calibri', sans-serif;
  font-weight: 300;
  font-size: var(--fs-200);
  line-height: 1.65;
  color: var(--kontron-dark-grey);
  background: var(--local-white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

h1, h2, h3, h4 {
  font-family: 'Kontron', sans-serif;
  font-weight: 500;
  color: var(--kontron-black-blue);
  border: none;
  margin: 0 0 var(--space-2);
  line-height: 1.2;
}

h1 { font-size: var(--fs-700); font-weight: 600; }
h2 { font-size: var(--fs-600); font-weight: 600; }
h3 { font-size: var(--fs-400); font-weight: 500; }
h4 { font-size: var(--fs-300); font-weight: 500; }

p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--kontron-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--kontron-brand-primary); }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; }

/* Visible focus rings everywhere (a11y requirement) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

/* --- Skip link ------------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  background: var(--kontron-brand-primary);
  color: var(--local-white);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  z-index: 1000;
  transition: top 0.15s ease;
  text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- Layout helpers -------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.section { padding-block: var(--section-padding); scroll-margin-top: var(--header-height); }
.section:focus { outline: none; }
.section--light { background: var(--local-white); color: var(--kontron-dark-grey); }
.section--light-grey { background: var(--kontron-light-grey); color: var(--kontron-dark-grey); }
.section--dark { background: var(--kontron-black-blue); color: var(--local-tint-050); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--local-white); }
.section--dark a:not(.btn) { color: var(--kontron-light-blue); }
.section--dark a:not(.btn):hover { color: var(--local-white); }

.eyebrow {
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kontron-brand-primary);
  margin: 0 0 var(--space-2);
}
.eyebrow--on-dark { color: var(--kontron-brand-accent); }

.lead {
  font-size: var(--fs-300);
  font-weight: 500;
  color: var(--kontron-black-blue);
  margin-bottom: var(--space-3);
}
.section--dark .lead { color: var(--local-white); }

.section-subheading { margin-top: var(--space-6); }

/* --- Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-size: var(--fs-100);
  font-weight: 500;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--primary { background: var(--kontron-brand-primary); color: var(--local-white); }
.btn--primary:hover { background: var(--kontron-black-blue); color: var(--local-white); }
.btn--outline {
  background: transparent;
  border-color: var(--kontron-brand-primary);
  color: var(--kontron-brand-primary);
}
.btn--outline:hover { background: var(--kontron-brand-primary); color: var(--local-white); }
.btn--ghost-on-dark {
  background: transparent;
  border-color: var(--local-white);
  color: var(--local-white);
}
.btn--ghost-on-dark:hover { background: var(--local-white); color: var(--kontron-black-blue); }
.btn--ghost-on-dark[disabled] {
  border-color: color-mix(in srgb, var(--local-white) 35%, transparent);
  color: color-mix(in srgb, var(--local-white) 55%, transparent);
  cursor: not-allowed;
}
.btn--ghost-on-dark[disabled]:hover { background: transparent; color: color-mix(in srgb, var(--local-white) 55%, transparent); }
.btn--small { padding: 0.55rem 1.15rem; font-size: var(--fs-100); }
.btn--full { width: 100%; }
.btn__icon { width: 18px; height: 18px; flex: none; }

.link-download, .link-plain {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--kontron-blue);
  font-weight: 500;
  text-decoration: none;
}
.link-download:hover, .link-plain:hover { color: var(--kontron-brand-primary); text-decoration: underline; }
.link-download__icon { width: 18px; height: 18px; flex: none; color: var(--kontron-brand-accent); }

.cta-group { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.cta-group--links { gap: var(--space-3) var(--space-5); }

.cta-block { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--kontron-light-grey); }
.statement-block {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: var(--kontron-light-grey);
  border-radius: var(--radius-lg);
}

/* --- Header / Nav ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--kontron-black-blue) 72%, transparent);
  backdrop-filter: blur(6px);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header.is-scrolled {
  background: var(--kontron-black-blue);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--kontron-black) 25%, transparent);
}
.site-header__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--local-white);
}
.site-header__wordmark { font-weight: 500; font-size: var(--fs-200); color: var(--local-white); }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.site-nav__list a {
  color: var(--local-tint-050);
  text-decoration: none;
  font-size: var(--fs-100);
  font-weight: 500;
}
.site-nav__list a:hover { color: var(--kontron-brand-accent); }

.site-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.site-header__cta { display: none; }

.site-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  color: var(--local-white);
  cursor: pointer;
  position: relative;
}
.site-header__toggle .icon { width: 26px; height: 26px; position: absolute; }
.site-header__toggle .icon--close { opacity: 0; }
.site-header__toggle[aria-expanded="true"] .icon--menu { opacity: 0; }
.site-header__toggle[aria-expanded="true"] .icon--close { opacity: 1; }

@media (max-width: 1023px) {
  .site-nav {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background: var(--kontron-black-blue);
    padding: var(--space-4);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .site-nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .site-nav__list a { font-size: var(--fs-300); }
}

@media (min-width: 1024px) {
  .site-header__toggle { display: none; }
  .site-header__cta { display: inline-flex; }
}

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: calc(var(--section-padding) + var(--header-height)) var(--section-padding); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--kontron-black-blue) 78%, transparent) 0%, color-mix(in srgb, var(--kontron-black-blue) 88%, transparent) 55%, color-mix(in srgb, var(--kontron-black-blue) 96%, transparent) 100%);
}
.hero__inner { position: relative; z-index: 1; max-width: 820px; }
.hero__title { margin-bottom: var(--space-3); }
.hero__subhead { font-size: var(--fs-400); font-weight: 500; color: var(--local-white); margin-bottom: var(--space-4); }
.hero__lead { font-size: var(--fs-200); color: var(--local-tint-100); max-width: 680px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 var(--space-6); }

.hero__trustbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.hero__trustbar-trigger {
  flex: none;
  display: inline-flex;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: zoom-in;
  line-height: 0;
}
.hero__trustbar-trigger:hover .hero__trustbar-img { opacity: 0.88; }
.hero__trustbar-img { display: block; width: 168px; height: auto; flex: none; border-radius: var(--radius-md); transition: opacity 0.2s ease; }
@media (max-width: 639px) {
  .hero__trustbar-img { width: 128px; }
}
.hero__trustlines { display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--fs-100); color: var(--local-tint-200); }

/* --- Card grids ----------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
@media (max-width: 639px) {
  .card-grid { grid-template-columns: 1fr; }
}

/* Fixed 3x2 layout on desktop (avoids reflowing to 4-up + leftover 2-up on
   wide screens); 2-up on tablet, 1-up on mobile. */
.card-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .card-grid--3 { grid-template-columns: 1fr; }
}
.card {
  background: var(--local-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  border: 1px solid color-mix(in srgb, var(--kontron-black-blue) 6%, transparent);
}
.section--light-grey .card { background: var(--local-white); }
.card__icon { width: 40px; height: 40px; color: var(--kontron-brand-primary); margin-bottom: var(--space-2); }
.card h3, .card h4 { color: var(--kontron-black-blue); margin-bottom: 0.4rem; }
.card p { margin-bottom: 0; color: var(--kontron-dark-grey); }

/* --- Use cases accent image ------------------------------------------------- */
.use-cases__accent { margin-top: var(--space-6); border-radius: var(--radius-lg); }

/* --- Solutions ------------------------------------------------------------- */
.solutions__diagram { margin: var(--space-5) 0; border-radius: var(--radius-lg); }

/* --- Workflow ---------------------------------------------------------------- */
.workflow__img { margin-top: var(--space-4); border-radius: var(--radius-lg); }

/* --- Benefits ------------------------------------------------------------------ */
.benefits__img { margin: var(--space-5) 0; border-radius: var(--radius-lg); }

/* --- EMO block ------------------------------------------------------------------ */
/* Overlay strengthened (72%/85% -> 90%/95%) so the word-cloud composite's
   light-grey text no longer competes with the foreground copy; verified via
   contrast checks against both the darkest and lightest regions of the
   source image (see PR notes) — still lets the image read as texture. */
.section--emo {
  background-image: linear-gradient(color-mix(in srgb, var(--local-navy-overlay) 90%, transparent), color-mix(in srgb, var(--local-navy-overlay) 95%, transparent)), url('assets/img/260720_ai_humancentred_key_capabilities_coverdark.png');
  background-size: cover;
  background-position: center;
  text-align: center;
}
.section--emo .container { max-width: 760px; }
.section--emo .lead { color: var(--kontron-brand-accent); }

/* --- Resources ------------------------------------------------------------------ */
.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-4);
}
@media (max-width: 639px) {
  .resources-grid { grid-template-columns: 1fr; }
}
.resources-col h3 { border-bottom: 2px solid var(--kontron-brand-accent); padding-bottom: var(--space-1); margin-bottom: var(--space-3); }
.resources-list { display: flex; flex-direction: column; gap: var(--space-2); }

/* --- Contact ------------------------------------------------------------------ */
.section--contact {
  background-image: linear-gradient(color-mix(in srgb, var(--local-navy-overlay) 82%, transparent), color-mix(in srgb, var(--local-navy-overlay) 92%, transparent)), url('assets/img/260708_ai_rail_station.png');
  background-size: cover;
  background-position: center;
}
.contact__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  align-items: start;
}
.contact__event { font-size: var(--fs-300); font-weight: 500; color: var(--local-white); margin-bottom: 0.25rem; }
.contact__dates { color: var(--kontron-light-blue); margin-bottom: var(--space-4); }

.contact__person { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.contact__person-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.contact__person-name { font-weight: 500; color: var(--local-white); margin: 0; }
.contact__person-title { font-size: var(--fs-100); color: var(--kontron-light-blue); margin: 0; }

.contact__booking {
  background: color-mix(in srgb, var(--local-white) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--local-white) 16%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.contact__booking h3 { color: var(--local-white); }
.contact__qr { width: 120px; height: 120px; background: var(--local-white); border-radius: var(--radius-md); padding: var(--space-1); margin: var(--space-3) 0; }

.contact-form {
  background: color-mix(in srgb, var(--local-white) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--local-white) 16%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.contact-form h3 { color: var(--local-white); }
.form-field { margin-bottom: var(--space-3); }
.form-field label { display: block; font-size: var(--fs-100); font-weight: 500; color: var(--local-white); margin-bottom: 0.35rem; }
.form-field input, .form-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--local-white) 35%, transparent);
  background: color-mix(in srgb, var(--local-white) 92%, transparent);
  color: var(--kontron-black-blue);
  font-family: inherit;
  font-size: var(--fs-100);
}
.form-field textarea { resize: vertical; }
.field-error { display: block; min-height: 1.1em; font-size: var(--fs-100); color: var(--local-error-tint); margin-top: 0.3rem; }
.form-field.has-error input, .form-field.has-error textarea { border-color: var(--kontron-magenta); }
.form-status { font-size: var(--fs-100); color: var(--kontron-light-blue); margin-top: var(--space-2); min-height: 1.2em; }
.form-status.is-success { color: var(--kontron-brand-accent); }

/* --- Footer --------------------------------------------------------------------- */
.site-footer { background: var(--kontron-black-blue); color: var(--local-tint-200); padding-block: var(--space-6); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.site-footer__logo { flex: none; }
.site-footer__event { font-size: var(--fs-100); flex: 1 1 260px; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.site-footer__nav a { color: var(--local-tint-200); font-size: var(--fs-100); text-decoration: none; }
.site-footer__nav a:hover { color: var(--local-white); }
.site-footer__copyright { width: 100%; font-size: var(--fs-100); color: var(--local-tint-300); margin-top: var(--space-2); }

/* --- Video modal ------------------------------------------------------------------ */
.video-modal { border: none; padding: 0; background: transparent; max-width: min(90vw, 960px); width: 100%; }
.video-modal::backdrop { background: color-mix(in srgb, var(--local-navy-overlay) 86%, transparent); }
.video-modal__inner { background: var(--kontron-black-blue); border-radius: var(--radius-lg); padding: var(--space-3); }
.video-modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.video-modal__title { color: var(--local-white); font-size: var(--fs-300); margin: 0; }
.video-modal__close {
  background: transparent;
  border: none;
  color: var(--local-white);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.video-modal__close .icon { width: 24px; height: 24px; }
#video-modal-player { width: 100%; max-height: 70vh; border-radius: var(--radius-md); background: var(--kontron-black); }
.image-modal__img { display: block; width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--radius-md); background: var(--kontron-black); }

/* --- Icon defaults ------------------------------------------------------------------ */
.icon { width: 24px; height: 24px; }

/* --- Scroll-reveal (guarded by main.js via prefers-reduced-motion) -------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Responsive tuning ---------------------------------------------------------------- */
@media (min-width: 640px) {
  .hero__ctas { gap: var(--space-3); }
}