/* OpenPress Guides directory (/guides/, Guide Category and Guide Tag archives). Loaded on those archives only, after tools.css (page header, category chips, content spacing). Uses existing tokens/components, so dark mode follows the theme variables. */

/* Breadcrumb sits above the title in the page header */
.op-guides__crumbs { margin-bottom: var(--op-space-4); }

/* Guide card ------------------------------------------------------------- */
/* Builds on .op-card / .op-card--link / .op-card__media / .op-card__body. */
.op-guide-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid var(--op-border);
}
.op-guide-card__monogram {
	color: var(--op-text-muted);
	font-size: 2.5rem;
	font-weight: var(--op-weight-semibold);
	line-height: 1;
}

.op-guide-card__body { gap: var(--op-space-3); }
.op-guide-card__category { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* Two-line title, subtitle and best-for and three-line excerpt keep rows level without hiding the key facts. */
.op-guide-card__title,
.op-guide-card__subtitle,
.op-guide-card__excerpt,
.op-guide-card__best-for {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	margin: 0;
}
.op-guide-card__title { -webkit-line-clamp: 2; line-clamp: 2; }
.op-guide-card__subtitle { -webkit-line-clamp: 2; line-clamp: 2; color: var(--op-text); font-size: var(--op-text-small); font-weight: var(--op-weight-medium); }
.op-guide-card__excerpt { -webkit-line-clamp: 3; line-clamp: 3; }
.op-guide-card__best-for { -webkit-line-clamp: 2; line-clamp: 2; color: var(--op-text-muted); font-size: var(--op-text-small); }
.op-guide-card__best-for-label { color: var(--op-text); font-weight: var(--op-weight-medium); }

/* Metadata stays at the bottom of the body so footers align across a row. */
.op-guide-card__meta {
	margin-top: auto;
	padding-top: var(--op-space-2);
}
.op-guide-card__meta .op-meta__label::after { content: ":"; }
.op-guide-card__meta .op-meta__item { overflow-wrap: anywhere; }

/* Guide card: editorial. The title is the dominant element; the frame stays out of the way. */
.op-guide-card {
	background: transparent;
	border-color: transparent;
	border-radius: var(--op-radius-lg);
	box-shadow: none;
	overflow: visible;
}
.op-guide-card.op-card--link:hover { background: transparent; box-shadow: none; border-color: transparent; transform: translateY(var(--op-lift)); }
.op-guide-card__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius-lg);
	box-shadow: var(--op-shadow-sm);
}
.op-guide-card.op-card--link:hover .op-guide-card__media { box-shadow: var(--op-shadow-lg); border-color: color-mix(in srgb, var(--op-link) 40%, var(--op-border)); }
.op-guide-card__body { padding: var(--op-space-4) 0 0; gap: var(--op-space-2); }
.op-guide-card__title { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); letter-spacing: -0.03em; line-height: 1.15; -webkit-line-clamp: 3; line-clamp: 3; }
.op-guide-card__subtitle { color: var(--op-text-muted); font-size: var(--op-text-body); font-weight: var(--op-weight-regular); line-height: 1.5; }
.op-guide-card__excerpt { font-size: var(--op-text-small); }
.op-guide-card__meta { padding-top: var(--op-space-2); font-size: var(--op-text-meta); }
.op-guide-card .op-card__footer { padding: var(--op-space-2) 0 0; border-top: 0; }

/* Archive: the newest guide leads, wide and horizontal, on large screens. */
@media (min-width: 1024px) {
	.op-guides__grid > li:first-child { grid-column: 1 / -1; }
	.op-guides__grid > li:first-child .op-guide-card {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		grid-template-areas: "media body" "media footer";
		grid-template-rows: 1fr auto;
		column-gap: var(--op-space-7);
		align-items: stretch;
	}
	.op-guides__grid > li:first-child .op-guide-card__media { grid-area: media; aspect-ratio: auto; min-height: 20rem; }
	.op-guides__grid > li:first-child .op-guide-card__body { grid-area: body; justify-content: center; padding-top: 0; }
	.op-guides__grid > li:first-child .op-guide-card .op-card__footer { grid-area: footer; }
	.op-guides__grid > li:first-child .op-guide-card__title { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); -webkit-line-clamp: 4; line-clamp: 4; }
	.op-guides__grid > li:first-child .op-guide-card__excerpt { font-size: var(--op-text-body); -webkit-line-clamp: 4; line-clamp: 4; }
}