/* Swedish Technology — Resource Centre
   Namespaced under .strc so it cannot collide with the theme. Tokens are
   defined on .strc and mapped to the theme's own variables by the page
   template, so the palette follows the site rather than restating it. */

.strc {
	--strc-ink: #16151f;
	--strc-soft: #4f5560;
	--strc-faint: #7d838f;
	--strc-edge: #e0e0e6;
	--strc-surface: #ffffff;
	--strc-ground: #f4f4f7;
	--strc-navy: #0f0d1d;
	--strc-accent: #e22222;
	--strc-gold: #c9a227;
	--strc-radius: 10px;
	color: var(--strc-ink);
}

.strc :is(h2, h3) { margin: 0; line-height: 1.25; }
.strc p { margin: 0; }
.strc img { display: block; width: 100%; height: auto; }

.strc-eyebrow,
.strc-card-kicker {
	margin: 0 0 .35rem;
	color: var(--strc-accent);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.strc-meta { color: var(--strc-faint); font-size: .82rem; }
.strc-dot { margin: 0 .4em; }

/* ---------------------------------------------------------------- buttons */

.strc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border: 1px solid var(--strc-edge);
	border-radius: 6px;
	background: var(--strc-surface);
	color: var(--strc-ink);
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s, background .15s, color .15s;
}
.strc-btn:hover { border-color: var(--strc-faint); }
.strc-btn:focus-visible { outline: 2px solid var(--strc-accent); outline-offset: 2px; }
.strc-btn-primary { background: var(--strc-accent); border-color: var(--strc-accent); color: #fff; }
.strc-btn-primary:hover { filter: brightness(.93); border-color: transparent; }
.strc-btn-gold { background: var(--strc-gold); border-color: var(--strc-gold); color: #16151f; }
.strc-btn-sm { padding: 7px 13px; font-size: .82rem; }
.strc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .8rem; }

/* ----------------------------------------------------------------- facets */

.strc-facets {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	padding: 16px;
	margin: 0 0 1.5rem;
	background: var(--strc-ground);
	border-radius: var(--strc-radius);
}
.strc-facet { display: flex; flex-direction: column; gap: 4px; min-width: 170px; }
.strc-facet-q { flex: 1 1 260px; }
.strc-facet-actions { flex-direction: row; align-items: center; gap: 10px; }
.strc-facet-label {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--strc-faint);
}
.strc-facet :is(input, select) {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--strc-edge);
	border-radius: 6px;
	background: var(--strc-surface);
	color: var(--strc-ink);
	font: inherit;
	font-size: .9rem;
}
.strc-facet select {
	appearance: none;
	padding-inline-end: 32px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237d838f'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
	cursor: pointer;
}
[dir="rtl"] .strc-facet select { background-position: left 11px center; }
.strc-facet :is(input, select):focus-visible { outline: 2px solid var(--strc-accent); outline-offset: 1px; }

.strc-go {
	padding: 10px 20px;
	border: 1px solid var(--strc-navy);
	border-radius: 6px;
	background: var(--strc-navy);
	color: #fff;
	font: inherit;
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer;
}
/* With JS the selects submit themselves; the button is the no-JS path. */
.strc-js .strc-go { display: none; }
.strc-clear { color: var(--strc-soft); font-size: .85rem; }

.strc-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 1.2rem; color: var(--strc-soft); font-size: .88rem; }
.strc-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border: 1px solid var(--strc-edge);
	border-radius: 999px;
	background: var(--strc-surface);
	font-size: .8rem;
	text-decoration: none;
	color: var(--strc-soft);
}
.strc-tag-x:hover { border-color: var(--strc-accent); color: var(--strc-accent); }

/* --------------------------------------------------------------- featured */

.strc-featured {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 40px);
	align-items: center;
	padding: clamp(20px, 3vw, 34px);
	margin: 0 0 2rem;
	background: var(--strc-ground);
	border-radius: var(--strc-radius);
}
.strc-featured-media img { border-radius: 6px; box-shadow: 0 12px 30px rgba(15, 13, 29, .18); }
.strc-featured-title { font-size: clamp(1.4rem, 2.4vw, 2rem); margin-bottom: .5rem; }
.strc-featured-title a { color: inherit; text-decoration: none; }
.strc-featured-title a:hover { color: var(--strc-accent); }
.strc-featured-sub { margin-bottom: .7rem; color: var(--strc-soft); font-size: 1rem; line-height: 1.55; }

/* ------------------------------------------------------------------- grid */

.strc-grid {
	display: grid;
	gap: clamp(16px, 2.2vw, 26px);
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
	margin: 0 0 2rem;
}
@media (min-width: 900px) {
	.strc-stream[data-columns="2"] .strc-grid { grid-template-columns: repeat(2, 1fr); }
	.strc-stream[data-columns="3"] .strc-grid { grid-template-columns: repeat(3, 1fr); }
	.strc-stream[data-columns="4"] .strc-grid { grid-template-columns: repeat(4, 1fr); }
}
.strc-grid:empty { display: none; margin: 0; }

