/*
 * Phones and tablets. The legacy site sent phones to a separate /mobi/ site, so its desktop
 * styles assume a wide screen; these rules let the same pages fit narrow ones.
 */

/* Header: the login form moves to its own row */
@media (max-width: 900px) {
	.header {
		flex-wrap: wrap;
		height: auto;
		min-height: 72px;
		padding-block: 12px;
		row-gap: 8px;
	}

	.login {
		flex-basis: 100%;
		margin-inline-start: 0;
	}

	.login form {
		flex-wrap: wrap;
		width: 100%;
	}
}

@media (max-width: 600px) {
	.login .input-field {
		flex: 1 1 calc(50% - 6px);
		min-width: 0;
	}

	.login .input-field input[type="text"],
	.login .input-field input[type="password"] {
		width: 100%;
	}

	.login .submit-btn {
		flex-basis: 100%;
	}
}

/* Browse page: neighbour thumbnails and rating stack instead of a 970px row */
@media (max-width: 1000px) {
	#navi_seiska {
		width: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	#nayta_uudemmat,
	#nayta_vanhemmat,
	#nayta_nykyinen_thumb {
		float: none;
		width: auto;
	}
}

.kuvakommentit {
	max-width: 100%;
	box-sizing: border-box;
}

.kuvakommentit .viesti {
	overflow-wrap: anywhere;
}

.kuvaboxi img,
#nayta_nykyinen img {
	max-width: 100%;
	height: auto;
}

/* Pagination: only the pages next to the current one on small phones */
@media (max-width: 480px) {
	.kuvanavi td.navi_far {
		display: none;
	}
}

/* Settings: menu above the form instead of a 700px two-column table */
.settings {
	max-width: 100%;
	box-sizing: border-box;
}

@media (max-width: 720px) {
	.settings table,
	.settings tbody,
	.settings tr,
	.settings td.settings_menu,
	.settings td.settings_content {
		display: block;
		width: auto;
	}

	.settings_content input[type="email"],
	.settings_content select {
		max-width: 100%;
	}
}

/* Registration and text pages */
.leipa {
	max-width: 100%;
	box-sizing: border-box;
}

.leipa input[type="text"],
.leipa input[type="email"],
.leipa input[type="password"],
.leipa select,
#contact-wrapper input,
#contact-wrapper textarea {
	max-width: 100%;
	box-sizing: border-box;
}

@media (max-width: 600px) {
	.kuvaton-text-page {
		padding: 30px 15px !important;
		overflow-wrap: anywhere;
	}

	.leipa table,
	.leipa tbody,
	.leipa tr,
	.leipa td {
		display: block;
		width: auto !important;
	}
}