/**
 * Shared UI primitives — TODO.TODAY
 *
 * Small, reusable components that appear on MORE THAN ONE page and belong to
 * no single feature. Everything here must be page-agnostic: no layout, no
 * page-specific spacing, no assumptions about what wraps it.
 *
 * What lives elsewhere:
 *   event cards ................ tt-cards.css
 *   site chrome (header/footer/bottom nav) ... front.css
 *   sidebar (hero, digest, popup) ........... sidebar.css
 *   page layout/grid .......... that page's own stylesheet
 *
 * Enqueued site-wide as a dependency of front.css, so any page can use these
 * without adding its own enqueue.
 */


/* ── LOAD MORE BUTTON ──────────────────────────────────────────────────
 * One button for every "load more" across the site. Consumers:
 *   home feed ......... todo-today-assets/js/tt-cards.js
 *   search results .... todo-core/templates/search-results-page.php
 *   life stream ....... todo-today-account-area/assets/js/life-stream.js
 *   place page ........ todo-today-account-area/assets/js/place-page.js
 *   public channel .... todo-today-assets/js/public-channel.js
 *   My Events ......... todo-today-account-area/includes/templates/my-events-template.php
 *   category page ..... todo-today-categories/templates/category-page.php
 *
 * My Events and the category page previously had their own near-identical
 * copies (.me-load-more-btn / .tt-cat-load-more-btn); both now use this class.
 *
 * !important throughout: this button is matched by the BUTTON RESET block near
 * the top of tt-cards.css, which includes `#tt-app button[type="button"]`
 * (specificity 1,1,1). A plain `.tt-load-more-btn` (0,1,0) loses to that on the
 * home page no matter the load order — the same trap that silently collapsed
 * the day bar. Every other button component in this codebase defends itself the
 * same way.
 */
.tt-load-more-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: 100% !important;
	margin: 12px 0 0 !important;
	padding: 12px 16px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: var(--tt-secondary, #f4f4f5) !important;
	color: var(--tt-foreground, #09090b) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-transform: none !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	transition: background-color 0.15s ease !important;
}

.tt-load-more-btn:hover {
	background: var(--tt-border, #e5e5e5) !important;
	color: var(--tt-foreground, #09090b) !important;
}

.tt-load-more-btn:active {
	transform: translateY(1px);
}

.tt-load-more-btn[disabled] {
	opacity: 0.5;
	cursor: default;
}

.tt-load-more-btn[disabled]:hover {
	background: var(--tt-secondary, #f4f4f5) !important;
}

/* Chevron — SVG on newer callers, Font Awesome <i> on the older ones. */
.tt-load-more-btn svg {
	width: 16px;
	height: 16px;
	flex: none;
}

/* Loading state for SVG callers (pages without Font Awesome): the caller
   swaps the chevron for a spinning arc SVG with this class. */
.tt-load-more-btn .tt-lm-spin {
	animation: tt-lm-spin 0.8s linear infinite;
}

@keyframes tt-lm-spin {
	to { transform: rotate(360deg); }
}

.tt-load-more-btn i {
	font-size: 12px !important;
	line-height: 1 !important;
}

/* Muted count suffix, e.g. "Load more (4 more)" where the caller marks up the
   remainder separately. Kept from the category page's .tt-cat-remaining. */
.tt-load-more-btn .tt-load-more-count {
	font-weight: 400;
	opacity: 0.75;
}


/* ── PAGE SHELL ────────────────────────────────────────────────────────
 * The site's standard two-column page layout: sidebar (300px) + main
 * (750px max), centered at 1050px — the same geometry as the home page's
 * .tt-listing-shell. ONE breakpoint: 1024px. Below it the sidebar is
 * hidden and the page is a single column (pages that want the digest on
 * mobile render it separately inside .tt-page-shell__digest).
 *
 * Consumers: life-stream (first); category/place/my-events roll on next.
 * The home page keeps its own shell for now (its sidebar doubles as the
 * mobile hero band — different mobile behavior).
 */
.tt-page-shell {
	max-width: 1050px;
	margin-inline: auto;
	box-sizing: border-box;
}

/* The shell owns its sidebar slot completely: padding, stickiness, the
   divider. Templates put NO legacy sidebar class (.event_sidebar /
   .td-sidebar) on it — sidebar.css only styles what's inside (hero,
   digest, popup). */
.tt-page-shell__side {
	display: none;
}

.tt-page-shell__main {
	min-width: 0;
	padding: 15px var(--tt-gutter, 15px) 40px;
	box-sizing: border-box;
}

.tt-page-shell__digest {
	display: block;
	padding: 0 var(--tt-gutter, 15px) 24px;
}

/* Tablet: cap the single column so cards keep phone proportions. */
@media (max-width: 1023px) {
	.tt-page-shell__main,
	.tt-page-shell__digest {
		width: 100%;
		max-width: var(--tt-single-col-max, 600px);
		margin-inline: auto;
	}
}

@media (min-width: 1024px) {
	.tt-page-shell {
		display: grid;
		grid-template-columns: 300px minmax(0, 750px);
		justify-content: center;
		align-items: start;
	}

	.tt-page-shell__side {
		display: block;
		position: sticky;
		top: 60px; /* below the sticky desktop header */
		padding: 15px;
	}

	body.admin-bar .tt-page-shell__side {
		top: 92px; /* header + 32px admin bar */
	}

	/* Divider between sidebar and content. On the MAIN column, not the
	   sidebar: the sidebar box is only as tall as its own content, so a
	   border there stops mid-page instead of reaching the footer. */
	.tt-page-shell__main {
		border-left: 1px solid var(--tt-border, #e5e5e5);
	}

	/* Sidebar carries the digest on desktop. */
	.tt-page-shell__digest {
		display: none;
	}
}