/* ==============================
   MOBILE LAYOUT
==============================*/

/* ==============================
   DESKTOP - PIILOTA MOBILE ELEMENTIT
==============================*/
@media screen and (min-width: 1025px) {
	.mobile-nav,
	.mobile-menu-overlay,
	.menu-backdrop,
	.mobile-header-image {
		display: none !important;
		}
}

@media screen and (max-width: 1024px)  {
	.menu-close-btn {
		position: absolute;
		top: 1rem;
		right: 1rem;
		background: none;
		border: none;
		color: #fff;
		font-size: 2rem;
		cursor: pointer;
		padding: 0.5rem;
		z-index: 201;
		transition: color 0.3s ease;
		}

	.menu-close-btn:hover {
		color: #fbbf24;
		}
		 
	/* ===== PERUSASETUKSET ===== */
	body {
		overflow-x: hidden;
		}

	.container {
		flex-direction: column;
		}

	/* ===== VASEN PANEELI POIS ===== */
	.left-panel,
	.left-content,
	.navigation {
		display: none;
		}
		 
	/* ===== OIKEA PANEELI KOKO LEVEYS ===== */
	.right-panel {
		margin-left: 0;
		width: 100%;
		padding-bottom: 80px;
		background-size: auto 100%;
		background-position: center center;
		background-repeat: no-repeat;
		min-height: 100vh;
		}

	.content {
		padding: 1.5rem;
		}
		
	/* ===== ETUSIVUN ASETTELU ===== */		
	.etusivu {
		grid-template-columns: 1fr;
		grid-template-areas:
			'header'
			"intro"
			"widget"
			"logos";
		}
	.widget { justify-self: center;}
	

	/* ===== GALLERIAT ===== */		
	.galleria {
		flex-direction: column;
		align-items: center;
	}
	
	.kuva {
		width: 90%;
		height: auto !important;
	}
	
	.kuva img {
		height: auto;
	}
				 
	/* ==============================
	KIELET ALLEKKAIN
	==============================*/
	.kielet {
		flex-direction: column;
		gap: 2rem;
		}

	.kieli {
		width: 100%;
		}
		 
	/* ==============================
	MOBILE NAVIGATION (HAMBURGER)
	==============================*/
	.mobile-nav {
		position: fixed;
		bottom: 0px;
		left: 0;
		right: 0;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: rgba(0, 0, 0, 0.6);
		backdrop-filter: blur(10px);
		padding: 0.2rem 1rem;
		border-top: 1px solid #78bbf5;
		}

	.hamburger-btn {
		background: none;
		border: none;
		color: #fff;
		font-size: 1.5rem;
		cursor: pointer;
		padding: 0.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		}
		 
	.mobile-icons {
		display: flex;
		gap: 0.5rem;
		align-items: center;
		margin-right:40px;
		}

	.mobile-icons a,
	.mobile-icons i {
		color: #7cbbd9;
		font-size: 1.3rem;
		text-decoration: none;
		padding: 0.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		}

	.mobile-icons i:hover {
		color: white;
		}
		 
	/* ==============================
	MOBILE MENU OVERLAY
	==============================*/
	.mobile-menu-overlay {
		position: fixed;
		top: 0;
		left: -80%;
		width: 80%;
		height: 100vh;
		background: rgba(15, 20, 25, 0.8);
		backdrop-filter: blur(15px);
		z-index: 200;
		transition: left 0.3s ease;
		overflow-y: auto;
		border-right: 2px solid #78bbf5;
		}

	.mobile-menu-overlay.active {
		left: 0;
		}

	.menu-backdrop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
		z-index: 199;
		display: none;
		}
		 
	.menu-backdrop.active {
		display: block;
		}

	.mobile-menu-content {
		padding: 2rem 1rem;
		}

	.mobile-menu-item {
		margin-bottom: 1rem;
		}

	.mobile-menu-link {
		display: block;
		color: #fff;
		font-family: "Saira Semi Condensed", sans-serif;
		font-size: 1.3rem;
		font-weight: 500;
		text-transform: uppercase;
		text-decoration: none;
		padding: 0.8rem 1rem;
		transition: all 0.3s ease;
		border-left: 3px solid transparent;
		}
		 
	.mobile-menu-link:hover,
	.mobile-menu-link.active {
		color: #fbbf24;
		background: rgba(255, 145, 73, 0.1);
		border-left: 3px solid #FF9149;
		}

	.mobile-submenu {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
		background: rgba(255, 255, 255, 0.05);
		}

	.mobile-submenu.active {
		max-height: 500px;
		}

	.mobile-submenu-link {
		display: block;
		color: #cbd5e1;
		font-family: "Saira Semi Condensed", sans-serif;
		font-size: 1rem;
		font-weight: 400;
		text-transform: uppercase;
		text-decoration: none;
		padding: 0.6rem 1rem;
		padding-left: 2rem;
		}
		 
	.mobile-submenu-link:hover {
		color: #fbbf24;
		background: rgba(255, 145, 73, 0.1);
		}

	/* ==============================
	FOOTER
	==============================*/
	.right-footer {
		width: 100%;
		height: 60px;
		padding: 0;
		}

	.right-footer-content {
		display: none;
		}

	.social-media {
		display: none;
		}
		 
	/* ==============================
	OTSIKKOKUVA FOOTERIN YLÄPUOLELLE
	==============================*/
	.mobile-header-image {
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		height: 200px;
		background-repeat: no-repeat;
		background-position: right;
		background-size: 90%;
		z-index: 98;
		}

	/* ==============================
	TAULUKOT PÄÄLLEKÄIN
	==============================*/
	.taulukontti {
		flex-direction: column;
		gap: 1.5rem;
		}

	.tauluosio,
	.pentuetaulu	{
		width: 100%;
		}
		 
	/* Taulukoiden vieritys */
	.tietotaulu td,
	.pentuetaulu td,
	.vanhempitaulu td {
		font-size: 0.85rem;
		}

	.tilastotaulu th, td,
	.tilastonimi	{
		font-size: 0.8rem;
		}		 

	/* ==============================
	KUVAT ALLEKKAIN
	==============================*/
	.galleria {
		flex-direction: column;
		gap: 1rem;
		}

	.kuva {
		width: 100%;
		}

	.kuvaoma,
	.kuvakasvatti,
	.kuvavanhempi {
		height: 300px;
		}
		 
	/* ==============================
	VANHEMPIEN KUVAT ALLEKKAIN
	==============================*/
	.flexvanhempi {
		flex-direction: column;
		gap: 2rem;
		}

	.vanhempiruutu {
		width: 100%;
		}

	/* ==============================
	RUUDUKOT
	==============================*/
	.omaruutu {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		}

	.kasvattiruutu {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
		width: 100%;
		}
		 
	/* ==============================
	LOGOT
	==============================*/
	.logos-container {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
		gap: 1rem;
		width: 100%;
		}

	.logo-item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		}

	.partner-logo {
		width: 80%;
		max-width: 120px;
		}
		 
	/* ==============================
	BUTTONIT
	==============================*/
	.painikkeet {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
		}

	.painike {
		font-size: 0.85rem;
		}

	/* ==============================
	SUKUTAULU
	==============================*/
	.pedigree {
		font-size: 0.75rem;
		}

	.pedigree td {
		padding: 5px 3px;
		}

	.isa, .emo {
		font-size: 0.85rem !important;
		padding: 0.8rem !important;
		}
		 
	/* ==============================
	OTSIKOT
	==============================*/
	.content h1 {
		font-size: 1.8rem;
		}

	.content h2 {
		font-size: 1.3rem;
		}

	.content h3 {
		font-size: 1.3rem;
		}

	.content h4 {
		font-size: 1.1rem;
		}

	.kasvattikontti h5,
	.tabcontent h5,
	h5 {
		font-size: 1.3rem;
		}
			 
	/* ==============================
	SCROLL TO TOP
	==============================*/
	#ylos {
		bottom: 16px;
		right: 20px;
		font-size: 24px;
		z-index:100;
		}
}

