/* VM Sport — Kampanjakortti. Lähde: pages.css .vm-banner-card. */
.vm-banner {
  max-width: var(--vm-container, 1280px);
  margin: 40px auto 24px;
  padding: 0 24px;
}
.vm-banner-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  background: var(--vm-brand-deep, #0d2b3c);
  color: #fff;
  min-height: 260px;
}
.vm-banner-card.flip { grid-template-columns: 1fr 1fr; }
.vm-banner-card.flip .vm-banner-body { order: 2; }
.vm-banner-card.flip .vm-banner-img { order: 1; }
.vm-banner-body { padding: 40px; }
.vm-banner-body .eyebrow { color: var(--vm-accent-cool, #73C1BD); display: block; margin-bottom: 8px; }
.vm-banner-body h2 {
  color: #fff;
  margin: 0 0 12px;
  font-family: "parabolica", "Big Shoulders Display", "Saira Condensed", Impact, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.875rem, 3vw, 3rem);
  text-transform: uppercase;
  letter-spacing: var(--vm-tracking-tight, -0.01em);
}
.vm-banner-body p {
  color: rgba(255,255,255,0.9);
  font-size: 1rem;
  max-width: 48ch;
  margin: 0 0 20px;
  line-height: 1.55;
}
.vm-banner-img {
  height: 100%;
  min-height: 260px;
  background-size: cover;
  background-position: center;
}
.vm-banner-card.warm { background: linear-gradient(135deg, #b46735 0%, #7a3e1a 100%); }
.vm-banner-card.sale { background: linear-gradient(135deg, var(--vm-sale, #b72a00) 0%, #7e1a00 100%); }
.vm-banner-pct {
  font-family: "parabolica", "Big Shoulders Display", "Saira Condensed", Impact, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(5rem, 12vw, 160px);
  line-height: 0.85;
  color: rgba(255,255,255,0.95);
  letter-spacing: -0.03em;
  text-shadow: 0 4px 30px rgba(0,0,0,0.3);
}
.vm-banner-pct-row {
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 260px;
  background: rgba(0,0,0,0.15);
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
/* Hours block */
/* Store cards on contact page */

/* Teemalisät */
.vm-banner-cta {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 20px; margin-top: 6px;
	font-family: var(--vm-font-body, "Work Sans", sans-serif);
	font-weight: 700; font-size: 0.875rem; line-height: 1;
	text-decoration: none; border-radius: var(--vm-radius-2, 4px);
	border: 1px solid rgba(255,255,255,0.6);
	color: #fff; background: transparent;
	transition: all 120ms ease-out; align-self: flex-start;
}
.vm-banner-cta:hover { background: #fff; color: var(--vm-brand-deep, #0d2b3c); border-color: #fff; }

/* ---------- Mobiili: pinoa palstat, kuva/prosentti ylös ---------- */
@media (max-width: 991.98px) {
	.vm-banner { padding: 0 16px; }
	.vm-banner-card,
	.vm-banner-card.flip {
		grid-template-columns: 1fr;
	}
	/* Kuva/prosentti aina ylimmäksi pinossa (myös flipattuna) */
	.vm-banner-card .vm-banner-img,
	.vm-banner-card .vm-banner-pct-row {
		order: -1;
		min-height: 200px;
	}
	.vm-banner-body {
		padding: 24px 18px 28px;
	}
	.vm-banner-body h2 {
		font-size: 1.6rem;
		max-width: none;
	}
	.vm-banner-pct {
		font-size: 4.5rem;
	}
}