/*
   Scamboard Cases UI — Homepage Integration (v1.6.0)
   Components: .scu-hero | .scu-tiles-row
   Loaded only on is_front_page().
*/

/* ── Hero (featured case) ────────────────────────────────────────────────── */

.scu-hero {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: stretch;
	gap: 2rem;
	background-color: var(--e-global-color-36221fb, #f2f2f2);
	overflow: hidden;
}

.scu-hero__thumb-link {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;      /* centers the whole image box vertically within the grid row */
	aspect-ratio: 4 / 3;     /* replaces height: 100% — gives it its own fixed proportions */
	height: auto;
	overflow: hidden;
}

.scu-hero__thumb {
	width: 90%;
	height: auto;
	object-fit: cover;
	display: block;
}

.scu-hero__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2.25rem 2.25rem 2.25rem 0;
}

.scu-hero__meta-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	min-height: 1.6rem;
}

.scu-hero__term {
   display: inline-block;
   font-family: var(--e-global-typography-b173076-font-family);
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   text-decoration: none;
   padding: 0.2rem 0.5rem;
   border-radius: 4px;
   transition: opacity 0.15s ease;
}

.scu-hero__term--encounter {
	background-color: var(--e-global-color-e4f6fd7, #1A66F8);
	color: var(--e-global-color-36221fb, #f2f2f2);
}

.scu-hero__term--country {
	background-color: var(--e-global-color-text, #444444);
	color: var(--e-global-color-36221fb, #f2f2f2);
}

.scu-hero__term--encounter:hover {
	background-color: var(--e-global-color-3198af1, #1A66F87A);
	color: var(--e-global-color-36221fb, #f2f2f2);
}

.scu-hero__term--country:hover {
	background-color: var(--e-global-color-7f53981, #969696);
	color: var(--e-global-color-36221fb, #f2f2f2);
}

.scu-hero__title {
	font-family: var(--e-global-typography-e0a6a98-font-family) !important;
	font-size: var(--e-global-typography-e0a6a98-font-size) !important;
	font-weight: var(--e-global-typography-e0a6a98-font-weight) !important;
	line-height: var(--e-global-typography-e0a6a98-line-height) !important;
	margin: 0;
	color: var(--e-global-color-text, #444444);
}

.scu-hero__title-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.scu-hero__title-link:hover,
.scu-hero__title-link:focus-visible {
	color: var(--e-global-color-7f53981, #969696);
	outline: none;
}

.scu-hero__summary {
	font-family: var(--e-global-typography-b173076-font-family);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--e-global-color-9bb1292, #696969);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.15s ease;
}

.scu-hero__perp {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.1rem 1rem;
	font-family: var(--e-global-typography-b173076-font-family);
	font-size: 1rem;
	font-weight: 600;
	color: var(--e-global-color-text, #444444);
}

.scu-hero__perp-org {
    font-weight: 400;
}

.scu-hero__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.1rem 1rem;
	font-family: var(--e-global-typography-b173076-font-family);
	font-size: clamp(0.9375rem, 0.8594rem + 0.25vw, 1rem);
	color: var(--e-global-color-9bb1292, #696969);
}

.scu-hero__damage-currency {
	margin-right: 0.2rem;
	color: var(--e-global-color-text, #444444);
	font-weight: 600;
}

.scu-hero__damage-amount {
	color: var(--e-global-color-text, #444444);
	font-weight: 600;
}

.scu-hero__cta {
	margin-top: 0.5rem;
	align-self: flex-start;
	font-family: var(--e-global-typography-b173076-font-family);
	font-weight: 600;
	font-size: 1rem;
	color: var(--e-global-color-e4f6fd7, #1A66F8);
	text-decoration: none;
}

a.scu-hero__cta:hover,
a.scu-hero__cta:active {
	text-decoration: none;
	color: var(--e-global-color-3198af1, #1A66F87A);
}

@media (max-width: 900px) {
	.scu-hero {
		grid-template-columns: 1fr;
	}

	.scu-hero__body {
		padding: 1rem;
	}
}

/* ── Category tiles (each tile = standard card + header, v1.6.1) ────────── */

/*
 * One grid of "big tiles" (.scu-tile-card), each holding a header and a
 * case card as separate children. See class-scu-homepage.php
 * render_category_tiles() for the full rationale.
 *
 * Baseline (all browsers): each .scu-tile-card is a simple flex column —
 * header and card stack, but heights aren't equalised across neighbouring
 * tiles. This matches the original v1.6.1 behaviour and is the fallback
 * for browsers without subgrid support.
 */
.scu-tile-grid {
	grid-template-columns: repeat(3, minmax(0, calc((100% - 2 * 1.5rem) / 3)));
	grid-auto-rows: auto;
	align-items: stretch;
	padding: 0;
	/* Overrides the base .scu-grid rule's 5rem row-gap (tuned for the
	   single-level case archive grid). Here row-gap applies uniformly
	   between EVERY row track the subgrid enhancement below creates —
	   both header-to-card within one tile, and tile-pair to tile-pair —
	   since CSS grid has no way to vary gap per row-track without an
	   explicit spacer track. 1.5rem keeps that inner and outer spacing
	   visually consistent; adjust here if it reads as too tight/loose
	   once the header's border box is in view on staging. */
	gap: 5rem 1.5rem;
}

.scu-tile-card {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

@media (max-width: 782px) {
	.scu-tile-grid {
		grid-template-columns: repeat(2, minmax(0, calc((100% - 1.5rem) / 2)));
	}
}

@media (max-width: 550px) {
	.scu-tile-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Progressive enhancement: where subgrid is supported (Safari 16+,
 * Firefox 71+, Chrome/Edge 117+ — effectively universal since 2023), each
 * tile spans the 2 row-tracks (header row, card row) that the outer grid
 * auto-generates for its row of tiles, and hands its own row sizing back
 * to the outer grid via `grid-template-rows: subgrid`. Because tiles
 * auto-place left-to-right, every tile in a visual row starts on the same
 * pair of row lines, so headers equalise together and cards equalise
 * together across that row — independently of each other — at every
 * breakpoint, without any PHP row-index math.
 */
@supports (grid-template-rows: subgrid) {
	.scu-tile-card {
		display: grid;
		grid-row: span 2;
		grid-template-rows: subgrid;
		/* Row spacing for the subgridded rows now comes from
		   .scu-tile-grid's own `gap`, not from here. */
	}

	.scu-tile-card__header {
		grid-row: 1;
		/* Grid's default stretch behaviour for a `display:flex` item with
		   auto height isn't reliably applied across browsers (the same
		   reason .scu-grid__item, above in scu-filter.css, forces
		   `height: 100%` on itself rather than depending on the
		   default). Without this, the header sizes to its own content
		   only and the row track equalisation that IS working correctly
		   for the card row below doesn't visibly show up here. */
		height: 100%;
	}

	/* .scu-grid__item is SCU_Filter::render_card()'s own wrapper class,
	   scoped here so this doesn't leak into the main archive grid or
	   Zone 8 related-cases grid where that class is also used. */
	.scu-tile-card > .scu-grid__item {
		grid-row: 2;
	}
}

.scu-tile-card__header {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 1.1rem;
	border: solid;
	border-width: 3px;
	border-radius: 10px;
	border-color: var(--e-global-color-36221fb, #F2F2F2);
	gap: 0.4rem;
}

/*
 * .scu-tile-card__name (the taxonomy title) is the only line that varies
 * 1 vs 2 lines across tiles — everything below it (description, count) is
 * already clamped/fixed-height, so it stays equal on its own. Once the
 * header is stretched to match its row's tallest sibling (see height:100%
 * above), any leftover space should sit between the title and the rest,
 * not get tacked on after the count. Targeting the second child (whether
 * that's .scu-tile-card__desc-wrap, or .scu-tile-card__count when a term
 * has no description) covers both cases without extra markup.
 */
.scu-tile-card__header > *:nth-child(2) {
	margin-top: auto;
}

.scu-tile-card__name {
	margin: 0;
	font-family: var(--e-global-typography-b173076-font-family);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.3em;
	color: var(--e-global-color-36221fb, #F2F2F2);
	text-align: center;
	margin-bottom: 0.5rem;
}

.scu-tile-card__name a {
	color: inherit;
	text-decoration: none;
}

.scu-tile-card__name a:hover {
	text-decoration: none;
	color: var(--e-global-color-0532e6e, #C4C4C4);
}

.scu-tile-card__desc-wrap {
	/* Reserves space for 3 clamped lines + a toggle line, so tiles stay
	   symmetrical at rest whether or not a given term's description is
	   long enough to actually need the toggle. Grows on expand. */
	min-height: calc(3 * 0.85rem * 1.5 + 1.4rem);
}

.scu-tile-card__desc {
	margin: 0;
	font-family: var(--e-global-typography-b173076-font-family);
	color: var(--e-global-color-7b1940f, #DBDBDB);
	font-size: 1.1rem;
	font-weight: 400;
	line-height: 1.35em;
	margin-bottom: 0.4rem;
}

.scu-tile-card__desc--clamped {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Checked state = expanded (pure CSS, no JS) */
.scu-tile-card__desc-toggle:checked ~ .scu-tile-card__desc--clamped {
	-webkit-line-clamp: unset;
	overflow: visible;
}

.scu-tile-card__expand {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--e-global-color-7b1940f, #DBDBDB);
	cursor: pointer;
	text-decoration: underline;
}

.scu-tile-card__expand--less {
	display: none;
}

.scu-tile-card__desc-toggle:checked ~ .scu-tile-card__expand--more {
	display: none;
}

.scu-tile-card__desc-toggle:checked ~ .scu-tile-card__expand--less {
	display: inline;
}

.scu-tile-card__count {
	font-family: var(--e-global-typography-b173076-font-family);
	color: var(--e-global-color-11f9f22, #ADADAD);
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	align-self: flex-end;
}