/* ============================================
   MESENAATTI.ME MOBILE RESPONSIVE FIX
   ============================================ */



/* ============================================
   MOBILE LAYOUT (max-width: 768px)
   ============================================ */

@media (max-width: 768px) {
	
	/* 1. PERUSKORJAUKSET */

	
	body, html {
		overflow-x: hidden;
		max-width: 100vw;
		background-color: #ffffff;
	}
	

	
	/* 2. TEKSTIN RIVITYS */
	p, h1, h2, h3, h4, h5, h6, div, span, .post h1 {
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;
	}
	
	/* 3. KUVIEN SKAALAUS */
	img {
		max-width: 100% !important;
		height: auto !important;
	}
	
	/* 4. PÄÄCONTAINERIT */
	#wrapper {
		max-width: 100vw;
		overflow-x: hidden;
	}
	
	/* NAVIGAATIO */
	.col1.navi {
		width: 50% !important;
		padding: 10px !important;
	}
	
	.menu-menu-container ul {
		flex-direction: column !important;
	}
	
	.menu-menu-container li {
		width: 100% !important;
		text-align: left !important;
		padding: 8px 0 !important;
	}
	
.col1.project_white_box.statusbox {
		width: 500% !important;
		position: relative;
		float: left;
		padding: 8px 0 !important;
	}
	
	
/* YLÄOSAN LAYOUT: Flexbox-pohjainen, statusbox ylös */
	
	/* YLÄOSAN LAYOUT: Absolute positioning statusboxille */
	
	/* YLÄOSAN LAYOUT: Absolute positioning statusboxille */
	
	/* Navi: 50% vasemmalla */
	.col1.navi {
		width: 50% !important;
		float: left !important;
		padding: 10px !important;
		margin: 0 !important;
		box-sizing: border-box;
		position: relative !important;
		z-index: 1 !important; /* Alempi kuin statusbox */
	}
	
	/* Pienennä fonttikokoja navigaatiossa */
	.col1.navi .langmenu {
		font-size: 11px !important;
	}
	
	.col1.navi .menu-menu-container ul {
		padding: 0 !important;
		margin: 5px 0 !important;
	}
	
	.col1.navi .menu-menu-container li {
		font-size: 11px !important;
		padding: 3px 0 !important;
		line-height: 1.3 !important;
	}
	
	.col1.navi .menu-menu-container a {
		font-size: 20px !important;
	}
	
/* Statusbox: Absolute positioning oikealle ylös */
	.col1.project_white_box.statusbox.planb {
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		width: 50% !important;
		padding: 15px 10px !important; /* Enemmän ylä/alapaddingia */
		margin: 0 !important;
		box-sizing: border-box;
		z-index: 10 !important;
		
		/* Säilytä mittasuhteet */
		min-height: 400px !important; /* Vähintään tämä korkeus */
	}
	
	/* Statusboxin sisällön skaalaus - pidä mittasuhteet */
	.statusbox h3 {
		font-size: 32px !important; /* Isommat numerot */
		margin: 10px 0 !important;
		line-height: 1.1 !important;
		font-weight: bold !important;
	}
	
	.statusbox strong {
		font-size: 13px !important; /* Desktop-tyyli */
		display: block !important;
		margin: 5px 0 !important;
		line-height: 1.4 !important;
	}
	
	.statusbox .backers,
	.statusbox .funding {
		margin: 15px 0 !important; /* Enemmän väliä */
		padding: 10px 0 !important;
	}
	
	/* Rahoita-nappi - säilytä koko */
	.statusbox a.button {
		width: 85% !important;
		padding: 15px 10px !important;
		font-size: 18px !important;
		margin: 15px auto !important;
		display: block !important;
		text-align: center !important;
		font-weight: bold !important;
	}
	
	/* Statusboxin teksti */
	.statusbox p {
		font-size: 11px !important;
		line-height: 1.4 !important;
		margin: 8px 0 !important;
	}
	
	.col1.project_white_box.statusbox p {
	display: none;
	}
	
	/* Leftside: Säädä padding statusboxin korkeuden mukaan */
	.leftside {
		width: 100% !important;
		padding-top: 370px !important; /* Kasvatettu */
		padding-left: 10px !important;
		padding-right: 10px !important;
		clear: both !important;
	}
	
	/* Body-emulate relative jotta absolute toimii */
	#body-emulate {
		position: relative !important;
	}
	
	/* Leftside: Pienempi top-padding */
	.leftside {
		width: 100% !important;
		padding-top: 280px !important; /* Pienempi! Säädä tarvittaessa */
		padding-left: 10px !important;
		padding-right: 10px !important;
		clear: both !important;
	}
	
	/* Statusboxin sisällön skaalaus */
	.statusbox h3 {
		font-size: 18px !important;
		margin: 5px 0 !important;
		line-height: 1.2 !important;
	}
	
	.statusbox strong {
		font-size: 11px !important;
		display: block !important;
		margin: 3px 0 !important;
	}
	
	.statusbox .backers,
	.statusbox .funding {
		margin: 8px 0 !important;
	}
	
	.statusbox a.button {
		width: 90% !important;
		padding: 10px 5px !important;
		font-size: 14px !important;
		margin: 10px auto !important;
	}
	
	/* Pienennä statusboxin tekstejä */
	.statusbox p {
		font-size: 10px !important;
		line-height: 1.3 !important;
	}
	/* PÄÄSISÄLTÖ */
	.leftside {
		width: 100% !important;
		max-width: 100vw !important;
		padding: 15px !important;
		float: none !important;
	}
	
	/* KAMPANJAKUVA */
	.main_image,
	.oembedall-container {
		width: 100% !important;
		max-width: 100vw !important;
		height: auto !important;
	}
	
	.main_image img {
		width: 100% !important;
		height: auto !important;
	}
	
	/* VIDEO */
	.vjs-custom-skin {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 16/9;
	}
	
	/* KAMPANJAN OTSIKKO JA TEKSTI */
	.post h1 {
		font-size: 24px !important;
		line-height: 1.3 !important;
		margin: 15px 0 !important;
	}
	
	.post .ingress {
		font-size: 16px !important;
		line-height: 1.5 !important;
		padding: 0 !important;
		max-width: 77%;
	}
	
	.post .entry {
		font-size: 15px !important;
		line-height: 1.6 !important;
		padding: 0 !important;
	}
	
	/* INFO-LAATIKKO (päivämäärät) */
	.info {
		
		padding: 10px !important;
		margin: 10px 0 !important;
		display: none !important; 
	}
	
	/* SIVUPALKKI-ELEMENTIT */
	.col1 {
		width: 100% !important;
		max-width: 100vw !important;
		float: none !important;
		margin: 15px 0 !important;
		padding: 0 15px !important;
	}
	
	/* STATUS-LAATIKKO (Mesenaattia, Tavoite jne) */
	.project_white_box.statusbox {
		width: 100% !important;
		padding: 20px 15px !important;
		height: auto !important;
	}
	
	.statusbox h3 {
		font-size: 28px !important;
		margin: 10px 0 !important;
	}
	
	.statusbox strong {
		font-size: 16px !important;
	}
	
	/* RAHOITA-NAPPI */
