/* =========================================================================
   Guider och artiklar — hubben (/nyheter/) och artikelmallen.
   Skiss: "Nordway Store - Guider och artiklar.dc.html".

   Tre delar: hubbens hero (.nws-ghero), listningen med filter (.nws-guides,
   korten .nws-artcard) och artikelmallen (.nws-article). Kortet renderas av
   nws_artikelkort() i functions.php — en källa, två platser (hubben och
   artikelns "Läs vidare" använder egna, enklare kort).

   Skissens literalfärger är översatta till tokens: linjer→--nws-grey-line,
   mjuka linjer→--nws-grey-soft, dämpad text→--nws-grey. Text på mörkgrönt är
   rgba(255,255,255,…) — samma konvention som produktsidans testprotokoll.
   ========================================================================= */

.nws-ghub > .brxe-container {
	padding: 0 var(--nws-gutter) var(--space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-l);
}

.nws-ghub__title { margin: 0; }

/* ------------------------------------------------------------------------
   Hubbens hero: utvald guide (mörkgrön), Börja här, accentkortet.
   ------------------------------------------------------------------------ */

.nws-ghero {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: stretch;
	/* Bricks-containern sträcker inte sina barn — utan explicit bredd
	   krymper griden till innehållet (syns när filtret ger noll träffar). */
	width: 100%;
}

.nws-ghero__feature {
	background: var(--nws-black);
	border-radius: var(--nws-radius-xl);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.nws-ghero__media { background: var(--nws-black); }
.nws-ghero__img { display: block; width: 100%; height: 34rem; object-fit: cover; }

.nws-ghero__content {
	padding: 3rem 3.4rem 3.4rem;
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	flex: 1;
}

.nws-ghero__badges { display: flex; gap: 0.8rem; margin: 0; }

.nws-ghero__badge {
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.75);
	padding: 0.8rem 1.1rem;
	border-radius: var(--nws-radius-s);
}

/* Typ-badgen är en ETIKETT, inte en knapp — outline i accent så att den
   inte förväxlas med den fyllda accentknappen (Läs guiden) i samma kort. */
.nws-ghero__badge--kind {
	border-color: var(--nws-green);
	color: var(--nws-green);
	font-weight: 600;
}

.nws-ghero__title {
	margin: 0;
	font-family: field-gothic-compact, sans-serif;
	font-size: var(--text-3xl);
	line-height: 1.08;
	text-wrap: balance;
}

.nws-ghero__title a { color: var(--nws-white); }
.nws-ghero__title a:hover { color: var(--nws-green); }

.nws-ghero__excerpt {
	margin: 0;
	font-size: 1.9rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.7);
	text-wrap: pretty;
}

.nws-ghero__actions {
	margin: auto 0 0;
	padding-top: 1.2rem;
	display: flex;
	align-items: center;
	gap: 1.6rem;
}

.nws-ghero__updated { font-size: 1.6rem; color: rgba(255, 255, 255, 0.55); }

/* Börja här */

.nws-ghero__side { display: flex; flex-direction: column; gap: 1.4rem; }

.nws-ghero__starters {
	background: var(--nws-white);
	border: 1px solid var(--nws-grey-line);
	border-radius: var(--nws-radius-l);
	padding: 2.4rem 2.6rem;
	flex: 1;
}

.nws-ghero__eyebrow {
	margin: 0 0 1rem;
	font-family: field-gothic, sans-serif;
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nws-grey);
}

.nws-ghero__list { list-style: none; margin: 0; padding: 0; }

.nws-ghero__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 1.4rem;
	padding: 1.3rem 0;
	border-bottom: 1px solid var(--nws-grey-soft);
}

.nws-ghero__item:last-child { border-bottom: 0; }

.nws-ghero__num {
	flex: none;
	width: 4rem;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--nws-grey-surface);
	border: 1px solid var(--nws-grey-soft);
	border-radius: var(--nws-radius-m);
	font-family: field-gothic-compact, sans-serif;
	font-size: 1.7rem;
	font-weight: 600;
	color: var(--nws-black);
}

.nws-ghero__itembody { flex: 1; min-width: 0; }

