/* ============================================================
   responsive.css — mobile/tablet hot-fix overrides
   Loaded AFTER style.css; uses !important to override the
   fixed-width 2010-era layout. New file, no cache issues.
   2026-04-26 — Claude Code initial mobility patch.
   ============================================================ */

/* Fluid container up to 1280 (covers laptops/tablets in landscape) */
@media (max-width: 1280px) {
	div.wrap {
		width: 100% !important;
		max-width: 1280px;
		padding-left: 8px;
		padding-right: 8px;
		box-sizing: border-box;
	}
}

/* Tablet and below: collapse two-column layouts; tame the photobar */
@media (max-width: 1023px) {
	div.leftcollum,
	div.rightcollum,
	div#search div.leftcollum,
	div#search div.rightcollum,
	div#search div.rightcollum.to_search,
	div.receiverbox,
	div.messagesbox {
		width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Disables the hardcoded `min-width: 10000000px` that would otherwise
	   create a 10-million-pixel horizontal scrollbar on the page when the
	   fullscreen photo viewer is open. */
	div#photobar div.photoline ul {
		min-width: 0 !important;
		display: flex !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	iframe[src*="youtube"],
	iframe[src*="youtu.be"] {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		aspect-ratio: 16 / 9;
	}
}

/* Mobile: stack header/nav, override inline 50% widths */
@media (max-width: 768px) {
	/* Login/registration/recover have inline style="width:50%"; on a 360 px
	   screen that would be ~140 px — unusable. */
	[style*="width:50%"],
	[style*="width: 50%"] {
		width: 100% !important;
	}

	header { height: auto !important; }
	header nav { float: none !important; width: 100% !important; }
	header nav > ul { display: flex; flex-wrap: wrap; }
	header nav > ul > li { float: none; width: auto; }
	header nav a { padding: 14px 16px !important; }

	div.contents { padding-left: 8px !important; padding-right: 8px !important; }
	body { font-size: 16px; }
}

/* Touch-only devices: show always what's hidden behind :hover.
   `mouseenter` doesn't fire on touch — without this, the photo info
   panel (Удалить / Сделать аватаром / EXIF) is unreachable on phones. */
@media (hover: none) and (pointer: coarse) {
	div#fullphoto div.fullimage div.info,
	div#fullphoto .info {
		opacity: 1 !important;
		visibility: visible !important;
	}
	header nav li ul {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}
}

/* Touch + narrow: submenus inline (not absolute floats) */
@media (hover: none) and (max-width: 768px) {
	header nav li ul {
		position: static !important;
	}
}

/* Very narrow phones (iPhone SE, etc.) */
@media (max-width: 480px) {
	header nav a { padding: 12px 12px !important; font-size: 13px; }
}