/*
 * Polish layer — glassmorphism on tools, swipeable mobile cards,
 * editorial trust block, use case finder, policy pages.
 */

/* ---------- Glassmorphism on tool shells ---------- */
.cor-quiz-app, .cor-calc-app, .cor-vis-app, .cor-ing-app, .cor-recipe-app, .cor-storage-app, .cor-compare-app, .cor-uc-app {
	background:
		linear-gradient(135deg, rgba(255,253,249,0.85) 0%, rgba(244,239,229,0.7) 100%);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border: 1px solid rgba(255,255,255,0.6);
	box-shadow:
		0 1px 0 rgba(255,255,255,0.7) inset,
		0 24px 60px rgba(28,24,18,0.08),
		0 4px 12px rgba(28,24,18,0.04);
}

/* Add a soft tropical aurora behind the tool shell */
.cor-tool { position: relative; isolation: isolate; }
.cor-tool::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(640px 380px at 8% 0%, rgba(201,168,124,0.18), transparent 60%),
		radial-gradient(720px 420px at 100% 30%, rgba(63,93,61,0.12), transparent 65%);
	pointer-events: none;
}

/* ---------- Swipeable mobile carousels ---------- */
@media (max-width: 760px) {
	.cor-fp-grid,
	.cor-cats-grid,
	.cor-tools-cards,
	.cor-editor-grid,
	.cor-grid-3 {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 84%;
		grid-template-columns: none !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: var(--cor-gutter);
		gap: 14px;
		margin-left: calc(-1 * var(--cor-gutter));
		margin-right: calc(-1 * var(--cor-gutter));
		padding: 8px var(--cor-gutter) 18px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.cor-fp-grid::-webkit-scrollbar,
	.cor-cats-grid::-webkit-scrollbar,
	.cor-tools-cards::-webkit-scrollbar,
	.cor-editor-grid::-webkit-scrollbar,
	.cor-grid-3::-webkit-scrollbar { display: none; }

	.cor-fp-grid > *,
	.cor-cats-grid > *,
	.cor-tools-cards > *,
	.cor-editor-grid > *,
	.cor-grid-3 > * { scroll-snap-align: start; min-width: 0; }

	.cor-fp-grid > .cor-pb-featured { grid-column: auto !important; grid-row: auto !important; grid-auto-columns: auto; }
	.cor-feature-card { grid-column: auto !important; grid-row: auto !important; }

	.cor-cats-grid { grid-auto-columns: 60%; }
	.cor-tools-cards { grid-auto-columns: 78%; }

	/* Hint that there's more to the right */
	.cor-fp-grid::after,
	.cor-cats-grid::after,
	.cor-tools-cards::after { content: ''; flex: 0 0 1px; }
}

/* ---------- Editorial Trust section ---------- */
.cor-editorial-trust {
	background:
		linear-gradient(180deg, transparent 0%, var(--cor-bg-warm) 60%, transparent 100%);
}
.cor-et-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin-bottom: clamp(28px, 4vw, 40px);
}
.cor-et-step {
	background: var(--cor-paper);
	border: 1px solid var(--cor-line);
	border-radius: var(--cor-radius);
	padding: 22px 24px;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
	position: relative;
}
.cor-et-step:hover { transform: translateY(-3px); border-color: var(--cor-cream); box-shadow: var(--cor-shadow); }
.cor-et-step h3 {
	font-size: 1.05rem;
	font-family: var(--cor-sans);
	letter-spacing: .02em;
	color: var(--cor-sage-d);
	margin: 0 0 .5rem;
}
.cor-et-step p { margin: 0; color: var(--cor-ink-2); font-size: .95rem; }
.cor-et-signoff {
	display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
	background: var(--cor-paper);
	border: 1px solid var(--cor-line);
	border-radius: var(--cor-radius-lg);
	padding: 18px 26px;
}
.cor-et-signoff-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cor-et-signoff-pills .cor-pill { background: var(--cor-cream-l); border-color: transparent; }

/* ---------- Use Case Finder ---------- */
.cor-uc-shell {
	display: grid;
	grid-template-columns: 1.1fr 1.4fr;
	gap: 24px;
}
@media (max-width: 880px) { .cor-uc-shell { grid-template-columns: 1fr; } }

.cor-uc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 12px;
}
.cor-uc-tile {
	background: rgba(255,255,255,0.7);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,0.7);
	box-shadow: 0 8px 18px rgba(28,24,18,0.05);
	border-radius: var(--cor-radius);
	padding: 18px 16px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	text-align: left;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	font-family: var(--cor-sans);
}
.cor-uc-tile:hover { transform: translateY(-3px); border-color: var(--cor-cream); box-shadow: 0 14px 30px rgba(28,24,18,0.10); }
.cor-uc-tile.is-active {
	background: linear-gradient(135deg, var(--cor-sage-l), rgba(255,255,255,0.9));
	border-color: var(--cor-sage);
}
.cor-uc-icon { font-size: 1.6rem; line-height: 1; }
.cor-uc-label { font-weight: 600; font-size: 1rem; color: var(--cor-ink); }
.cor-uc-sub { font-size: .82rem; color: var(--cor-muted); }

