/*
  File role: VOGO eBS Portal — the office layout of the catalog page (_office-layout.php, NOTAR-ASIST D39a), loaded by
  index.php after services.css only for a suite with 'layout' => 'office' (the notary suite).
  Look: a deep ink hero carrying the notarial seal (guilloche rosette, notary emblem, the office's name on the ring) as the one
  memorable element; everything else quiet — light grey band (#f4f6f9) with white VOGO cards, one VOGO blue for icons.
  The only motion that runs by itself: the seal is stamped once on load; reduced motion turns it off.
  @file_version 1.0.13   (1.0.13: the price page link in the acts' heading, D-031)
*/

.portal-layout--office {
  --nb-ink: #0B2545;
  --nb-ink-2: #133A66;
  --nb-blue: #0F6CBD;
  --nb-sky: #8EC3F0;
  --nb-ice: #EAF3FC;
  --nb-paper: #F4F6F9;
  --nb-text: #1B2A3D;
  --nb-muted: #5B6B7F;
  --nb-line: #DFE6EE;
  --nb-max: 1180px;
  margin: 0;
  background: var(--nb-paper);
  color: var(--nb-text);
  font-family: var(--portal-font-body, "Inter", system-ui, sans-serif);
}
.portal-layout--office *,
.portal-layout--office *::before,
.portal-layout--office *::after { box-sizing: border-box; }
.portal-layout--office :focus-visible { outline: 3px solid var(--nb-sky); outline-offset: 2px; }
.nb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The topbar merges into the hero: same ink, no shadow. */
.portal-layout--office .ebsegov-sticky-topbar { background: var(--nb-ink); box-shadow: none; }
/* The office's logo (the emblem roundel, notary-logo.png) carries its own disc: no white circle around it. */
.portal-layout--office .ebsegov-hero__crest { background: none; box-shadow: none; }
.portal-layout--office .ebsegov-hero__crest img { width: 52px; height: 52px; }

