/*body {
    font-family: PT Sans, Arial, Helvetica, sans-serif; 
    font-size: 16px;
    margin: 0;
    padding: 0;
    background: #fff;
    color: #000;
}*/

.breadcrumb {
    background-color: white !important;
}

/* Header-osio */
.custom-header {
    position: relative; /* Asettaa suhteellisen position */
    min-height: 300px; /* Headerin minimikorkeus */
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Asettaa elementit pystysuoraan */
    align-items: flex-start; /* Kohdistaa sisällön vasemmalle */
    justify-content: flex-start; /* Kohdistaa sisällön yläreunaan */
    background-size: cover; /* Taustakuva peittää koko alueen */
    background-position: center; /* Keskittää taustakuvan */
    background-repeat: no-repeat; /* Estää kuvan toiston */
    color: #ffffff; /* Headerin tekstin väri */
    background-image: url('/TimePub/ResourcesRT/pics/headerimage.png'); /* Ei originaali kuva, leiskasta otettu  */
    /* padding: 90px 160px 100px 100px; /* Sisätilat, lisää vasemman reunan tilaa */
    box-shadow: 0px 10px 12px 0px #a1a1a1;
    margin-top: 62px;
}

.custom-header h1 {
    font-size: calc(1.2rem + 1vw); /* Responsiivinen fonttikoko */
    font-weight: bold; /* Lihavoitu otsikko */
    margin-bottom: 10px; /* Väli otsikon ja seuraavan elementin välillä */
    text-align: left; /* Varmistaa tekstin tasaamisen vasemmalle */
    text-shadow: 0px 0px 4px #000000;
}

.custom-header p {
    font-size: calc(1rem + 0.3vw); /* Responsiivinen tekstin koko */
    margin-bottom: 5px; /* Väli kappaleen ja seuraavan elementin välillä */
    text-align: left; /* Varmistaa tekstin tasaamisen vasemmalle */
    text-shadow: 0px 0px 4px #000000;
}

.custom-header a {
    color: #f0f0f6; /* Linkin väri headerissa */
    font-weight: bold; /* Korostettu linkkiteksti */
    text-decoration: none; /* Poistaa alleviivauksen */
}

.custom-header a:hover {
    text-decoration: underline; /* Alleviivaa linkin hoverilla */
}

/* Header loppuu */

/* Kirjojen kortit alkaa*/

/* Tab-konteinerin tyylit */
.tab-container {
    max-width: 90%; /* Maksimileveys sisällölle */
    margin: 0 auto; /* Keskittää sisällön vaakasuunnassa */
}

/* Tab-palkin sisältö */
.tab-content {
    background-color: #ffffff !important; /* Valkoinen tausta */
    border: 1px solid #ddd !important; /* Ohut harmaa reunaviiva */
    border-top: none !important; /* Poistaa ylimmän reunaviivan */
    padding: 20px !important; /* Sisätilaa sisältöön */
    margin: 0 auto; /* Keskittää tab-sisällön */
    max-width: 100% !important; /* Rajoittaa tab-sisällön leveys */
    border-radius: 0 0 5px 5px; /* Pyöristää tabin alakulmat */
    overflow: hidden !important; /* Estää sisällön ylivuodon */
}

/* Aktiivinen tab */
.nav-tabs .nav-link.active {
    background-color: #004b87 !important; /* Sininen tausta */
    color: #fff !important; /* Valkoinen teksti */
    border-color: #007bff #007bff #fff; /* Rajaa alaosa valkoiseksi */
    font-weight: bold; /* Korostettu fontti */
}

/* Linkkivärit tabeissa */
.nav-tabs .nav-link {
    color: #173E80 !important; /* Normaalien linkkien väri */
    border: none; /* Poistaa ylimääräiset reunaviivat */
}

/* Iso osta -nappi */
.orderShelveLinkContainer {
	margin: 0;
}
.orderShelveLink {
	margin-top: auto; /* Työntää napin kortin alaosaan */
	background-color: #173E80 !important; /* Sininen tausta */
	color: white; /* Valkoinen teksti */
	border: none !important;
	padding: 8px 12px !important;
	font-size: clamp(14px, 1vw, 18px) !important; /* Responsiivinen fonttikoko */
	border-radius: 5px !important;
	text-align: center;
	transition: background-color 0.3s ease, transform 0.2s ease !important;
	cursor: pointer;
}