.statusbox a.button, a.button {
	/* width: 100% !important; */
	/* display: block !important; */
	/* margin: 15px auto !important; */
	/* padding: 15px 20px !important; */
	/* font-size: 18px !important; */
	text-align: center !important;
	}
	
	/* TEKIJÄN KUVA */
	.profilebox .creator_pic,
	.profilebox .creator_pic img {
		width: 100% !important;
		max-width: 100vw !important;
		height: auto !important;
	}
	
	/* VASTIKKEET */
.rewards_container div>div{
	width: 50% !important;
	padding: 0px !important;
	float: left;
	background-color: white;
	}
	
	.col1.stretch hr {
	/* width: 312px; */
	border: 0;
	/* margin-top: 1em; */
	}
	
	.vastikekuva {
		width: 100% !important;
		max-width: 300px !important;
		height: auto !important;
		margin: 0 auto !important;
		display: block !important;
	}
	
	/* LOGO JA ROTATE KUVAT */
	.col1.logo,
	.col1.rotate {
		display: none !important; /* Piilotetaan mobiilissa */
	}
	
	/* TAULUKOT */
	table {
		width: 100% !important;
		display: block !important;
		overflow-x: auto !important;
	}
	
	/* FORMI-KENTÄT */
	input[type="text"],
	input[type="email"],
	input[type="password"],
	textarea,
	select {
		width: 100% !important;
		max-width: 100% !important;
		font-size: 16px !important; /* Estää zoomaus iOS:ssä */
	}
	
	/* MODAL-DIALOGI */
	.modal-dialog {
		width: 95% !important;
		max-width: 95vw !important;
		margin: 10px auto !important;
	}
	
	.modal-content {
		padding: 15px !important;
	}
	
	/* SOCIAL SHARE NAPIT */
#social_share_wrapper {
		width: 25% !important;
		padding: 0px 20px 0px 38px !important;
		display: none; 
	}
	
.rrssb-buttons {
		font-size: 12px;
		height: 29px;
		margin: 0;
		padding: 0;
		width: 100%;
	}
	
	/* PIILOTA TURHAT ELEMENTIT MOBIILISSA */
	.control_panel,
	.admin_panel {
		font-size: 12px !important;
	}
	
	.control-button {
		padding: 8px 10px !important;
		font-size: 12px !important;
		margin: 3px !important;
	}
}

/* ============================================
   PIENI MOBILE (max-width: 480px)
   ============================================ */

@media (max-width: 480px) {
	
	.post h1 {
		font-size: 20px !important;
	}
	
	.statusbox h3 {
		font-size: 18px !important;
	}
	
	.statusbox strong {
		font-size: 14px !important;
	}
	
	/* Pienempi padding pienillä näytöillä */
	.leftside,
	.col1 {
		padding: 0 10px !important;
	}
}

/* ============================================
   TABLETTI (768px - 1024px)
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
	
	.leftside {
		width: 60% !important;
		float: left !important;
	}
	
	.col1 {
		width: 38% !important;
		float: right !important;
	}
	
	/* Skaalaa kuvat tabletin leveyteen */
	.main_image,
	.main_image img {
		width: 100% !important;
		height: auto !important;
	}
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Parempi nappi-koko kosketusnäytölle */
@media (max-width: 768px) {
	a, button, .button {
		min-height: 44px !important; /* Apple suositus */
		min-width: 44px !important;
	}
}

/* Touch-friendly linkit */
@media (hover: none) {
	a:active, 
	button:active {
		opacity: 0.7;
	}
}