/*
 * layouts.css — TCG Mart London Design System
 * Page-level layout patterns. Depends on tokens.css + base.css.
 * These classes are used by front-page.php, archive-guide.php,
 * page-collection.php, and single-card.php (Phases 5–7).
 */


/* ════════════════════════════════════════════════════════════
   12-COLUMN GRID UTILITIES
════════════════════════════════════════════════════════════ */

/*
  Flex-free 12-column grid via CSS Grid.
  Usage:  <div class="grid">
              <div class="col-8">…</div>
              <div class="col-4">…</div>
          </div>
*/
.grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--s-5);
}

.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

@media (max-width: 1023px) {
	.grid {
		grid-template-columns: repeat(8, 1fr);
		gap: 20px;
	}
	/* Cols wider than 8 collapse to full-width */
	.col-9, .col-10, .col-11, .col-12 { grid-column: span 8; }
}

@media (max-width: 767px) {
	.grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--s-4);
	}
	/* Everything collapses to 4 columns on mobile */
	.col-1, .col-2, .col-3, .col-4,
	.col-5, .col-6, .col-7, .col-8,
	.col-9, .col-10, .col-11, .col-12 {
		grid-column: span 4;
	}
}


/* ════════════════════════════════════════════════════════════
   PAGE HERO  (used on Homepage, Guides, Collection)
════════════════════════════════════════════════════════════ */

.page-hero {
	padding: 96px 0 56px;
	border-bottom: 1px solid var(--line);
}

.page-hero--inner {
	padding: 56px 0 40px;
}

.page-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: var(--s-5);
}

.page-hero__eyebrow::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--amber);
	flex-shrink: 0;
}

.page-hero__title {
	margin-bottom: var(--s-5);
}

.page-hero__lede {
	font-size: 18px;
	line-height: 1.55;
	color: var(--ink-2);
	max-width: 62ch;
}

.page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin-top: var(--s-6);
}

@media (max-width: 767px) {
	.page-hero {
		padding: 56px 0 40px;
	}
	.page-hero--inner {
		padding: 40px 0 28px;
	}
}


/* ════════════════════════════════════════════════════════════
   SIDEBAR + CONTENT  (Guides archive, Collection)
════════════════════════════════════════════════════════════ */

.layout-sidebar {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: var(--s-8);
	align-items: start;
}

.layout-sidebar__rail {
	position: sticky;
	top: calc(var(--nav-h) + var(--s-6));
}

/* Collapse sidebar on tablet */
@media (max-width: 1023px) {
	.layout-sidebar {
		grid-template-columns: 1fr;
	}
	.layout-sidebar__rail {
		position: static;
	}
}


/* ════════════════════════════════════════════════════════════
   CARD DETAIL  — two-column hero (single-card.php)
════════════════════════════════════════════════════════════ */

.layout-detail {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--s-6);
	align-items: start;
	padding: var(--s-7) 0;
}

/* Photo column */
.layout-detail__media {
	position: sticky;
	top: calc(var(--nav-h) + var(--s-6));
}

/* Meta column */
.layout-detail__meta {
	padding-top: var(--s-3);
}

/* Stack on tablet/mobile */
@media (max-width: 900px) {
	.layout-detail {
		grid-template-columns: 1fr;
	}
	.layout-detail__media {
		position: static;
	}
}


/* ════════════════════════════════════════════════════════════
   CARD DETAIL — meta list  (2-col definition pairs)
════════════════════════════════════════════════════════════ */

.detail-meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--line);
	margin-top: var(--s-5);
}

.detail-meta__cell {
	padding: 12px 0;
	border-bottom: 1px dashed var(--line);
}

.detail-meta__key {
	font-family: var(--mono);
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink-3);
	margin-bottom: var(--s-1);
}

.detail-meta__val {
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
}

@media (max-width: 600px) {
	.detail-meta {
		grid-template-columns: 1fr;
	}
}


/* ════════════════════════════════════════════════════════════
   PRICE BLOCK  (card detail valuation panel)
════════════════════════════════════════════════════════════ */