.orderShelveLink:hover {
	background-color: #003a6b !important; /* Tummempi hover-väri */
	transform: scale(1.05); /* Pieni suurennos hoverilla */
}

.orderShelveLink:active {
	background-color: #002542 !important; /* Syvempi väri klikkauksen aikana */
	transform: scale(0.95); /* Pieni kutistuminen klikkauksen aikana */
}

/* Nappi */
.buy-button {
	margin-top: auto; /* Työntää napin kortin alaosaan */
	background-color: #173E80 !important; /* Sininen tausta */
	color: white; /* Valkoinen teksti */
	border: none !important;
	padding: 8px 12px !important;
	font-size: clamp(14px, 1vw, 18px) !important; /* Responsiivinen fonttikoko */
	border-radius: 5px !important;
	text-align: center;
	transition: background-color 0.3s ease, transform 0.2s ease !important;
	cursor: pointer;
}

    .buy-button:hover {
        background-color: #003a6b !important; /* Tummempi hover-väri */
        transform: scale(1.05); /* Pieni suurennos hoverilla */
    }

    .buy-button:active {
        background-color: #002542 !important; /* Syvempi väri klikkauksen aikana */
        transform: scale(0.95); /* Pieni kutistuminen klikkauksen aikana */
    }

.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Jakaa sisällön ylä- ja alaosaan */
    height: 100%; /* Varmistaa, että kortit venyvät täyteen korkeuteen */
    max-height: 500px; /* Enimmäiskorkeus kortille */
    border: none !important;
    padding: 0 !important;
    margin-bottom: 20px;
}

.card-body {
    display: flex;
    flex-direction: column; /* Sisällöt pystysuuntaan */
    justify-content: space-between; /* Jakaa sisällön tasaisesti */
    flex-grow: 1; /* Täyttää jäljellä olevan tilan */
    padding: 10px;
    text-align: left;
}

.image-container {
    position: relative;
    width: 100%;
    padding-top: 133.33%; /* 3:4 kuvasuhde (4/3 * 100%) */
    overflow: hidden;
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-img-top {
    width: 100%; /* Kuvan leveys suhteessa korttiin */
    height: auto; /* Säilyttää kuvasuhteen */
    max-height: 200px; /* Asetetaan maksimi korkeus */
    object-fit: cover; /* Peittää kortin alueen leikkaamatta */
    /* background-color: #f0f0f0;  Placeholderille taustaväri */
    /* border: 1px solid #ddd;  Placeholderille kevyt reunus */
    border-radius: 10px 10px !important; /* Pyöristys ylä- ja alareunaan */
}

.card-body h5 {
    margin: 0 0 5px 0 !important; /* Väli otsikon ja seuraavan elementin välillä */
    font-size: clamp(14px, 1.2vw, 16px) !important; /* Responsiivinen fonttikoko (min 14px, max 16ppx) */
    font-weight: bold !important; /* Lihavoitu teksti */
    color: #000 !important; /* Musta väri */
}

.card-body p {
    font-size: clamp(12px, 1vw, 14px); /* Responsiivinen fonttikoko (min 12px, max 14px) */
    margin: 0 0 5px 0; /* Väli rivien välillä */
    line-height: 1.2; /* Parantaa luettavuutta */
    color: #000; /* Musta väri */
}

.book-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Väli korttien välillä */
    align-items: stretch; /* Pakottaa kortit saman korkuisiksi */
}

/* Aseta korttien leveys ja käytä flex: 1 1 200px; jotta kortit kasvavat tasaisesti */
.book-row .card {
    flex: 1 1 200px; /* Voit säätää minimileveyttä tarpeen mukaan */
    display: flex;
    flex-direction: column;
    height: 100%; /* Täyttää säilön korkeuden */
}

.book-release-date {
    font-size: clamp(12px, 0.9vw, 14px); /* Responsiivinen fonttikoko (min 12px, max 14px) */
    font-weight: 300; /* Kevyt fontti */
    color: #6c757d; /* Haaleampi väri */
}

/* Responsiivisuus */
@media (max-width: 1600px) {
    .book-row {
        gap: 15px; /* Pienempi väli korteille, jos ruudun leveys on alle 1600px */
    }

    .card {
        max-height: none; /* Poistaa maksimikorkeuden */
    }

    .card-body {
        padding: 8px; /* Vähemmän sisätilaa kortin sisällölle */
    }

    .buy-button {
        font-size: 14px; /* Pienempi nappiteksti */
        padding: 6px 10px; /* Pienempi nappi */
    }
}