.nws-ghero__itemtitle { font-size: 1.8rem; font-weight: 600; line-height: 1.25; color: var(--nws-black); }
.nws-ghero__itemtitle:hover { color: var(--nws-black); }

/* Hela raden klickbar — länken sträcks ut över li:t. */
.nws-ghero__itemtitle::after { content: ''; position: absolute; inset: 0; }

.nws-ghero__itemmeta { display: block; font-size: 1.5rem; color: var(--nws-grey); margin-top: 0.4rem; }

.nws-ghero__arrow { flex: none; font-size: 2rem; color: var(--nws-grey); }

/* Accentkortet */

.nws-ghero__quiz {
	background: var(--nws-green);
	border-radius: var(--nws-radius-l);
	padding: 2.2rem 2.6rem;
}

.nws-ghero__quizheading {
	margin: 0 0 0.6rem;
	font-family: field-gothic, sans-serif;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--nws-black);
}

.nws-ghero__quizbody { margin: 0 0 1.4rem; font-size: 1.6rem; line-height: 1.5; color: var(--nws-black); }

/* ------------------------------------------------------------------------
   Listningen: filterrad, grid, tomläge, Visa fler.
   ------------------------------------------------------------------------ */

.nws-guides { display: flex; flex-direction: column; gap: 1.8rem; width: 100%; }

/* hidden-attributet ska vinna över display:flex/grid — utan JS är
   filterraden och Visa fler döda och ska inte synas, och JS styr kortens
   synlighet med samma attribut. */
.nws-guides [hidden],
.nws-artcard[hidden] { display: none !important; }

.nws-guides__filters {
	background: var(--nws-white);
	border: 1px solid var(--nws-grey-line);
	border-radius: var(--nws-radius-l);
	padding: 1.6rem 2rem;
	display: flex;
	align-items: center;
	gap: 1.2rem;
	flex-wrap: wrap;
}

.nws-guides__filterlabel { font-size: 1.7rem; font-weight: 600; color: var(--nws-black); }

.nws-guides__chip {
	appearance: none;
	font: 500 1.6rem/1 field-gothic, sans-serif;
	padding: 1.1rem 1.5rem;
	border-radius: var(--nws-radius-btn);
	background: var(--nws-white);
	color: var(--nws-grey);
	border: 1px solid var(--nws-grey-line);
	cursor: pointer;
}

.nws-guides__chip:hover { border-color: var(--nws-grey); color: var(--nws-black); }

.nws-guides__chip.is-active {
	background: var(--nws-black);
	border-color: var(--nws-black);
	color: var(--nws-white);
}

.nws-guides__count { opacity: 0.6; }

.nws-guides__divider { width: 1px; height: 2.8rem; background: var(--nws-grey-soft); margin: 0 0.6rem; }

.nws-guides__result { margin-left: auto; font-size: 1.5rem; color: var(--nws-grey); }

