@charset "UTF-8";
/**
 * DigitalWebStudio — inner pages, service and industry detail.
 */

@layer components {
	.dws-page-hero__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 52px;
		border-radius: var(--dws-radius);
		background-color: var(--dws-surface);
		border: 1px solid var(--dws-border);
		color: var(--dws-accent);
	}

	.dws-page-hero__tags {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dws-space-2);
	}

	.dws-page-hero__tags a {
		text-decoration: none;
	}

	/* --- Detail layout ------------------------------------------------------- */
	.dws-detail {
		display: grid;
		gap: var(--dws-space-10);
	}

	@media (min-width: 900px) {
		.dws-detail {
			grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
			gap: var(--dws-space-16);
			align-items: start;
		}

		.dws-detail__aside {
			position: sticky;
			top: calc(var(--dws-header-h) + var(--dws-space-8));
		}
	}

	.dws-detail__main .dws-prose {
		max-width: 68ch;
	}

	.dws-service-list {
		margin-top: var(--dws-space-10);
	}

	/* --- Timeline (process page) ---------------------------------------------- */
	.dws-timeline {
		display: flex;
		flex-direction: column;
		gap: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dws-timeline__item {
		display: grid;
		grid-template-columns: 52px minmax(0, 1fr);
		gap: var(--dws-space-5);
		padding-bottom: var(--dws-space-10);
	}

	/* The connecting line is drawn on the item rather than as its own element,
	   which keeps the DOM one node per step. */
	.dws-timeline__item:not(:last-child) .dws-timeline__marker::after {
		content: "";
		position: absolute;
		top: 52px;
		left: 50%;
		width: 1px;
		height: calc(100% + var(--dws-space-10) - 52px);
		background: linear-gradient(to bottom, var(--dws-border), transparent);
	}

	.dws-timeline__marker {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 52px;
		border-radius: var(--dws-radius);
		background-color: var(--dws-accent-soft);
		border: 1px solid var(--dws-blue-100);
		color: var(--dws-blue-600);
		font-weight: 800;
	}

	.dws-timeline__body {
		display: flex;
		flex-direction: column;
		gap: var(--dws-space-2);
		padding-top: var(--dws-space-2);
	}

	.dws-timeline__step {
		font-size: var(--dws-text-xs);
		font-weight: 700;
		letter-spacing: var(--dws-tracking-wide);
		text-transform: uppercase;
		color: var(--dws-accent);
	}

	.dws-timeline__title {
		font-size: var(--dws-h3);
	}

	.dws-timeline__text {
		font-size: var(--dws-text-lg);
		line-height: var(--dws-leading-relaxed);
		color: var(--dws-ink-soft);
		max-width: 62ch;
	}
}