/* =====================================================================
   Top Grade Movers — pages/resources.css
   Resources page ("Moving House Checklist", pages/template-resources.php)
   styles only. The shared inner-page hero (.page-hero) and its floating
   download tab (.page-hero__download) live in components/sections.css.
   ===================================================================== */

/* =========================================================
   1. INTRO ("Get Ready for a Smooth Move")
   ========================================================= */
.checklist-intro {
	padding-block: var(--section-spacing);
}

.checklist-intro__text {
	margin-top: 1.25rem;
}

.checklist-intro .section-heading {
	font-weight: 800;
}

.checklist-intro__text p {
	font-size: var(--body-size);
	line-height: 1.9;
	color: var(--text-color);
	margin-bottom: 1rem;
}

.checklist-intro__text p:last-child {
	margin-bottom: 0;
}

.checklist-intro__media {
	aspect-ratio: 675 / 430;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.checklist-intro__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================
   2. PLANNER SUB-HEADING (text only, no image)
   ========================================================= */
.checklist-planner {
	padding-block: clamp(2rem, 4vw, 2.1rem);
	background: var(--background-color);
}

.checklist-planner__heading {
	font-size: 2rem;
	font-weight: 900;
	letter-spacing: -.01em;
	color: var(--heading-color);
	margin-bottom: .75rem;
}

.checklist-planner__text {
	max-width: 47.5rem;
	color: var(--muted-color);
	font-size: var(--body-size);
	line-height: 1.8;
	margin: 0;
}

/* =========================================================
   3. CHECKLIST SECTIONS (repeatable, alternating photo/text)
   ========================================================= */
.checklist-section {
	position: relative;
	padding: 70px 0;
	overflow: hidden;
}

.checklist-section--dark {
	background: var(--black);
	color: var(--text-color-light);
}

.checklist-section--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.checklist-section__ring {
	position: absolute;
	top: 50%;
	right: -3.75rem;
	width: 22.625rem;
	height: 22.625rem;
	border-radius: var(--radius-full);
	border: 1px solid rgba(var(--white-rgb), .12);
	box-shadow: 0 0 0 40px rgba(var(--white-rgb), .04);
	transform: translateY(-50%);
	pointer-events: none;
}

.checklist-section__media {
	position: relative;
	z-index: 1;
	aspect-ratio: 675 / 430;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card-sm);
}

.checklist-section--dark .checklist-section__media {
	aspect-ratio: 13 / 7;
	box-shadow: 0 30px 60px -24px rgba(var(--black-rgb), .6);
}

.checklist-section__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.checklist-section__eyebrow {
	position: relative;
	z-index: 1;
	color: var(--primary-color);
}

.checklist-section__heading {
	position: relative;
	z-index: 1;
	font-size: 2.375rem;
	font-weight: 900;
	letter-spacing: -.02em;
	line-height: 1.02;
	color: var(--heading-color);
	margin: .75rem 0 1.5rem;
}

.checklist-section--dark .checklist-section__heading {
	color: var(--text-color-light);
}

.checklist-section__list {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.checklist-section__item {
	display: flex;
	align-items: flex-start;
	gap: .875rem;
	font-size: .96875rem;
	line-height: 1.5;
	color: var(--text-color);
}

.checklist-section--dark .checklist-section__item {
	color: rgba(var(--white-rgb), .85);
}

.checklist-section__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: .1rem;
	border-radius: var(--radius-4);
	background: rgba(var(--primary-rgb), .1);
	color: var(--primary-color);
}

.checklist-section--dark .checklist-section__check {
	background: var(--primary-color);
	color: var(--text-color-light);
}

/* =========================================================
   4. DANGEROUS GOODS GUIDE
   ========================================================= */
.dangerous-goods {
	padding-bottom: 50px;
}

.dangerous-goods__head {
	max-width: 43.75rem;
	margin-bottom: var(--gap-xl);
}

.dangerous-main-head {
	font-size: clamp(1.5rem, 1.32375rem + 0.75vw, 2rem);
	font-style: normal;
	font-weight: 900;
	line-height: 48px;
	letter-spacing: -0.48px;
}

.dangerous-goods__head .section-description {
	margin-top: .75rem;
}

.dg-card {
	display: flex;
	flex-direction: column;
	gap: var(--gap-md);
	padding: 2.0625rem 1.9375rem;
	background: var(--background-color);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
}

.dg-card__head {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.dg-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3.25rem;
	height: 3.25rem;
	background: rgba(var(--primary-rgb), .08);
	border: 1px solid rgba(var(--primary-rgb), .35);
	border-radius: var(--radius-full);
}

.dg-card__icon svg,
.dg-card__icon-img {
	width: 1.625rem;
	height: 1.625rem;
	object-fit: contain;
}

.dg-card__heading {
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

.dg-card__label {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .11rem;
	text-transform: uppercase;
	color: var(--muted-color);
}

.dg-card__title {
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--heading-color);
}

.dg-card__list {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dg-card__item {
	display: flex;
	align-items: center;
	gap: .625rem;
	font-size: .90625rem;
	line-height: 1.4;
	color: var(--text-color);
}

.dg-card__dot {
	flex-shrink: 0;
	width: 5px;
	height: 5px;
	border-radius: var(--radius-full);
	background: var(--primary-color);
}

.dg-card__text {
	font-size: .875rem;
	line-height: 1.6;
	color: var(--muted-color);
	margin: 0;
}

.dangerous-goods__note {
	margin-top: var(--gap-xl);
	padding: 1.35rem 1.625rem;
	background: var(--light-bg);
	border-left: 3px solid var(--primary-color);
	border-radius: var(--radius-sm);
}

.dangerous-goods__note p {
	font-size: .90625rem;
	line-height: 1.6;
	color: var(--text-color);
	margin: 0;
}

.dangerous-goods__note strong {
	color: var(--heading-color);
}

/* =========================================================
   5. RESPONSIVE
   (shared header/footer/hero breakpoints live in media.css /
   components/sections.css; these are specific to this page)
   ========================================================= */
@media (max-width: 991.98px) {
	.checklist-section__ring {
		right: -10rem;
	}
}

@media (max-width: 767.98px) {
	.checklist-planner__heading {
		font-size: 1.625rem;
	}

	.checklist-section__heading {
		font-size: 1.625rem;
	}

	.checklist-section__ring {
		display: none;
	}
}