/* E.Perssons Bygg&Maskin – ep-k2.css (Körning 2): nya komponenter för undersidorna.
   Laddas SIST, efter ep-komponenter.css. Kopieras ordagrant – ändra inte mått, klassnamn eller brytpunkter.
   Använder variablerna i ep-komponenter.css (:root). Brytpunkter: 1100 / 900 / 760 / 420 px.
   Komponenter: ep-art (brödtext, "Borrprofil"), ep-links (internlänkar, "Ledningsschakt"), ep-area--ort (områdessektion utan Om oss),
   ep-head__drop-all (Alla områden i dropdownen). */

.ep-art, .ep-links { font-family: var(--ep-ff-b); }
:is(.ep-art, .ep-links), :is(.ep-art, .ep-links) *, :is(.ep-art, .ep-links) *::before, :is(.ep-art, .ep-links) *::after { box-sizing: border-box; }
:is(.ep-art, .ep-links) a:hover { text-decoration: none; }
:is(.ep-art, .ep-links) p { max-width: none; }

/* ---------- Header: Alla områden ---------- */
.ep-head__drop .ep-head__drop-all { font-weight: 600; color: var(--ep-navy); border-bottom: 1px solid var(--ep-line); margin-bottom: 6px; padding-bottom: 2px; }

/* ---------- ep-art: brödtext med borrprofil ---------- */
.ep-art { padding-block: 100px; background: #fff; }
.ep-art__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.ep-art__aside { min-width: 0; height: 100%; }
.ep-art__stick { position: sticky; top: calc(var(--ep-head-h) + 32px); }
.ep-art__line { width: 100%; max-width: 320px; height: 56px; display: block; margin: 22px 0 0; color: var(--ep-grey); }
.ep-art__line path { fill: none; stroke: currentColor; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.ep-art__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.ep-art__body { position: relative; min-width: 0; padding-left: 76px; }
/* röret: grå ledning med marinblå "vattenpelare" upptill */
.ep-art__body::before { content: ""; position: absolute; left: 23px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(180deg, var(--ep-line) 0 10px, transparent 10px 16px); }
.ep-art__body::after { content: ""; position: absolute; left: 23px; top: 8px; width: 2px; height: 64px; background: linear-gradient(180deg, var(--ep-navy), rgb(0 0 128 / 0)); }
.ep-art__sec { position: relative; padding: 0 0 34px; margin: 0 0 34px; border-bottom: 1px solid var(--ep-line); }
.ep-art__sec:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.ep-art__no { position: absolute; left: -76px; top: -4px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid var(--ep-grey); font: 800 15px/1 var(--ep-ff-d); color: var(--ep-ink); letter-spacing: .02em; transition: border-color .3s, color .3s, background .3s; }
.ep-art__sec:hover .ep-art__no { border-color: var(--ep-navy); color: var(--ep-navy); }
.ep-art__sec:first-child .ep-art__no { border-color: var(--ep-navy); background: var(--ep-navy); color: #fff; }
.ep-art__h { font: 700 23px/1.2 var(--ep-ff-d); color: var(--ep-ink); margin: 0 0 10px; text-wrap: balance; }
.ep-art__p { font-size: 17px; line-height: 1.7; color: var(--ep-mid); margin: 0; }

/* ---------- ep-links: internlänkar med schaktkant ---------- */
.ep-links { position: relative; background: var(--ep-soft); padding-block: 130px 96px;
  -webkit-mask: var(--ep-mask-strata) top / 100% 70px no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - 69px) no-repeat;
          mask: var(--ep-mask-strata) top / 100% 70px no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - 69px) no-repeat; }
.ep-links__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.ep-links__grid--one { grid-template-columns: minmax(0, 1fr); }
.ep-links__grid--one .ep-links__list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 32px; }
.ep-links__col { min-width: 0; }
.ep-links__h { font: 800 32px/1.1 var(--ep-ff-d); color: var(--ep-ink); margin: 0 0 22px; text-wrap: balance; }
.ep-links__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; border-top: 2px solid var(--ep-ink); }
.ep-links__it { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 8px 4px; border-bottom: 1px solid #d0d4d6; color: var(--ep-ink); font: 700 18px/1.25 var(--ep-ff-d); transition: color .2s, padding .25s, background .2s; }
.ep-links__it > .ep-ico:first-child { width: 24px; height: 24px; color: var(--ep-grey-d); transition: color .2s; }
.ep-links__txt { flex: 1 1 auto; min-width: 0; }
.ep-links__pil { width: 20px; height: 20px; color: var(--ep-navy); transition: transform .25s; }
.ep-links__it:hover, .ep-links__it:focus-visible { color: var(--ep-navy); padding-left: 10px; background: #fff; outline: none; }
.ep-links__it:hover > .ep-ico:first-child, .ep-links__it:focus-visible > .ep-ico:first-child { color: var(--ep-navy); }
.ep-links__it:hover .ep-links__pil, .ep-links__it:focus-visible .ep-links__pil { transform: translateX(4px); }
.ep-links__it:focus-visible { box-shadow: inset 3px 0 0 var(--ep-navy); }

/* ---------- ep-area--ort: områdessektion utan Om oss-raden ---------- */
.ep-area--ort { padding-block: 100px; }
.ep-area__body .ep-lead { max-width: 60ch; }
.ep-area__body .ep-lead + .ep-lead { margin-top: 12px; }
.ep-places__h { margin: 28px 0 0; font: 600 12px/1 var(--ep-ff-b); letter-spacing: .18em; text-transform: uppercase; color: var(--ep-mid); }
.ep-places__h + .ep-places { margin-top: 12px; }
.ep-places + .ep-btn { margin-top: 22px; }

@media (max-width: 1100px) {
  .ep-art__grid { gap: 48px; }
  .ep-links__grid { gap: 44px; }
}
@media (max-width: 900px) {
  .ep-art__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ep-art__aside { height: auto; }
  .ep-art__stick { position: static; }
  .ep-links__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 760px) {
  .ep-art { padding-block: 64px; }
  .ep-art__body { padding-left: 60px; }
  .ep-art__body::before, .ep-art__body::after { left: 19px; }
  .ep-art__no { left: -60px; width: 40px; height: 40px; font-size: 13px; }
  .ep-art__h { font-size: 20px; }
  .ep-art__p { font-size: 16px; }
  .ep-art__sec { padding-bottom: 26px; margin-bottom: 26px; }
  .ep-art__cta .ep-btn { flex: 1 1 100%; white-space: normal; text-align: center; }
  .ep-links { padding-block: 84px 64px; -webkit-mask-size: 100% 44px, 100% calc(100% - 43px); mask-size: 100% 44px, 100% calc(100% - 43px); }
  .ep-links__h { font-size: 26px; }
  .ep-links__it { font-size: 17px; min-height: 54px; }
  .ep-area--ort { padding-block: 64px; }
}
@media (max-width: 420px) {
  .ep-art__body { padding-left: 52px; }
  .ep-art__no { left: -52px; width: 36px; height: 36px; }
  .ep-art__body::before, .ep-art__body::after { left: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .ep-art__no, .ep-links__it, .ep-links__it .ep-ico, .ep-links__pil { transition: none !important; }
}