/*
Theme Name: Verde Child
Theme URI: https://verdeinspatiu.com
Description: Tema copil pentru verdeinspatiu.com — atlas editorial de analize GIS și urbanism. Vezi DESIGN.md pentru regulile vizuale.
Author: Alexandru Cîrjan, Cosmina Călin
Template: astra
Version: 0.1.0
Text Domain: verde-child
*/

/* ==========================================================================
   1. VARIABILE — paletă (DESIGN.md §3)
   ========================================================================== */

:root {
  --paper: #f4f3ef;
  --paper-2: #eceae4;
  --ink: #16191a;
  --ink-2: #5f645f;
  --ink-muted: #9a9d97;
  --rule: #dbd9d2;
  --rule-strong: #16191a;
  --accent: #1d4d33;
  --accent-hover: #2d6b47;

  /* tipografie */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-declaration: clamp(24px, 3.4vw, 34px);
  --fs-page-title: clamp(22px, 3vw, 30px);
  --fs-section: 19px;
  --fs-work-title: 17px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-meta: 12px;

  /* ritm vertical, bază 4px */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* layout */
  --content-max: 1040px;
  --prose-max: 62ch;
  --radius: 2px;
}

/* Fără temă întunecată — eliminată la cerere explicită (comutatorul din
   antet a fost scos). Site-ul rulează doar pe paleta light de mai sus,
   indiferent de preferința de sistem a vizitatorului. */

/* ==========================================================================
   2. RESET
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

img, picture, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul[class], ol[class] {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   3. BAZĂ
   ========================================================================== */

body.vs-site {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
}

.vs-container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

@media (max-width: 760px) {
  .vs-container {
    padding-inline: var(--sp-4);
  }
}

.vs-prose {
  max-width: var(--prose-max);
}

/* ==========================================================================
   4. TIPOGRAFIE — scară (DESIGN.md §4)
   ========================================================================== */

.vs-declaration {
  font-size: var(--fs-declaration);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.vs-page-title {
  font-size: var(--fs-page-title);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.vs-section-title {
  font-size: var(--fs-section);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.vs-work-title {
  font-size: var(--fs-work-title);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.vs-small {
  font-size: var(--fs-small);
}

.vs-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}

.vs-text-2 {
  color: var(--ink-2);
}

a.vs-link {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}

a.vs-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

a.vs-link:focus-visible,
button.vs-link:focus-visible,
.vs-site :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==========================================================================
   5. ANTET
   ========================================================================== */

.vs-header {
  border-bottom: 1px solid var(--rule-strong);
  padding-block: var(--sp-5);
}

.vs-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}

.vs-header__brand {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.vs-header__brand img {
  height: 28px;
  width: auto;
}

.vs-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.vs-nav__list {
  display: flex;
  gap: var(--sp-6);
}

.vs-nav__link {
  font-size: var(--fs-small);
  color: var(--ink-2);
  padding-block: var(--sp-1);
}

.vs-nav__link:hover {
  color: var(--accent);
}

.vs-nav__link[aria-current="page"] {
  color: var(--accent);
}

@media (max-width: 760px) {
  .vs-header__inner {
    flex-wrap: wrap;
    gap: var(--sp-3);
  }

  .vs-nav__list {
    gap: var(--sp-4);
  }
}

/* ==========================================================================
   6. SUBSOL
   ========================================================================== */

.vs-footer {
  border-top: 1px solid var(--rule);
  margin-top: var(--sp-16);
  padding-block: var(--sp-6);
}

.vs-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--ink-muted);
}

.vs-footer__links {
  display: flex;
  gap: var(--sp-4);
}

.vs-footer a:hover {
  color: var(--accent);
}

/* ==========================================================================
   7. COMPONENTE (DESIGN.md §6)
   ========================================================================== */

/* --------------------------------------------------------------------------
   7.1 Neatline (DESIGN.md §2) — cadru obligatoriu pe pagina de lucrare.

   <div class="vs-neatline">
     <span class="vs-neatline__ticks vs-neatline__ticks--top" aria-hidden="true"></span>
     <span class="vs-neatline__ticks vs-neatline__ticks--bottom" aria-hidden="true"></span>
     <span class="vs-neatline__ticks vs-neatline__ticks--left" aria-hidden="true"></span>
     <span class="vs-neatline__ticks vs-neatline__ticks--right" aria-hidden="true"></span>
     <span class="vs-neatline__coord vs-neatline__coord--nw">44.4268° N</span>
     <span class="vs-neatline__coord vs-neatline__coord--se">26.1025° E</span>
     ... conținutul lucrării ...
   </div>

   Coordonatele sunt reale, extrase din WebMap (vezi DESIGN.md §2) — niciodată
   introduse cu valori aproximative de test.
   -------------------------------------------------------------------------- */

.vs-neatline {
  position: relative;
  border: 1px solid var(--rule);
  padding: var(--sp-8) var(--sp-6);
}

.vs-neatline__ticks {
  position: absolute;
  pointer-events: none;
}

.vs-neatline__ticks--top,
.vs-neatline__ticks--bottom {
  left: 0;
  right: 0;
  height: 6px;
  background-image: repeating-linear-gradient(
    to right,
    var(--ink-muted) 0,
    var(--ink-muted) 1px,
    transparent 1px,
    transparent 40px
  );
}

.vs-neatline__ticks--top {
  top: -1px;
}

.vs-neatline__ticks--bottom {
  bottom: -1px;
}

.vs-neatline__ticks--left,
.vs-neatline__ticks--right {
  top: 0;
  bottom: 0;
  width: 6px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--ink-muted) 0,
    var(--ink-muted) 1px,
    transparent 1px,
    transparent 40px
  );
}

