/**
 * Organic Growth - the platform on a phone.
 *
 * @package OrganicGrowth\Core
 * @since   1.21.0
 *
 * WHY EVERYTHING LOOKED CRAMPED.
 *
 * The platform renders inside whatever the theme gives it, and a modern theme
 * gives a page a constrained content column with its own padding. On a desktop
 * that is fine. On a 380px phone the theme takes maybe 40px of the width, the
 * platform's shell takes more, and each card takes more again - so a task card
 * ends up drawn inside three nested boxes with about 240px left for the actual
 * content.
 *
 * The fix is not smaller text. It is to stop nesting: on a phone the platform
 * breaks out of the theme's column, drops its own shell padding, and lets each
 * card run edge to edge. The card is still a card - it keeps its border and its
 * separation - it simply stops being a small box inside two larger ones.
 */

@media ( max-width: 782px ) {

	/*
	 * Out of the theme's column. The negative margin is calculated from the
	 * viewport rather than a guessed number, so it works whatever padding the
	 * theme applies.
	 */
	/*
	 * No breakout any more. The 100vw and negative margins here were fighting
	 * a container the stylesheet cannot see, which is what pushed cards off
	 * the left of the screen. The standalone template owns the full width
	 * instead, so this only has to remove its own padding.
	 */
	.og-shell {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0 0 96px;
		background: var(--og-bg);
	}

	.og-shell__body {
		padding: 0;
		gap: 0;
	}

	/* Cards run edge to edge, separated by a line rather than a gap. */
	.og-card {
		margin: 0 0 10px;
		border-left: none;
		border-right: none;
		border-radius: 0;
		box-shadow: none;
	}

	.og-card__header,
	.og-card__body,
	.og-card__footer,
	/* og-stat is often a direct child of og-card with no body around it. */
	.og-card > .og-stat {
		padding-left: 16px;
		padding-right: 16px;
	}

	.og-card__header::before {
		border-radius: 0;
	}

	.og-stack {
		gap: 10px;
	}

	/* --------------------------------------------------------- Topbar */

	.og-topbar {
		position: sticky;
		top: 0;
		z-index: 30;
		margin: 0 0 10px;
		padding: 12px 16px;
		border-radius: 0;
		border-bottom: 1px solid var(--og-border);
		/* Solid rather than translucent: a sticky bar you can read the page
		   through is harder to read than one you cannot. */
		background: var(--og-bg-raised);
	}

	.og-topbar__title {
		font-size: var(--og-text-lg);
	}

	/* ----------------------------------------------------------- Grids */

	/*
	 * One column, not two. Two 44px-wide statistics side by side are two
	 * things nobody can read rather than one they can.
	 */
	.og-grid--2,
	.og-grid--3,
	.og-grid--4 {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	/* Stat cards stay two across: a number and a label do fit. */
	.og-dash-grid,
	.og-stats-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	/* ------------------------------------------------------ Tap targets */

	/*
	 * 48px minimum. Anything smaller is a target most thumbs miss, and a
	 * member who mis-taps "Give it back" instead of "Send for review" has a
	 * genuinely bad time.
	 */
	.og-btn {
		min-height: 48px;
		padding: 12px 18px;
		font-size: var(--og-text-base);
	}

	.og-btn--sm {
		min-height: 42px;
		padding: 9px 14px;
	}

	.og-input,
	.og-select,
	.og-textarea {
		min-height: 48px;
		/* 16px exactly. Below it, iOS Safari zooms the page on focus and the
		   member has to pinch back out after every field. */
		font-size: 16px;
	}

	/* ------------------------------------------------------------ Nav */

	/*
	 * A bar at the bottom, where a thumb reaches. A sidebar of twelve links
	 * on a phone is a list somebody scrolls past to get to the content.
	 */
	.og-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 40;
		display: flex;
		margin: 0;
		padding: 6px 4px calc( 6px + env( safe-area-inset-bottom ) );
		border-top: 1px solid var(--og-border);
		border-radius: 0;
		background: var(--og-bg-raised);
		box-shadow: 0 -2px 12px rgba(3, 33, 40, 0.08);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.og-nav::-webkit-scrollbar {
		display: none;
	}

	.og-nav__link {
		flex: 1 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-width: 66px;
		min-height: 52px;
		padding: 6px 4px;
		border-radius: var(--og-radius-sm);
		font-size: 10px;
		line-height: 1.2;
		text-align: center;
	}

	.og-nav__link .og-icon,
	.og-nav__link svg {
		width: 20px;
		height: 20px;
	}

	/* The bar on the left makes no sense on a horizontal strip. */
	.og-nav__link.is-active::before {
		left: 50%;
		top: auto;
		bottom: 2px;
		transform: translateX(-50%);
		width: 18px;
		height: 2px;
		border-radius: 2px 2px 0 0;
	}

	/* ---------------------------------------------------------- Tables */

	/*
	 * A table on a phone either scrolls sideways or gets unreadable. Scrolling
	 * is the honest option, with a shadow to say there is more.
	 */
	.og-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.og-table {
		min-width: 480px;
	}

	/* ------------------------------------------------------- Task cards */

	.og-task {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 14px 16px;
	}

	.og-task__reward {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.og-task__reward .og-btn {
		flex: 1;
		max-width: 60%;
	}

	/* --------------------------------------------------------- Packs */

	.og-packs {
		grid-template-columns: 1fr;
	}

	/* ---------------------------------------------------- Empty state */

	.og-state {
		padding: 32px 20px;
	}
}

/* Very small phones. */
@media ( max-width: 380px ) {

	.og-dash-grid,
	.og-stats-grid {
		grid-template-columns: 1fr;
	}

	.og-nav__link {
		min-width: 58px;
		font-size: 9px;
	}
}