/*
Theme Name: Spectra One child
Theme URI: https://brainstormforce.com/
Author: Brainstorm Force
Author URI: https://brainstormforce.com/
Description: Spectra One is a beautiful and modern WordPress theme built with the Full Site Editing (FSE) feature. It's a versatile theme that can be used for blogs, portfolios, businesses, and more. Spectra One comes with a sleek and professional design that will make your website stand out from the crowd.
Requires at least: 6.0
Tested up to: 6.4.3
Requires PHP: 5.7
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: spectra-one
Text Domain: spectra-one-child
Tags: blog, full-site-editing, full-width-template, rtl-language-support, theme-options, translation-ready, 
*/

/* Gridtesti css */

cont1 {
	min-width:400px;
}

.cont2 {
	background-color: rgba(255, 255, 255, 0.3) !important; /* Valkoinen, mutta 30 % läpinäkyvä */
  backdrop-filter: blur(10px); /* 10px sumeus */
  -webkit-backdrop-filter: blur(10px); /* Safari-tuki */
  padding-top: 1vw; /* Lisätään hieman tyhjää tilaa sisälle */
	border-radius: 10px;} /* Pyöristetyt kulmat (valinnainen) */

.cont3 {
	background-color: rgba(255, 255, 255, 0.3) !important; /* Valkoinen, mutta 30 % läpinäkyvä */
  backdrop-filter: blur(10px); /* 10px sumeus */
  -webkit-backdrop-filter: blur(10px); /* Safari-tuki */
  padding: 20px; /* Lisätään hieman tyhjää tilaa sisälle */
	border-radius: 10px;} /* Pyöristetyt kulmat (valinnainen) */

.img-cont {
	min-width:20vw !important;
	height:100px;
}
.blog-content {
	min-width:20vw;
}
.cont4 {
	min-width: 10vw;
	height: 180px;
	background-color: rgba(255, 255, 255, 0.3) !important; /* Valkoinen, mutta 30 % läpinäkyvä */
  backdrop-filter: blur(10px); /* 10px sumeus */
  -webkit-backdrop-filter: blur(10px); /* Safari-tuki */
  padding: 20px; /* Lisätään hieman tyhjää tilaa sisälle */
	border-radius: 10px;} /* Pyöristetyt kulmat (valinnainen) */
}
@ media (max-width:769px) {
	.main-post-cont {
		height: 200px;
	}
}
@media (max-width:769px) {
	.date-text {
		font-size: 2em !important;
	}
}
@media (max-width: 769px) {
	.post-img {
		height: 300px !important;
	}
}
.latest-post-date {
    display: flex;
    flex-direction: column; /* Asettaa elementit pystysuuntaiseksi */
    align-items: center; /* Keskittää sisällön vaakasuunnassa */
    margin-bottom: 10px;
	line-height: 1;
}

.latest-post-day {
    font-size: 5em;
    font-weight: 500;
    color: #000000;
}

.latest-post-month {
    font-size: 2em;
	font-weight: 200;
    color: #000000;
    text-transform: lowercase;
}

@media (max-width:769px){
	.latest-post-day {
		font-size: 3rem;
		font-weight: bold;
	}
}
@media (max-width:769px) {
	.latest-post-month {
		font-size: 1rem;
		font-weight:300;
	}
}
@media (max-width:769px){
.date {
	padding-left: 100px;
	padding-right: 100px;
}
}
/*Grid testi css päättyy */

/* Pääkontainerin grid-asettelu */
.custom-post-card {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
    column-gap: 3rem;
    padding: 3rem;
    border-radius: 8px;
    background-color: #ffffff;
	width:1500px;
	
	
}

/* Kuva child-kontaineri */
.post-thumbnail-container {
    grid-column: 1 / 3; /* Sarakkeet 1-3 */
    grid-row: 1 / 3;    /* Rivien 1-3 */
    width: 100%;
    height: 800px;
    position: relative; /* Tämä varmistaa, että kuva pysyy osana grid-asettelua */
	padding: 4vw;
}

/* Päivämäärän child-kontaineri */
.post-date-container {
    grid-column: 2 / 4; /* Asetetaan grid-sarakkeet */
    grid-row: 1 / 2;    /* Asetetaan grid-rivi */
    position: absolute; /* Sijoitetaan kuvan päälle */
    top: 1rem;          /* Etäisyys yläreunasta */
    left: 1rem;         /* Etäisyys vasemmasta reunasta */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.3); /* Valkoinen, mutta 30 % läpinäkyvä */
    backdrop-filter: blur(10px); /* 10px sumeus */
    -webkit-backdrop-filter: blur(10px); /* Safari-tuki */
    padding: 2.5rem 1rem;
    border-radius: 10px;
	margin-left:10em;
	margin-top:50px;
}

/* Sisältö child-kontaineri */
.post-content-container {
    grid-column: 3 / 5; /* Sarakkeet 3-5 */
    grid-row: 1 / 3;    /* Rivien 1-3 */
    display: flex;
    flex-direction: column;
    justify-content: top;
    padding: 5rem;
	margin-right:-3vw;
	
}

/* Otsikko ja excerpt */
.post-title {
    margin: 0;
    font-size: 3.5vw;
}

.post-excerpt {
    margin: 0.5vw 0;
}

/* Lue lisää -painike */
.post-button {
    padding: 1.5rem 1rem;
    background-color: #f9f9f9;
    color: #000000;
    text-decoration: none;
    border-radius: 50px;
    text-align: center;
    margin-top: 10px;
	width:30%;
}

.post-thumbnail-container img {
    width: 100%;
    height: 700px;
    object-fit: cover;
    border-radius: 50px; /* Tämä pyöristää itse kuvan */
}

/* Päivän tyylit */
.post-day {
    color: #000000;
    font-size: 4em;
    font-weight: bold;
	
	
}

/* Kuukauden tyylit */
.post-month {
    color: #000000;
    font-size: 1.5em;
	font-weight: 200;
}
@media (max-width: 767px) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr; /* Vain yksi sarake mobiilissa */
    grid-template-rows: auto;   /* Rivin korkeus mukautuu sisällön mukaan */
    gap: 10px;                  /* Väli elementtien välillä */
  }
}