/* =============================================================================
   TinySpacer — latest-guides.css
   -----------------------------------------------------------------------------
   Layout for the homepage "Latest Organization Guides" section
   (template-parts/home/latest-guides.php).

   Scope: this file styles ONLY .ts-latest-guides and its section-specific
   additions. The card shell (lift, shadow, rounded corners, stretched link)
   comes from the shared .ts-article-card component in components.css — this
   file does NOT redefine it. It only:
     • sets the 1 / 2 / 3 column grid,
     • overrides the card media to a 4:3 ratio for this section,
     • styles the "Read Guide" cue,
     • styles the centered footer button,
     • styles the empty-state skeleton placeholders.

   Mobile-first. Min-width media queries only. No framework.

   Contents:
     1. Section shell
     2. Responsive grid (1 → 2 → 3)
     3. Media ratio override (4:3)
     4. "Read Guide" cue
     5. Footer button
     6. Empty-state placeholders (skeletons)
     7. Reduced-motion & forced-colors
   ========================================================================== */

/* =============================================================================
   1. SECTION SHELL
   ========================================================================== */

.ts-latest-guides {
	background-color: var(--ts-color-surface-alt);
}

/* =============================================================================
   2. RESPONSIVE GRID — 1 (mobile) → 2 (tablet) → 3 (desktop)
   ========================================================================== */

.ts-latest-guides__grid {
	grid-template-columns: 1fr;
}

@media (min-width: 40em) { /* 640px — tablet */
	.ts-latest-guides__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64em) { /* 1024px — desktop */
	.ts-latest-guides__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =============================================================================
   3. MEDIA RATIO OVERRIDE
   -----------------------------------------------------------------------------
   The base .ts-article-card__media is 4:5 (portrait, Pinterest wall). This
   section calls for a 4:3 featured image, so override just the ratio here.
   ========================================================================== */

.ts-latest-guides__media {
	aspect-ratio: 4 / 3;
}

/* =============================================================================
   4. "READ GUIDE" CUE
   -----------------------------------------------------------------------------
   Sits at the bottom of the card body and animates with the card's hover /
   focus-within state (driven by the shared .ts-article-card wrapper).
   ========================================================================== */

.ts-latest-guides__cue {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-space-2);
	margin-block-start: var(--ts-space-1);
	font-family: var(--ts-font-heading);
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-medium);
	color: var(--ts-color-link);
}

.ts-latest-guides__arrow {
	flex-shrink: 0;
	transition: transform var(--ts-transition-base);
}

.ts-article-card:hover .ts-latest-guides__cue,
.ts-article-card:focus-within .ts-latest-guides__cue {
	color: var(--ts-color-link-hover);
}

.ts-article-card:hover .ts-latest-guides__arrow,
.ts-article-card:focus-within .ts-latest-guides__arrow {
	transform: translateX(4px);
}

/* =============================================================================
   5. FOOTER BUTTON
   ========================================================================== */

.ts-latest-guides__footer {
	margin-block-start: var(--ts-space-8);
	display: flex;
	justify-content: center;
}

/* =============================================================================
   6. EMPTY-STATE PLACEHOLDERS
   -----------------------------------------------------------------------------
   Shown when there are no published posts yet. The card chrome is inherited
   from .ts-article-card; these skeleton bars stand in for meta/title/excerpt.
   ========================================================================== */

.ts-latest-guides__card--placeholder {
	cursor: default;
}

.ts-latest-guides__skeleton {
	display: block;
	height: 0.9em;
	border-radius: var(--ts-radius-pill);
	background-color: var(--ts-color-surface-alt);
	background-image: linear-gradient(
		90deg,
		var(--ts-color-surface-alt) 0%,
		var(--ts-color-border) 50%,
		var(--ts-color-surface-alt) 100%
	);
	background-size: 200% 100%;
	animation: ts-guides-shimmer 1.4s ease-in-out infinite;
}

.ts-latest-guides__skeleton--meta {
	width: 45%;
	height: 0.8em;
}

.ts-latest-guides__skeleton--title {
	height: 1.1em;
	margin-block-end: var(--ts-space-2);
}

.ts-latest-guides__skeleton--short {
	width: 60%;
}

.ts-latest-guides__skeleton--text {
	height: 0.8em;
	margin-block-end: var(--ts-space-2);
}

.ts-latest-guides__skeleton--text:last-child {
	width: 80%;
	margin-block-end: 0;
}

@keyframes ts-guides-shimmer {
	from { background-position: 200% 0; }
	to   { background-position: -200% 0; }
}

/* =============================================================================
   7. REDUCED-MOTION & FORCED-COLORS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ts-latest-guides__arrow {
		transition: none;
	}

	.ts-latest-guides__skeleton {
		animation: none;
	}
}

@media (forced-colors: active) {
	.ts-latest-guides__skeleton {
		background: CanvasText;
		opacity: 0.2;
	}
}