/* ============================================================================
   /despre — "Despre dchubs.ro"
   Loaded ONLY on the about page (all selectors are .ab-*), on top of the shared
   immersive chrome (cm-topbar / cm-footer from connected-memories.css, which
   also provides the Space Grotesk @font-face). Same palette as Connected
   Memories, calmer register: no cinematic masks, no scroll effects.
   ========================================================================= */

:root {
  --ab-bg: #050B12;
  --ab-bg-soft: #0B1724;
  --ab-blue-deep: #0A3C62;
  --ab-blue: #0061A4;
  --ab-blue-soft: #3381B6;
  --ab-blue-pale: #7CC0F5;
  --ab-gold: #F5B400;
  --ab-text: #EAECEF;
  --ab-muted: #BFC9D6;
  --ab-line: rgba(234, 236, 239, .09);
  --ab-card: rgba(11, 23, 36, .55);
  --ab-max: 1180px;
  --ab-narrow: 800px; /* editorial column — a touch wider on desktop, still centered */
  --ab-display: "Space Grotesk", system-ui, sans-serif;
}

/* isolation: the fixed z-index:-1 ambient must paint ABOVE the opaque body
   background and below the content — same trick app.css uses in dark mode. */
body { margin: 0; background: var(--ab-bg); isolation: isolate; }

/* The site's dark-mode ambient (Branding → fundal mod noapte), faithfully
   replicated so /despre is the same night as the rest of the site. Image +
   opacity come from the admin via inline vars; disable in Branding = gone. */
.ab-ambient {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--site-ambient-opacity, .2);
  background-image: var(--site-ambient-image, url('/img/backgrounds/dchubs-dark-memory.webp?v=3'));
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
}
@media (max-width: 768px) {
  .ab-ambient { opacity: calc(var(--site-ambient-opacity, .2) * .6); }
}

.ab-page {
  background: transparent; /* let the shared night ambient show through */
  color: var(--ab-text);
  font: 400 1rem/1.65 system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: clip;
}
.ab-container { width: min(calc(100% - 40px), var(--ab-max)); margin-inline: auto; }
.ab-narrow { width: min(calc(100% - 40px), var(--ab-narrow)); margin-inline: auto; }

/* ---- Hero — compact, ambient, legible ---------------------------------- */
.ab-hero {
  position: relative;
  isolation: isolate;
  padding: 8.5rem 0 3.5rem;
  overflow: hidden;
}
/* Ambient layer: one deep-blue glow + a whisper of gold. Static by design. */
.ab-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(56rem 30rem at 18% -12%, rgba(0, 97, 164, .32), transparent 62%),
    radial-gradient(38rem 24rem at 88% 8%, rgba(245, 180, 0, .07), transparent 60%);
}
/* Faint node-grid — the Direct Connect texture, barely-there, fades out low. */
.ab-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(124, 192, 245, .13) 1px, transparent 1.5px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 78%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 78%);
}
.ab-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font: 700 .74rem/1 var(--ab-display);
  letter-spacing: .18em; text-transform: uppercase; color: var(--ab-blue-pale);
}
.ab-eyebrow::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 999px;
  background: var(--ab-gold); box-shadow: 0 0 12px rgba(245, 180, 0, .7);
}
.ab-hero h1 {
  margin: 1rem 0 .9rem;
  font: 700 clamp(2.3rem, 6vw, 3.7rem)/1.06 var(--ab-display);
  letter-spacing: -0.03em; color: #fff;
}
.ab-hero h1 em { font-style: normal; color: var(--ab-blue-pale); }
.ab-hero__sub {
  max-width: 44rem; margin: 0;
  font-size: clamp(1.02rem, 2.2vw, 1.18rem); line-height: 1.6; color: var(--ab-muted);
}

