/* --- PERUSASETUKSET --- */
:root {
  --primary-color: #d50032; /* Esim. oranssi huomioväri */
  --font-main: 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-main); color: var(--text-main); line-height: 1.6; }
a { text-decoration: none; color: inherit; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section-title { text-align: center; font-size: 2rem; margin-bottom: 2rem; text-transform: uppercase; }

/* --- PAINIKKEET --- */
.btn { display: inline-block; padding: 10px 20px; font-weight: bold; border-radius: 4px; transition: background 0.3s; }
.btn-primary { background: var(--primary-color); color: var(--text-light); }
.btn-primary:hover { background: #ea580c; }
.btn-secondary { background: var(--dark-bg); color: var(--text-light); }
.btn-large { padding: 15px 30px; font-size: 1.2rem; background: var(--primary-color); color: var(--text-light); }
/* --- seuraavaOttelu-OSIO --- */

.seuraavaOttelu {
  position: relative; /* Tärkeä, jotta video ja overlay pysyvät osion sisällä */
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-light);
  
  /* Taustakuvan asetukset siltä varalta, että videota ei ole */
  background-size: cover;
  background-position: center;
  overflow: hidden; /* Piilottaa videon yli menevät osat */
}

@media (min-width: 768px) { 
  .seuraavaOttelu { min-height: 100vh; } 
}

/* Videon asettelu taustalle */
.seuraavaOttelu-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover; /* Tekee videosta samanlaisen kuin background-size: cover */
  z-index: 0;
}

/* Tumma kalvo kuvan/videon päälle */
.seuraavaOttelu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85); /* 0.5 on läpinäkyvyys. Nosta arvoa (esim 0.7) jos teksti ei erotu */
  z-index: 1;
}

/* Sisällön nostaminen kalvon ja videon päälle */
.seuraavaOttelu-content {
  position: relative;
  z-index: 2;
  padding: 0 20px;
}

.seuraavaOttelu-subtitle { 
  font-size: 1.2rem; 
  margin-bottom: 10px; 
  color: var(--primary-color); 
  font-weight: bold; 
}

.seuraavaOttelu-title { 
  font-size: 3rem; 
  line-height: 1.2; 
  margin-bottom: 30px; 
}

@media (min-width: 768px) { 
  .seuraavaOttelu-title { font-size: 5rem; } 
}

/* --- UUTISET --- */
.news-section { padding: 80px 0; background: var(--light-bg); }
.news-grid { display: grid; grid-template-columns: 1fr; gap: 30px; margin-bottom: 40px; }
@media (min-width: 768px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }
.news-card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.news-image { height: 200px; background-size: cover; background-position: center; }
.news-content { padding: 20px; }
.news-date { font-size: 0.85rem; color: #6b7280; }
.news-content h3 { margin: 10px 0; font-size: 1.2rem; }
.read-more { color: var(--primary-color); font-weight: bold; }
.news-action { text-align: center; }

/* --- SPONSORIT --- */
.sponsors-section { padding: 60px 0; background: #fff; }
.sponsors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: center;
}
@media (min-width: 768px) { .sponsors-grid { grid-template-columns: repeat(4, 1fr); } }
.sponsor-logo img {
  width: 100%;
  max-width: 200px;
  display: block;
  margin: 0 auto;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.3s ease;
}
.sponsor-logo:hover img { filter: grayscale(0%); opacity: 1; }

/* --- FOOTER --- */
.site-footer { background: var(--dark-bg); color: var(--text-light); padding: 60px 0 20px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 40px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-col h3, .footer-col h4 { margin-bottom: 15px; color: var(--primary-color); }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid #374151; font-size: 0.9rem; color: #9ca3af; }