/* Resources landing page — new design-language reskin (design skill v2).
   PAGE-SCOPED: every rule is nested under .tc-page--resources so it restyles ONLY the
   /resources page and leaves the shared marketing.css (and every other marketing page)
   untouched. No markup/content changes — this only reskins the existing tc-mk-* structure
   into the drift-gradient hero + elevated cards + reveal-on-scroll look of the mockups
   (data/index.html, trainings.html, toolkits.html). Depends on: tc-marketing. */

/* Drift animation shared by the hero band (mirrors the mockup's @keyframes drift). */
@keyframes tc-res-drift { 0% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } 100% { background-position: 0% 40%; } }

/* ---------- Scroll progress bar (JS-injected, page-scoped) ---------- */
.tc-res-progress {
	position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 80;
	background: linear-gradient(90deg, var(--cerulean, #33C6F5), var(--pumpkin, #F28030));
	transition: width 0.08s linear; pointer-events: none;
}

/* ---------- Hero: drift-gradient band, white title, slider kept ---------- */
.tc-page--resources .tc-mk-hero {
	position: relative; overflow: hidden; color: #fff;
	padding: clamp(52px, 7vw, 80px) 24px clamp(56px, 7vw, 84px);
	background: linear-gradient(120deg,
		var(--navy-deep, #132145) 0%, var(--navy, #1B2D5B) 38%, #3a3f6b 68%, var(--sienna, #D4935A) 130%);
	background-size: 220% 220%;
	animation: tc-res-drift 22s ease-in-out infinite;
}
.tc-page--resources .tc-mk-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(60% 80% at 82% 8%, rgba(51,198,245,0.28), transparent 60%),
		radial-gradient(50% 60% at 10% 100%, rgba(242,128,48,0.22), transparent 60%);
}
.tc-page--resources .tc-mk-hero__inner { position: relative; z-index: 2; }
.tc-page--resources .tc-mk-hero__title {
	color: #fff; font-size: clamp(40px, 8vw, 84px); line-height: 0.96; letter-spacing: -0.01em;
	margin: 0 0 clamp(28px, 4vw, 44px); text-shadow: 0 2px 20px rgba(11,17,33,0.25);
}
/* Slider sits on the gradient — lift it and round it a touch more to read as a spotlight card. */
.tc-page--resources .tc-hero-slider {
	position: relative; z-index: 2; border-radius: 22px;
	box-shadow: 0 30px 60px -28px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.16);
}

/* ---------- Sections: one calm neutral surface ---------- */
.tc-page--resources { --tc-accent: #C2611F; }
.tc-page--resources .tc-mk-section { padding: clamp(56px, 7vw, 88px) 24px; }
/* A single flat neutral across every section (the mockups use one background, no
   cream/offwhite alternation). */
.tc-page--resources .tc-mk-section--yellow,
.tc-page--resources .tc-mk-section--white { background: var(--offwhite, #F7F6F2); }

/* Section head (eyebrow + title) is the shared base treatment now — see marketing.css. */
.tc-page--resources .tc-mk-section__title { font-size: clamp(28px, 4vw, 46px); }
.tc-page--resources .tc-mk-section__title a:hover { color: var(--pumpkin, #F28030); }

.tc-page--resources .tc-mk-section__intro { font-size: 1.125rem; margin-top: 16px; }

/* CTA pill — pumpkin → cream/navy on hover, left-aligned under the copy (mockup .btn). */
.tc-page--resources .tc-mk-section__cta-wrap { text-align: left; margin-top: 30px; }
.tc-page--resources .tc-mk-cta {
	padding: 15px 34px; font-size: 0.95rem; border-radius: 44px;
	box-shadow: 0 14px 30px -14px rgba(242,128,48,0.6);
}
.tc-page--resources .tc-mk-cta:hover {
	background: var(--cream, #F0E0B0); color: var(--navy, #1B2D5B); transform: translateY(-2px);
}

/* ---------- Cards: elevated, rounded, bigger lift; refined image scrim ---------- */
.tc-page--resources .tc-mk-cards { gap: 26px; margin-top: 34px; }
.tc-page--resources .tc-mk-card {
	border-radius: 18px; border-color: var(--sand, #E8E6DF);
	box-shadow: 0 18px 40px -30px rgba(27,45,91,0.5);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tc-page--resources .tc-mk-card:hover {
	transform: translateY(-6px); border-color: var(--sand, #E8E6DF);
	box-shadow: 0 26px 44px -24px rgba(27,45,91,0.45);
}
.tc-page--resources .tc-mk-card:hover .tc-mk-card__media img { transform: scale(1.05); }
.tc-page--resources .tc-mk-card__media img { transition: transform 0.5s ease; }

/* Stacked card (Curated Content): image thumb on top, white body below with the
   title/desc — the design-skill-v2 card anatomy. */
.tc-page--resources .tc-mk-card--stacked { background: #fff; }
.tc-page--resources .tc-mk-card--stacked .tc-mk-card__media {
	position: relative; aspect-ratio: 16 / 9; display: block;
}
.tc-page--resources .tc-mk-card--stacked .tc-mk-card__media--text {
	background: linear-gradient(135deg, #22407A, var(--navy-deep, #132145));
}
.tc-page--resources .tc-mk-card--stacked .tc-mk-card__body {
	display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px;
}
.tc-page--resources .tc-mk-card--stacked .tc-mk-card__body-kicker {
	font-family: 'Ubuntu', system-ui, sans-serif; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.1em; font-size: 0.64rem; color: #C2611F;
}
.tc-page--resources .tc-mk-card--stacked .tc-mk-card__body-title {
	font-family: 'Ubuntu', system-ui, sans-serif; font-weight: 500; text-transform: uppercase;
	letter-spacing: 0.02em; font-size: 1rem; line-height: 1.18; color: var(--navy, #1B2D5B);
}
.tc-page--resources .tc-mk-card--stacked .tc-mk-card__body-desc {
	font-size: 0.92rem; line-height: 1.5; color: var(--slate, #2C3A4A); margin: 2px 0 0;
}

/* ---------- Reveal-on-scroll ---------- */
/* Only arm the hidden state once JS has confirmed it's ready + motion is allowed, so a
   non-JS or reduced-motion visitor always sees fully-rendered content. */
.tc-reveal-ready .tc-page--resources .tc-mk-section,
.tc-reveal-ready .tc-page--resources .tc-hero-slider {
	opacity: 0; transform: translateY(32px);
	transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.tc-reveal-ready .tc-page--resources .tc-mk-section.is-inview,
.tc-reveal-ready .tc-page--resources .tc-hero-slider.is-inview { opacity: 1; transform: none; }
/* Stagger the cards within a revealed section. */
.tc-reveal-ready .tc-page--resources .tc-mk-card {
	opacity: 0; transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.tc-reveal-ready .tc-page--resources .tc-mk-section.is-inview .tc-mk-card { opacity: 1; transform: none; }
.tc-reveal-ready .tc-page--resources .tc-mk-section.is-inview .tc-mk-card:nth-child(2) { transition-delay: 0.08s; }
.tc-reveal-ready .tc-page--resources .tc-mk-section.is-inview .tc-mk-card:nth-child(3) { transition-delay: 0.16s; }
.tc-reveal-ready .tc-page--resources .tc-mk-section.is-inview .tc-mk-card:nth-child(4) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
	.tc-page--resources .tc-mk-hero { animation: none; }
	.tc-res-progress { display: none; }
	.tc-reveal-ready .tc-page--resources .tc-mk-section,
	.tc-reveal-ready .tc-page--resources .tc-hero-slider,
	.tc-reveal-ready .tc-page--resources .tc-mk-card {
		opacity: 1; transform: none; transition: none;
	}
}