/* Undersidornas komponenter — Sidhuvud, Process, Textblock, FAQ, Kontaktkort.
   Komponenterna ligger i Bricks (kategori Nordway) och byggs av
   nordwaystore-core/tools/build-components.php. USP-raden, Företagskortet
   och Skickraderna återanvänder startsidans klasser i home.css. */

/* Sidhuvud */
.nws-phero > .brxe-container { padding: var(--space-l) var(--nws-gutter) var(--space-xl); }
.nws-phero__inner {
	background: var(--nws-grey-surface);
	border-radius: var(--nws-radius-xl);
	padding: var(--space-xl) var(--space-xl) var(--space-xl);
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	max-width: 100%;
}
.nws-phero__title { max-width: 18ch; margin: 0; }
.nws-phero__lead { font-size: var(--text-l); line-height: 1.5; color: var(--nws-grey); max-width: 60ch; margin: 0; }
.nws-phero__actions { display: flex; gap: 1.2rem 2rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
/* Sidhuvud byggt utan komponenten (Kundservice): texten i en egen div, samma avstånd som komponentens. */
.nws-phero__text { display: flex; flex-direction: column; gap: 1.2rem; }
/* Kundservice: Ring och Mejla som vita kort till höger i sidhuvudet. */
.nws-phero__inner--routes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(28rem, 38rem); gap: var(--space-l); align-items: center; }
.nws-phero__routes { display: flex; flex-direction: column; gap: 1.2rem; }
.nws-phero__routes .nws-route { background: var(--nws-white); border-color: transparent; }
.nws-phero__routes .nws-route:hover { border-color: var(--nws-black); }


/* Process — numrerade steg */
.nws-process > .brxe-container { padding: 0 var(--nws-gutter) var(--space-xl); }
.nws-process__title { margin: 0 0 var(--space-m); }
/* Fem lika höga steg på en rad (kundens önskemål 2026-10-30), färre per
   rad på smalare skärmar. */
.nws-process__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6rem; align-items: stretch; }
@media (max-width: 1200px) { .nws-process__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .nws-process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 478px) { .nws-process__grid { grid-template-columns: 1fr; } }

/* Så testar vi: "Från verkstaden" — bild + text, redigeras i Bricks. */
.nws-workshop > .brxe-container { padding: 0 var(--nws-gutter) var(--space-xl); }
.nws-workshop__grid { width: 100%; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; background: var(--nws-grey-surface); border-radius: var(--nws-radius-l); overflow: hidden; }
.nws-workshop__media { display: block; width: 100%; height: 100%; min-height: 32rem; max-height: 44rem; overflow: hidden; }
.nws-workshop__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nws-workshop__grid { grid-template-rows: minmax(32rem, 44rem); }
.nws-workshop__copy { padding: 4rem 4.4rem 4rem 0; display: flex; flex-direction: column; gap: 1.2rem; }
.nws-workshop__copy .nws-eyebrow { margin-bottom: 0.4rem; }
.nws-workshop__title { margin: 0; text-wrap: balance; }
.nws-workshop__text { font-size: 1.7rem; line-height: 1.55; color: var(--nws-grey); margin: 0; }
@media (max-width: 991px) {
	.nws-workshop__grid { grid-template-columns: 1fr; gap: 0; }
	.nws-workshop__media, .nws-workshop__media img { min-height: 22rem; }
	.nws-workshop__copy { padding: 2.4rem; }
}

/* Kundservice: telefonraden längst ner (flyttad från sidhuvudet 2026-10-30). */
.nws-callrow > .brxe-container { padding: 0 var(--nws-gutter) var(--space-xl); }
.nws-callrow__inner { width: 100%; display: flex; align-items: center; justify-content: center; gap: 1.6rem 2.4rem; flex-wrap: wrap; border-top: 1px solid var(--nws-grey-soft); padding-top: 3.2rem; }
.nws-callrow__label { font-size: 1.7rem; color: var(--nws-grey); }
.nws-callrow .nws-route { flex-direction: row; align-items: baseline; gap: 1.2rem; padding: 1.4rem 4.4rem 1.4rem 2rem; border-radius: var(--nws-radius-m); }
.nws-callrow .nws-route::after { top: 50%; right: 2rem; transform: translateY(-50%); }
.nws-callrow .nws-route:hover::after { transform: translate(0.4rem, -50%); }
.nws-callrow .nws-route__value { font-size: 1.8rem; }

/* Villkorssidorna: textkolumnen centrerad på sidan men vänsterställd text
   (kundens önskemål 2026-10-30). page.css sätter bredden 78rem. */
