/*
 * The portal (the front page) on phones, tablets and short screens. Hand-written:
 * tools/import_design.py never writes this file; functions.php loads it after the
 * design's page-portal.css, on the front page only.
 *
 * The design shows the portal full-screen, the two doors side by side (one above the
 * other below 761px), the top bar and the bottom line fixed over them, and it lights
 * a door when the pointer is over it. On a phone that put the bottom line over Door
 * II's ENTER and the top bar past the screen's edge, and a touch "hovered" a door
 * (dimming and shrinking the other) instead of opening it. So:
 *   - without hover (touch screens): no hover effects, the first tap opens a door;
 *     each door's tag and ENTER keep their colour, so both doors read as buttons;
 *   - narrower than 761px or lower than 561px: the page scrolls when it must, and the
 *     top bar and the bottom line sit above and below the doors (nothing covers them);
 *     below 761px the doors are stacked and share the screen equally.
 */

@media (hover: none) {
	.revealed .portal:hover .door { opacity: 1; }
	.portal .door:hover,
	.portal .door:focus-visible { flex-grow: 1; }
	.door:hover .door-bg { transform: none; }
	.door-copy,
	.door:hover .door-copy { transform: none; }
	.d-studio:hover .ghost { opacity: .16; filter: grayscale(1) brightness(1.2); }
	.d-game:hover .door-bg { filter: grayscale(.85) brightness(.32) contrast(1.15); }
	.d-line,
	.door:hover .d-line { color: #a8a8a8; }
	.d-studio .d-tag,
	.d-studio:hover .d-tag { color: #00E5FF; }
	.d-game .d-tag,
	.d-game:hover .d-tag { color: #FF6A2B; }
	.d-studio .d-go,
	.d-studio:hover .d-go { border-color: #00E5FF; color: #00E5FF; }
	.d-game .d-go,
	.d-game:hover .d-go { border-color: #FF3B00; color: #FF6A2B; box-shadow: none; }
	.d-studio { -webkit-tap-highlight-color: rgba(0, 229, 255, .12); }
	.d-game { -webkit-tap-highlight-color: rgba(255, 59, 0, .12); }
}

/* A touch screen large enough for the full-screen portal (a tablet): ENTER clears the bottom line. */
@media (hover: none) and (min-width: 761px) and (min-height: 561px) {
	.door { padding-bottom: max(clamp(26px, 5vw, 78px), 84px); }
}

@media (max-width: 760px), (max-height: 560px) {
	html,
	body { height: auto; overflow: visible; }
	.wp-site-blocks {
		display: grid;
		grid-template-rows: auto 1fr auto;
		min-height: 100vh;
		min-height: 100svh;
	}
	.top {
		position: relative;
		flex-wrap: wrap;
		gap: 8px 18px;
		padding: 18px 20px;
	}
	/* the label goes right, on a line of its own when the screen is too narrow for both */
	.top > span:last-child { margin-left: auto; font-size: 9px; letter-spacing: .2em; }
	.portal { position: relative; inset: auto; }
	/* equal shares of the screen, never less than the door's own text (overflow:hidden
	   would otherwise let a short screen cut its top off) */
	.door { flex: 1 1 0; min-height: min-content; padding: 24px clamp(20px, 5vw, 52px); }
	.bottom {
		position: relative;
		flex-wrap: wrap;
		padding: 16px 20px 22px;
		line-height: 1.9;
		letter-spacing: .24em;
		text-align: center;
	}
}

@media (max-width: 760px) {
	.d-tag { margin-bottom: 10px; }
	.d-title { margin-bottom: 10px; }
	.d-line { margin-bottom: 18px; }
	.d-go { padding: 13px 24px; }
}