/* Yli 1600px */
@media (min-width: 1601px) {
    .book-row {
        gap: 30px; /* Lisää korttien väliä suurilla näytöillä */
    }

    .card {
        max-height: 600px; /* Kasvata korttien maksimikorkeutta */
    }

    .card-body {
        padding: 15px; /* Lisää sisätilaa korteille */
    }

    .buy-button {
        font-size: 18px; /* Suurempi nappiteksti */
        padding: 10px 15px; /* Suurempi nappi */
    }
}

@media (max-width: 576px) {
    .card-body {
        align-items: center !important; /* Sisällöt keskelle */
        text-align: center; /* Tekstit keskelle */
    }

    .card {
        display: flex;
        flex-direction: column; /* Pinoaa elementit pystysuunnassa */
        align-items: center !important; /* Keskittää kaikki kortin sisällöt */
        text-align: center !important; /* Keskittää tekstin */
    }

    .card-img-top {
        width: 100% !important; /* Pienennä kuvan leveys */
        margin: 0 auto; /* Keskittää kuvan */
    }

    .card-body {
        display: flex;
        flex-direction: column; /* Pinoaa elementit pystysuunnassa */
        padding-top: 10px !important; /* Väli kuvan ja tekstin välillä */
        justify-content: center !important; /* Keskittää sisällöt pystysuunnassa */
        width: 100% !important; /* Täyttää kortin leveyden */
        padding-top: 10px !important; /* Lisää väliä kuvan ja tekstin väliin */
    }

        .card-body h5,
        .card-body p {
            text-align: center !important; /* Keskittää otsikon ja tekstin */
            margin: 0 auto;
        }

    .buy-button {
        margin-top: 10px; /* Lisää väliä painikkeen yläpuolelle */
        display: block;
        align-self: center; /* Kohdistaa napin keskelle */
    }
}


/* FOOTER ALKAA */

.footer-container {
display: flex;
justify-content: space-between; /* Jaa sarakkeet tasaisesti */
align-items: flex-start; /* Aseta kaikki sarakkeet yläreunaan */
margin: 0 auto; /* Keskittää footerin */
padding: 20px; /* Tyhjää tilaa sisällön reunoille */
background-color: #173E80; /* Taustaväri */
color: white; /* Tekstin väri */
flex-wrap: nowrap; /* Estää rivittämisen */
gap: 40px !important; /* Lisää väliä sarakkeiden väliin */
}

.wp-image-501 {
max-width: 100%; /* Kuva täyttää maksimissaan vanhempielementin leveyden */
height: auto; /* Säilyttää kuvasuhteen */
}

.footer-container p {
font-size: 1rem !important; /* Asetetaan fonttikoko */
margin: 0; /* Poistetaan mahdolliset ylimääräiset marginaalit */
line-height: 1.5; /* Lisätään riviväli, jos tarpeen */
}


/* Lisätään tarkennuksia pienemmille ruutukoille */
@media (max-width: 768px) {
.wp-image-501 {
    width: 100%; /* Kuva täyttää vanhempielementin koko leveyden */

    }
}

.wp-block-spacer {
    height: 28px !important;
}

.wp-block-columns {
    display: flex;
    flex-wrap: nowrap; /* Älä salli rivinvaihtoa desktop-näkymässä */
    gap: 20px; /* Väli sarakkeiden välille */
    justify-content: space-between; /* Jaa sarakkeet tasaisesti */
    width: 100%; /* Varmistaa, että sarakkeet täyttävät koko footerin leveyden */
}

.wp-block-column {
    flex: 0 0 auto; /* Jokainen sarake vie noin kolmasosan tilasta */
    max-width: 100%; /* Maksimileveys kullekin sarakkeelle */
    text-align: left; /* Teksti vasemmalle desktopissa */

}

.footer-heading {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #fff;
}

.footer-container p, .footer-container a {
    margin: 5px 0;
    line-height: 1.4;
    color: #fff;
    text-decoration: none;
}

    .footer-container a:hover {
        text-decoration: none;
        color: #D92B2B;
    }

