/* Service pages and the /pakalpojumi hub.
 *
 * Loaded only by the generated pages, never by index.html, and every
 * selector is under an nb-sp- prefix. That is deliberate: the homepage is
 * live and earning, and no rule in this file can reach it.
 *
 * Colours come from the tokens in colors_and_type.css so these pages age
 * with the brand rather than pinning hexes of their own. The one exception
 * is the fallbacks after each var(), which exist so the page still looks
 * right if it is ever served without the token sheet. */

.nb-sp-top {
  /* Mirrors the homepage bar in its scrolled state: same 84px height, same
     60px logo, same nav type. It stays STATIC rather than reacting to scroll
     because a content page has no hero to sit over, which is the whole
     reason these pages kept plain markup. */
  background: var(--bg-surface, #fff);
  border-bottom: 1px solid var(--border-1, rgba(23,18,28,.10));
  position: sticky;
  top: 0;
  z-index: 40;
}
/* Over a dark photographic hero the bar is transparent with knockout type,
   exactly like the homepage's is-onhero state. Matching the homepage's
   SCROLLED bar was the earlier mistake: a visitor meets a page at the top,
   and at the top this site is a dark photo with a transparent bar over it. */
.nb-sp-top--onhero {
  position: absolute;
  left: 0; right: 0; top: 0;
  background: transparent;
  border-bottom-color: transparent;
}
.nb-sp-logo .lg-inverse { display: none; }
.nb-sp-top--onhero .lg-color   { display: none; }
.nb-sp-top--onhero .lg-inverse { display: block; }
.nb-sp-top--onhero .nb-sp-topnav a { color: rgba(237,235,224,.92); }
.nb-sp-top--onhero .nb-sp-topnav a:hover { background: rgba(237,235,224,.10); color: var(--nb-sugar, #EDEBE0); }
.nb-sp-top--onhero .nb-sp-lang { border-color: rgba(237,235,224,.34); color: var(--nb-sugar, #EDEBE0); }
.nb-sp-top--onhero .nb-sp-lang:hover { border-color: var(--nb-sugar, #EDEBE0); }

.nb-sp-top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 84px;
}
.nb-sp-logo img { height: 60px; width: auto; display: block; }
.nb-sp-topnav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
.nb-sp-topnav a {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 9px 12px; border-radius: 6px;
  font: 500 14px/1 var(--font-body);
  color: var(--nb-navy, #1b1721);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.nb-sp-topnav a:hover { background: rgba(23,18,28,.05); color: var(--nb-navy, #1b1721); }
.nb-sp-tel { font-weight: 700; margin-left: 8px; }
/* Language switch. These pages are static and the counterpart is a real
   URL (same slug, /en prefix on or off), so it is a plain link rather
   than the homepage's stateful LV/EN toggle. */
.nb-sp-lang {
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 9px;
  border: 1px solid rgba(27, 23, 33, .22);
  border-radius: 999px;
  line-height: 1.5;
}
.nb-sp-lang:hover {
  border-color: var(--nb-violet, #6E2297);
}

.nb-sp-crumbs {
  background: var(--nb-sugar, #f7f4f2);
  padding: 14px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border-1, rgba(23,18,28,.08));
}
.nb-sp-crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Separator as generated content, so it is decoration a screen reader
   skips rather than a stray character it reads between every crumb. */
.nb-sp-crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  opacity: .45;
}
.nb-sp-crumbs a { color: inherit; opacity: .75; }
.nb-sp-crumbs [aria-current] { font-weight: 600; }

.nb-sp-hero { padding: 56px 0 48px; }
.nb-sp-hero--photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--nb-ink, #17121c);
  color: var(--nb-sugar, #EDEBE0);
  padding: 0;
}
.nb-sp-hero-bg { position: absolute; inset: 0; z-index: 0; }
.nb-sp-hero-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 50%;
  display: block;
}
/* Same two-gradient scrim as the homepage hero, so the photo sits at the
   same weight and the knockout type has the same contrast. */
.nb-sp-hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14,26,51,.55) 0%, rgba(14,26,51,.18) 38%, rgba(14,26,51,.45) 100%),
    linear-gradient(90deg, rgba(14,26,51,.78) 0%, rgba(14,26,51,.28) 55%, rgba(14,26,51,.0) 100%);
}
.nb-sp-hero--photo .nb-sp-hero-in {
  position: relative; z-index: 2;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 104px;
  padding-bottom: 76px;
  min-height: clamp(460px, 62vh, 620px);
  align-content: center;
}
.nb-sp-hero--photo .nb-sp-hero-txt { max-width: 620px; }
.nb-sp-hero--photo h1 { color: var(--nb-sugar, #EDEBE0); }
.nb-sp-hero--photo .nb-sp-lead { color: rgba(237,235,224,.82); }
.nb-sp-hero--photo .nb-sp-eyebrow { color: var(--nb-violet-light, #C495E5); }
.nb-sp-hero--photo .nb-sp-eyebrow::before { background: var(--nb-violet-light, #C495E5); }
/* Breadcrumbs ride inside the hero now, so the page opens on the photo
   rather than on a cream strip that broke the run from bar to image. */
.nb-sp-hero--photo .nb-sp-crumbs {
  background: transparent;
  border-bottom: 0;
  padding: 0 0 22px;
  color: rgba(237,235,224,.72);
}
.nb-sp-hero--photo .nb-sp-crumbs .container { padding-left: 0; padding-right: 0; }
.nb-sp-hero--photo .nb-sp-crumbs a { color: rgba(237,235,224,.82); }
.nb-sp-hero--photo .nb-sp-crumbs [aria-current] { color: var(--nb-sugar, #EDEBE0); }
.nb-sp-hero-in {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
}
.nb-sp-hero-in--wide { grid-template-columns: minmax(0, 760px); }
/* Same eyebrow as the homepage section heads: 11.5px, .14em, --t-eb. */
.nb-sp-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font: 700 11.5px/1 var(--font-body);
  margin: 0 0 14px;
  color: var(--t-eb, var(--nb-violet, #6E2297));
}
.nb-sp-eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--t-accent, var(--nb-violet, #6E2297));
}
.nb-sp-hero h1 { color: var(--t-fg, inherit); font-family: var(--font-display); letter-spacing: -.015em; }
.nb-sp-lead { color: var(--t-fg-muted, inherit); opacity: 1; }
.nb-sp-body p { color: var(--t-fg-muted, inherit); }
.nb-sp-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.06;
}
.nb-sp-lead {
  margin: 0 0 26px;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  opacity: .86;
  max-width: 62ch;
}
.nb-sp-cta {
  display: inline-block;
  background: var(--nb-violet, #6E2297);
  color: #fff;
  text-decoration: none;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 600;
}
.nb-sp-cta:hover { background: var(--nb-violet-deep, #4d1769); }
.nb-sp-hero-img img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  display: block;
}

.nb-sp-body { padding: 64px 0 56px; }
/* Two columns: a small label on the left, the paragraph on the right at a
   readable measure. Previously this was one full-width paragraph dropped
   under the hero with nothing holding it, which read as displaced text. */
.nb-sp-body-in {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.nb-sp-body-eb {
  font: 700 11.5px/1.3 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-eb, var(--nb-violet, #6E2297));
  padding-top: 5px;
}
.nb-sp-body p {
  max-width: 68ch;
  font: 400 clamp(16.5px, 1.35vw, 18.5px)/1.62 var(--font-body);
  color: var(--t-fg-muted, inherit);
  margin: 0;
}
@media (max-width: 860px) {
  .nb-sp-body { padding: 40px 0 36px; }
  .nb-sp-body-in { grid-template-columns: 1fr; gap: 14px; }
}

/* Every themed section paints from --t-bg. Hardcoding the hex here is the
   mistake this site has repeatedly caught: the theme switches and the
   section stops matching. */
.nb-sp-hero.h2-themed,
.nb-sp-body.h2-themed,
.nb-sp-benefits.h2-themed,
.nb-sp-amen.h2-themed,
.nb-sp-form.h2-themed,
.nb-sp-siblings.h2-themed,
.nb-sp-hublist.h2-themed {
  background: var(--t-bg);
  color: var(--t-fg);
}
.nb-sp-benefits, .nb-sp-amen, .nb-sp-siblings, .nb-sp-hublist { padding: 64px 0; }
.nb-sp-benefits > .container > h2, .nb-sp-amen > .container > h2,
.nb-sp-siblings > .container > h2, .nb-sp-form > .container > h2 {
  margin: 0 0 22px;
  font-size: clamp(22px, 2.4vw, 30px);
}
.nb-sp-benefits ul, .nb-sp-amen ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px 28px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.nb-sp-benefits li, .nb-sp-amen li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 16px;
  line-height: 1.45;
}
.nb-sp-benefits .icn, .nb-sp-amen .icn { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; }
.nb-sp-amen ul { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.nb-sp-form { padding: 64px 0 72px; }
.nb-sp-formlead { margin: 0 0 26px; opacity: .8; }

.nb-sp-cardgrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.nb-sp-cardgrid a {
  /* Matches .h2-news-card: SHARP corners, surface fill, a --border-1
     hairline and a lavender hover lift. The 16px radius this replaces was
     invented; no card on this site is rounded. */
  display: block;
  position: relative;
  height: 100%;
  padding: 20px 46px 22px 20px;
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 0;
  text-decoration: none;
  color: var(--t-fg);
  transition: border-color .18s, transform .18s;
}
.nb-sp-cardgrid a:hover {
  transform: translateY(-2px);
  border-color: var(--nb-lavender, #C495E5);
}
.nb-sp-cardgrid a { padding: 0 0 22px; }
.nb-sp-cardgrid img {
  width: 100%;
  aspect-ratio: 16/10;
  height: auto;
  object-fit: cover;
  margin-bottom: 16px;
  display: block;
}
.nb-sp-cardgrid .nb-sp-cardttl, .nb-sp-cardgrid .nb-sp-cardsub { padding: 0 20px; }
.nb-sp-cardttl {
  display: block;
  font: 700 16px/1.28 var(--font-display);
  letter-spacing: -.005em;
  margin-bottom: 6px;
}
.nb-sp-cardsub { display: block; font: 400 14px/1.55 var(--font-body); color: var(--t-fg-muted); }
.nb-sp-cardarr {
  position: absolute;
  right: 20px;
  top: 22px;
  opacity: .4;
  font-size: 18px;
}
.nb-sp-cardgrid .nb-sp-cardarr { top: auto; bottom: 20px; }

@media (max-width: 900px) {
  .nb-sp-hero-in { grid-template-columns: 1fr; gap: 30px; }
  /* Photo first on narrow screens would push the h1 below the fold, and the
     heading is what tells the visitor they landed on the right service. */
  .nb-sp-hero-img { order: 2; }
  .nb-sp-hero { padding: 36px 0 32px; }
  .nb-sp-top-in { min-height: 68px; }
  .nb-sp-logo img { height: 42px; }
  .nb-sp-topnav { gap: 16px; font-size: 14px; }
}

@media (max-width: 620px) {
  /* The nav collapses to the phone number plus the services hub. Dropping
     the rest beats wrapping five links onto three lines above the fold. */
  /* Keep the phone, the language switch and the services hub. The hub match
     has to be a suffix, not the literal "/pakalpojumi", or the English tree's
     "/en/pakalpojumi" fails it and the link disappears. */
  .nb-sp-topnav a:not(.nb-sp-tel):not(.nb-sp-lang):not([href$="/pakalpojumi"]) { display: none; }
}


/* ── Components added when the service pages adopted the homepage language ──
   Cards and chips replace the bare bulleted lists these sections used to be.
   Everything paints from the --t-* tokens so a section can change theme
   without a single rule here needing to know which theme it landed on. */

/* Benefits use the homepage's own feature-list pattern (.h2-why-points):
   a 36px rounded icon tile in a violet tint, text beside it, no card and no
   border. The bordered boxes this replaces were a generic card component
   that appears nowhere else on this site. */
.nb-sp-benefit-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 22px 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.nb-sp-benefit-grid li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
  font: 400 15.5px/1.5 var(--font-body);
  color: var(--t-fg);
}
.nb-sp-benefit-ic {
  /* Measured off .h2-why-point-i on the homepage: 36px, 8px radius, a
     violet tint at 10%, a 20px icon and NO filter. The icons are left at
     their source colour there, so tinting them here was the reason these
     read washed out. */
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(110, 34, 151, .10);
  color: var(--nb-violet, #6E2297);
  margin-top: -3px;
}
.nb-sp-benefit-ic .icn { width: 20px; height: 20px; }
/* On the dark bands the violet tint disappears, so the tile goes to a
   knockout wash and the icon is inverted to match. */
[data-theme="violet"] .nb-sp-benefit-ic,
[data-theme="ink"] .nb-sp-benefit-ic { background: rgba(237, 235, 224, .12); }
[data-theme="violet"] .nb-sp-benefit-ic .icn,
[data-theme="ink"] .nb-sp-benefit-ic .icn { filter: brightness(0) invert(1); opacity: .9; }

/* Equipment uses the homepage's amenity pill (.amen-i): icon at 26px, a
   600-weight label, translucent fill. Light-theme variant of the same. */
.nb-sp-amen-grid {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.nb-sp-amen-grid li {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 11px;
  border-radius: 999px;
  background: rgba(110, 34, 151, .07);
  font: 600 13px/1 var(--font-body);
  letter-spacing: .02em;
  color: var(--t-fg);
  max-width: 100%;
}
.nb-sp-amen-grid .icn { width: 24px; height: 24px; flex: 0 0 24px; }
[data-theme="violet"] .nb-sp-amen-grid li,
[data-theme="ink"] .nb-sp-amen-grid li { background: rgba(237, 235, 224, .10); }
[data-theme="violet"] .nb-sp-amen-grid .icn,
[data-theme="ink"] .nb-sp-amen-grid .icn { filter: brightness(0) invert(1); opacity: .8; }

/* Card grids: were pinned to white with a black hairline, which only worked
   because every section was cream. They follow the theme now. */
.nb-sp-cardgrid a {
  background: var(--t-surface);
  border-color: var(--t-border);
  color: var(--t-fg);
}
.nb-sp-cardgrid a:hover { border-color: var(--t-accent); }
.nb-sp-cardsub { color: var(--t-fg-muted); opacity: 1; }
.nb-sp-cardarr { color: var(--t-accent); opacity: .65; }
.nb-sp-cardttl { font-family: var(--font-display); letter-spacing: -.01em; }

/* Section heads inside these pages: same component as the homepage, just
   given the breathing room this narrower page wants. */
.nb-sp-benefits .h2-section-head,
.nb-sp-amen .h2-section-head,
.nb-sp-siblings .h2-section-head,
.nb-sp-hublist .h2-section-head,
.nb-sp-form .h2-section-head { margin-bottom: 28px; }

/* The primary CTA matches the homepage button rather than restating it. */
.nb-sp-cta {
  font: 600 14.5px/1 var(--font-body);
  padding: 16px 30px;
  box-shadow: 0 10px 26px -14px rgba(41,0,89,.55);
  transition: background .18s, transform .18s;
}
.nb-sp-cta:hover { transform: translateY(-1px); }

@media (max-width: 720px) {
  .nb-sp-benefits, .nb-sp-amen, .nb-sp-siblings, .nb-sp-hublist { padding: 44px 0; }
  .nb-sp-form { padding: 44px 0 52px; }
}

/* Primary CTA in the bar, matching the homepage's pill. */
.nb-sp-topcta {
  display: inline-flex; align-items: center;
  margin-left: 6px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--nb-violet, #6E2297);
  color: var(--nb-sugar, #EDEBE0) !important;
  font: 600 13.5px/1 var(--font-body);
  white-space: nowrap;
  transition: background .18s, transform .18s;
}
.nb-sp-topcta:hover { background: var(--nb-violet-deep, #290059); transform: translateY(-1px); }
@media (max-width: 1100px) { .nb-sp-topcta { display: none; } }

/* Benefits as a two-column section, mirroring .h2-why: points left in two
   columns, photo right. Measured off the homepage: the points grid there is
   2 columns with a 24px/32px gap inside a ~609px text column. */
.nb-sp-benefits-in {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 56px;
  align-items: center;
}
.nb-sp-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
.nb-sp-benefits-photo {
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 20px;
  background: var(--nb-ink, #17121c);
}
.nb-sp-benefits-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 960px) {
  .nb-sp-benefits-in { grid-template-columns: 1fr; gap: 32px; }
  /* Photo after the points on narrow screens: the list is the substance. */
  .nb-sp-benefits-r { order: 2; }
  .nb-sp-benefits-photo { aspect-ratio: 16/10; }
}
@media (max-width: 560px) {
  .nb-sp-benefit-grid { grid-template-columns: 1fr; gap: 18px; }
}


/* Equipment now lives under the points in the benefits column, the way
   .h2-why carries its social row under .h2-why-points, instead of a band of
   its own that held one row of pills and a heading. */
.nb-sp-amen-block {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--t-border);
}
.nb-sp-subhead {
  font: 700 11.5px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-fg-faint);
  margin-bottom: 16px;
}