body.nws-villkor .nws-textblock__body { margin-inline: auto; }
/* Villkorssidorna: ingen knapp i sidhuvudet (den ligger längst ner i stället). */
body.nws-villkor .nws-phero .nws-phero__actions { display: none; }
/* "Fick du inte svar?" längst ner på villkorssidorna. */
.nws-help-cta > .brxe-container { padding: 0 var(--nws-gutter) var(--space-xl); }
.nws-help-cta__card { width: 100%; max-width: 78rem; margin-inline: auto; background: var(--nws-grey-surface); border-radius: var(--nws-radius-l); padding: 4rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.2rem; }
.nws-help-cta__title { margin: 0; }
.nws-help-cta__text { margin: 0 0 1rem; font-size: 1.7rem; color: var(--nws-grey); }
@media (max-width: 767px) {
	/* Mobilgutter för dagens nya sektioner — efter grundreglerna. */
	.nws-workshop > .brxe-container,
	.nws-callrow > .brxe-container,
	.nws-help-cta > .brxe-container { padding-left: 1.6rem; padding-right: 1.6rem; }
	.nws-help-cta__card { padding: 2.8rem 2rem; }
	.nws-callrow__inner { justify-content: flex-start; }
	/* Telefonkortet: numret får inte radbrytas; etikett/nummer/tider staplas. */
	.nws-callrow .nws-route { flex-direction: column; align-items: flex-start; gap: 0.4rem; width: 100%; }
	.nws-callrow .nws-route__value { white-space: nowrap; }
}
.nws-stepcard {
	background: var(--nws-white);
	border: 1px solid var(--nws-grey-line);
	border-radius: var(--nws-radius-l);
	padding: 2.2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.nws-stepcard__num {
	width: 3.2rem; height: 3.2rem; border-radius: 50%;
	background: var(--nws-black); color: var(--nws-green);
	font-size: 1.7rem; font-weight: 600;
	display: flex; align-items: center; justify-content: center;
}
.nws-stepcard__title { font-size: 2rem; font-weight: 600; line-height: 1.2; margin: 0; }
.nws-stepcard__text { font-size: 1.6rem; line-height: 1.5; color: var(--nws-grey); margin: 0; }

/* Textblock — brödtext i läsbar spalt, typografin från page.css */
.nws-textblock > .brxe-container { padding: 0 var(--nws-gutter) var(--space-xl); }
.nws-textblock__title { margin: 0 0 var(--space-s); }
.nws-textblock__body { max-width: 72rem; }

/* FAQ — frågorna är details/summary med product.css:s .nws-faq__item */
.nws-faqsec > .brxe-container { padding: 0 var(--nws-gutter) var(--space-xl); }
.nws-faqsec__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 5.6rem; align-items: start; }
.nws-faqsec__intro > .brxe-heading { margin: 0 0 1.4rem; }
.nws-faqsec__sub { font-size: 1.8rem; line-height: 1.5; color: var(--nws-grey); }

.nws-faq__item > summary.brxe-text-basic { margin: 0; }

/* Kundservice: tre kontaktvägar direkt under sidhuvudet, hela kortet klickbart. */
.nws-routes > .brxe-container { padding: 0 var(--nws-gutter) var(--space-xl); }
.nws-routes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.nws-route {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 2.4rem 2.8rem;
	border: 1px solid var(--nws-grey-line);
	border-radius: var(--nws-radius-l);
	color: var(--nws-black);
	text-decoration: none;
	transition: border-color 0.15s;
}
.nws-route:hover { border-color: var(--nws-black); }
.nws-route::after { content: "→"; position: absolute; top: 2.4rem; right: 2.8rem; color: var(--nws-grey); transition: transform 0.15s; }
.nws-route:hover::after { transform: translateX(0.4rem); color: var(--nws-black); }
.nws-route__label { font-size: 1.3rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nws-grey); }
.nws-route__value { font-size: 2rem; font-weight: 600; overflow-wrap: anywhere; }
.nws-route__note { font-size: 1.5rem; color: var(--nws-grey); }

/* Villkoren som en egen rad: fyra kort, samma som kontaktvägarna men lägre. */
.nws-routes__title { margin: 0 0 2rem; }
.nws-routes__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nws-route--compact { padding: 2rem 2.4rem; }
.nws-route--compact .nws-route__value { font-size: 1.8rem; }
.nws-route--compact::after { top: 50%; right: 2.4rem; transform: translateY(-50%); }
.nws-route--compact:hover::after { transform: translate(0.4rem, -50%); }