.footer-column {
    flex: 1; /* Jokainen sarake ottaa yhtä paljon tilaa */
    max-width: 33%; /* Estää sarakkeen leviämisen liikaa */
    padding: 30px; /* Lisää väliä */
}

.footer-column:not(:first-child) {
    margin-left: 40px; /* Lisää marginaali ensimmäisen sarakkeen oikealle puolelle */
}


.footer-column h3 {
    margin-bottom: 10px; /* Lisää otsikon ja sisällön väliä */
}

.footer-column ul {
    list-style-type: none; /* Poistaa listapallot */
    padding: 0;
    margin: 0;
}

@media (min-width: 1440px) {
    .wp-block-columns {
        flex-wrap: wrap; /* Salli rivinvaihto suuremmilla näytöillä */
        justify-content: space-between; /* Jaa sarakkeet tasaisesti */
        padding-left: 300px !important;
        padding-right: 300px !important;
    }

    .wp-block-column {
        flex: 1 1 30%; /* Kaksi saraketta vierekkäin suuremmilla näytöillä */
        max-width: 30%;
    }
}


@media (max-width: 1024px) {
    .wp-block-columns {
        flex-wrap: wrap; /* Salli rivinvaihto pienemmillä näytöillä */
        justify-content: space-between; /* Jaa sarakkeet tasaisesti */

    }

    .wp-block-column {
        flex: 1 1 30%; /* Kaksi saraketta vierekkäin pienemmällä näytöllä */
        max-width: 30%;
    }
}

@media (max-width: 940px) {
    .footer-container {
        flex-wrap: wrap; /* Salli sarakkeiden siirtyminen seuraavalle riville */
        justify-content: center; /* Keskittää sarakkeet */
    }

    .footer-column {
        flex: 0 0 100%; /* Sarake vie koko rivin */
        text-align: center; /* Keskittää tekstin */
        margin-bottom: 20px; /* Lisää väliä sarakkeiden väliin pystysuunnassa */
    }

        .footer-column:last-child {
            margin-top: 20px; /* Lisää väliä viimeisen sarakkeen yläpuolelle */
        }
}

@media (max-width: 768px) {
    .wp-block-columns {
        flex-wrap: wrap; /* Salli rivinvaihto pienemmillä näytöillä */
        justify-content: space-between; /* Jaa sarakkeet tasaisesti */
    }

    .wp-block-column {
        flex: 1 1 50%; /* Kaksi saraketta vierekkäin pienemmällä näytöllä */
        max-width: 50%;
        margin-left: 20px !important;
    }
}

@media (max-width: 425px) {
    .footer-container {
        flex-direction: column; /* Pinoa sarakkeet päällekkäin mobiilissa */
        align-items: center; /* Keskitä sisältö mobiilissa */
    }

    .wp-block-column {
        flex: 1 1 100%; /* Yksi sarake per rivi mobiilissa */
        max-width: 100%;
        text-align: left; /* Keskitetään teksti mobiilissa */
    }

}

/* Pienemmät näytöt (esim. mobiilit) */
@media (max-width: 768px) {
    .card-img-top {
        /* max-height: 200px; /* Pienemmät kuvat mobiilissa */
        object-fit: contain; /* Säilyttää kuvasuhteen */
    }

    .card-body h5 {
        font-size: 14px;
    }

    .card-body p {
        font-size: 12px;
    }
}

/* Suuremmat näytöt */
@media (min-width: 769px) {
    .card-img-top {
        max-height: 300px; /* Suuremmat kuvat tableteilla ja pöytäkoneilla */
        object-fit: cover;
    }

    .card-body h5 {
        font-size: 16px;
    }

    .card-body p {
        font-size: 14px;
    }
}

@media (min-width: 1600px) {
    .book-row.row-cols-xl-4 .col {
        flex: 0 0 auto;
        width: 25%; /* 4 saraketta per rivi */
    }

    .card-img-top {
        max-height: 300px; /* Kiinnitetty enimmäiskorkeus */
        object-fit: contain; /* Säilyttää kuvasuhteen */

    }

    .card-body {
        display: flex !important;
        align-items: center !important;
        text-align: center !important;
     
    }

    .card-body h5 {
        font-size: 20px;
    }

    .card-body p {
        font-size: 18px;
    }

    .book-row {
        margin-bottom: 20px;
    }
}