@charset "UTF-8";
/**
 * DigitalWebStudio — blog, archives and search.
 */

@layer components {
	/* --- Post card ---------------------------------------------------------- */
	.dws-post-card {
		position: relative;
		display: flex;
		flex-direction: column;
		background-color: var(--dws-surface);
		border: 1px solid var(--dws-border);
		border-radius: var(--dws-radius-lg);
		overflow: hidden;
		transition: border-color var(--dws-dur) var(--dws-ease),
			box-shadow var(--dws-dur) var(--dws-ease),
			transform var(--dws-dur) var(--dws-ease);
	}

	.dws-post-card:hover {
		border-color: var(--dws-blue-200);
		box-shadow: var(--dws-shadow-lg);
		transform: translateY(-3px);
	}

	.dws-post-card:focus-within {
		border-color: var(--dws-accent);
	}

	.dws-post-card__media {
		/* A fixed ratio reserves the space before the image arrives, so a slow
		   image cannot shift the cards below it. */
		aspect-ratio: 16 / 10;
		background-color: var(--dws-surface-sunken);
		overflow: hidden;
	}

	.dws-post-card__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform var(--dws-dur-slow) var(--dws-ease);
	}

	.dws-post-card:hover .dws-post-card__img {
		transform: scale(1.04);
	}

	.dws-post-card__body {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--dws-space-3);
		flex: 1;
		padding: var(--dws-space-6);
	}

	.dws-post-card__title {
		font-size: var(--dws-h4);
	}

	.dws-post-card__link {
		color: inherit;
		text-decoration: none;
	}

	.dws-post-card__link::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.dws-post-card__excerpt {
		font-size: var(--dws-text-base);
		color: var(--dws-ink-soft);
	}

	.dws-post-card__meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--dws-space-2);
		margin-top: auto;
		padding-top: var(--dws-space-3);
		font-size: var(--dws-text-sm);
		color: var(--dws-ink-muted);
	}

	/* --- Single article ----------------------------------------------------- */
	.dws-article__header {
		padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem) var(--dws-space-10);
	}

	.dws-article__header .dws-container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--dws-space-5);
	}

	.dws-article__cat {
		text-decoration: none;
	}

	.dws-article__title {
		font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
	}

	.dws-article__lead {
		font-size: var(--dws-text-xl);
		line-height: 1.6;
		color: var(--dws-ink-soft);
	}

	.dws-article__meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--dws-space-2);
		padding-top: var(--dws-space-4);
		border-top: 1px solid var(--dws-border);
		width: 100%;
		font-size: var(--dws-text-sm);
		color: var(--dws-ink-muted);
	}

	.dws-article__media {
		margin: 0;
	}

	.dws-article__img {
		width: 100%;
		height: auto;
		max-height: 60vh;
		object-fit: cover;
		border-radius: var(--dws-radius-xl);
	}

	.dws-article__tags {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dws-space-2);
		margin-top: var(--dws-space-10);
		padding-top: var(--dws-space-6);
		border-top: 1px solid var(--dws-border);
	}

	.dws-article__tags a {
		text-decoration: none;
	}

	.dws-page-links {
		display: flex;
		gap: var(--dws-space-2);
		margin-top: var(--dws-space-8);
		font-weight: 600;
	}

	/* --- Related ------------------------------------------------------------- */
	.dws-related__title {
		margin-bottom: var(--dws-space-8);
		font-size: var(--dws-h3);
	}

	/* --- Search -------------------------------------------------------------- */
	.dws-search {
		width: 100%;
		max-width: 34rem;
	}

	.dws-search__field {
		display: flex;
		align-items: center;
		gap: var(--dws-space-3);
		padding: 0.375rem 0.375rem 0.375rem var(--dws-space-4);
		background-color: var(--dws-surface);
		border: 1px solid var(--dws-border-strong);
		border-radius: var(--dws-radius);
		transition: border-color var(--dws-dur-fast) var(--dws-ease),
			box-shadow var(--dws-dur-fast) var(--dws-ease);
	}

	.dws-search__field:focus-within {
		border-color: var(--dws-accent);
		box-shadow: 0 0 0 3px var(--dws-blue-100);
	}

	.dws-search__field .dws-icon {
		flex-shrink: 0;
		color: var(--dws-ink-muted);
	}

	.dws-search__input {
		flex: 1;
		min-width: 0;
		padding: 0.5rem 0;
		border: 0;
		background: none;
		font-size: var(--dws-text-base);
	}

	.dws-search__input:focus {
		outline: none;
	}

	.dws-results {
		display: flex;
		flex-direction: column;
		gap: var(--dws-space-6);
		max-width: 52rem;
	}

	.dws-results__item {
		display: flex;
		flex-direction: column;
		gap: var(--dws-space-2);
		padding-bottom: var(--dws-space-6);
		border-bottom: 1px solid var(--dws-border);
	}

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

	.dws-results__title {
		font-size: var(--dws-h4);
	}

	.dws-results__title a {
		color: var(--dws-ink);
		text-decoration: none;
	}

	.dws-results__title a:hover {
		color: var(--dws-accent);
	}

	.dws-results__excerpt {
		color: var(--dws-ink-soft);
	}

	/* --- 404 ----------------------------------------------------------------- */
	.dws-404 {
		display: flex;
		align-items: center;
		min-height: 52vh;
	}

	.dws-404 .dws-container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--dws-space-5);
	}

	.dws-404__title {
		font-size: var(--dws-h2);
	}
}