/* Yleiset tyylit */
body {
    background-color: #000; /* Tausta mustaksi */
    color: #fff; /* Teksti valkoiseksi */
}

/* Bootstrapin .text-muted on suunniteltu vaalealle taustalle (tummanharmaa),
   joten mustalla taustalla se on lukukelvoton. Vaalennetaan se kerran tässä,
   niin koko sivuston himmeät tekstit pysyvät luettavina. */
.text-muted {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Banneri */
.banner {
    height: 400px; /* Alkuperäinen korkeus desktopilla */
    background-size: cover;
    background-position: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Tekstin varjo */
}

@media (max-width: 768px) {
    .banner {
        height: 250px; /* Rajoitettu korkeus mobiilissa */
    }
}

/* Banneriteksti: otsikko ja tumma tausta */
.banner-text {
    background-color: rgba(0, 0, 0, 0.); /* Tumma tausta */
    padding: 20px 80px; /* Lisää marginaalia ympärille */
    border-radius: 8px; /* Pehmeät kulmat */
    display: inline-block; /* Mukautuu tekstin kokoon */
}

h1 {
  font-size: 3rem;
  font-weight: 700;
  color: orange;
  animation: fadeOpacity 5s infinite;
}

.banner-title {
    font-family: 'Trade Gothic', sans-serif; /* Tai vastaava */
    font-size: 4rem; /* Iso fontti */
    font-weight: 900; /* Maksimaalinen paksuus */
    letter-spacing: 3px; /* Lisää väliä kirjainten välille */
    transform: scaleX(1.2); /* Venytä fonttia vaakasuunnassa */
    text-transform: uppercase; /* Isot kirjaimet */
    color: #fff; /* Valkoinen teksti */
    opacity: 0.95;
    animation: fadeOpacity 25s infinite;
}

/* Mobiilit (pienet näytöt) */
@media (max-width: 767.98px) {
  h1 {
    font-size: 2rem;
    line-height: 1.2; /* Riviväli pienemmäksi */
    word-break: break-word; /* Pakota rivinvaihto tarvittaessa */
  }
  .banner-title {
    font-size: 2.2rem;
    letter-spacing: 1px;
    transform: scaleX(1.1); /* Hieman vähemmän venytystä */
    line-height: 1.2;
    word-break: break-word;
  }
}

@keyframes fadeOpacity {
  0%   { opacity: 0.8; }
  85%  { opacity: 0.7; }
  90%  { opacity: 0.8; }
  95%  { opacity: 0.6; }
  100% { opacity: 0.9; }
}

@media (max-width: 768px) {
    .banner-title {
        font-size: 2.5rem; /* Pienempi fontti mobiilissa */
    }
}

/* Suoratoistopalvelulinkit  */
.streaming-bar {
    background-color: #212529; /* Tummanharmaa tausta */
    padding: 35px 0; /* Ylä- ja alatyhjennys */
}

.news-bar {
    background-color: #822722; /* Punainen tausta */
    padding: 15px 0; /* Ylä- ja alatyhjennys */
    animation: fadeOpacity 30s infinite;
}

.stream-icon {
    height: 40px; /* Kuvakkeiden koko */
    transition: transform 0.2s ease-in-out;
}

.stream-icon:hover {
    transform: scale(1.1); /* Suurentaa ikoneja hoverissa */
}


/* Galleriakuvat: yhtenäinen koko ja rajaus ylhäältä */
.gallery-img {
    width: 100%; /* Skaalautuu gridin mukaan */
    height: 350px; /* Asetetaan kiinteä korkeus */
    object-fit: cover; /* Rajaa kuva */
    object-position: top; /* Keskittää kuvan ylös */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
}

/* Modal-kuvan keskittäminen */
.modal-body img {
    max-height: 120vh;
    width: auto;
    margin: 0 auto;
}

/* Modal-tausta */
.modal-content {
    background-color: black;
    border: none;
}