/* ---------- Områdessidor ---------- */
/* Bygger på tokens.css och site.css. Laddas på de nya sidorna under /tjanster/ (inomhusskyltar, banderoller och vepor, event och mässa, trycksaker, fastighetsdekor, design). */

/* "Passar bra när…": behoven som länkade rader med linje emellan, samma linjespråk som w-steps--list. */
.w-omr-needs { display: grid; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--dp-silver); }
.w-omr-needs a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--dp-space-4); padding: var(--dp-space-6) 0; border-top: 1px solid var(--dp-silver); text-decoration: none; }
.w-omr-needs li:first-child a { border-top: 1.5px solid var(--dp-black); }
.w-omr-needs__q { font-size: var(--dp-fs-lg); font-weight: 500; line-height: var(--dp-lh-h3); letter-spacing: var(--dp-tracking-h3); }
.w-omr-needs__go { color: var(--dp-text-muted); font-size: var(--dp-fs-sm); }
.w-omr-needs .arr { transition: transform var(--dp-dur-1); }
.w-omr-needs a:hover .w-omr-needs__q { text-decoration: underline; text-underline-offset: .25em; }
.w-omr-needs a:hover .arr { transform: translateX(4px); }
.w-omr-needs a:focus-visible { outline: 2px solid var(--dp-black); outline-offset: 4px; }
@media (max-width: 560px) { .w-omr-needs a { grid-template-columns: minmax(0, 1fr) auto; } .w-omr-needs__go { display: none; } }

/* Hänvisning under korten, till exempel till /tjanster/skyltar/ när något hör hemma där. */
.w-omr-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--dp-space-8); color: var(--dp-text-muted); }
.w-omr-more .dp-link { color: var(--dp-text); }

/* Länkar inne i kortens text. */
.w-list p a { text-decoration: underline; text-underline-offset: .2em; }

/* Tre steg i stället för fyra (Från koncept till produkt). */
.w-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .w-steps--3 { grid-template-columns: 1fr; } }