/* ── 1. Hero ─────────────────────────────────────────────────────────────── */
.nb-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 80% 42%, rgba(15, 108, 189, 0.45) 0%, rgba(15, 108, 189, 0) 42%),
    repeating-radial-gradient(circle at 80% 42%, rgba(142, 195, 240, 0.06) 0 1px, transparent 1px 22px),
    linear-gradient(160deg, var(--nb-ink) 0%, #0A2140 60%, #081B35 100%);
}
.nb-hero__inner {
  max-width: var(--nb-max);
  margin: 0 auto;
  padding: 64px 28px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 48px;
  align-items: center;
}
.nb-hero__kicker { margin: 0 0 10px; font-size: 1.05rem; font-weight: 600; color: var(--nb-sky); }
.nb-hero__name {
  margin: 0 0 22px;
  font-family: var(--portal-font-display, "Inter Tight", sans-serif);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: #fff;
}
.nb-hero__title { margin: 0 0 6px; font-size: 1.3rem; font-weight: 600; color: #fff; }
.nb-hero__lead { margin: 0 0 30px; max-width: 34em; font-size: 1.05rem; line-height: 1.6; color: rgba(255, 255, 255, 0.74); }

/* The search: a white field with the button inside. */
.nb-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 620px;
  padding: 8px 8px 8px 18px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(3, 14, 32, 0.35);
}
.nb-search__icon { display: inline-flex; width: 22px; height: 22px; color: var(--nb-blue); flex-shrink: 0; }
.nb-search__icon svg { width: 22px; height: 22px; }
.nb-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 1.05rem;
  color: var(--nb-text);
  background: transparent;
  padding: 10px 0;
}
.nb-search__input::placeholder { color: #8896A7; }
.nb-search__btn {
  flex-shrink: 0;
  padding: 13px 20px;
  border-radius: 10px;
  background: var(--nb-blue);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.15s;
}
.nb-search__btn:hover { background: #0B5698; }

/* The search's dropdown: the matching acts, under the field. Fixed (placed by office.js) so the hero does not clip it. */
.nb-suggest {
  position: fixed;
  z-index: 1000;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: min(360px, 60vh);
  overflow-y: auto;
  background: #fff;
  border: 1px solid #E3E8EF;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(3, 14, 32, 0.35);
}
.nb-suggest__item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--nb-text); text-decoration: none; }
.nb-suggest__item.is-active, .nb-suggest__item:hover { background: #EEF5FC; }
.nb-suggest__icon { flex-shrink: 0; display: inline-flex; justify-content: center; width: 26px; font-size: 20px; color: var(--nb-blue); }
.nb-suggest__icon svg { width: 22px; height: 22px; }
.nb-suggest__text { display: flex; flex-direction: column; min-width: 0; }
.nb-suggest__title { font-weight: 600; line-height: 1.3; }
.nb-suggest__cat { font-size: 0.8rem; color: var(--nb-muted); }
.nb-suggest__none { padding: 10px 12px; color: var(--nb-muted); }

/* The category chips. */
.nb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; max-width: 680px; }
.nb-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.nb-chip:hover { border-color: rgba(255, 255, 255, 0.55); }
.nb-chip__icon { display: inline-flex; width: 18px; height: 18px; color: var(--nb-sky); }
.nb-chip__icon svg { width: 18px; height: 18px; }
.nb-chip__count { font-size: 0.78rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); }
.nb-chip.is-active { background: #fff; border-color: #fff; color: var(--nb-ink); }
.nb-chip.is-active .nb-chip__icon { color: var(--nb-blue); }
.nb-chip.is-active .nb-chip__count { background: var(--nb-ice); color: var(--nb-blue); }

/* The seal: guilloche rosette, rings, the office's name on the circle, the notary emblem in the middle. */
.nb-seal { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1; justify-self: center; }
.nb-seal__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nb-seal__disc { fill: rgba(255, 255, 255, 0.035); }
.nb-seal__line { fill: none; stroke: var(--nb-sky); stroke-width: 1.6; opacity: 0.85; }
.nb-seal__line--thin { stroke-width: 0.8; opacity: 0.55; }
.nb-seal__rosette ellipse { fill: none; stroke: var(--nb-sky); stroke-width: 0.6; opacity: 0.55; }
.nb-seal__text { fill: var(--nb-sky); font-family: var(--portal-font-display, "Inter Tight", sans-serif); font-size: 15px; font-weight: 700; }
.nb-seal__ring { transform-origin: 160px 160px; }
.nb-seal__core { fill: var(--nb-ink); stroke: var(--nb-sky); stroke-width: 1.4; }
.nb-seal__emblem { opacity: 0.95; }

/* The one self-running moment: the seal is stamped on load; the ring of text then turns very slowly. */
@media (prefers-reduced-motion: no-preference) {
  .nb-seal { animation: nb-stamp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both; }
  .nb-seal__rosette ellipse { stroke-dasharray: 420; stroke-dashoffset: 420; animation: nb-draw 1.8s ease-out 0.35s forwards; }
  .nb-seal__ring { animation: nb-turn 120s linear 1.2s infinite; }
}
@keyframes nb-stamp {
  from { opacity: 0; transform: scale(1.22) rotate(-14deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes nb-draw { to { stroke-dashoffset: 0; } }
@keyframes nb-turn { to { transform: rotate(360deg); } }

/* The office's contact, along the base of the hero. */
.nb-contact { list-style: none; margin: 0; padding: 0; }
.nb-contact__item { display: flex; gap: 12px; align-items: center; }
.nb-contact__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(142, 195, 240, 0.14);
  color: var(--nb-sky);
}
.nb-contact__icon svg { width: 20px; height: 20px; }
.nb-contact__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nb-contact__label { font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); }
.nb-contact__value { font-size: 0.98rem; font-weight: 600; color: #fff; }
.nb-contact__value a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(142, 195, 240, 0.6); }
.nb-contact--bar {
  max-width: var(--nb-max);
  margin: 0 auto;
  padding: 22px 28px 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ── Shared section frame ────────────────────────────────────────────────── */
.nb-main { max-width: var(--nb-max); margin: 0 auto; padding: 0 28px; }
.nb-h2 {
  margin: 0;
  font-family: var(--portal-font-display, "Inter Tight", sans-serif);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--nb-ink);
}
.nb-h2--light { color: #fff; }

/* ── 2. Steps, as a timeline ─────────────────────────────────────────────── */
.nb-steps { padding: 64px 0 24px; }
.nb-steps__list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  position: relative;
}
.nb-steps__list::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 22px;
  right: calc(33.33% - 22px);
  height: 2px;
  background: linear-gradient(90deg, var(--nb-blue), rgba(15, 108, 189, 0.15));
}
.nb-step { position: relative; }
.nb-step__num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--nb-blue);
  color: var(--nb-blue);
  font-family: var(--portal-font-display, "Inter Tight", sans-serif);
  font-size: 1.15rem;
  font-weight: 800;
}
.nb-step__title { margin: 16px 0 6px; font-family: var(--portal-font-display, "Inter Tight", sans-serif); font-size: 1.2rem; font-weight: 700; color: var(--nb-ink); }
.nb-step__text { margin: 0; max-width: 32em; font-size: 0.97rem; line-height: 1.6; color: var(--nb-muted); }

