/* ==========================================================================
   Offers ("How We Can Help") Section
   File lives at: /assets/css/offers.css inside the child theme
   ========================================================================== */

.offers {
	position: relative;
	background-color: #393E46;
	padding: 70px 0 60px;
}

.offers__container {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
}

.offers__heading {
	text-align: center;
	color: #fff;
	margin: 0 0 10px;
}

/* ==========================================================================
   Slider (native scroll-snap "peek" carousel — 2-3 cards visible on desktop)
   ========================================================================== */

.offers-slider {
	position: relative;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.offers-slider::-webkit-scrollbar {
	display: none;
}

.offers-slider__track {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	/* Extra room above the cards so the hover-parrot has space to peek
	   into WITHOUT needing overflow-y: visible — mixing that with
	   overflow-x: auto doesn't work (the CSS spec forces "visible" to
	   compute as "auto" on one axis when the other isn't "visible" too,
	   so it would just get clipped again). This padding keeps the peek
	   zone inside the scrollable box instead. */
	padding-top: 50px;
	/* Grid rows stretch every item to the tallest one automatically —
	   we just need the card inside each slide to actually fill that
	   stretched height (see .offers-card height below). */
	align-items: stretch;
}

.offers-slide {
	position: relative;
	scroll-snap-align: start;
	height: 100%;
}

.offers-card {
	position: relative;
	z-index: 2;
	background-color: #e6e6e6;
	border-radius: 14px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 420px;
}

.offers-card--featured {
	background-color: #a3a3a3;
}

.offers-card__tag {
	display: block;
	text-align: center;
	color: #000;
	margin: 0 0 8px;
}

.offers-card__description {
	display: block;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
	color: #000;
	margin: 0 0 16px;
}

.offers-card__price {
	display: block;
	text-align: center;
	font-size: 26px;
	font-weight: 700;
	background: linear-gradient(90deg, #fb591e 33%, #f4ea8c 88%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	margin: 0 0 24px;
}

.offers-card__list {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	flex-grow: 1;
}

.offers-card__list li {
	position: relative;
	font-size: 14px;
	line-height: 1.5;
	padding-left: 22px;
	margin-bottom: 14px;
}

.offers-card__list li.is-included {
	color: #2a2a2a;
}

.offers-card__list li.is-included::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	font-size: 13px;
	color: #2a2a2a;
}

.offers-card__list li.is-excluded {
	color: #8f8f8c;
}

.offers-card__list li.is-excluded::before {
	content: "×";
	position: absolute;
	left: 1px;
	top: 0;
	font-size: 13px;
	color: #8f8f8c;
}

.offers-card__button {
	position: relative;
	display: block;
	width: 100%;
	padding: 12px 28px;
	border-radius: 4px;
	background: linear-gradient(90deg, #fb591e 33%, #f4ea8c 88%);
	color: #1a1a1a;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	text-align: center;
	overflow: hidden;
	z-index: 0;
	cursor: pointer;
}

.offers-card__button span {
	position: relative;
	z-index: 2;
	transition: color 0.35s ease;
}

.offers-card__button::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #fb591e;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.4s ease;
	z-index: 1;
}

.offers-card__button:hover::before {
	transform: scaleX(1);
}

.offers-card__button:hover span {
	color: #ffffff;
}

/* ==========================================================================
   Hover parrot — peeks up from behind the card on hover
   ========================================================================== */

.parrot-hover {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: auto;
	width: 90px;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -30%);
	transition: transform 0.4s ease, opacity 0.4s ease;
}

.parrot-hover svg {
	display: block;
	width: 100%;
	height: auto;
}

.offers-slide:hover .parrot-hover {
	opacity: 1;
	transform: translate(-50%, -60%);
}

/* ==========================================================================
   Dot navigation (same seed-dot mechanic as Portfolio) — hidden on
   desktop/tablet since those show all cards at once; shown on mobile
   where the slider is a real one-at-a-time swipeable carousel.
   ========================================================================== */

.offers-dots {
	display: none;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 32px;
}

.offers-dot {
	position: relative;
	width: 17px;
	height: 13px;
	border: none;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

.offers-dot__seed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.offers-dot__seed--closed {
	opacity: 1;
	transform: scale(1);
	color: #61523c;
}

.offers-dot.step-1 .offers-dot__seed--closed {
	color: #d5aa6c;
}

.offers-dot.step-2 .offers-dot__seed--closed {
	color: #b7996d;
}

.offers-dot.step-3 .offers-dot__seed--closed {
	color: #9d8665;
}

.offers-dot.is-active .offers-dot__seed--closed {
	opacity: 0;
}

.offers-dot.is-active .offers-dot__seed--active {
	opacity: 1;
	transform: scale(1.15);
}

.offers-custom {
	text-align: center;
	margin-top: 40px;
	padding: 28px 20px;
	border-top: 1px solid #d6d6d3;
	border-bottom: 1px solid #d6d6d3;
}

.offers-custom__title {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 10px;
}

.offers-custom__text {
	max-width: 480px;
	margin: 0 auto 16px;
	font-size: 14px;
	line-height: 1.6;
	color: #e6e6e6;
}

.offers-custom__link {
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.offers-custom__link:hover {
	color: #fb591e;
}

/* ==========================================================================
   Tablet (769px - 1024px) — static 2-up grid, no slider/dots
   ========================================================================== */

@media (max-width: 1024px) and (min-width: 769px) {
	.offers-slider__track {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   Mobile (<= 768px) — real horizontal slider, one card per screen
   ========================================================================== */

@media (max-width: 768px) {
	.offers {
		padding: 48px 0 40px;
	}

	.offers-dots {
		display: flex;
	}

	.offers__container {
		padding: 0 20px;
	}

	.offers__heading {
		font-size: 26px;
		margin-bottom: 10px;
	}

	/* Switch the track from a grid (which just stacks a single column
	   vertically) back to a horizontal flex row, so there's something
	   for the horizontal scroll-snap to actually slide between. */
	.offers-slider__track {
		display: flex;
		align-items: stretch;
		gap: 20px;
	}

	.offers-slide {
		flex: 0 0 100%;
		width: 100%;
		align-self: stretch;
	}

	.offers-card {
		padding: 24px;
		min-height: 450px;
	}

	.offers-card__tag {
		font-size: 18px;
	}

	.parrot-hover {
		transition: transform 0.4s ease, opacity 0.4s ease;
	}
	
	.offers-slide.is-current .parrot-hover {
		opacity: 1;
		transform: translate(-50%, -60%);
	}
}