.price-block {
	margin-top: var(--s-5);
	padding: var(--s-5);
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.price-block__now {
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.price-block__delta {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ok);
	margin-left: var(--s-2);
	font-variant-numeric: tabular-nums;
}

/* CSS-only sparkline — heights set via inline style on each span */
.sparkline {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 36px;
	margin-top: var(--s-3);
}

.sparkline__bar {
	flex: 1;
	background: var(--ink);
	opacity: 0.75;
	border-radius: 1px;
	min-height: 2px;
}

.price-block__source {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--ink-3);
	margin-top: var(--s-3);
}


/* ════════════════════════════════════════════════════════════
   SECTION OPENERS  (shared heading pattern)
════════════════════════════════════════════════════════════ */

.section-head {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: var(--s-7);
	margin-bottom: var(--s-7);
}

.section-head__num {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--ink-3);
	text-transform: uppercase;
	padding-top: 6px;
}

.section-head__num .dot {
	color: var(--amber);
}

.section-head__body {}

@media (max-width: 767px) {
	.section-head {
		grid-template-columns: 1fr;
		gap: var(--s-4);
	}
}


/* ════════════════════════════════════════════════════════════
   TOPIC CLUSTERS  (guides archive — three editorial groups)
════════════════════════════════════════════════════════════ */

.cluster-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-5);
	margin-top: var(--s-7);
}

.cluster-card {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--s-5);
}

.cluster-card__heading {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.012em;
	color: var(--ink);
	margin-bottom: var(--s-4);
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--line);
}

.cluster-card__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.cluster-card__list a {
	font-size: 14px;
	color: var(--ink-2);
	text-decoration: none;
	transition: color var(--t-micro);
}

.cluster-card__list a:hover {
	color: var(--ink);
}

@media (max-width: 767px) {
	.cluster-grid {
		grid-template-columns: 1fr;
	}
}


/* ════════════════════════════════════════════════════════════
   SETS BREAKDOWN  (collection page — per-set progress)
════════════════════════════════════════════════════════════ */

.sets-breakdown {
	margin-top: var(--s-7);
}

.set-row {
	display: grid;
	grid-template-columns: 1fr 80px 120px 100px;
	gap: var(--s-5);
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
	font-size: 13.5px;
}

.set-row__name {
	font-weight: 600;
	color: var(--ink);
}

.set-row__year {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--ink-3);
}

.set-row__bar-wrap {
	background: var(--paper-3);
	border-radius: 999px;
	height: 4px;
	overflow: hidden;
}

.set-row__bar-fill {
	height: 100%;
	background: var(--ink);
	border-radius: 999px;
}

.set-row__value {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink-3);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
	.set-row {
		grid-template-columns: 1fr 60px;
	}
	.set-row__bar-wrap,
	.set-row__value {
		display: none;
	}
}


/* ════════════════════════════════════════════════════════════
   NEWSLETTER STRIP
════════════════════════════════════════════════════════════ */

.newsletter-strip {
	padding: var(--s-9) 0;
	border-bottom: 1px solid var(--line);
}

.newsletter-strip__heading {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin-bottom: var(--s-3);
}

.newsletter-strip__sub {
	font-size: 15px;
	color: var(--ink-3);
	max-width: 52ch;
	margin-bottom: var(--s-6);
}

.newsletter-strip__form {
	display: flex;
	gap: var(--s-3);
	max-width: 440px;
}

.newsletter-strip__form .field__input {
	flex: 1;
}

@media (max-width: 600px) {
	.newsletter-strip__form {
		flex-direction: column;
	}
}


/* ════════════════════════════════════════════════════════════
   PAGINATION
════════════════════════════════════════════════════════════ */

.pagination {
	display: flex;
	justify-content: center;
	gap: var(--s-2);
	padding: var(--s-7) 0;
}

.pagination__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 var(--s-3);
	border-radius: var(--r-pill);
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink-2);
	font-family: var(--mono);
	font-size: 13px;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: background var(--t-micro), border-color var(--t-micro), color var(--t-micro);
}

.pagination__btn:hover {
	border-color: var(--ink);
	color: var(--ink);
}

.pagination__btn.is-active {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}


/* ════════════════════════════════════════════════════════════
   SECTION UTILITIES
════════════════════════════════════════════════════════════ */

/* "View all" CTA below card grids, guide lists, and set rows */
.section-cta {
	margin: var(--s-6) 0 0;
	text-align: right;
}

/* Links inside .set-row__name */
.set-row__name a {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}

.set-row__name a:hover {
	color: var(--amber-deep);
}