/* ==========================================================================
   DeshipOS — Features widget (industry / solutions carousel)
   Two-column header (heading left, copy + prev/next arrows right) above a
   horizontal scroll-snap track of cards: tinted image panel → title →
   description → "Explore" link. Depends on assets/css/base.css for tokens.
   ========================================================================== */

.deshipos-features {
	--dfe-text:      var(--dew-ink, #0F172A);
	--dfe-muted:     var(--dew-muted, #475569);
	--dfe-accent:    var(--dew-brand, #16A34A);
	--dfe-border:    var(--dew-divider, #E2E8F0);
	--dfe-card-bg:   #FFFFFF;
	--dfe-media-bg:  #F5EFE7;

	--dfe-card-w: 360px;
	--dfe-gap:    24px;
	--dfe-pad-x:  20px;
	--dfe-max-w:  1200px;
	/* Outer gap between the centered container and the viewport edge — the
	   distance the card track bleeds past the container on the right. */
	--dfe-bleed:  max(0px, (100vw - var(--dfe-max-w)) / 2);

	box-sizing: border-box;
	width: 100%;
	padding: 56px 0;
	background: transparent;
	color: var(--dfe-text);
	/* Absorb any sub-pixel / scrollbar overrun from the full-bleed track so
	   the page never gains a horizontal scrollbar. */
	overflow-x: clip;
}
.deshipos-features *,
.deshipos-features *::before,
.deshipos-features *::after { box-sizing: border-box; }

.deshipos-features__inner {
	max-width: var(--dfe-max-w);
	margin: 0 auto;
	padding: 0 var(--dfe-pad-x);
}

/* ----- Header: heading left, copy + arrows right ----- */
.deshipos-features__head {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-bottom: 28px;
}

.deshipos-features__eyebrow {
	display: inline-block;
	margin-bottom: 10px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dfe-accent);
}

.deshipos-features__heading {
	margin: 0;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: var(--dew-tracking-tight);
	color: var(--dfe-text);
}

.deshipos-features__head-aside {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.deshipos-features__subheading {
	margin: 0;
	max-width: 46ch;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--dfe-muted);
}

/* ----- Navigation arrows ----- */
.deshipos-features__nav {
	display: flex;
	gap: 10px;
}

.deshipos-features__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--dew-border-strong, #CBD5E1);
	border-radius: 10px;
	background: #FFFFFF;
	color: var(--dfe-text);
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
	transition: background var(--dew-dur-base) var(--dew-ease-out),
	            border-color var(--dew-dur-base) var(--dew-ease-out),
	            color var(--dew-dur-base) var(--dew-ease-out),
	            box-shadow var(--dew-dur-base) var(--dew-ease-out),
	            transform var(--dew-dur-base) var(--dew-ease-out),
	            opacity var(--dew-dur-base) var(--dew-ease-out);
}
.deshipos-features__arrow:hover:not(:disabled) {
	border-color: var(--dfe-accent);
	color: var(--dfe-accent);
	background: var(--dew-brand-soft, rgba(22, 163, 74, .08));
	transform: translateY(-1px);
	box-shadow: 0 6px 14px -8px rgba(15, 23, 42, .2);
}
.deshipos-features__arrow:active:not(:disabled) {
	transform: translateY(0);
}
.deshipos-features__arrow:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--dew-brand-soft, rgba(22, 163, 74, .25));
	border-color: var(--dfe-accent);
}
.deshipos-features__arrow:disabled {
	opacity: .4;
	cursor: default;
}
.deshipos-features__arrow svg { display: block; }

/* ----- Track ----- */
.deshipos-features__viewport {
	/* Extend the track to the viewport edge on BOTH sides (full-bleed) so
	   scrolled-past cards stay partially visible at the left edge instead of
	   being hard-clipped at the container — the track's own left/right padding
	   (below) keeps the first/last card aligned with the container at rest. */
	margin-left: calc(-1 * (var(--dfe-bleed) + var(--dfe-pad-x)));
	margin-right: calc(-1 * (var(--dfe-bleed) + var(--dfe-pad-x)));
	/* Pull back the track's extra vertical padding (added below so the card
	   hover-lift + shadow aren't clipped by the scroll container) so the
	   header-to-cards rhythm stays tight. */
	margin-top: -24px;
	margin-bottom: -24px;
}

