/* AstronomyLive Mobile 1.2.0
   Mobile/tablet fixes. Desktop layout is not changed except for the start-page centring fix. */

/* ── 1. Start page "Im Aufbau" (page 8) ─────────────────────────────
   The page content sits inside the theme's padded content column, while
   #al-construction is forced to 100vw. That pushed the whole page right by
   the column padding (30 px on phones, 50 px on desktop), cut off the logo
   and made the page scroll sideways. */
body.page-id-8 .wp-block-post-content.has-global-padding {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
body.page-id-8 #al-construction {
	width: 100% !important;
	overflow-x: clip;
}

@media (max-width: 600px) {
	body.page-id-8 #al-construction .al-brand {
		width: 100%;
	}
	body.page-id-8 #al-construction .al-logo {
		max-width: 100%;
	}
	body.page-id-8 #al-construction .al-member-dashboard-link {
		top: 20px !important;
		right: 16px !important;
	}
}

/* ── 2. Stream page (Multi-Screen plugin, single view) ──────────── */
@media (max-width: 900px) {
	/* Chat: closing it used to shrink it to 0 px – and with it the only
	   button to open it again. Now it folds down to its header bar. */
	.almsc-chat.is-closed {
		height: 64px !important;
		opacity: 1 !important;
	}
	.almsc-chat {
		height: min(62vh, 440px);
		transition: height 380ms cubic-bezier(0.22, 0.8, 0.24, 1);
	}
	.almsc-chat.is-closed .almsc-chat__head {
		cursor: pointer;
	}

	/* Equipment: bigger labels, long words wrap instead of being cut */
	.almsc-label,
	.almsc-cardk {
		font-size: 10.5px !important;
	}
	.almsc-ghero > div {
		padding-left: 9px !important;
		padding-right: 9px !important;
		min-width: 0;
	}
	.almsc-ghero .almsc-label {
		white-space: normal;
		letter-spacing: 0.03em !important;
		overflow-wrap: break-word;
		-webkit-hyphens: auto;
		hyphens: auto;
		line-height: 1.25;
	}
	.almsc-inuse {
		font-size: 11px;
	}

	/* Info buttons: same look, larger touch area */
	.almsc-tipbtn {
		position: relative;
	}
	.almsc-tipbtn::after {
		content: "";
		position: absolute;
		inset: -9px;
	}
}

@media (max-width: 640px) {
	/* Reactions: tidy 2 × 2 grid instead of "Report" wrapping alone */
	.almsc-act__reacts {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
	}
	.almsc-act__sep {
		display: none !important;
	}
	.almsc-act__reacts .almsc-react {
		justify-content: center;
		min-width: 0;
	}
}

/* ── 3. Streamer dashboard ──────────────────────────────────────── */
@media (max-width: 1100px) {
	/* iPad: the cards shrank to their content width, so "Your stream
	   tonight" became 870 px wide and the page scrolled sideways. */
	.alcra .workspace > *,
	.alcra .workspace .main-column > *,
	.alcra .workspace .settings-column > * {
		align-self: stretch !important;
		min-width: 0;
		max-width: 100%;
	}

	/* Once stacked, music comes after the numbered stream steps and
	   before the planned streams. It had no order of its own and
	   jumped to the very top. */
	.alcra .workspace section.alm-card {
		order: 7;
	}

	/* Music: the track list scrolls inside the card instead of
	   pushing everything else ~700 px down */
	.alcra .alm-list {
		max-height: 340px;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		-webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent);
		mask-image: linear-gradient(to bottom, #000 88%, transparent);
		padding-bottom: 18px;
	}

	/* Status tiles (YouTube, video, target, setup, cover): no cut-off text */
	.alcr-ready .alcr-check,
	.alcr-ready .alcr-ct {
		min-width: 0;
	}
	.alcr-ready .alcr-ct * {
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip !important;
	}
	.alcr-ready .alcr-go {
		grid-column: 1 / -1;
	}
}
@media (min-width: 641px) and (max-width: 1100px) {
	.alcr-ready {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
	.alcr-ready .alcr-check {
		grid-column: auto !important;
	}
}

/* ── 4. Members page ───────────────────────────────────────────────
   The page shrank many labels to 7–9 px on phones. Raise them to a
   readable minimum; the table may scroll sideways if it gets wider. */
@media (max-width: 680px) {
	body.is-members-view .eyebrow,
	body.is-members-view .network-indicator,
	body.is-members-view .location-note,
	body.is-members-view .data-note,
	body.is-members-view .globe-caption .instruction,
	body.is-members-view .globe-controls .regions button,
	body.is-members-view .role-stat span,
	body.is-members-view .role-top,
	body.is-members-view .member-table th,
	body.is-members-view .preview-tag,
	body.is-members-view .stream-status {
		font-size: 10.5px !important;
	}
	body.is-members-view .rank {
		font-size: 10px !important;
	}
	body.is-members-view .tabbar .count,
	body.is-members-view .directory-summary,
	body.is-members-view .directory-summary *,
	body.is-members-view .member-sub,
	body.is-members-view .country-city,
	body.is-members-view .table-foot,
	body.is-members-view .rank-explainer,
	body.is-members-view .footer-nav,
	body.is-members-view .legend button,
	body.is-members-view .footer-note,
	body.is-members-view .footer-note *,
	body.is-members-view .join-banner p,
	body.is-members-view #zoom-level {
		font-size: 11.5px !important;
	}
	body.is-members-view .clear-filters,
	body.is-members-view .table-foot .btn,
	body.is-members-view .country-cell,
	body.is-members-view .member-name {
		font-size: 12.5px !important;
	}
	/* iPhone zooms into form fields under 16 px */
	body.is-members-view input:not([type=checkbox]):not([type=radio]),
	body.is-members-view select {
		font-size: 16px !important;
	}
	/* Tab row (Streamers / Organisations / Viewers …): scroll sideways
	   inside itself instead of widening the whole page */
	body.is-members-view .tabbar {
		overflow-x: auto;
		scrollbar-width: none;
		max-width: 100%;
		gap: 16px !important;
	}
	body.is-members-view .tabbar::-webkit-scrollbar {
		display: none;
	}
	body.is-members-view .tabbar .count {
		font-size: 10px !important;
	}
	body.is-members-view .table-wrap {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
	}
}

/* iPad: spotlight card next to the counters was too narrow and cut off
   role and place ("Neuer Str…", "Berlin, De…"). Let the text wrap. */
@media (min-width: 681px) and (max-width: 1100px) {
	#members-page .member-tools .spotlight * {
		white-space: normal !important;
		text-overflow: clip !important;
	}
	#members-page .member-tools .spotlight {
		padding: 0 12px !important;
	}
	#members-page .member-tools .alm-spot {
		gap: 10px !important;
	}
	#members-page .member-tools .alm-spot .alm-av {
		zoom: 0.75;
	}
	#members-page .member-tools .alm-spot-body {
		padding-right: 16px !important;
	}
}

/* Support-bot bubble: a bit smaller on phones, and room at the page end
   so it no longer covers the last buttons */
@media (max-width: 640px) {
	.mwai-trigger.mwai-open-button {
		transform: scale(0.8);
		transform-origin: 100% 100%;
		right: 12px !important;
		bottom: 12px !important;
	}
	body:has(.mwai-trigger) #al-legal-bar,
	body:has(.mwai-trigger) .dashboard-footer {
		padding-bottom: 72px;
	}
}

/* Logged-in members saw two buttons both labelled "Website öffnen".
   Keep only the green one (to the live page); hide the one to /preview/. */
body.page-id-8 #al-construction .al-login-private {
	display: none !important;
}