/* Shared components (split out of home.css, 11 Nov): the collections strip, the feature row and the journal
 * cards. Loaded on the homepage, the Journal, the ShockStop page and the collection pages. Page-only sections
 * stay in their own files (home.css: hero, campaign carousel, story, Performance band). */

/* ---------- Collections (dark stone) ---------- */
.tz-home-collections { padding: var(--wp--preset--spacing--90) var(--wp--style--root--padding-left, 48px); background: #262522; color: var(--tz-surface); }
.tz-home-collections .tz-eyebrow { color: var(--tz-sand); }
.tz-home-collections .tz-heading__title { color: var(--tz-surface); }
.tz-collections { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto !important; padding: 0; list-style: none; max-width: 1320px; overflow: hidden; }
/* Each item draws its left and top divider; the container clips the ones on the outer edges. */
/* Columns size to their logo, so every lockup keeps the same lettering size. */
.tz-collections__item { flex: 1 1 0; min-width: min-content; box-sizing: border-box; margin: -1px 0 0 -1px; border-left: 1px solid #3e3c37; border-top: 1px solid #3e3c37; }
.tz-collections__link { display: flex; flex-direction: column; align-items: center; gap: 24px; height: 100%; padding: 40px 20px; box-sizing: border-box; color: var(--tz-surface); text-decoration: none; transition: background-color .25s ease; }
.tz-collections__link:hover { background: rgba(255,255,255,.03); }
.tz-collections__lockup { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 130px; color: var(--tz-sand); transition: transform .35s ease; }
.tz-collections__link:hover .tz-collections__lockup { transform: translateY(-4px); }
/* Same height for every lockup so the lettering matches; wide ones scale down to fit the column. */
.tz-collections__svg { display: block; height: 120px; width: auto; max-width: none; flex: none; }
.tz-collections__tagline { flex: 1 0 auto; width: 0; min-width: 100%; font-size: 14px; line-height: 20px; color: rgba(247,245,241,.7); text-align: center; } /* wraps to the logo's width instead of widening the column */
.tz-collections__cta {
	display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; border-bottom: 1px solid var(--tz-sand);
	font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}
.tz-collections__link:hover .tz-collections__cta::after { transform: translateX(3px); }

/* ---------- Feature row ---------- */
.tz-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0 auto !important; padding: 0; list-style: none; max-width: 1320px; }
.tz-features__item { display: flex; align-items: center; gap: 16px; margin: 0; }
.tz-features__icon { flex: none; color: var(--tz-olive); }
.tz-features__text { display: flex; flex-direction: column; font-size: 14px; line-height: 20px; color: var(--tz-muted); }
.tz-features__text strong { font-weight: 500; color: var(--tz-ink); }

/* ---------- Journal ---------- */
.tz-journal__grid { gap: 40px 24px !important; }
.tz-journal__grid > li { position: relative; margin: 0; }
.tz-journal__media { margin: 0 0 18px !important; overflow: hidden; background: var(--tz-stone); }
.tz-journal__media img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; transition: transform .5s ease; }
.tz-journal__grid > li:hover .tz-journal__media img { transform: scale(1.03); }
.tz-journal__cat { margin: 0 0 8px !important; font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tz-muted); }
.tz-journal__cat a { position: relative; z-index: 2; color: inherit; text-decoration: none; }
.tz-journal__cat a:hover { color: var(--tz-ink); }
.tz-journal__title { margin: 0 !important; font-size: 24px; line-height: 30px; }
.tz-journal__title a { color: var(--tz-ink); text-decoration: none; }
.tz-journal__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */
.tz-journal__grid > li:hover .tz-journal__title a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- Responsive ---------- */
/* A 1100px block was in home.css but never applied: a stray fragment above it made browsers drop it. Kept
   here switched off so nothing changes visually; turning it on is a design decision (11 Nov).
@media (max-width: 1100px) {
	.tz-collections__svg { height: 100px; max-width: 100%; }
	.tz-collections__lockup { height: 110px; }
	.tz-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tz-journal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.tz-journal__grid > li:nth-child(3) { display: none; }
}
*/
@media (max-width: 640px) {
	.tz-collections__item { flex-basis: 50%; }
	.tz-collections__lockup { height: 90px; }
	.tz-collections__svg { height: 80px; }
	.tz-collections__link { padding: 28px 12px; gap: 16px; }
	.tz-collections__tagline { font-size: 13px; }
	.tz-features { grid-template-columns: 1fr; gap: 16px; }
	.tz-journal__grid { grid-template-columns: 1fr !important; }
	.tz-journal__grid > li:nth-child(3) { display: block; }
}
@media (prefers-reduced-motion: reduce) {
	.tz-collections__lockup, .tz-journal__media img { transition: none; animation: none; }
}