/* ============================================================
   CONTENT-PAGE.CSS - shared inline-style extraction
   ------------------------------------------------------------
   Originally inline <style> block in ~171 filled sub-pages.
   Extracted 2026-06-02 to eliminate ~150KB redundant payload.
   Loads AFTER primarie.css so page-specific overrides win.
   Path relative to /css/ directory.
   ============================================================ */

/* === Navbar separator · make the .main-header bottom border crisp on this
       cream-hero page (default --stone-hearth-soft 40% is faint cream-on-cream;
       primarie reads crisp only because its hero is dark). Page-scoped. === */
    .main-header { border-bottom-color: var(--stone-hearth); }


    /* === Page-specific layout · prezentare ===
       Extract to /css/content-page.css once stabilized across other comuna sub-pages. */

    .page-hero {
      position: relative;
      background: var(--chantilly);
      padding: 80px 0 56px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      color: var(--essex);
    }
    .page-hero > .container { max-width: 1240px; }
    .page-hero-eyebrow {
      display: flex; width: -moz-fit-content; width: fit-content;
      align-items: center; gap: 14px;
      font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase;
      color: var(--rustic-taupe); font-weight: 500;
      margin-bottom: 36px;
    }
    .page-hero-eyebrow::before,
    .page-hero-eyebrow::after {
      content: ''; flex: 0 0 28px; height: 1px;
      background: var(--rustic-taupe); opacity: 0.6;
    }
    .page-hero h1 {
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight: 300; letter-spacing: -0.02em; line-height: 1.08;
      color: var(--essex);
      margin: 0 0 18px; max-width: 18ch;
    }
    .page-hero h1 em { font-style: normal; font-weight: 500; }
    .page-hero-sub {
      font-size: 1.15rem; line-height: 1.62; max-width: 56ch;
      color: var(--essex); opacity: 0.84; margin: 0;
    }

    .page-breadcrumb {
      background: var(--chantilly-pure);
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      padding: 16px 0;
      font-size: 0.78rem;
      color: var(--text-soft);
    }
    .page-breadcrumb .container { max-width: 1240px; }
    .page-breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
    .page-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
    .page-breadcrumb li + li::before { content: '›'; color: var(--text-mute); }
    .page-breadcrumb a { color: var(--text-soft); text-decoration: none; transition: color 0.2s; }
    .page-breadcrumb a:hover { color: var(--essex); }
    .page-breadcrumb li[aria-current="page"] { color: var(--essex); font-weight: 500; }

    .page-section { padding: 64px 0 72px; }
    .page-section .container { max-width: 1240px; }

    .page-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 72px;
      align-items: start;
    }

    .page-article > * + * { margin-top: 36px; }
    .page-article h2 {
      font-size: clamp(1.5rem, 2.6vw, 2rem);
      font-weight: 300; letter-spacing: -0.015em; line-height: 1.15;
      color: var(--essex); margin: 56px 0 0;
    }
    .page-article h2 em { font-style: normal; font-weight: 500; }
    .page-article h2 + p { margin-top: 24px; }
    .page-article p {
      font-size: 1.125rem; line-height: 1.78; color: var(--charcoal);
      max-width: 68ch; margin: 0;
    }
    .page-article p + p { margin-top: 20px; }
    /* Inline links inside article paragraphs · WCAG 1.4.1 (color must not be the
       sole identifier). Mirrors .legal-body a pattern. */
    .page-article p a,
    .page-article li a,
    .page-article dd a {
      color: var(--essex);
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
      text-decoration-color: var(--rustic-taupe);
      transition: color 0.2s ease, text-decoration-color 0.2s ease;
    }
    .page-article p a:hover,
    .page-article li a:hover,
    .page-article dd a:hover {
      color: var(--rustic-taupe);
      text-decoration-color: var(--rustic-taupe);
    }
    .page-article .intro {
      font-size: 1.18rem; line-height: 1.7; color: var(--essex);
      font-weight: 300; max-width: 64ch;
    }
    .page-article .section-eyebrow {
      display: inline-flex; align-items: center; gap: 14px;
      font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase;
      color: var(--rustic-taupe); font-weight: 500; margin-top: 56px;
    }
    .page-article .section-eyebrow::before {
      content: ''; display: inline-block; width: 28px; height: 1px;
      background: var(--rustic-taupe); opacity: 0.6;
    }

    .villages-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
      margin-top: 36px;
    }
    .village-card {
      position: relative;
      display: flex; flex-direction: column;
      background: var(--chantilly-pure);
      border: 1px solid var(--stone-hearth-soft);
      transition: transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1),
                  box-shadow 0.4s ease,
                  border-color 0.4s ease;
    }
    /* Brick accent line that grows along the top edge on hover */
    .village-card::before {
      content: ''; position: absolute; top: -1px; left: -1px; right: -1px;
      height: 2px; background: var(--rustic-taupe);
      transform: scaleX(0); transform-origin: left;
      transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
      z-index: 2;
    }
    /* Gate hover transforms behind real pointer · prevents tap-stuck states
       on touch devices where :hover fires on tap. */
    @media (hover: hover) and (pointer: fine) {
      .village-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-medium);
        border-color: var(--stone-hearth);
      }
      .village-card:hover::before { transform: scaleX(1); }
      .village-card:hover .village-photo img { transform: scale(1.04); }
    }
    .village-photo { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--edgecomb-light); }
    .village-photo img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      filter: contrast(1.05) saturate(1.04);
      transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
    }
    .village-body { display: flex; flex-direction: column; flex: 1; padding: 30px 30px 32px; }
    .village-body h3 {
      font-size: 1.3rem; font-weight: 500; color: var(--essex);
      margin: 0 0 12px; letter-spacing: -0.005em;
    }
    .village-body p { font-size: 0.96rem; line-height: 1.66; color: var(--text-soft); margin: 0; }
    /* Subtle underline link · mirrors the .main-nav > a hover treatment */
    .village-link {
      display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
      margin-top: 22px; font-size: 0.72rem; font-weight: 600;
      letter-spacing: 0.12em; text-transform: uppercase; color: var(--essex);
      transition: color 0.3s ease;
    }
    .village-link-label { position: relative; }
    .village-link-label::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
      height: 1px; background: var(--rustic-taupe);
      transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;
    }
    .village-link:hover { color: var(--rustic-taupe); }
    .village-link:hover .village-link-label::after { transform: scaleX(1); }
    .village-link-arrow { font-size: 0.9rem; transition: transform 0.3s ease; }
    .village-link:hover .village-link-arrow { transform: translateX(4px); }

    .page-next-link {
      margin-top: 80px; padding-top: 32px;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      display: inline-flex; align-items: center; gap: 14px;
      font-size: 0.74rem; letter-spacing: 0.26em; text-transform: uppercase;
      color: var(--essex); text-decoration: none; font-weight: 500;
      transition: gap 0.3s ease;
    }
    .page-next-link:hover { gap: 22px; }

    .repere-list {
      list-style: none; padding: 0; margin: 0;
      display: flex; flex-direction: column;
    }
    .repere-list li {
      display: flex; justify-content: space-between; align-items: baseline;
      padding: 14px 0; gap: 16px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
    .repere-list li:first-child { padding-top: 0; }
    .repere-list li:last-child { border-bottom: none; }
    .repere-list dt {
      font-size: 0.74rem; letter-spacing: 0.06em;
      color: var(--text-soft); font-weight: 400;
    }
    .repere-list dd {
      margin: 0; font-size: 0.92rem; font-weight: 500;
      color: var(--essex); text-align: right;
    }

    @media (max-width: 1024px) {
      .page-layout { grid-template-columns: 1fr; gap: 72px; }
      /* Single-column flow: the editorial rail stacks under the article, so
         drop the sticky positioning (it would otherwise pin mid-scroll). */
      .page-aside.rail-editorial { position: static; }
    }
    @media (max-width: 720px) {
      .page-section { padding: 56px 0; }
      .page-hero { padding: 48px 0 80px; }
      .villages-grid { grid-template-columns: 1fr; gap: 20px; }
      /* On phones the Light (300) face often falls back to 400, making the
         Medium (500) <em> look bold. Match the title weight so titles read evenly. */
      .page-article h2 em,
      .page-hero h1 em { font-weight: inherit; }
    }
  

    /* ============================================================
       Institutional Rail · sidebar reimagined
       Sober Swiss/Alpine municipality aesthetic. Sharp corners.
       Linked to primarie.html: same tokens, same Helvetica w300/500.
       ============================================================ */

    /* Contact rows · Instituție card */

    /* Featured public document · dark Essex card */

    /* MOL statistics · big sober numbers */

    /* Acces rapid · sober quicklink rows */

    /* Sidebar wrapper override · tighter gap for rail */

  
  
    /* Schedule list inside rail rows (program + audiente, full footer version) */
    /* Explicit sharp corners (no round borders) per house rule */

  
    /* === Subnav cards · navigation between Comuna sub-pages (sharp corners,
       hover effect mirrors the navbar submenu: left line + taupe wash + shift) === */
    .subnav-section { padding: 0 0 88px; }
    .subnav-section .container { border-top: 1px solid var(--stone-hearth-soft); padding-top: 60px; }
    .subnav-title { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 300; letter-spacing: -0.015em; line-height: 1.15; color: var(--essex); margin: 18px 0 0; }
    .subnav-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 42px; }
    .subnav-card {
      display: block; padding: 28px 30px 30px;
      background: var(--chantilly-pure);
      border: 1px solid var(--stone-hearth-soft);
      text-decoration: none;
      transition: border-color 0.3s ease, box-shadow 0.35s ease,
                  transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
    }
    @media (hover: hover) and (pointer: fine) {
      .subnav-card:hover {
        border-color: var(--stone-hearth);
        box-shadow: var(--shadow-soft);
        transform: translateY(-3px);
      }
    }
    .subnav-card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
    .subnav-card-icon {
      width: 26px; height: 26px; flex-shrink: 0;
      fill: none; stroke: var(--essex);
      stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
      transition: stroke 0.3s ease;
    }
    .subnav-card-title {
      font-size: 1.1rem; font-weight: 500; color: var(--essex);
      letter-spacing: -0.01em; position: relative; transition: color 0.3s ease;
    }
    /* Subtle underline on the title · mirrors the nav hover */
    .subnav-card-title::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: -3px;
      height: 1px; background: var(--rustic-taupe);
      transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;
    }
    @media (hover: hover) and (pointer: fine) {
      a.subnav-card:hover .subnav-card-title { color: var(--rustic-taupe); }
      a.subnav-card:hover .subnav-card-title::after { transform: scaleX(1); }
      .subnav-card:hover .subnav-card-icon { stroke: var(--rustic-taupe); }
    }
    .subnav-card-desc { display: block; font-size: 0.9rem; line-height: 1.6; color: var(--text-soft); }
    /* Split card · two village links (Brebu Nou + Gărâna), nav-style underline */
    .subnav-card-villages { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
    .subnav-village-link {
      font-size: 0.92rem; font-weight: 500; color: var(--essex);
      text-decoration: none; position: relative; transition: color 0.3s ease;
    }
    .subnav-village-link::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
      background: var(--rustic-taupe); transform: scaleX(0); transform-origin: left;
      transition: transform 0.3s ease;
    }
    .subnav-village-link:hover { color: var(--rustic-taupe); }
    .subnav-village-link:hover::after { transform: scaleX(1); }
    .subnav-village-sep { color: var(--stone-hearth); }
    @media (max-width: 920px) { .subnav-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .subnav-grid { grid-template-columns: 1fr; } }

    /* Acces rapid links · nav-tab underline effect (line grows from left on hover) */

    /* ============================================================
       EDITORIAL RAIL · fine lines, large text, generous space,
       no green, no heavy cards, no grids, minimal icons
       ============================================================ */
    .page-aside.rail-editorial { display: flex; flex-direction: column; gap: 0; position: sticky; top: 120px; }
    .rail-block { padding: 72px 0; border-top: 1px solid var(--stone-hearth-soft); }
    .rail-block:first-child { padding-top: 0; border-top: none; }
    .rail-block:last-child { padding-bottom: 0; }
    .rail-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--rustic-taupe); font-weight: 600; margin-bottom: 22px; }
    .rail-eyebrow::before { content: ''; display: inline-block; width: 22px; height: 1px; background: var(--rustic-taupe); opacity: 0.55; }
    .rail-lead { display: block; font-size: 1.55rem; font-weight: 300; color: var(--essex); letter-spacing: -0.015em; line-height: 1.15; text-decoration: none; }
    a.rail-lead { transition: color 0.3s ease; }
    a.rail-lead:hover { color: var(--rustic-taupe); }
    .rail-line { display: block; font-size: 1rem; line-height: 1.6; color: var(--essex); text-decoration: none; margin-top: 10px; }
    a.rail-line { transition: color 0.3s ease; }
    a.rail-line:hover { color: var(--rustic-taupe); }
    .rail-line.muted { color: var(--text-soft); font-size: 0.95rem; }
    .rail-sched { display: flex; flex-direction: column; gap: 13px; }
    .rail-sched > div { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
    .rail-sched > div span:first-child { font-size: 1.12rem; color: var(--essex); }
    .rail-sched > div span:last-child { font-size: 1.12rem; color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .rail-sched + .rail-line { margin-top: 16px; }
    .rail-doc-link { display: block; font-size: 1.35rem; font-weight: 300; line-height: 1.25; color: var(--essex); letter-spacing: -0.015em; text-decoration: none; transition: color 0.3s ease; }
    .rail-doc-link:hover { color: var(--rustic-taupe); }
    /* Acces rapid · nav-tab underline effect (kept) */
    .rail-quicklinks { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
    .rail-quicklink { position: relative; display: inline-block; padding: 2px 0; font-size: 0.98rem; line-height: 1.4; color: var(--essex); text-decoration: none; transition: color 0.3s ease; }
    .rail-quicklink::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--rustic-taupe); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
    .rail-quicklink:hover { color: var(--rustic-taupe); }
    .rail-quicklink:hover::after { transform: scaleX(1); }

    /* === Article splits · text + visual (900m callout, map) ca in mockup === */
    .article-split { display: grid; grid-template-columns: 1fr 0.62fr; gap: 40px; align-items: start; margin-top: 32px; }
    .article-split-map { grid-template-columns: 1fr 0.85fr; }
    .article-split-text > p:first-child { margin-top: 0; }
    /* 900m altitude callout */
    .stat-callout { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 26px; border: 1px solid var(--stone-hearth-soft); background: var(--chantilly-pure); }
    .stat-callout-icon { color: var(--rustic-taupe); margin-bottom: 14px; }
    .stat-callout-num { font-size: 3rem; font-weight: 300; color: var(--essex); line-height: 1; letter-spacing: -0.02em; }
    .stat-callout-label { font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--rustic-taupe); font-weight: 600; margin-top: 12px; }
    .stat-callout-note { font-size: 0.88rem; line-height: 1.5; color: var(--text-soft); margin-top: 14px; }
    /* Map */
    .article-map { border: 1px solid var(--stone-hearth-soft); align-self: stretch; min-height: 280px; }
    .article-map iframe { display: block; width: 100%; height: 100%; min-height: 280px; border: 0; filter: grayscale(0.35) contrast(0.95); }
    @media (max-width: 720px) {
      .article-split, .article-split-map { grid-template-columns: 1fr; gap: 28px; }
      .article-map iframe { min-height: 240px; }
    }

  
    /* === Benjamin Moore brick · hero eyebrow "COMUNA BREBU NOU" === */
    .page-hero-eyebrow { color: var(--rustic-taupe); }
    .page-hero-eyebrow::before,
    .page-hero-eyebrow::after { background: var(--rustic-taupe); opacity: 0.5; }

    /* === HERO · full-width photo + smooth cream gradient (no hard edge) === */
    .page-hero { overflow: hidden; }
    .page-hero-media {
      position: absolute; inset: 0;
      background-image: url('../assets/img/hero/hero-prezentare.jpeg');
      background-size: cover; background-position: center;
      filter: contrast(1.12) saturate(1.12) brightness(0.99);
    }
    .page-hero-veil {
      position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(to right,
        var(--chantilly) 0%,
        var(--chantilly) 25%,
        rgba(242, 241, 235, 0.86) 38%,
        rgba(242, 241, 235, 0.38) 54%,
        rgba(242, 241, 235, 0.04) 70%,
        rgba(242, 241, 235, 0) 82%);
    }
    .page-hero > .container { position: relative; z-index: 2; }
    .page-hero-sub { max-width: 46ch; }
    @media (max-width: 760px) {
      .page-hero-veil { background: linear-gradient(180deg, rgba(242, 241, 235, 0.87) 0%, rgba(242, 241, 235, 0.83) 50%, rgba(242, 241, 235, 0.62) 66%, rgba(242, 241, 235, 0.18) 83%, rgba(242, 241, 235, 0) 100%); }
    }

  
    /* === Section names + breadcrumb in Benjamin Moore brick === */
    .page-article .section-eyebrow { color: var(--rustic-taupe); }
    .page-article .section-eyebrow::before { background: var(--rustic-taupe); opacity: 0.7; }
    .page-breadcrumb a { color: var(--rustic-taupe); }
    .page-breadcrumb a:hover { color: var(--essex); }

    /* === Section separators (full-width hairline between article sections) === */
    .article-sep { height: 0; border: 0; border-top: 1px solid var(--stone-hearth-soft); margin: 52px 0 46px; }

    /* === Altitude callout · refined === */
    .stat-callout { padding: 46px 32px; background: var(--chantilly-pure); border: 1px solid var(--stone-hearth-soft); }
    .stat-callout-icon { color: var(--rustic-taupe); margin-bottom: 18px; }
    .stat-callout-num { font-size: 3.4rem; font-weight: 200; letter-spacing: -0.03em; color: var(--essex); }
    .stat-callout-label { color: var(--rustic-taupe); letter-spacing: 0.3em; margin-top: 14px; }
    .stat-callout-note { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--stone-hearth-soft); width: 100%; }

  
    /* === Consent-gated map (from primarie, sized to prezentare container) === */
    .article-map .map-consent-placeholder {
      display: flex; align-items: center; justify-content: center; text-align: center;
      width: 100%; height: 100%; min-height: 280px; padding: 28px;
      background: var(--edgecomb-light);
    }
    .map-consent-inner { max-width: 340px; color: var(--essex); }
    .map-consent-icon { width: 30px; height: 30px; stroke: var(--rustic-taupe); stroke-width: 1.5; fill: none; margin-bottom: 12px; }
    .map-consent-title { font-size: 1rem; font-weight: 600; margin: 0 0 10px; color: var(--essex); }
    .map-consent-text { font-size: 0.82rem; line-height: 1.55; margin: 0 0 16px; opacity: 0.85; }
    .map-consent-btn { display: inline-block; padding: 10px 22px; background: var(--rustic-taupe); color: #fff; border: 0; border-radius: 0; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: background 0.3s ease; }
    .map-consent-btn:hover { background: var(--essex); }
    .map-consent-alt { font-size: 0.74rem; line-height: 1.5; margin: 14px 0 0; opacity: 0.72; }
    .map-consent-alt a { color: var(--rustic-taupe); }

  
    /* === Motto banner · full-bleed, darkened image, site-font light === */
    .motto-banner {
      position: relative;
      margin-top: 0;
      background-color: var(--essex);
      background-image: url('../assets/img/motto.jpeg');
      background-size: cover;
      background-position: center 58%;
      overflow: hidden;
    }
    .motto-banner::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(to bottom, rgba(31, 45, 39, 0.52), rgba(31, 45, 39, 0.80));
    }
    .motto-inner {
      position: relative; z-index: 1;
      max-width: 860px; margin: 0 auto;
      padding: 94px 24px 98px;
      text-align: center;
    }
    .motto-quote {
      display: block; line-height: 0.7;
      font-size: 5rem; font-weight: 300;
      color: var(--stone-hearth);
      opacity: 0.92; margin-bottom: 18px;
    }
    .motto-text {
      margin: 0; color: var(--chantilly);
      font-size: 1.85rem; font-weight: 200; line-height: 1.5;
      letter-spacing: 0.005em;
    }
    @media (max-width: 720px) {
      .motto-inner { padding: 64px 22px 68px; }
      .motto-quote { font-size: 3.6rem; margin-bottom: 12px; }
      .motto-text { font-size: 1.35rem; }
    }
  
    /* === Rail contact · icon rows in bordered boxes (mockup style, our data/font) === */
    .rail-contact-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 19px; }
    .rail-contact-row { display: flex; align-items: center; gap: 14px; }
    .rail-contact-icon {
      flex-shrink: 0; width: 46px; height: 46px;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid var(--stone-hearth-soft); background: var(--chantilly-pure);
      transition: border-color 0.3s ease;
    }
    .rail-contact-icon svg {
      width: 21px; height: 21px; fill: none; stroke: var(--rustic-taupe);
      stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
    }
    .rail-contact-text { font-size: 1.05rem; line-height: 1.4; color: var(--text-soft); text-decoration: none; }
    .rail-contact-strong { font-size: 1.18rem; font-weight: 500; color: var(--essex); }
    .rail-contact-text.link { color: var(--essex); transition: color 0.3s ease; }
    .rail-contact-row:hover .rail-contact-icon { border-color: var(--stone-hearth); }
    .rail-contact-text.link:hover { color: var(--rustic-taupe); }
  
    /* === Rail · Instituție block (eyebrow w/ icon, subtitles, schedules) === */
    .rail-eyebrow-ico { gap: 10px; }
    .rail-eyebrow-ico::before { display: none; }
    .rail-eyebrow-icon {
      width: 18px; height: 18px; fill: none; stroke: var(--rustic-taupe);
      stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
    }
    .rail-subtitle {
      font-size: 1.06rem; font-weight: 600; color: var(--essex);
      letter-spacing: 0; margin: 34px 0 18px;
    }
    .rail-subtitle-spaced { margin-top: 54px; }
    /* 3-column audiente rows: role · day · time */
    .rail-audiente { display: flex; flex-direction: column; gap: 0; }
    .rail-audiente-row { padding: 14px 0; border-bottom: 1px solid var(--stone-hearth-soft); }
    .rail-audiente-row:first-child { padding-top: 0; }
    .rail-audiente-row:last-child { border-bottom: 0; padding-bottom: 0; }
    .rail-audiente .r-role { font-size: 1.02rem; font-weight: 500; color: var(--essex); }
    .rail-audiente .r-role::after { content: ' · '; color: var(--text-soft); opacity: 0.6; font-weight: 400; }
    .rail-audiente .r-day { font-size: 1.02rem; color: var(--text-soft); }
    .rail-audiente .r-time { display: block; margin-top: 4px; font-size: 1.06rem; color: var(--essex); font-variant-numeric: tabular-nums; }
    .rail-audiente-note { margin-top: 14px; }
    /* 'Vezi toate audientele' link · nav-style underline + arrow */
    .rail-more-link {
      display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
      font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--essex); text-decoration: none;
      transition: color 0.3s ease;
    }
    .rail-more-label { position: relative; }
    .rail-more-label::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
      background: var(--rustic-taupe); transform: scaleX(0); transform-origin: left;
      transition: transform 0.3s ease;
    }
    .rail-more-link:hover { color: var(--rustic-taupe); }
    .rail-more-link:hover .rail-more-label::after { transform: scaleX(1); }
    .rail-more-arrow { font-size: 0.85rem; transition: transform 0.3s ease; }
    .rail-more-link:hover .rail-more-arrow { transform: translateX(4px); }
  
    /* Separator between audiente and contact inside the Instituție card */
    .rail-contact-sep { height: 1px; background: var(--stone-hearth-soft); margin: 46px 0 10px; }
    .rail-contact-sep + .rail-contact-list { margin-top: 22px; }
  
    /* === Rail · Document public (dark Essex card) === */
    .rail-doc-card {
      background: var(--essex); color: var(--chantilly);
      padding: 46px 36px; border-top: none; margin: 24px 0;
    }
    .rail-doc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
    .rail-doc-eyebrow {
      font-size: 0.62rem; font-weight: 600; letter-spacing: 0.24em;
      text-transform: uppercase; color: var(--stone-hearth);
    }
    .rail-doc-card-icon { width: 20px; height: 20px; fill: none; stroke: var(--stone-hearth); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
    .rail-doc-title {
      font-size: 1.68rem; font-weight: 300; line-height: 1.2; letter-spacing: -0.015em;
      color: var(--chantilly); margin: 0 0 16px;
    }
    .rail-doc-status { font-size: 1.02rem; font-weight: 500; color: var(--chantilly); margin: 0; }
    .rail-doc-date { font-size: 1.02rem; color: var(--stone-hearth); margin: 2px 0 0; font-variant-numeric: tabular-nums; }
    .rail-doc-desc { font-size: 0.96rem; line-height: 1.65; color: rgba(242, 241, 235, 0.72); margin: 16px 0 0; }
    .rail-doc-btn {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(242, 241, 235, 0.18);
      font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--chantilly); text-decoration: none; transition: color 0.3s ease;
    }
    .rail-doc-btn-arrow { transition: transform 0.3s ease; }
    .rail-doc-btn:hover { color: var(--stone-hearth); }
    .rail-doc-btn:hover .rail-doc-btn-arrow { transform: translateX(4px); }

    /* === Rail · MOL big numbers === */
    .rail-stats { display: flex; flex-direction: column; gap: 30px; margin-top: 28px; }
    .rail-stat { display: flex; align-items: baseline; gap: 18px; }
    .rail-stat-num {
      font-size: 3rem; font-weight: 200; line-height: 1; color: var(--essex);
      letter-spacing: -0.02em; min-width: 64px; font-variant-numeric: tabular-nums;
    }
    .rail-stat-label { font-size: 1.02rem; color: var(--text-soft); }
    .rail-stats + .rail-more-link { margin-top: 24px; }

    /* === Rail · Acces rapid icon links === */
    .rail-quick { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; }
    .rail-quick-link {
      display: flex; align-items: center; gap: 14px; padding: 16px 0;
      color: var(--essex); text-decoration: none; font-size: 1.05rem;
      transition: color 0.3s ease, padding-left 0.3s ease;
    }
    .rail-quick-icon {
      width: 21px; height: 21px; flex-shrink: 0; fill: none; stroke: var(--rustic-taupe);
      stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s ease;
    }
    .rail-quick-link:hover { color: var(--rustic-taupe); padding-left: 4px; }
    .rail-quick-link:hover .rail-quick-icon { stroke: var(--essex); }
    .rail-quick + .rail-more-link { margin-top: 18px; }
      .page-article h2 { scroll-margin-top: 110px; }
      /* SKILL §0.10.2 Layer 2 · text-wrap for orphan/widow control */
    h1, h2, h3, h4, h5, h6,
    .page-hero-eyebrow, .section-eyebrow, .rail-eyebrow { text-wrap: balance; }
    p, li, dt, dd, blockquote,
    .page-hero-sub, .rail-doc-desc, .village-card p, .subnav-card-desc { text-wrap: pretty; }