/* Frågorna och formuläret på samma rad, båda rubrik + underrad + innehåll. */
.nws-faqsec__grid--even { grid-template-columns: 1fr 1fr; }
.nws-faqsec__grid--even .nws-faq { margin-top: 2.4rem; }
.nws-msg__col { display: flex; flex-direction: column; gap: 2.4rem; scroll-margin-top: 2rem; }
.nws-msg__intro > .brxe-heading { margin: 0 0 1.4rem; }
/* Rutnät i stället för Bricks 50 %-bredder — med mellanrum blev två halvor
   bredare än raden och hamnade under varandra. Namn och E-post bredvid
   varandra, resten över hela bredden (ordningen sätts i Bricks). */
.nws-msg__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; }
.nws-msg__form > .form-group { width: auto !important; padding: 0; }
.nws-msg__form > .form-group:nth-child(n+3),
.nws-msg__form > .submit-button-wrapper { grid-column: 1 / -1; }
.nws-msg__form label { font-size: 1.4rem; font-weight: 600; color: var(--nws-black); margin-bottom: 0.6rem; }
.nws-msg__form input:not([type="checkbox"]):not([type="radio"]),
.nws-msg__form textarea {
	width: 100%;
	font: inherit;
	font-size: 1.7rem;
	padding: 1.3rem 1.4rem;
	border: 1px solid var(--nws-grey-line);
	border-radius: var(--nws-radius-m);
	background: var(--nws-white);
	color: var(--nws-black);
}
.nws-msg__form textarea { min-height: 16rem; }
.nws-msg__form input:focus,
.nws-msg__form textarea:focus { border-color: var(--nws-black); outline: none; }
.nws-msg__form button[type="submit"] {
	font-size: 1.6rem;
	font-weight: 600;
	padding: 1.5rem 2.4rem;
	border: 0;
	border-radius: var(--nws-radius-btn);
	background: var(--nws-black);
	color: var(--nws-white);
	cursor: pointer;
}
.nws-msg__form button[type="submit"]:hover { background: #333; }

/* Innehållsförteckning (nws-toc.js) överst i långa villkorstexter. */
.nws-toc {
	background: var(--nws-grey-surface);
	border-radius: var(--nws-radius-l);
	padding: 2.4rem 2.8rem;
	margin-bottom: var(--space-l);
}
.nws-page__body .nws-toc__title { margin: 0 0 1.2rem; font-size: 1.3rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nws-grey); }
body:not(.woocommerce-page) .nws-page__body .nws-toc ol { columns: 2; column-gap: 4rem; display: block; margin: 0; padding-left: 2.2rem; }
body:not(.woocommerce-page) .nws-page__body .nws-toc li { padding: 0.4rem 0; break-inside: avoid; }
.nws-toc a { color: var(--nws-black); }
.nws-page__body h2[id] { scroll-margin-top: 2rem; }
@media (max-width: 767px) {
	body:not(.woocommerce-page) .nws-page__body .nws-toc ol { columns: 1; }
	.nws-msg__form { grid-template-columns: 1fr; }
}

/* Kontaktkort */
.nws-contact > .brxe-container { padding: 0 var(--nws-gutter) var(--space-xl); }
.nws-contact__card {
	background: var(--nws-white);
	border: 1px solid var(--nws-grey-line);
	border-radius: var(--nws-radius-l);
	padding: 2.4rem 2.8rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: 2rem;
}
.nws-contact__title { grid-column: 1 / -1; margin: 0; }
.nws-contact__item { display: flex; flex-direction: column; gap: 0.4rem; }
.nws-contact__label { font-size: 1.3rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nws-grey); }
.nws-contact__value { font-size: 1.9rem; font-weight: 600; }
.nws-contact__note { font-size: 1.5rem; color: var(--nws-grey); }

@media (max-width: 991px) {
	.nws-faqsec__grid { grid-template-columns: 1fr; gap: 2.4rem; }
	.nws-routes__grid { grid-template-columns: 1fr; gap: 1.2rem; }
	.nws-phero__inner--routes { grid-template-columns: 1fr; }
	.nws-routes__grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
	.nws-phero > .brxe-container,
	.nws-process > .brxe-container,
	.nws-textblock > .brxe-container,
	.nws-faqsec > .brxe-container,
	.nws-contact > .brxe-container,
	.nws-routes > .brxe-container { padding-left: 1.6rem; padding-right: 1.6rem; }
	.nws-phero__inner { padding: var(--space-l) var(--space-m); }
	/* Efter 991-blocket ovan, annars vinner dess två spalter. */
	.nws-routes__grid--4 { grid-template-columns: 1fr; }
}

/* Textblockets stycken är brödtext rakt igenom — sidmallens ingress-stil på
   första stycket (page.css) gäller inte här, annars ser två textblock på
   samma sida olika stora ut. */
body:not(.woocommerce-page) .nws-textblock__body > p:first-child { font-size: inherit; line-height: inherit; color: inherit; }