.vs-neatline__ticks--left {
  left: -1px;
}

.vs-neatline__ticks--right {
  right: -1px;
}

.vs-neatline__coord {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  white-space: nowrap;
}

.vs-neatline__coord--nw {
  top: calc(-1 * var(--sp-5));
  left: 0;
}

.vs-neatline__coord--se {
  bottom: calc(-1 * var(--sp-5));
  right: 0;
}

@media (max-width: 760px) {
  /* "Pe mobil, ticurile dispar; rămâne doar linia." (DESIGN.md §2) */
  .vs-neatline__ticks {
    display: none;
  }

  .vs-neatline__coord {
    position: static;
    display: block;
    margin-block: var(--sp-1);
  }
}

/* --------------------------------------------------------------------------
   7.2 Rând de index — lista de lucrări de pe homepage.

   <ol class="vs-index">
     <li class="vs-index-row">
       <a class="vs-index-row__link" href="...">
         <span class="vs-index-row__nr vs-meta">01</span>
         <span class="vs-index-row__thumb"><img src="..." alt="..."></span>
         <span class="vs-index-row__heading">
           <span class="vs-index-row__title vs-work-title">Titlu lucrării</span>
           <span class="vs-index-row__meta vs-meta">loc, metodă</span>
         </span>
         <span class="vs-index-row__year vs-meta">2024</span>
       </a>
     </li>
   </ol>

   Separator: border-top pe fiecare rând. Fără card, fără fundal, fără umbră.
   Hover: doar culoarea titlului. Fără translate, fără scale.
   -------------------------------------------------------------------------- */

.vs-index {
  border-top: 1px solid var(--rule);
}

.vs-index-row__link {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--rule);
}

.vs-index-row__nr {
  flex: 0 0 2ch;
  text-align: right;
}

.vs-index-row__thumb {
  flex: 0 0 88px;
  width: 88px;
  height: 64px;
  overflow: hidden;
  background: var(--paper-2);
}