.nws-guides__clear {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: 500 1.6rem/1 field-gothic, sans-serif;
	color: var(--nws-black);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

/* Griden och kortet */

.nws-guides__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.nws-artcard {
	position: relative;
	background: var(--nws-white);
	border: 1px solid var(--nws-grey-line);
	border-radius: var(--nws-radius-l);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nws-artcard:hover { border-color: var(--nws-grey); box-shadow: 0 6px 20px rgba(20, 24, 26, 0.07); }

.nws-artcard__media {
	position: relative;
	background: var(--nws-grey-surface);
	border-bottom: 1px solid var(--nws-grey-soft);
}

.nws-artcard__img { display: block; width: 100%; height: 20rem; object-fit: cover; }

.nws-artcard__kind {
	position: absolute;
	top: 1.2rem;
	left: 1.2rem;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.8rem 1.1rem;
	border-radius: var(--nws-radius-s);
}

.nws-artcard__kind--kopguide { background: var(--nws-green); color: var(--nws-black); }
.nws-artcard__kind--guide { background: var(--nws-black); color: var(--nws-green); }
.nws-artcard__kind--artikel { background: var(--nws-white); color: var(--nws-grey); border: 1px solid var(--nws-grey-line); }

.nws-artcard__body {
	padding: 2rem 2rem 2.2rem;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	flex: 1;
}

.nws-artcard__meta { display: flex; gap: 1rem; margin: 0; font-size: 1.4rem; font-weight: 500; color: var(--nws-grey); }

.nws-artcard__title { margin: 0; font-family: field-gothic, sans-serif; font-size: 2.1rem; font-weight: 600; line-height: 1.25; text-wrap: pretty; }
.nws-artcard__title a { color: var(--nws-black); }

/* Hela kortet klickbart — titellänken sträcks ut. */
.nws-artcard__title a::after { content: ''; position: absolute; inset: 0; }

.nws-artcard__excerpt {
	margin: 0;
	font-size: 1.6rem;
	line-height: 1.5;
	color: var(--nws-grey);
	text-wrap: pretty;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nws-artcard__foot { margin: auto 0 0; padding-top: 0.8rem; display: flex; align-items: center; gap: 1rem; }

.nws-artcard__more {
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--nws-black);
	border-bottom: 2px solid var(--nws-green);
	padding-bottom: 0.4rem;
}

.nws-artcard__products { margin-left: auto; font-size: 1.5rem; font-weight: 500; color: var(--nws-black); }

/* Tomläget */

.nws-guides__empty {
	background: var(--nws-white);
	border: 1px solid var(--nws-grey-line);
	border-radius: var(--nws-radius-l);
	padding: 4.8rem 4rem;
	text-align: center;
}

.nws-guides__emptytitle {
	margin: 0 0 1rem;
	font-family: field-gothic-compact, sans-serif;
	font-size: 2.6rem;
	line-height: 1.2;
	color: var(--nws-black);
}

.nws-guides__emptybody { margin: 0 auto 2rem; max-width: 48rem; font-size: 1.7rem; line-height: 1.55; color: var(--nws-grey); }

/* Visa fler */

.nws-guides__moremark { display: flex; justify-content: center; margin: 0.4rem 0 0; }

.nws-guides__more {
	appearance: none;
	border: 1.5px solid var(--nws-grey-line);
	background: var(--nws-white);
	color: var(--nws-black);
	font: 600 1.7rem/1 field-gothic, sans-serif;
	padding: 1.6rem 2.6rem;
	border-radius: var(--nws-radius-m);
	cursor: pointer;
}

.nws-guides__more:hover { background: var(--nws-grey-surface); }

/* ------------------------------------------------------------------------
   Artikelmallen.
   ------------------------------------------------------------------------ */

.nws-article-sec > .brxe-container { padding: 0 var(--nws-gutter) var(--space-xl); }

/* Sidhuvudet — samma mörkgröna kortyta som produktsidans testprotokoll. */

.nws-article__hero {
	background: var(--nws-black);
	border-radius: var(--nws-radius-l);
	padding: 4.4rem 4.8rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4.4rem;
	color: var(--nws-white);
}

.nws-article__herotext { flex: 1 1 42rem; min-width: 0; }

.nws-article__badges { display: flex; gap: 0.8rem; margin: 0 0 1.6rem; }

.nws-article__badge {
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.75);
	padding: 0.8rem 1.1rem;
	border-radius: var(--nws-radius-s);
}

/* Samma resonemang som hubbens hero: etikett, inte knapp. */
.nws-article__badge--kind {
	border-color: var(--nws-green);
	color: var(--nws-green);
	font-weight: 600;
}

.nws-article__title { margin: 0 0 1.4rem; color: var(--nws-white); text-wrap: balance; }

.nws-article__ingress {
	margin: 0;
	font-size: 1.9rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.7);
	max-width: 64rem;
	text-wrap: pretty;
}

.nws-article__meta { display: flex; flex-wrap: wrap; gap: 2rem; margin: 2.2rem 0 0; font-size: 1.6rem; font-weight: 500; color: rgba(255, 255, 255, 0.75); }

.nws-article__heromedia { flex: 1 1 32rem; min-width: 28rem; }
.nws-article__heroimg { display: block; width: 100%; height: 24rem; object-fit: cover; border-radius: var(--nws-radius-m); }

/* Spalterna */

.nws-article__layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 4.4rem;
	padding: var(--space-l) 0 var(--space-xl);
}

