/* =====================================================================
   VM Sport — uusi footer (design system portti)
   ---------------------------------------------------------------------
   Lähde: vm-sport-design-system/project/ui_kits/web/{Footer.jsx,
   styles.css, mobile.css} + colors_and_type.css.
   Tokenit: vm-header.css :root (--vm-*) + fallbackit.
   Huom: sarakeotsikot div.vm-footer-col-title — ei h1–h6 footerissa
   (sivuston linjaus). Mobiiliraja 991.98px (teeman raja 992, ei 768).
   ===================================================================== */

.vm-footer {
  background: var(--vm-bg-utility, #0d2b3c);
  color: var(--vm-fg-on-inverse, #ffffff);
  font-family: var(--vm-font-body, "work-sans", "Work Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  padding: 64px 0 0;
  margin-top: 64px;
}
.vm-footer-inner {
  max-width: var(--vm-container, 1280px);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr;
  gap: 48px;
}

/* Sarakeotsikko — sama visuaali kuin designin h4, mutta div */
.vm-footer-col-title {
  font-family: var(--vm-font-body, "work-sans", "Work Sans", sans-serif);
  font-weight: 700;
  font-size: var(--vm-fs-14, 0.875rem);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--vm-tracking-eyebrow, 0.12em);
  color: var(--vm-fg-on-inverse, #ffffff);
  margin: 0 0 16px;
}

.vm-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.vm-footer a {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--vm-fs-14, 0.875rem);
  text-decoration: none;
}
.vm-footer a:hover {
  color: #fff;
  text-decoration: none;
}

/* ---------- Uutiskirje-sarake -------------------------------------- */
.vm-footer-logo {
  height: 32px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  margin-bottom: 18px;
}
.vm-footer-news-text {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--vm-fs-14, 0.875rem);
  line-height: 1.55;
  margin: 0 0 14px;
}
.vm-footer-news-form {
  display: flex;
  gap: 8px;
}
.vm-footer-news input[type="email"] {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  padding: 12px 14px;
  border-radius: var(--vm-radius-2, 4px);
  font-family: var(--vm-font-body, "work-sans", "Work Sans", sans-serif);
  font-size: var(--vm-fs-14, 0.875rem);
}
.vm-footer-news input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

/* Nappi scopattuna footeriin — teeman .btn ei välttämättä lataudu tässä */
.vm-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--vm-font-body, "work-sans", "Work Sans", sans-serif);
  font-weight: 600;
  font-size: var(--vm-fs-15, 0.9375rem);
  padding: 12px 18px;
  border: 0;
  border-radius: var(--vm-radius-2, 4px);
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--vm-dur-base, 200ms) var(--vm-ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)),
    color var(--vm-dur-base, 200ms) var(--vm-ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)),
    transform var(--vm-dur-fast, 120ms) var(--vm-ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.vm-footer .btn:active {
  transform: translateY(1px);
}
.vm-footer .btn--primary {
  background: var(--vm-brand, #2D5C87);
  color: #fff;
}
.vm-footer .btn--primary:hover {
  background: var(--vm-brand-deep, #0d2b3c);
  color: #fff;
}

/* ---------- Musta legal-strippi ------------------------------------ */
.vm-footer-bottom {
  background: #000000;
  margin-top: 48px;
  padding: 20px 0;
  font-size: var(--vm-fs-12, 0.75rem);
  color: #dedede;
}
.vm-footer-bottom-inner {
  max-width: var(--vm-container, 1280px);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.vm-footer-bottom a {
  color: #dedede;
  font-size: inherit;
  text-decoration: none;
  margin-right: 18px;
}
.vm-footer-bottom a:hover {
  color: #fff;
}

/* =====================================================================
   Mobiili (<992px) — kollapsoituvat sarakkeet (portti mobile.css:stä,
   breakpoint nostettu 768 → 991.98 teeman mobiilirajan mukaan)
   ===================================================================== */
@media (max-width: 991.98px) {
  .vm-footer-inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 24px 20px;
  }
  .vm-footer-news {
    margin-bottom: 8px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .vm-footer-news-form {
    flex-direction: column;
    gap: 10px;
  }
  .vm-footer-news input[type="email"] {
    width: 100%;
  }
  .vm-footer-news .btn {
    width: 100%;
  }

  /* Jokainen linkkisarake on accordion */
  .vm-footer-col {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    padding: 4px 0;
  }
  .vm-footer-col > .vm-footer-col-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin: 0;
    padding: 16px 0;
  }
  .vm-footer-col > .vm-footer-col-title::after {
    content: '+';
    font-size: 20px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 240ms var(--vm-ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
  }
  .vm-footer-col.open > .vm-footer-col-title::after {
    content: '−';
  }
  .vm-footer-col ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 320ms var(--vm-ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
    padding: 0;
    margin: 0;
  }
  .vm-footer-col.open ul {
    max-height: 600px;
    padding: 0 0 16px;
  }
  .vm-footer-col li {
    padding: 6px 0;
  }

  .vm-footer-bottom-inner {
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    align-items: flex-start;
  }
}

/* ---------- Pre-footer: arvolupaukset (tuotantopariteetti) ---------- */
.vm-prefooter {
  background: var(--vm-bg-card, #f0f0f0);
  border-top: 1px solid var(--vm-border-subtle, #dedede);
}
.vm-prefooter-inner {
  max-width: var(--vm-container, 1280px);
  margin: 0 auto;
  padding: clamp(32px, 4vw, 56px) 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.vm-prefooter-title {
  font-family: "parabolica", "Big Shoulders Display", "Saira Condensed", Impact, sans-serif;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--vm-tracking-tight, -0.01em);
  font-size: 1.25rem;
  color: var(--vm-brand-deep, #0d2b3c);
  margin-bottom: 8px;
}
.vm-prefooter-item p {
  margin: 0;
  font-size: var(--vm-fs-14, 0.875rem);
  line-height: 1.6;
  color: var(--vm-fg-muted, #444);
}
@media (max-width: 767.98px) {
  .vm-prefooter-inner { grid-template-columns: 1fr; gap: 20px; }
}

/* Pre-footer kantaa ylämarginin — footer kiinni siihen */
.vm-prefooter { margin-top: 64px; }
.vm-prefooter + .vm-footer { margin-top: 0; }

/* Yhteystiedot-sarake (E-E-A-T) */
.vm-footer-company { font-weight: 700; color: #fff; }
.vm-footer-some {
  display: flex;
  gap: 14px;
  margin-top: 16px;
}
.vm-footer-some a {
  color: rgba(255, 255, 255, 0.75);
  transition: color 150ms ease-out;
}
.vm-footer-some a:hover { color: var(--vm-accent-cool, #73C1BD); }
.vm-footer-reviews {
  margin-top: 12px;
  font-size: var(--vm-fs-13, 0.8125rem);
  color: rgba(255, 255, 255, 0.75);
}
.vm-footer-reviews a { color: inherit; text-decoration: underline; }
.vm-footer-reviews a:hover { color: var(--vm-accent-cool, #73C1BD); }

/* Uutiskirje-GF tummassa footerissa */
.vm-footer-news-gf .gform_wrapper { margin: 0; }
.vm-footer-news-gf .gfield_label { display: none; }
.vm-footer-news-gf .gform_wrapper form {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.vm-footer-news-gf .gform_body { flex: 1; }
.vm-footer-news-gf .gform_wrapper input[type="email"],
.vm-footer-news-gf .gform_wrapper input[type="text"] {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 12px 14px;
  font-size: var(--vm-fs-14, 0.875rem);
}
.vm-footer-news-gf .gform_wrapper input::placeholder { color: rgba(255, 255, 255, 0.5); }
.vm-footer-news-gf .gform_footer { margin: 0; padding: 0; }
.vm-footer-news-gf .gform_wrapper .gform_button,
.vm-footer-news-gf .gform_wrapper.gravity-theme .gform_button,
.vm-footer-news-gf .gform_wrapper button.gform_button {
  background: var(--vm-brand, #2D5C87) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 12px 20px !important;
  font-weight: 700 !important;
  font-size: var(--vm-fs-14, 0.875rem) !important;
  cursor: pointer;
  white-space: nowrap;
}
.vm-footer-news-gf .gform_wrapper .gform_button:hover { background: var(--vm-accent-cool, #73C1BD) !important; color: var(--vm-brand-deep, #0d2b3c) !important; }
.vm-footer-news-gf .gform_validation_errors,
.vm-footer-news-gf .gfield_validation_message { color: #ffb4a0; font-size: var(--vm-fs-12, 0.75rem); }
.vm-footer-news-gf .gform_confirmation_message { color: var(--vm-accent-cool, #73C1BD); font-weight: 600; }