/* Micro-stat cards — real numbers only. */
.ab-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem;
  margin-top: 2.6rem;
}
.ab-stat {
  border: 1px solid var(--ab-line); border-radius: 18px;
  background: linear-gradient(180deg, rgba(11, 23, 36, .72), rgba(11, 23, 36, .38));
  padding: 1.1rem 1.25rem;
}
.ab-stat__num {
  display: flex; align-items: baseline; gap: .45rem;
  font: 700 clamp(1.5rem, 3.4vw, 2.1rem)/1.1 var(--ab-display);
  letter-spacing: -0.02em; color: #fff;
}
.ab-stat__num small { font-size: .58em; font-weight: 600; color: var(--ab-blue-pale); }
.ab-stat__label { margin-top: .3rem; font-size: .82rem; color: var(--ab-muted); }
.ab-stat__dot {
  display: inline-block; width: .5rem; height: .5rem; border-radius: 999px;
  background: var(--ab-gold); box-shadow: 0 0 10px rgba(245, 180, 0, .8);
  animation: ab-pulse 2.6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes ab-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- Intro lede --------------------------------------------------------- */
.ab-lede { padding: 3.2rem 0 1rem; }
.ab-lede p { margin: 0 0 1.15rem; font-size: 1.08rem; line-height: 1.75; color: var(--ab-muted); }
.ab-lede p:first-child { color: var(--ab-text); font-size: 1.16rem; }
.ab-lede strong { color: #fff; font-weight: 600; }

/* ---- The thread — six numbered nodes on one network line (the signature) -- */
.ab-thread { position: relative; padding: 2.6rem 0 1rem; }
.ab-thread::before {
  content: ""; position: absolute; left: 17px; top: 3.4rem; bottom: 2.4rem;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent, rgba(51, 129, 182, .3) 6%, rgba(51, 129, 182, .3) 94%, transparent);
}
.ab-block { position: relative; padding-left: 3.2rem; margin-bottom: 1.6rem; }
.ab-node {
  position: absolute; left: 6px; top: 1.45rem;
  width: 23px; height: 23px; border-radius: 999px;
  border: 1px solid rgba(51, 129, 182, .38);
  background: var(--ab-bg);
  display: grid; place-items: center;
}
.ab-node::after {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: rgba(245, 180, 0, .78); box-shadow: 0 0 6px rgba(245, 180, 0, .35);
}
.ab-card {
  border: 1px solid var(--ab-line); border-radius: 20px;
  background: var(--ab-card);
  padding: 1.4rem 1.6rem 1.5rem;
  transition: border-color .2s;
}
.ab-card:hover { border-color: rgba(124, 192, 245, .28); }
.ab-card__head { display: flex; align-items: center; gap: .85rem; margin-bottom: .8rem; }
.ab-card__icon {
  flex: none; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 13px;
  background: rgba(0, 97, 164, .16); border: 1px solid rgba(51, 129, 182, .28);
}
.ab-card__icon svg { width: 1.25rem; height: 1.25rem; color: var(--ab-gold); }
.ab-num { font: 700 .78rem/1 var(--ab-display); letter-spacing: .14em; color: var(--ab-gold); }
.ab-card h2 { margin: .15rem 0 0; font: 700 1.18rem/1.3 var(--ab-display); letter-spacing: -0.015em; color: #fff; }
.ab-card p { margin: 0 0 .85rem; font-size: .97rem; line-height: 1.7; color: var(--ab-muted); }
.ab-card p:last-child { margin-bottom: 0; }
.ab-card p em { font-style: normal; color: var(--ab-text); }

/* ---- Final CTA ----------------------------------------------------------- */
.ab-cta {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 3rem 0 4.5rem;
  border: 1px solid rgba(51, 129, 182, .3); border-radius: 24px;
  background: linear-gradient(180deg, rgba(10, 60, 98, .34), rgba(11, 23, 36, .5));
  padding: 2.6rem 1.6rem; text-align: center;
}
.ab-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(30rem 16rem at 50% -30%, rgba(0, 97, 164, .35), transparent 70%);
}
.ab-cta h2 { margin: 0 0 .7rem; font: 700 clamp(1.5rem, 3.6vw, 2rem)/1.2 var(--ab-display); letter-spacing: -0.02em; color: #fff; }
.ab-cta p { max-width: 40rem; margin: 0 auto 1.7rem; color: var(--ab-muted); line-height: 1.65; }
.ab-cta__row { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.ab-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .72rem 1.25rem; border-radius: 999px;
  font: 600 .9rem/1 var(--ab-display); text-decoration: none;
  border: 1px solid transparent; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ab-btn:hover { transform: translateY(-1px); }
.ab-btn svg { width: 1rem; height: 1rem; }
.ab-btn--blue { background: var(--ab-blue); color: #fff; box-shadow: 0 6px 22px rgba(0, 97, 164, .35); }
.ab-btn--blue:hover { box-shadow: 0 8px 26px rgba(0, 97, 164, .5); }
.ab-btn--gold { background: var(--ab-gold); color: #131B24; box-shadow: 0 6px 22px rgba(245, 180, 0, .25); }
.ab-btn--gold:hover { box-shadow: 0 8px 26px rgba(245, 180, 0, .4); }
.ab-btn--ghost { border-color: rgba(234, 236, 239, .22); color: var(--ab-text); background: rgba(8, 18, 29, .4); }
.ab-btn--ghost:hover { border-color: rgba(234, 236, 239, .45); }

/* Non-RO locale notice (mirrors the site's content-language banner, dark). */
.ab-notice {
  display: flex; gap: .6rem; align-items: flex-start;
  margin: 2rem auto 0; width: min(calc(100% - 40px), var(--ab-narrow));
  border: 1px solid rgba(51, 129, 182, .3); border-radius: 14px;
  background: rgba(10, 60, 98, .25); padding: .8rem 1rem;
  font-size: .86rem; color: var(--ab-muted);
}
.ab-notice svg { flex: none; width: 1.1rem; height: 1.1rem; color: var(--ab-blue-pale); margin-top: .1rem; }

/* Footer legibility — page-scoped override of the shared slim chrome (this
   stylesheet loads ONLY on /despre, so Connected Memories keeps its own look). */
.cm-footer { font-size: .92rem; }
.cm-footer a {
  color: rgba(234, 236, 239, .88);
  padding: .35rem .15rem; /* comfortable touch target on mobile */
  display: inline-block;
}
.cm-footer__line { color: rgba(234, 236, 239, .55); }

/* ---- Responsive / a11y --------------------------------------------------- */
@media (max-width: 720px) {
  /* Breathing room for the slim chrome: 20px -> 24px from the screen edges.
     Doubled class = higher specificity (this sheet loads BEFORE the shared
     chrome css, so an equal-specificity rule would lose the cascade). */
  .cm-topbar.cm-topbar { width: calc(100% - 48px); }
  .ab-hero { padding-top: 7rem; padding-bottom: 2.4rem; }
  /* Slightly calmer lede opener (-4%), still above body copy for hierarchy. */
  .ab-lede p:first-child { font-size: 1.11rem; }
  /* Compact stat cards so the intro rises into the first scroll. */
  .ab-stats { grid-template-columns: 1fr; gap: .55rem; margin-top: 1.7rem; }
  .ab-stat { padding: .9rem 1.05rem; border-radius: 15px; }
  .ab-stat__label { margin-top: .15rem; }
  .ab-lede { padding-top: 2.2rem; }
  .ab-block { padding-left: 2.6rem; }
  .ab-thread::before { left: 13px; }
  .ab-node { left: 2px; }
  .ab-card { padding: 1.2rem 1.15rem 1.3rem; }
  .ab-cta { padding: 2.1rem 1.1rem; }
  .ab-cta__row { flex-direction: column; align-items: stretch; }
  .ab-btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-stat__dot { animation: none; }
  .ab-btn, .ab-card { transition: none; }
  .ab-btn:hover { transform: none; }
}
:where(.ab-page) a:focus-visible {
  outline: 2px solid var(--ab-blue-pale); outline-offset: 3px; border-radius: 6px;
}