.nws-article__railhead {
	margin: 0 0 1.4rem;
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nws-grey);
}

.nws-article__rail {
	flex: 0 1 26rem;
	min-width: 22rem;
	position: sticky;
	top: 2.4rem;
	align-self: flex-start;
}

.nws-article__toclist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }

.nws-article__toclink {
	display: block;
	padding: 0.9rem 0 0.9rem 1.4rem;
	border-left: 2px solid var(--nws-grey-soft);
	font-size: 1.7rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--nws-grey);
}

.nws-article__toclink:hover { color: var(--nws-black); }
.nws-article__toclink.is-active { color: var(--nws-black); border-left-color: var(--nws-green); }

.nws-article__share { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--nws-grey-soft); }

/* Utan förteckning (färre än två h2:or) står delaraden ensam överst. */
.nws-article__share:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.nws-article__sharerow { display: flex; gap: 0.8rem; }

.nws-article__sharebtn {
	appearance: none;
	width: 4rem;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--nws-white);
	border: 1px solid var(--nws-grey-line);
	border-radius: var(--nws-radius-btn);
	font: 600 1.4rem/1 field-gothic, sans-serif;
	color: var(--nws-grey);
	cursor: pointer;
}

.nws-article__sharebtn:hover { border-color: var(--nws-grey); color: var(--nws-black); }
.nws-article__sharebtn.is-copied { background: var(--nws-green); border-color: var(--nws-green); color: var(--nws-black); }

/* Textspalten — typografin kommer från .nws-page__body (page.css). */

.nws-article__body { flex: 1 1 46rem; min-width: 0; max-width: 68rem; }

.nws-article__body img { border-radius: var(--nws-radius-m); height: auto; }

/* Sidospalten */

.nws-article__aside {
	flex: 1 1 28rem;
	min-width: 26rem;
	max-width: 34rem;
	position: sticky;
	top: 2.4rem;
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.nws-article__products {
	background: var(--nws-white);
	border: 1px solid var(--nws-grey-line);
	border-radius: var(--nws-radius-l);
	padding: 2rem;
}

.nws-article__prodlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.4rem; }

.nws-article__prodlink { display: flex; align-items: center; gap: 1.2rem; }

.nws-article__prodthumb { flex: none; }
.nws-article__prodthumb img {
	display: block;
	width: 5.6rem;
	height: 5.6rem;
	object-fit: cover;
	border-radius: var(--nws-radius-s);
	border: 1px solid var(--nws-grey-soft);
	background: var(--nws-grey-surface);
}

.nws-article__prodbody { flex: 1; min-width: 0; }
.nws-article__prodtitle { display: block; font-size: 1.6rem; font-weight: 600; line-height: 1.3; color: var(--nws-black); }
.nws-article__prodlink:hover .nws-article__prodtitle { color: var(--nws-black); }
.nws-article__prodmeta { display: block; font-size: 1.4rem; color: var(--nws-grey); margin-top: 0.4rem; }
.nws-article__prodprice { font-family: field-gothic-compact, sans-serif; font-size: 1.7rem; font-weight: 600; color: var(--nws-black); white-space: nowrap; }

.nws-article__prodall {
	display: block;
	margin-top: 1.6rem;
	padding: 1.3rem;
	text-align: center;
	border: 1.5px solid var(--nws-grey-line);
	border-radius: var(--nws-radius-m);
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--nws-black);
}

.nws-article__prodall:hover { background: var(--nws-grey-surface); color: var(--nws-black); }

/* Nyhetsbrevskortet — formulärmarkupen delas med sidfotens element. */

.nws-article__news {
	background: var(--nws-black);
	border-radius: var(--nws-radius-l);
	padding: 2.2rem;
	color: var(--nws-white);
}

.nws-article__news .nws-news__heading { margin: 0 0 0.8rem; font-family: field-gothic, sans-serif; font-size: 1.9rem; font-weight: 600; color: var(--nws-white); }
.nws-article__news .nws-news__body { margin: 0 0 1.4rem; font-size: 1.6rem; line-height: 1.5; color: rgba(255, 255, 255, 0.65); }
.nws-article__news .nws-news__label { display: block; margin-bottom: 0.6rem; font-size: 1.4rem; font-weight: 500; color: rgba(255, 255, 255, 0.75); }
.nws-article__news .nws-news__row { display: flex; flex-direction: column; gap: 1rem; }