.strc-card {
	display: flex;
	flex-direction: column;
	background: var(--strc-surface);
	border: 1px solid var(--strc-edge);
	border-radius: var(--strc-radius);
	overflow: hidden;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.strc-card:hover { border-color: var(--strc-faint); box-shadow: 0 10px 26px rgba(15, 13, 29, .09); transform: translateY(-2px); }
.strc-card-cover { display: block; background: var(--strc-ground); aspect-ratio: 1 / 1.414; overflow: hidden; }
.strc-card-cover img { height: 100%; object-fit: cover; }
.strc-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.strc-card-title { font-size: 1.02rem; margin-bottom: .35rem; }
.strc-card-title a { color: inherit; text-decoration: none; }
.strc-card-title a:hover { color: var(--strc-accent); }
.strc-card-sub { flex: 1; margin-bottom: .6rem; color: var(--strc-soft); font-size: .87rem; line-height: 1.5; }

.strc-ar {
	display: inline-block;
	margin-inline-start: 8px;
	padding: 1px 7px;
	border: 1px solid var(--strc-edge);
	border-radius: 4px;
	font-size: .76rem;
	color: var(--strc-soft);
	text-decoration: none;
}
.strc-ar:hover { border-color: var(--strc-accent); color: var(--strc-accent); }

/* ------------------------------------------------ editorial bands --------
   Inserted after every sixth card so the page never becomes a wall of
   identical tiles. */

.strc-band {
	padding: clamp(20px, 3vw, 32px);
	margin: 0 0 2rem;
	background: var(--strc-ground);
	border-radius: var(--strc-radius);
}
.strc-band-title { font-size: clamp(1.15rem, 1.9vw, 1.5rem); margin-bottom: .4rem; }
.strc-band-lede { max-width: 62ch; margin-bottom: 1rem; color: var(--strc-soft); font-size: .95rem; line-height: 1.6; }

.strc-band-useful { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: center; }
.strc-band-media img { border-radius: 6px; box-shadow: 0 10px 24px rgba(15, 13, 29, .16); }
.strc-band-list { margin: 0; padding-inline-start: 1.2em; display: grid; gap: .5rem; }
.strc-band-list li { color: var(--strc-soft); }
.strc-band-list a { color: var(--strc-ink); font-weight: 600; text-decoration: none; }
.strc-band-list a:hover { color: var(--strc-accent); }
.strc-band-list .strc-meta { margin-inline-start: .5em; }

.strc-table-wrap { overflow-x: auto; }
.strc-table { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--strc-surface); border-radius: 6px; overflow: hidden; }
.strc-table :is(th, td) { padding: 10px 14px; text-align: start; border-bottom: 1px solid var(--strc-edge); }
.strc-table thead th { background: var(--strc-navy); color: #fff; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.strc-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.strc-table tbody th { font-weight: 600; }
.strc-table a { color: var(--strc-accent); }

.strc-recent { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.strc-recent li { display: grid; gap: .5rem; }
.strc-recent img { border-radius: 6px; aspect-ratio: 1 / 1.414; object-fit: cover; }
.strc-recent a { color: var(--strc-ink); font-weight: 600; font-size: .9rem; text-decoration: none; }
.strc-recent a:hover { color: var(--strc-accent); }

/* ------------------------------------------------------------------ pager */

.strc-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 2.4rem; font-size: .9rem; }
.strc-page {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; padding: 0 12px;
	border: 1px solid var(--strc-edge); border-radius: 6px;
	background: var(--strc-surface); color: var(--strc-soft); text-decoration: none;
}
.strc-page:hover { color: var(--strc-ink); border-color: var(--strc-faint); }
.strc-page.is-current { background: var(--strc-gold); border-color: var(--strc-gold); color: #16151f; font-weight: 700; }
.strc-gap { display: inline-flex; align-items: center; min-width: 20px; height: 38px; justify-content: center; color: var(--strc-faint); }
.strc-count { margin-inline-start: auto; color: var(--strc-faint); font-size: .82rem; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------- related and CTA */

.strc-related { margin: 0 0 2rem; }
.strc-related-list { display: flex; flex-wrap: wrap; gap: 8px; margin: .8rem 0 0; padding: 0; list-style: none; }
.strc-related-list a {
	display: inline-block; padding: 8px 14px;
	border: 1px solid var(--strc-edge); border-radius: 999px;
	color: var(--strc-soft); font-size: .87rem; text-decoration: none;
}
.strc-related-list a:hover { border-color: var(--strc-accent); color: var(--strc-accent); }

.strc-cta {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(18px, 3vw, 36px);
	align-items: center; padding: clamp(22px, 3vw, 36px);
	background: var(--strc-navy); color: #fff; border-radius: var(--strc-radius);
}
.strc-cta h2 { font-size: clamp(1.2rem, 2vw, 1.6rem); margin-bottom: .5rem; }
.strc-cta p { color: rgba(255, 255, 255, .78); max-width: 60ch; line-height: 1.6; }
.strc-cta .strc-btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.strc-cta .strc-btn:hover { border-color: #fff; }
.strc-cta .strc-btn-gold { background: var(--strc-gold); border-color: var(--strc-gold); color: #16151f; }

.strc-empty { padding: 2rem 0 2.5rem; color: var(--strc-faint); font-style: italic; }
.strc-empty a { margin-inline-start: .4em; color: var(--strc-accent); font-style: normal; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 780px) {
	.strc-featured,
	.strc-band-useful,
	.strc-cta { grid-template-columns: 1fr; }
	.strc-featured-media { max-width: 220px; }
	.strc-band-media { max-width: 200px; }
}
@media (max-width: 560px) {
	.strc-facet { min-width: 0; flex: 1 1 46%; }
	.strc-facet-q { flex: 1 1 100%; }
	.strc-count { margin-inline-start: 0; width: 100%; }
}