/**
 * hostsnix/feature-tabs — frontend.
 * Values measured from the home page "Everything You Need" section at 1440px.
 */

.hsx-ft {
	position: relative;
	padding-block: 24px;
	background-image: linear-gradient(hsl(var(--background)), hsl(var(--secondary) / 0.2));
}
@media (min-width: 768px) { .hsx-ft { padding-block: 32px; } }

.hsx-ft-inner {
	width: 100%;
	max-width: 80rem;
	margin-inline: auto;
	padding-inline: 16px;
}
@media (min-width: 768px) { .hsx-ft-inner { padding-inline: 24px; } }

/* ── Header ── */
.hsx-ft-head { text-align: center; margin-bottom: 16px; }
@media (min-width: 768px) { .hsx-ft-head { margin-bottom: 24px; } }

.hsx-ft-h2 {
	margin-bottom: 8px;
	font-size: 24px; line-height: 32px;
	font-weight: 700;
	color: hsl(var(--foreground));
}
@media (min-width: 640px)  { .hsx-ft-h2 { font-size: 30px; line-height: 36px;} }
@media (min-width: 768px)  { .hsx-ft-h2 { font-size: 36px; margin-bottom: 12px; line-height: 40px;} }
@media (min-width: 1024px) { .hsx-ft-h2 { font-size: 48px; line-height: 48px;} }

.hsx-ft-intro {
	max-width: 56rem;
	margin-inline: auto;
	font-size: 14px; line-height: 20px;
	color: hsl(var(--muted-foreground));
}
@media (min-width: 768px)  { .hsx-ft-intro { font-size: 16px; line-height: 24px;} }
@media (min-width: 1024px) { .hsx-ft-intro { font-size: 18px; line-height: 28px;} }

/* ── Stage ── */
.hsx-ft-stage { position: relative; }
.hsx-ft-body { padding-inline: 36px; }
@media (min-width: 1024px) { .hsx-ft-body { padding-inline: 64px; } }

.hsx-ft-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1024px) {
	.hsx-ft-grid {
		grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1.3fr);
		gap: 32px;
		/* The rail spans every panel row so only one column of tabs exists. */
		grid-template-rows: auto;
		/* lg:items-center — the rail sits centred against the panel rather than
		   both stretching to the tallest, which is what the design does. */
		align-items: center;
	}
	.hsx-ft-rail { grid-column: 1; grid-row: 1; }
}

/* ── Tab rail ──
   Horizontal and scrollable on small screens, a vertical list from lg. */
.hsx-ft-rail {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.hsx-ft-rail::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .hsx-ft-rail { flex-direction: column; overflow-x: visible; } }

.hsx-ft-tab {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	border-radius: 9999px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 500;
	color: hsl(var(--muted-foreground));
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
@media (min-width: 1024px) { .hsx-ft-tab { width: 100%; } }

.hsx-ft-tab:hover { background-color: hsl(var(--muted) / 0.6); color: hsl(var(--foreground)); }

.hsx-ft-tab.is-active {
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	box-shadow: 0 1px 2px 0 hsl(var(--primary) / 0.25);
}
.hsx-ft-tab-svg { height: 16px; width: 16px; flex-shrink: 0; }

/* ── Panels ──
   Every panel is in the HTML. Without JS they all show, stacked; view.js adds
   the `hidden` attribute to the inactive ones once it can switch between them. */
.hsx-ft-panel { display: grid; gap: 24px; }
@media (min-width: 1024px) {
	.hsx-ft-panel {
		grid-column: 2 / 4;
		grid-row: 1;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
		gap: 32px;
		align-items: center;
	}
}

.hsx-ft-copy { min-width: 0; }

.hsx-ft-title {
	font-size: 20px; line-height: 28px;
	font-weight: 700;
	color: hsl(var(--foreground));
}
@media (min-width: 1024px) { .hsx-ft-title { font-size: 24px; line-height: 32px;} }
@media (min-width: 1280px) { .hsx-ft-title { font-size: 1.75rem; } }

.hsx-ft-text {
	margin-top: 12px;
	font-size: 14px; line-height: 1.625;
	color: hsl(var(--muted-foreground));
}
@media (min-width: 1024px) { .hsx-ft-text { font-size: 15px; } }

.hsx-ft-list {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex; flex-direction: column; gap: 12px;
}

.hsx-ft-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14.5px;
	line-height: 1.375;
	color: hsl(var(--foreground));
}
.hsx-ft-item-svg { height: 19px; width: 19px; flex-shrink: 0; color: hsl(var(--primary)); }

/* ── Screenshot ── */
.hsx-ft-shot { position: relative; min-width: 0; }

/* A dotted swatch peeking out above the frame's top-left corner. */
.hsx-ft-dots {
	position: absolute;
	top: -28px;
	left: 32px;
	height: 64px;
	width: 112px;
	display: none;
	pointer-events: none;
	opacity: 0.28;
	background-image: radial-gradient(rgb(13, 148, 136) 1.3px, transparent 1.3px);
	background-size: 13px 13px;
}
@media (min-width: 1024px) { .hsx-ft-dots { display: block; } }

/* A solid teal block offset behind the frame, giving it depth. */
.hsx-ft-offset {
	position: absolute;
	top: 32px;
	left: 64px;
	right: -12px;
	bottom: -12px;
	display: none;
	border-radius: 24px;
	background-color: hsl(var(--primary));
	pointer-events: none;
}
@media (min-width: 1024px) { .hsx-ft-offset { display: block; } }

.hsx-ft-frame {
	position: relative;
	z-index: 10;
	overflow: hidden;
	border: 1px solid hsl(var(--border) / 0.5);
	border-radius: 16px;
	background-color: #fff;
	box-shadow: 0 20px 25px -5px hsl(0 0% 0% / 0.1), 0 8px 10px -6px hsl(0 0% 0% / 0.1);
}

.hsx-ft-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid hsl(var(--border) / 0.4);
	background-color: hsl(0 0% 100% / 0.9);
	padding: 10px 16px;
}

.hsx-ft-light { height: 10px; width: 10px; border-radius: 9999px; }
.hsx-ft-light--r { background-color: #f87171; }
.hsx-ft-light--y { background-color: #facc15; }
.hsx-ft-light--g { background-color: #4ade80; }

.hsx-ft-url { margin-left: auto; font-size: 12px; color: hsl(var(--muted-foreground)); line-height: 16px;}

.hsx-ft-img { display: block; width: 100%; height: auto; }

/* ── Arrows, added by view.js ── */
.hsx-ft-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 56px;
	border: 1px solid hsl(var(--border) / 0.4);
	border-radius: 9999px;
	background-color: hsl(0 0% 100% / 0.8);
	color: hsl(var(--muted-foreground));
	box-shadow: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
@media (min-width: 1024px) { .hsx-ft-nav { width: 40px; height: 40px; } }

.hsx-ft-nav:hover {
	color: hsl(var(--primary));
	background-color: #fff;
	border-color: hsl(var(--primary) / 0.3);
}
.hsx-ft-nav--prev { left: 0; }
.hsx-ft-nav--next { right: 0; }
.hsx-ft-nav-svg { height: 20px; width: 20px; }