.deshipos-features__track {
	display: flex;
	gap: var(--dfe-gap);
	/* Left/right padding == the bleed, so at rest the first card aligns with
	   the container's left edge and scrolling to the end re-aligns the last
	   card with the right edge (matches the reference). Because the viewport
	   bleeds both ways, cards scrolled off the left stay partially visible up
	   to the viewport edge rather than vanishing at the container.
	   Top/bottom padding gives the hover-lift + card shadow room to breathe —
	   a horizontal scroll container also clips vertically, so without this the
	   lifted card's top border + shadow get cut off. */
	padding: 28px calc(var(--dfe-bleed) + var(--dfe-pad-x)) 32px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* Inset the snap positions by the bleed so a snapped card lands on the
	   container's edge (not the raw viewport edge), leaving room for the
	   adjacent card to peek through on either side. */
	scroll-padding: 0 calc(var(--dfe-bleed) + var(--dfe-pad-x));
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.deshipos-features__track::-webkit-scrollbar { display: none; }

/* ----- Card ----- */
.deshipos-features__card {
	display: flex;
	flex-direction: column;
	flex: 0 0 var(--dfe-card-w);
	width: var(--dfe-card-w);
	scroll-snap-align: start;
	background: var(--dfe-card-bg);
	border: 1px solid var(--dfe-border);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
	transition: transform var(--dew-dur-base) var(--dew-ease-out),
	            box-shadow var(--dew-dur-base) var(--dew-ease-out),
	            border-color var(--dew-dur-base) var(--dew-ease-out);
}
a.deshipos-features__card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .18),
	            0 6px 14px -8px rgba(15, 23, 42, .12);
	border-color: var(--dew-border-strong, #CBD5E1);
}
a.deshipos-features__card:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--dew-brand-soft, rgba(22, 163, 74, .3));
	border-color: var(--dfe-accent);
}

/* ----- Media panel ----- */
.deshipos-features__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 11;
	margin: 14px 14px 0;
	border-radius: 10px;
	background: var(--dfe-media-bg);
	/* Soft top-light sheen for a little depth on the flat tint. */
	background-image: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%);
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .035);
	overflow: hidden;
}
.deshipos-features__media-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--dew-dur-slow) var(--dew-ease-out);
}
a.deshipos-features__card:hover .deshipos-features__media-img {
	transform: scale(1.045);
}
/* Empty state — fallback icon sits in a soft white chip centred in the panel. */
.deshipos-features__media-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 18px;
	background: rgba(255, 255, 255, .7);
	box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .25);
	color: var(--dfe-accent);
}
.deshipos-features__media-icon svg { width: 34px; height: 34px; }
.deshipos-features__media-icon i   { font-size: 32px; line-height: 1; }

/* ----- Card body ----- */
.deshipos-features__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 24px;
}

.deshipos-features__card-title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--dfe-text);
	letter-spacing: var(--dew-tracking-tight);
}

.deshipos-features__card-desc {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--dfe-muted);
}

.deshipos-features__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--dfe-text);
	letter-spacing: var(--dew-tracking-snug);
	transition: color var(--dew-dur-base) var(--dew-ease-out);
}
a.deshipos-features__card:hover .deshipos-features__link {
	color: var(--dfe-accent);
}
.deshipos-features__link-chev {
	transition: transform var(--dew-dur-base) var(--dew-ease-out);
}
a.deshipos-features__card:hover .deshipos-features__link-chev {
	transform: translateX(4px);
}

/* ==========================================================================
   Responsive — header becomes two columns on wider screens.
   ========================================================================== */
@media (min-width: 600px) {
	.deshipos-features {
		--dfe-pad-x: 32px;
		padding: 64px 0;
	}
}

@media (min-width: 880px) {
	.deshipos-features__head {
		grid-template-columns: 1fr 1fr;
		align-items: start;
		gap: 40px;
		margin-bottom: 36px;
	}
	.deshipos-features__head-aside {
		align-items: flex-end;
		text-align: right;
	}
	.deshipos-features__subheading { text-align: left; }
}

@media (min-width: 960px) {
	.deshipos-features {
		--dfe-pad-x: 40px;
		padding: 80px 0;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.deshipos-features__card,
	.deshipos-features__media-img,
	.deshipos-features__arrow,
	.deshipos-features__link,
	.deshipos-features__link-chev { transition-duration: .01ms !important; }
	a.deshipos-features__card:hover,
	a.deshipos-features__card:hover .deshipos-features__media-img { transform: none; }
	.deshipos-features__track { scroll-behavior: auto; }
}