/* BrandLift Studio – services list (shared pieces live in components.css) */

/* Category filter */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.chip {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); font-size: 0.93rem; background: rgba(255, 255, 255, 0.015);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip[aria-current="true"] { background: rgba(201, 164, 92, 0.14); border-color: var(--gold); color: var(--gold-light); }

.category-desc { margin-bottom: 32px; }

/* Intro visual: desktop only (>= 1200px) */
.services-intro-visual { display: none; }

@media (min-width: 1200px) {
  /* Align the Services page's main desktop containers. */
  body:has(#services-h1) .site-header > .container,
  body:has(#services-h1) .site-footer > .container,
  .page-intro:has(#services-h1) > .services-intro,
  .page-intro:has(#services-h1) ~ .list-section > .container,
  .page-intro:has(#services-h1) ~ .list-section + .section > .container {
    max-width: 1480px;
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
  }
  .page-intro { padding: 128px 0 64px; }
  .page-intro > .services-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 39%;
    column-gap: 88px;
    align-items: center;

}
  .services-intro-copy { min-width: 0; }
  .services-intro .eyebrow { font-size: 0.84rem; margin-bottom: 20px; }
  .services-intro h1 { font-size: 4.25rem; margin-bottom: 22px; }
  .services-intro .lead { font-size: 1.3rem; max-width: 54ch; }
  .services-intro .chips { gap: 12px; margin-top: 40px; margin-bottom: 16px; }
  .services-intro .chip { min-height: 46px; padding: 0 22px; font-size: 1rem; }

  /* bleeds 32px into the container's right padding (page-intro clips overflow); vertically centred on the copy */
  .services-intro-visual { display: block; position: relative; margin: 0 -32px 0 0; }
  .services-intro-visual::before { /* restrained warm ambience behind the image */
    content: ""; position: absolute; inset: 8% 4%; z-index: -1; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(201, 164, 92, 0.13), transparent 100%); filter: blur(36px); }
  .services-intro-visual::after { /* understated frame over the faded image (no fill, never intercepts clicks) */
    content: ""; position: absolute; inset: 0 32px; border-radius: 26px; pointer-events: none; /* 32px = the image's bleed, so the frame stays inside the container */
    border: 1px solid rgba(201, 164, 92, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 26px 60px -34px rgba(0, 0, 0, 0.85), 0 0 46px -22px rgba(201, 164, 92, 0.28); }
  .services-intro-visual img { display: block; width: 100%; height: auto;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 44%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.18) 88%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 44%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.18) 88%, transparent 100%); }

  /* Catalogue refinement: calmer, more even cards (Tjänster list only; 4-column grid unchanged) */
  .page-intro:has(#services-h1) ~ .list-section .card-grid { gap: 28px; }
  .page-intro:has(#services-h1) ~ .list-section .card { padding: 32px; }
  .page-intro:has(#services-h1) ~ .list-section .card-kicker { color: var(--muted); } /* icon, price and "Läs mer" keep the gold */
  .page-intro:has(#services-h1) ~ .list-section .card h2 { font-size: 1.4rem; min-height: 2.3em; } /* two-line slot (line-height 1.15) so descriptions start level within a row */
  /* Pris / Leverans as a fixed label | value grid; the block has one shared height so the dividers line up across a row */
  .page-intro:has(#services-h1) ~ .list-section .card-meta { display: grid; align-content: start; gap: 8px; min-height: 107px; }
  .page-intro:has(#services-h1) ~ .list-section .card-meta > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; align-items: baseline; }

  /* Tjänster closing CTA (the section after the service list; #cta-title is not unique site-wide):
     same values as the approved Home/Paket/Portfolio/Om oss final CTA */
  .page-intro:has(#services-h1) ~ .list-section { padding-bottom: 64px; }
  .page-intro:has(#services-h1) ~ .list-section + .section { padding: 64px 0 72px; }
  .page-intro:has(#services-h1) ~ .list-section + .section .cta { margin-bottom: 0; padding: 88px 96px; border-radius: 30px; border-color: rgba(201, 164, 92, 0.28);
    background:
      radial-gradient(ellipse 75% 85% at 50% 100%, rgba(201, 164, 92, 0.085), transparent 72%),
      radial-gradient(ellipse at 50% 0%, rgba(201, 164, 92, 0.14), transparent 60%), var(--glass), var(--surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 28px 56px -34px rgba(0, 0, 0, 0.7), 0 50px 110px -64px rgba(201, 164, 92, 0.45); }
  .page-intro:has(#services-h1) ~ .list-section + .section .cta::before { width: 120%; bottom: -72%; background: radial-gradient(ellipse, rgba(201, 164, 92, 0.16), transparent 68%); }
  .page-intro:has(#services-h1) ~ .list-section + .section .cta h2 { font-size: 3.2rem; margin-bottom: 22px; }
  .page-intro:has(#services-h1) ~ .list-section + .section .cta .lead { font-size: 1.18rem; max-width: 720px; margin-bottom: 44px; color: #b8b2a6; }
  .page-intro:has(#services-h1) ~ .list-section + .section .cta .btn { min-height: 60px; padding: 0 42px; font-size: 1.06rem; }
}