.nws-article__news .nws-news__input {
	width: 100%;
	background: var(--nws-white);
	border: 0;
	border-radius: var(--nws-radius-s);
	padding: 1.3rem 1.4rem;
	font: 400 1.6rem/1.2 field-gothic, sans-serif;
	color: var(--nws-black);
}

.nws-article__news .nws-news__submit {
	appearance: none;
	border: 0;
	background: var(--nws-green);
	color: var(--nws-black);
	font: 600 1.6rem/1 field-gothic, sans-serif;
	padding: 1.4rem;
	border-radius: var(--nws-radius-btn);
	cursor: pointer;
}

.nws-article__news .nws-news__submit:hover { background: var(--nws-green-hover-bg); color: var(--nws-green-hover-fg); }
.nws-article__news .nws-news__status { margin: 0.8rem 0 0; min-height: 1.8rem; font-size: 1.4rem; color: rgba(255, 255, 255, 0.75); }

/* Läs vidare */

.nws-article__next { border-top: 1px solid var(--nws-grey-soft); padding-top: var(--space-l); }

.nws-article__nextheading { margin: 0 0 2rem; font-size: var(--text-2xl); }

.nws-article__nextgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }

.nws-article__nextcard {
	display: block;
	background: var(--nws-white);
	border: 1px solid var(--nws-grey-line);
	border-radius: var(--nws-radius-l);
	padding: 2rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nws-article__nextcard:hover { border-color: var(--nws-grey); box-shadow: 0 6px 20px rgba(20, 24, 26, 0.07); }

.nws-article__nextkind { display: block; margin-bottom: 1rem; font-size: 1.2rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nws-black); }
.nws-article__nexttitle { display: block; margin-bottom: 0.8rem; font-size: 1.9rem; font-weight: 600; line-height: 1.3; color: var(--nws-black); }
.nws-article__nextread { display: block; font-size: 1.5rem; color: var(--nws-grey); }

/* ------------------------------------------------------------------------
   Responsivt.
   ------------------------------------------------------------------------ */

@media (max-width: 1300px) {
	/* Vänsterspalten in i flödet — förteckningen behåller sin plats överst,
	   texten och sidokorten delar raden under. */
	.nws-article__rail { position: static; flex: 1 1 100%; min-width: 0; }
	.nws-article__toc { display: none; }
	.nws-article__share { margin-top: 0; padding-top: 0; border-top: 0; }
	.nws-article__body { max-width: none; }
}

@media (max-width: 991px) {
	.nws-ghero { grid-template-columns: 1fr; }
	.nws-ghero__img { height: 26rem; }

	.nws-guides__grid { grid-template-columns: repeat(2, 1fr); }
	.nws-guides__result { flex-basis: 100%; margin-left: 0; order: 10; }

	.nws-article__hero { padding: 3.2rem 2.8rem; gap: 2.8rem; }
	.nws-article__aside { position: static; max-width: none; flex-basis: 100%; }
	.nws-article__nextgrid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	/* Samma mobilkant som arkivet (archive.css) — 56 px-guttern lämnade
	   bara 263 px innehåll på en 390-skärm. */
	.nws-ghub > .brxe-container,
	.nws-article-sec > .brxe-container { padding-left: 1.6rem; padding-right: 1.6rem; }

	.nws-ghero__img { height: 20rem; }
	.nws-ghero__content { padding: 2.2rem 2rem 2.4rem; }
	.nws-ghero__starters { padding: 2rem; }
	.nws-ghero__quiz { padding: 2rem; }

	.nws-guides__filters { padding: 1.4rem 1.6rem; gap: 1rem; }
	.nws-guides__grid { grid-template-columns: 1fr; }
	.nws-artcard__img { height: 22rem; }

	.nws-article__hero { padding: 2.4rem 2rem; gap: 2.4rem; }
	.nws-article__heromedia { min-width: 0; flex-basis: 100%; }
	.nws-article__heroimg { height: 20rem; }
	.nws-article__layout { gap: 2.8rem; }
}