/* ── 3. Acts, as VOGO cards: title at the top, the blue flat icon beside it ─ */
.nb-acts-section { padding: 48px 0 72px; }
.nb-acts-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.nb-acts-head__count { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--nb-muted); }
/* The link to the office's price page (D-031), after the count. */
.nb-acts-head__prices { margin-left: auto; font-size: 0.95rem; font-weight: 700; color: var(--nb-blue); text-decoration: none; white-space: nowrap; }
.nb-acts-head__prices:hover { text-decoration: underline; }
.nb-acts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.nb-act__link {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 20px;
  background: #fff;
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  box-shadow: 0 10px 24px -14px rgba(11, 37, 69, 0.28);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
a.nb-act__link:hover { border-color: rgba(15, 108, 189, 0.45); box-shadow: 0 16px 30px -14px rgba(15, 108, 189, 0.35); transform: translateY(-3px); }
.nb-act__title {
  font-family: var(--portal-font-display, "Inter Tight", sans-serif);
  font-size: 1.24rem;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--nb-ink);
}
/* The act's icon as on the ro/notar-asist/ cards (landing.css .cards.c4 .card-ic): large, transparent, top right,
   behind the text. */
.nb-act__link { position: relative; overflow: hidden; }
.nb-act__mark { position: absolute; top: 8px; right: 14px; opacity: 0.14; color: #0660a2; line-height: 1; pointer-events: none; z-index: 0; }
.nb-act__mark i { font-size: 112px; line-height: 1; }
.nb-act__mark svg { width: 112px; height: 112px; stroke-width: 1.3; }
.nb-act__link > :not(.nb-act__mark) { position: relative; z-index: 1; }
.nb-act__cat { font-size: 0.8rem; font-weight: 600; color: var(--nb-blue); }
.nb-act__row { flex: 1; display: flex; align-items: flex-end; gap: 14px; }
.nb-act__desc { flex: 1; font-size: 0.95rem; line-height: 1.55; color: var(--nb-muted); }
.nb-act__foot { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; margin-top: 8px; padding-top: 14px; border-top: 1px solid #EEF2F6; }
.nb-act__fact { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 0.75rem; color: var(--nb-muted); }
.nb-act__fact strong { font-size: 0.9rem; font-weight: 600; color: var(--nb-text); }
.nb-act__go {
  margin-left: auto;
  margin-bottom: 2px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--nb-blue);
  color: #fff;
  transition: background 0.18s;
}
.nb-act__go svg { width: 18px; height: 18px; }
a.nb-act__link:hover .nb-act__go { background: var(--nb-ink); }

/* The card for acts not listed — call the office. */
.nb-act--other .nb-act__link { background: var(--nb-ink); border-color: var(--nb-ink); justify-content: center; }
.nb-act--other .nb-act__title { color: #fff; }
.nb-act--other .nb-act__desc { flex: 0; color: rgba(255, 255, 255, 0.72); }
.nb-act__call {
  align-self: flex-start;
  margin-top: 10px;
  padding: 11px 18px;
  border-radius: 10px;
  background: #fff;
  color: var(--nb-ink);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}
.nb-act__call:hover { background: var(--nb-ice); }
.nb-empty { margin: 20px 0 0; padding: 18px 20px; border-radius: 10px; background: #fff; color: var(--nb-muted); }

/* ── 4. Cum ajungeți la birou ────────────────────────────────────────────── */
.nb-visit { background: linear-gradient(160deg, var(--nb-ink) 0%, #081B35 100%); color: #fff; }
.nb-visit__inner {
  max-width: var(--nb-max);
  margin: 0 auto;
  padding: 64px 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.nb-visit__name { margin: 8px 0 26px; font-size: 1.1rem; font-weight: 600; color: var(--nb-sky); }
.nb-contact--stack { display: flex; flex-direction: column; gap: 18px; }
.nb-visit__note { margin: 26px 0 0; max-width: 34em; font-size: 0.97rem; line-height: 1.6; color: rgba(255, 255, 255, 0.72); }
.nb-visit__cards { display: flex; flex-direction: column; gap: 16px; }
.nb-info {
  display: flex;
  gap: 16px;
  padding: 22px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.nb-info__icon { flex-shrink: 0; display: inline-flex; width: 36px; height: 36px; color: var(--nb-sky); }
.nb-info__icon svg { width: 36px; height: 36px; }
.nb-info__title { margin: 0 0 6px; font-family: var(--portal-font-display, "Inter Tight", sans-serif); font-size: 1.1rem; font-weight: 700; color: #fff; }
.nb-info__text { margin: 0; font-size: 0.93rem; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }

/* The footer bar sits on the paper band under the ink section. */
.portal-layout--office .ebsegov-page-wrap { padding-top: 0; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  /* Phones and tablets: the seal is a faint watermark behind the name; the glow follows it to the top right. */
  .nb-hero {
    background:
      radial-gradient(circle at 88% 14%, rgba(15, 108, 189, 0.45) 0%, rgba(15, 108, 189, 0) 46%),
      repeating-radial-gradient(circle at 88% 14%, rgba(142, 195, 240, 0.06) 0 1px, transparent 1px 22px),
      linear-gradient(160deg, var(--nb-ink) 0%, #0A2140 60%, #081B35 100%);
  }
  .nb-hero__inner { position: relative; grid-template-columns: 1fr; gap: 0; padding: 30px 20px 28px; }
  .nb-hero__main { position: relative; z-index: 1; }
  .nb-hero__kicker { display: none; }
  .nb-seal { position: absolute; top: -34px; right: -74px; width: 250px; max-width: none; z-index: 0; pointer-events: none; }
  .nb-seal__svg { opacity: 0.3; }
  .nb-contact--bar { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
  .nb-main { padding: 0 20px; }
  .nb-steps { padding-top: 44px; }
  .nb-steps__list { grid-template-columns: 1fr; gap: 22px; }
  .nb-steps__list::before { top: 22px; bottom: 22px; left: 22px; right: auto; width: 2px; height: auto;
                            background: linear-gradient(180deg, var(--nb-blue), rgba(15, 108, 189, 0.15)); }
  .nb-step { padding-left: 64px; }
  .nb-step__num { position: absolute; left: 0; top: 0; }
  .nb-step__title { margin-top: 10px; }
  .nb-visit__inner { grid-template-columns: 1fr; gap: 32px; padding: 44px 20px; }
}
@media (max-width: 560px) {
  .nb-hero__name { margin-bottom: 16px; font-size: 2.35rem; }
  .nb-hero__title { font-size: 1.12rem; line-height: 1.3; }
  .nb-hero__lead { margin-bottom: 22px; font-size: 0.97rem; line-height: 1.55; }
  /* The search filters as the person types, so on phones it is one line, without the button. */
  .nb-search { padding: 6px 6px 6px 14px; border-radius: 12px; }
  .nb-search__btn { display: none; }
  .nb-search__input { padding: 11px 0; font-size: 1rem; }
  .nb-chips { margin-top: 14px; gap: 6px; }
  .nb-chip { padding: 7px 12px; font-size: 0.85rem; }
  .nb-acts { grid-template-columns: 1fr; }
  .nb-acts-head { flex-direction: column; gap: 4px; }
}