.cor-uc-detail, .cor-uc-empty {
	background: rgba(255,255,255,0.85);
	border: 1px solid rgba(255,255,255,0.6);
	box-shadow: 0 24px 48px rgba(28,24,18,0.08);
	border-radius: var(--cor-radius-lg);
	padding: clamp(20px, 3vw, 28px);
	min-height: 320px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.cor-uc-empty { align-items: center; justify-content: center; color: var(--cor-muted); text-align: center; }
.cor-uc-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cor-uc-detail-head h2 { margin: 0; font-size: clamp(1.3rem, 1.5vw + .8rem, 1.7rem); }
.cor-uc-close { background: rgba(0,0,0,0.04); border: 0; width: 36px; height: 36px; border-radius: 999px; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--cor-muted); flex: 0 0 auto; }
.cor-uc-close:hover { background: rgba(0,0,0,0.08); color: var(--cor-ink); }
.cor-uc-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) { .cor-uc-detail-grid { grid-template-columns: 1fr; } }
.cor-uc-block { background: var(--cor-cream-l); border-radius: var(--cor-radius); padding: 14px 18px; }
.cor-uc-block h3 { margin: 0 0 .25rem; font-size: .85rem; font-family: var(--cor-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--cor-cream-d); }
.cor-uc-block p { margin: 0 0 .5rem; }
.cor-uc-recipe { background: var(--cor-paper); border: 1px solid var(--cor-line); border-radius: var(--cor-radius); padding: 16px 22px; }
.cor-uc-recipe h3 { margin: 0 0 .5rem; font-size: .85rem; font-family: var(--cor-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--cor-muted); }
.cor-uc-recipe ol { margin: 0; padding-left: 1.3em; font-size: .95rem; }
.cor-uc-recipe li { margin-bottom: .35rem; }
.cor-uc-footer { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }

/* ---------- Policy pages ---------- */
.cor-policy { padding: clamp(28px, 5vw, 56px) 0 clamp(48px, 7vw, 80px); }
.cor-policy-grid {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: clamp(28px, 4vw, 48px);
	align-items: start;
}
@media (max-width: 880px) { .cor-policy-grid { grid-template-columns: 1fr; } }
.cor-policy-toc {
	position: sticky; top: 90px;
	background: var(--cor-paper);
	border: 1px solid var(--cor-line);
	border-radius: var(--cor-radius);
	padding: 18px 22px;
}
.cor-policy-toc h4 { margin: 0 0 .6rem; font-family: var(--cor-sans); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cor-muted); }
.cor-policy-toc ol { margin: 0; padding-left: 1.2em; }
.cor-policy-toc a { color: var(--cor-ink-2); font-size: .92rem; }
.cor-policy-toc a:hover { color: var(--cor-cta); }
.cor-policy-body { font-size: 1.05rem; line-height: 1.78; max-width: 70ch; }
.cor-policy-body h2 { margin-top: 2.4em; padding-top: .4em; }
.cor-policy-body ul li { margin-bottom: .5em; }

/* ---------- Sidebar/Side block — make pretty when used in policy contexts ---------- */
@media (max-width: 880px) { .cor-policy-toc { position: static; } }

/* ---------- Final CTA on single product ---------- */
.cor-single-final-cta {
	background: linear-gradient(135deg, var(--cor-sage) 0%, var(--cor-sage-d) 100%);
	color: #fff;
	border-radius: var(--cor-radius-lg);
	padding: clamp(20px, 3vw, 32px);
	margin: 2rem 0;
	text-align: center;
}
.cor-single-final-cta h3 { color: #fff; margin: 0 0 1rem; }
.cor-single-final-cta .cor-pb-disclosure { color: rgba(255,255,255,0.7); margin-top: .8rem; }

/* ---------- Related content (internal-linking block) ---------- */
.cor-related-block {
	background: var(--cor-paper);
	border: 1px solid var(--cor-line);
	border-radius: var(--cor-radius);
	padding: clamp(20px, 3vw, 28px);
	margin: 2.5rem 0 1rem;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 24px;
	position: relative;
}
.cor-related-block::before {
	content: '';
	position: absolute; top: -1px; left: 24px; right: 24px; height: 3px;
	background: linear-gradient(90deg, var(--cor-sage), var(--cor-cream), var(--cor-cta));
	border-radius: 0 0 4px 4px;
}
.cor-related-block-title {
	grid-column: 1 / -1;
	margin: 0;
	font-family: var(--cor-sans);
	font-size: .85rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cor-muted);
}
.cor-related-col h4 {
	margin: 0 0 .6rem;
	font-family: var(--cor-sans);
	font-size: .92rem;
	font-weight: 600;
}
.cor-related-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.cor-related-col a { color: var(--cor-ink); font-size: .92rem; }
.cor-related-col a:hover { color: var(--cor-cta); }
@media (max-width: 760px) {
	.cor-related-block { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.cor-related-block { grid-template-columns: 1fr; }
}

/* ---------- Single rating display ---------- */
.cor-single-rating { margin: .25rem 0 .5rem; }
.cor-single-meta { color: var(--cor-muted); font-size: .9rem; margin: .25rem 0 0; }
.cor-single-hero { margin: 1.5rem 0 2rem; }
.cor-single-hero-img { border-radius: var(--cor-radius-lg); width: 100%; max-height: 480px; object-fit: cover; }