/* Åstveit Våre ytelser — only var(--e-global-…) for colors/fonts. */
.as-svc{ position:relative; background:var(--e-global-color-surfacealt); padding-block:calc(var(--as-section-y) - 20px) var(--as-section-y); overflow:hidden; }
.as-svc .as-mist--blue{ width:900px; height:900px; right:-260px; top:-120px; }
.as-svc .as-mist--light{ width:700px; height:700px; left:-200px; bottom:-260px; }
.as-svc .as-svc__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px, 6vw, 110px); align-items:start; }
.as-svc .as-svc__title{ margin-top:-.14em; }
@supports (text-box: trim-start cap alphabetic){ .as-svc .as-svc__title{ margin-top:0; text-box:trim-start cap alphabetic; } }
.as-section.as-svc .as-svc__text{ font-size:1.25rem; color:var(--e-global-color-text); }

.as-svc .as-svc__media{ position:relative; margin:40px 0 0; max-width:none; }
.as-svc .as-svc__media img{ width:100%; height:auto; aspect-ratio:4/3.3; object-fit:cover; border-radius:var(--as-radius-lg); box-shadow:var(--as-shadow); }

.as-svc .as-svc__list{ list-style:none; margin:0; padding:10px; background:color-mix(in srgb, var(--e-global-color-surface) 70%, transparent); border-radius:var(--as-radius-lg); border:1px solid color-mix(in srgb, var(--e-global-color-primary) 10%, transparent); }
.as-svc .as-svc__list li{ margin:0; }
.as-svc .as-svc__list li + li{ border-top:1px solid var(--e-global-color-accent); }
.as-svc .as-svc__item{
  display:grid; grid-template-columns:64px 1fr 52px; align-items:center; gap:22px;
  padding:18px 18px 18px 14px; text-decoration:none; color:var(--e-global-color-text); border-radius:var(--as-radius);
  transition:background-color .25s;
}
.as-svc .as-svc__icon{ width:64px; height:64px; border-radius:50%; background:var(--e-global-color-accent); color:var(--e-global-color-primary); display:grid; place-items:center; transition:background-color .25s, color .25s; }
.as-svc .as-svc__icon svg{ width:30px; height:30px; }
.as-svc .as-svc__icon i{ font-size:28px; }
.as-svc .as-svc__icon svg:not([fill="none"]) path{ fill:currentColor; }
.as-svc .as-svc__name{
  font-family:var(--e-global-typography-h3-font-family); font-size:var(--e-global-typography-h3-font-size);
  font-weight:var(--e-global-typography-h3-font-weight); line-height:var(--e-global-typography-h3-line-height);
}
.as-svc .as-svc__go{ width:52px; height:52px; border-radius:50%; border:2px solid var(--e-global-color-border); color:var(--e-global-color-primary); display:grid; place-items:center; transition:border-color .25s, background-color .25s, color .25s, transform .25s; }
.as-svc .as-svc__go svg{ width:20px; height:20px; }
.as-svc .as-svc__item:hover{ background:var(--e-global-color-hover); color:var(--e-global-color-text); }
.as-svc .as-svc__item:hover .as-svc__icon{ background:var(--e-global-color-primary); color:var(--e-global-color-surface); }
.as-svc .as-svc__item:hover .as-svc__go{ background:var(--e-global-color-primary); border-color:var(--e-global-color-primary); color:var(--e-global-color-surface); transform:translateX(4px); }

/* Desktop: image fills the intro column down to the bottom of the list. */
@media (min-width:961px){
  .as-svc .as-svc__grid{ align-items:stretch; }
  .as-svc .as-svc__intro{ display:flex; flex-direction:column; }
  .as-svc .as-svc__media{ flex:1 1 0; min-height:260px; }
  .as-svc .as-svc__media img{ position:absolute; inset:0; height:100%; aspect-ratio:auto; }
}

@media (max-width:960px){ .as-svc .as-svc__grid{ grid-template-columns:1fr; } }
@media (max-width:640px){
  .as-svc .as-svc__list{ padding:4px; }
  .as-svc .as-svc__item{ grid-template-columns:52px 1fr 44px; gap:14px; padding:14px 8px; }
  .as-svc .as-svc__icon{ width:52px; height:52px; }
  .as-svc .as-svc__icon svg{ width:26px; height:26px; }
  .as-svc .as-svc__go{ width:44px; height:44px; }
}