/* ============================== TABLET LAYOUT (769px - 1024px) ==============================*/

@media screen and (min-width: 769px) and (max-width: 1024px) {
    
/* ==============================
PERUSASETUKSET
==============================*/
	.container {
		display: flex;
		}

/* ==============================
VASEN PANEELI NÄKYY (KAPEAMPI)
==============================*/
	.left-panel {
		position: fixed;
		left: 0;
		top: 0;
		width: 25%;
		height: 100vh;
		display: block;
		}

	.left-content {
		position: fixed;
		z-index: 3;
		top: 0;
		left: 0;
		margin: 1.5rem;
		padding: 1.5rem;
		height: auto;
		width: 20%;
		display: flex;
		background-color: black;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		}

	.logo {
		font-size: 2rem;
		margin-bottom: 0.8rem;
		}

	.tagline {
		font-size: 0.9rem;
		margin-bottom: 1.5rem;
		}

	/* DESKTOP-NAVIGAATIO POIS */
	.navigation {
		display: none;
		}

/* ==============================
OIKEA PANEELI
==============================*/
	.right-panel {
		margin-left: 25%;
		width: 75%;
		padding-bottom: 120px;
		background-size: auto 100%;
		background-position: center center;
		}

	.content {
		padding: 2rem;
		}

/* ==============================
KIELET RINNAKKAIN
==============================*/
	.kielet {
		display: flex;
		flex-direction: row;
		gap: 20px;
		}

	.kieli {
		flex: 1;
		}

/* ==============================
MOBILE NAVIGATION NÄKYY
==============================*/
	.mobile-nav {
		display: flex;
		width: 75%;
		right: 0;
		left: auto;
		}

	.mobile-menu-overlay {
		width: 60%;
		left: -60%;
		}

	.mobile-menu-overlay.active {
		left: 0;
		}

	.mobile-header-image {
		display: block;
		right: 0;
		left: 25%;
		width: 75%;
		}

/* ==============================
FOOTER
==============================*/
	.right-footer {
		width: 75%;
		right: 0;
		left: auto;
		}

	.right-footer-content {
		display: none;
		}

	.social-media {
		display: none;
		}	 
		
/* ==============================
OTSIKKOKUVA FOOTERIN YLÄPUOLELLE
==============================*/
	.mobile-header-image {
		position: fixed;
		bottom: 0px;
		right: 0;
		height: 250px;
		background-repeat: no-repeat;
		background-position: right;
		background-size: 40%;
		z-index: 98;
		}		

/* ==============================
TAULUKOT - 2 VIEREKKÄIN
==============================*/
	.taulukontti {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		}

	.tauluosio {
		width: 100%;
		}

/* ==============================
KUVAT - 2 VIEREKKÄIN
==============================*/
	.galleria {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1rem;
		}

	.kuva {
		flex: 1;
		min-width: 45%;
		}

	.kuvaoma,
	.kuvakasvatti,
	.kuvavanhempi {
		height: 350px;
		}

/* ==============================
VANHEMPIEN KUVAT RINNAKKAIN
==============================*/
	.flexvanhempi {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		}

	.vanhempiruutu {
		flex: 1;
		}

/* ==============================
RUUDUKOT
==============================*/
	.omaruutu {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
		}

	.kasvattiruutu {
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
		}

/* ==============================
LOGOT
==============================*/
	.logos-container {
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		}
}