.vs-index-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vs-index-row__heading {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.vs-index-row__title {
  color: var(--ink);
}

.vs-index-row__year {
  flex: 0 0 auto;
  margin-left: auto;
}

.vs-index-row__link:hover .vs-index-row__title {
  color: var(--accent);
}

@media (max-width: 760px) {
  .vs-index-row__link {
    flex-wrap: wrap;
    row-gap: var(--sp-2);
  }

  .vs-index-row__nr {
    display: none;
  }

  .vs-index-row__thumb {
    flex-basis: 64px;
    width: 64px;
    height: 48px;
  }

  .vs-index-row__heading {
    flex-basis: 0;
    flex-grow: 1;
  }
}

/* --------------------------------------------------------------------------
   7.3 Bloc metadate — cheie: valoare, pe grilă.

   <dl class="vs-metadata">
     <div class="vs-metadata__item">
       <dt class="vs-metadata__key">loc</dt>
       <dd class="vs-metadata__value">Rîmnicu Vâlcea</dd>
     </div>
     <div class="vs-metadata__item">
       <dt class="vs-metadata__key">an</dt>
       <dd class="vs-metadata__value">2024</dd>
     </div>
     <div class="vs-metadata__item">
       <dt class="vs-metadata__key">metodă</dt>
       <dd class="vs-metadata__value">analiză de accesibilitate, buffer</dd>
     </div>
     <div class="vs-metadata__item">
       <dt class="vs-metadata__key">sursa datelor</dt>
       <dd class="vs-metadata__value"><a class="vs-link" href="...">INS, OSM</a></dd>
     </div>
   </dl>

   Include întotdeauna: locul, anul, metoda, sursa datelor (DESIGN.md §6).
   -------------------------------------------------------------------------- */

.vs-metadata {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-4) var(--sp-6);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.vs-metadata__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.vs-metadata__key {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}

.vs-metadata__key::after {
  content: ":";
}

.vs-metadata__value {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   7.4 Viewer ArcGIS — bară de sus deasupra iframe-ului, în pagina de lucrare.

   <div class="vs-viewer">
     <div class="vs-viewer__topbar">
       <span class="vs-viewer__label vs-meta">webmap</span>
       <span class="vs-viewer__title vs-work-title">Rețea metrou — actuală / propusă</span>
     </div>
     <div class="vs-viewer__frame">
       <iframe src="..." allowfullscreen></iframe>
     </div>
   </div>

   Restilizarea widget-urilor Esri (zoom, legendă, atribuire) se face în CSS-ul
   propriu al fiecărui viewer de sine stătător din public_html/viewers/<nume>/,
   nu aici — vezi secțiunea ArcGIS din CLAUDE.md. Atribuirea Esri rămâne vizibilă.
   -------------------------------------------------------------------------- */

.vs-viewer {
  border: 1px solid var(--rule);
}

.vs-viewer__topbar {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}

.vs-viewer__title {
  color: var(--ink);
}

.vs-viewer__frame {
  position: relative;
  aspect-ratio: 16 / 10;
}

.vs-viewer__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   7.5 Pagină de lucrare — schelet:
   titlu → metadate → text → viewer interactiv / PDF inline → surse.
   Zona întreagă e învelită într-un .vs-neatline (7.1).

   Fără captură mare de pagină înainte de viewer (eliminată la cerere — era
   redundantă, harta/PDF-ul e oricum vizibil la 1-2 scroluri mai jos).
   Capturile reale rămân folosite doar ca thumbnail în index (7.2).

   <article class="vs-work">
     <h1 class="vs-page-title">...</h1>
     <dl class="vs-metadata">...</dl>
     <div class="vs-prose">...text...</div>
     <div class="vs-viewer">...</div>
     <div class="vs-pdf">...</div>
   </article>
   -------------------------------------------------------------------------- */

.vs-work {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}

/* --------------------------------------------------------------------------
   7.6 PDF inline — viewer nativ în iframe, nu plugin (CLAUDE.md: „PDF
   Embedder — de dezactivat; înlocuit cu viewer nativ în iframe").

   <div class="vs-pdf">
     <div class="vs-pdf__topbar">
       <span class="vs-meta">pdf</span>
       <span class="vs-viewer__title">Titlu lucrării — studiu complet</span>
     </div>
     <div class="vs-pdf__frame">
       <iframe src="....pdf" title="Titlu lucrării — studiu complet (PDF)" loading="lazy"></iframe>
     </div>
     <a class="vs-pdf__fallback" href="....pdf" target="_blank" rel="noopener">
       Deschide PDF-ul într-o filă nouă ↗
     </a>
   </div>

   Fallback-ul rămâne vizibil (nu doar pentru <iframe> nesuportat): unele
   browsere mobile (Safari iOS mai vechi) descarcă PDF-ul în loc să-l randeze
   inline — link-ul explicit acoperă acel caz, nu-l elimina.
   -------------------------------------------------------------------------- */

.vs-pdf {
  border: 1px solid var(--rule);
}

.vs-pdf__topbar {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}

.vs-pdf__frame {
  height: clamp(480px, 70vh, 860px);
}

.vs-pdf__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.vs-pdf__fallback {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.vs-pdf__fallback:hover {
  color: var(--accent);
}

@media (max-width: 760px) {
  .vs-pdf__frame {
    height: clamp(360px, 60vh, 600px);
  }
}