/**
 * CC Custom Views — Help Hub frontend styles
 *
 * Namespaced under .cc-hh. Teal accent (#0e7c7b) signals support/service —
 * distinct from Learn (neutral), Law (navy), Train (rust), and Resource
 * (forest green).
 *
 * Three breakpoints: mobile (<= 480px), tablet (481-1023px),
 * desktop (>= 1024px). Desktop is 3-up (vs Resource Hub's 4-up) since
 * help items tend to need more description room and there are usually
 * more of them per page.
 */

.cc-hh {
	--cc-hh-card-bg:        #ffffff;
	--cc-hh-card-border:    rgba(0, 0, 0, 0.08);
	--cc-hh-card-border-h:  rgba(0, 0, 0, 0.18);
	--cc-hh-surface:        #f7f7f6;
	--cc-hh-text:           #1a1a1a;
	--cc-hh-text-secondary: #5f5f5b;
	--cc-hh-text-tertiary:  #999;

	/* Help accent — teal */
	--cc-hh-accent:         #0e7c7b;
	--cc-hh-accent-soft:    #e3f1f1;
	--cc-hh-accent-text:    #ffffff;

	--cc-hh-radius:    12px;
	--cc-hh-radius-sm: 8px;
	--cc-hh-radius-xs: 6px;

	box-sizing: border-box;
	color: var(--cc-hh-text);
	font-family: inherit;
	line-height: 1.5;

	/* Anchor the component to a predictable base size so the em-based       */
	/* type scale inside doesn't multiply against parent containers (Beaver  */
	/* Builder columns, Elementor sections, theme content wrappers) that    */
	/* set their own font-size. 1.125rem = 18px on a default 16px root.     */
	font-size: 1.125rem;
}

.cc-hh *,
.cc-hh *::before,
.cc-hh *::after {
	box-sizing: border-box;
}

/* ---------- Hero ---------- */

.cc-hh-hero {
	margin: 0 0 2em;
}

.cc-hh-eyebrow {
	font-size: 0.7em;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cc-hh-text-secondary);
	margin: 0 0 0.4em;
}

.cc-hh-h1 {
	font-size: 1.75em;
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 0.35em;
}

.cc-hh-lead {
	font-size: 0.95em;
	color: var(--cc-hh-text-secondary);
	margin: 0;
}

/* ---------- Sections ---------- */

.cc-hh-section {
	margin: 0 0 2.5em;
}

.cc-hh-empty {
	padding: 2em;
	background: var(--cc-hh-surface);
	border-radius: var(--cc-hh-radius);
	text-align: center;
	color: var(--cc-hh-text-secondary);
}

/* ---------- Items grid ---------- */

.cc-hh-items {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1em;
}

.cc-hh-item {
	display: flex;
	flex-direction: column;
	background: var(--cc-hh-card-bg);
	border: 1px solid var(--cc-hh-card-border);
	border-radius: var(--cc-hh-radius);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.cc-hh-item:hover,
.cc-hh-item:focus-visible {
	border-color: var(--cc-hh-card-border-h);
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.cc-hh-item-visual {
	aspect-ratio: 16 / 10;
	background-color: var(--cc-hh-accent-soft);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.cc-hh-item-body {
	padding: 1.25em 1.25em 1.5em;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.cc-hh-item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--cc-hh-accent-soft);
	color: var(--cc-hh-accent);
	border-radius: var(--cc-hh-radius-sm);
	font-size: 1.05em;
	margin: 0 0 0.7em;
}

.cc-hh-item-label {
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 0.4em;
}

.cc-hh-item-desc {
	font-size: 0.92em;
	color: var(--cc-hh-text-secondary);
	line-height: 1.5;
	margin: 0 0 1em;
	flex: 1;
}

.cc-hh-item-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--cc-hh-accent);
	margin-top: auto;
}

.cc-hh-item-cta i {
	font-size: 0.85em;
	transition: transform 0.18s;
}

.cc-hh-item:hover .cc-hh-item-cta i.fa-arrow-right {
	transform: translateX(3px);
}

.cc-hh-external-icon {
	font-size: 0.65em;
	opacity: 0.55;
	margin-left: 0.15em;
}

/* ============================================================
   Tablet — 481px and up
   ============================================================ */
@media (min-width: 481px) {
	.cc-hh-h1 {
		font-size: 2em;
	}

	.cc-hh-items {
		grid-template-columns: 1fr 1fr;
		gap: 1.1em;
	}
}

/* ============================================================
   Desktop — 1024px and up
   3-up grid (vs Resource Hub 4-up) for better description density
   ============================================================ */
@media (min-width: 1024px) {
	.cc-hh-h1 {
		font-size: 2.4em;
	}

	.cc-hh-items {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.1em;
	}

	.cc-hh-item-label {
		font-size: 1.3em;
	}

	.cc-hh-section {
		margin: 0 0 3em;
	}
}