/* Jurnal family — index (/jurnal/) + article (/jurnal/drumul-unei-salate-vii/).
   Values parity-locked to the originals' page-scoped style blocks.
   Breakpoint map (Q2): 960→960, 900→960, 640→768, 520→430. */

@layer pages {
  :root {
    /* Production-derived shades lifted verbatim from the original jurnal
       page-scoped styles (card well two-shade green field, newsletter panel
       accents, AA-safe italic accent on cream). Kept as page tokens — not
       brandbook palette entries (Q1). */
    --jurnal-well: #46b886;
    --jurnal-well-deep: #2c9263;
    --jurnal-news-mint: #b8e3cc;
    --jurnal-news-paper: #e8f3ec;
    --jurnal-accent-aa: var(--green);
  }

  /* ── Hero — the original's global .plans-hero-head pattern (left breadcrumb,
        centered eyebrow + title + sub), page-scoped here ── */
  .plans-hero-head {
    max-width: var(--container);
    margin: 0 auto 72px;
    padding: 48px 24px 0;
    text-align: left;
  }

  .plans-hero-head .breadcrumb {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0;
  }

  .plans-hero-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
  }

  .plans-hero-head .section-eyebrow {
    margin: 0 0 12px;
    color: var(--green);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
  }

  /* .plans-hero-title now lives in site.css (shared with abonament/
     gaseste-ne/legal-doc - UI-02); this page's own copy was byte-identical. */

  .plans-hero-sub {
    margin: 0 auto;
    max-width: 38rem;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-soft);
  }

  /* ── Index shell ── */
  .jurnal {
    padding: 0 0 8px;
  }

  .jurnal__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ── Category filter: WAI-ARIA toolbar of toggle buttons ── */
  .jurnal-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 48px;
    padding: 0 0 28px;
    border-bottom: 1px solid var(--line);
  }

  .jurnal-filter button {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted-strong);
    cursor: pointer;
    transition: color 160ms var(--cf-ease), border-color 160ms var(--cf-ease), background-color 160ms var(--cf-ease);
  }

  .jurnal-filter button:hover {
    color: var(--green-deep);
    border-color: rgba(var(--green-deep-rgb), 0.4);
  }

  .jurnal-filter button[aria-pressed="true"] {
    background: var(--green-deep);
    border-color: var(--green-deep);
    color: #fff;
  }

  .jurnal-filter button:focus-visible {
    outline: none;
    border-color: var(--green-deep);
    box-shadow: var(--focus-ring-green-soft);
  }

  /* ── Grid ── */
  .jurnal-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 52px 28px;
  }

  /* ── Card ── */
  .jurnal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
  }

  .jurnal-card__well {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 16px;
    background: var(--jurnal-well);
    transition: transform 320ms var(--cf-ease), box-shadow 320ms var(--cf-ease);
  }

  /* CUT archetype — lettuce cutout floating on a two-shade green field.
     The boundary is a curved hard-stop (discrete shades), NOT a gradient. */
  .jurnal-card--cut .jurnal-card__well {
    background-color: var(--jurnal-well);
    background-image: radial-gradient(150% 135% at 82% 128%, var(--jurnal-well-deep) 0 54%, transparent 54.4%);
  }

  .jurnal-cell:nth-child(3n + 2) .jurnal-card--cut .jurnal-card__well {
    background-image: radial-gradient(150% 135% at 18% 126%, var(--jurnal-well-deep) 0 52%, transparent 52.4%);
  }

  .jurnal-card__cut {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 64%;
    height: 64%;
    object-fit: contain;
    filter: drop-shadow(0 16px 22px rgba(20, 70, 45, 0.3));
  }

  /* PHOTO archetype — photo fills the well */
  .jurnal-card__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* LEAF archetype — warm-cream field + one named varietal leaf as a motif */
  .jurnal-card--leaf .jurnal-card__well {
    background-color: var(--warm-cream);
    background-image: radial-gradient(140% 130% at 20% 14%, rgba(var(--green-rgb), 0.12) 0 44%, transparent 44.4%);
  }

  .jurnal-card__leaf {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 48%;
    height: 48%;
    object-fit: contain;
    filter: drop-shadow(0 14px 20px rgba(120, 90, 30, 0.16));
  }

  /* DUO archetype — green-tinted grayscale photo */
  .jurnal-card--duo .jurnal-card__photo {
    filter: grayscale(1) brightness(0.88) contrast(1.02);
  }

  .jurnal-card--duo .jurnal-card__well::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(var(--green-deep-rgb), 0.34);
    mix-blend-mode: multiply;
    pointer-events: none;
  }

  /* "Curând" teaser pill */
  .jurnal-card__pill {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--warm-cream);
    color: var(--green-deep);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(var(--green-deep-rgb), 0.12);
  }

  /* Card text */
  .jurnal-card__body {
    padding: 20px 2px 0;
  }

  .jurnal-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.28;
    letter-spacing: -0.01em;
    color: var(--green-deep);
    text-wrap: balance;
  }

  .jurnal-card__title em {
    font-style: italic;
    font-weight: 700;
  }

  .jurnal-card__meta {
    margin: 12px 0 0;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--muted-strong);
  }

  /* Interaction — only live (anchor) cards lift; teasers stay still */
  a.jurnal-card {
    cursor: pointer;
  }

  a.jurnal-card:focus-visible {
    outline: none;
  }

  a.jurnal-card:focus-visible .jurnal-card__well {
    box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px var(--green);
  }

  a.jurnal-card:hover .jurnal-card__title,
  a.jurnal-card:focus-visible .jurnal-card__title {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
  }

  @media (prefers-reduced-motion: no-preference) {
    a.jurnal-card:hover .jurnal-card__well {
      transform: translateY(-6px);
      box-shadow: 0 18px 40px -16px rgba(var(--green-rgb), 0.45);
    }
  }

  .jurnal-card--soon {
    cursor: default;
  }

  /* ── Inline journal newsletter — contained green-deep panel ── */
  .jurnal-news {
    padding: 64px 24px 104px;
  }

  .jurnal-news__inner {
    max-width: var(--container);
    margin: 0 auto;
    background: var(--green-deep);
    border-radius: var(--radius-lg);
    padding: clamp(48px, 6vw, 80px) 32px;
    text-align: center;
  }

  .jurnal-news__eyebrow {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jurnal-news-mint);
  }

  .jurnal-news__title {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(28px, 3vw + 12px, 42px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--warm-cream);
  }

  .jurnal-news__title em {
    font-style: italic;
    font-weight: 800;
    color: var(--jurnal-news-mint);
  }

  .jurnal-news__sub {
    max-width: 32rem;
    margin: 0 auto 30px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--jurnal-news-paper);
  }

  .jurnal-news__cta {
    display: inline-flex;
    align-items: center;
    padding: 14px 32px;
    border-radius: 999px;
    border: 0;
    background: var(--warm-cream);
    color: var(--green-deep);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 160ms var(--cf-ease), background-color 160ms var(--cf-ease);
  }

  .jurnal-news__cta:hover {
    background: #fff;
    transform: translateY(-2px);
  }

  .jurnal-news__cta:focus-visible {
    outline: 3px solid var(--warm-cream);
    outline-offset: 3px;
  }

  /* One orchestrated page-load reveal (index only) — hero intro, then a card
     cascade. Motion-gated: reduced-motion users get everything instantly. */
  @media (prefers-reduced-motion: no-preference) {
    @keyframes jurnal-rise {
      from {
        transform: translateY(18px);
      }
      to {
        transform: none;
      }
    }

    .jurnal-hero-section .plans-hero-intro {
      animation: jurnal-rise 600ms var(--cf-ease) both;
    }

    .jurnal .jurnal-cell {
      animation: jurnal-rise 560ms var(--cf-ease) both;
    }

    .jurnal .jurnal-cell:nth-child(1) { animation-delay: 110ms; }
    .jurnal .jurnal-cell:nth-child(2) { animation-delay: 165ms; }
    .jurnal .jurnal-cell:nth-child(3) { animation-delay: 220ms; }
    .jurnal .jurnal-cell:nth-child(4) { animation-delay: 275ms; }
    .jurnal .jurnal-cell:nth-child(5) { animation-delay: 330ms; }
    .jurnal .jurnal-cell:nth-child(6) { animation-delay: 385ms; }
    .jurnal .jurnal-cell:nth-child(7) { animation-delay: 440ms; }
    .jurnal .jurnal-cell:nth-child(8) { animation-delay: 495ms; }
  }
  @media (prefers-reduced-motion: reduce) {
    .jurnal-hero-section .plans-hero-intro,
    .jurnal .jurnal-cell {
      opacity: 1;
      transform: none;
      animation: none !important;
    }
  }

  /* ══ Article (/jurnal/drumul-unei-salate-vii/) ══ */

  .jart-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--green);
    z-index: 100;
    transition: transform 90ms linear;
    will-change: transform;
  }

  .jart {
    background: var(--cream);
    padding-bottom: 8px;
  }

  .jart__meta {
    margin: 18px 0 0;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--muted-strong);
  }

  .jart__utility {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    align-items: center;
    justify-content: center;
    margin: 28px 0 0;
  }

  .jart__back,
  .jart__share {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--green-deep);
    background: none;
    border: 0;
    padding: 0;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    transition: color 160ms var(--cf-ease);
  }

  .jart__back:hover,
  .jart__share:hover {
    color: var(--green);
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .jart__share[data-copied="1"] {
    color: var(--green);
  }

  /* Lead figure */
  .jart__lead {
    margin: 0 auto 0;
    max-width: 1000px;
    padding: 0 24px;
  }

  .jart__lead img {
    display: block;
    width: 100%;
    height: auto; /* release the height attribute hint (site.css base img has no height:auto) */
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-sm);
  }

  /* Body: sticky TOC + reading column */
  .jart__body {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 680px);
    justify-content: center;
    gap: 64px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
    padding: 56px 24px 0;
  }

  .jart__toc {
    position: sticky;
    top: 96px;
    align-self: start;
  }

  .jart__toc-title {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--green-deep);
  }

  .jart__toc ol {
    list-style: none;
    margin: 0;
    padding: 0 0 0 16px;
    border-left: 1px solid var(--line);
  }

  .jart__toc li {
    margin: 0 0 12px;
  }

  .jart__toc a {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--muted-strong);
    text-decoration: none;
    transition: color 160ms var(--cf-ease);
  }

  .jart__toc a:hover {
    color: var(--green-deep);
  }

  .jart__toc a[aria-current="true"] {
    color: var(--green-deep);
    font-weight: 800;
  }

  .jart__toc a:focus-visible {
    outline: none;
    color: var(--green-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Reading column */
  .jart__content {
    font-family: var(--font-body);
    color: var(--text);
  }

  .jart__content > p {
    margin: 0 0 24px;
    font-size: 18px;
    line-height: 1.72;
  }

  .jart__content h2 {
    margin: 48px 0 18px;
    scroll-margin-top: 96px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(26px, 2vw + 12px, 32px);
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--green-deep);
  }

  .jart__content a {
    color: var(--green-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
  }

  .jart__content a:hover {
    color: var(--green);
  }

  .jart__content strong {
    font-weight: 800;
    color: var(--green-deep);
  }

  .jart__dropcap {
    float: left;
    font-family: var(--font-display);
    font-weight: 800;
    font-style: italic;
    font-size: 4.6em;
    line-height: 0.82;
    color: var(--green-deep);
    margin: 8px 14px 0 0;
  }

  .jart__pullquote {
    margin: 36px 0;
    padding: 28px 32px 28px 64px;
    background: #fff;
    border-radius: var(--radius-sm);
    position: relative;
  }

  .jart__pullquote::before {
    content: "\201C";
    position: absolute;
    top: -8px;
    left: 18px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 800;
    font-size: 96px;
    line-height: 1;
    color: var(--green-deep);
    opacity: 0.85;
  }

  .jart__pullquote p {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(21px, 2vw, 27px);
    line-height: 1.32;
    color: var(--green-deep);
  }

  .jart__figure {
    margin: 36px 0;
  }

  .jart__figure img {
    display: block;
    width: 100%;
    height: auto; /* release the height attribute hint (site.css base img has no height:auto) */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-sm);
  }

  .jart__figure figcaption {
    margin: 14px 4px 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15px;
    line-height: 1.5;
    color: var(--muted-strong);
  }

  .jart__cta {
    margin: 44px 0 8px;
    padding: 28px 32px;
    background: var(--warm-cream);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 20px;
    line-height: 1.45;
    color: var(--green-deep);
  }

  .jart__cta a {
    font-style: normal;
    font-family: var(--font-body);
    font-weight: 800;
    white-space: nowrap;
  }

  /* Mai citește */
  .jart__more {
    max-width: var(--container);
    margin: 0 auto;
    padding: 80px 24px 104px;
  }

  .jart__more .section-head {
    margin-bottom: 44px;
  }

  .jart__more .section-head h2 em {
    color: var(--jurnal-accent-aa); /* AA-safe italic accent on cream */
  }

  .jart__more .jurnal-grid {
    gap: 36px 28px;
  }

  .jart__more .jurnal-card__title {
    font-size: 20px;
  }

  .jart__more-foot {
    text-align: center;
  }

  .jart__more-link {
    display: inline-block;
    margin-top: 36px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 800;
    color: var(--green-deep);
    text-decoration: none;
  }

  .jart__more-link:hover {
    color: var(--green);
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* ── Responsive ── */
  @media (max-width: 960px) {
    .jurnal-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 44px 22px;
    }

    .jart__more .jurnal-grid {
      gap: 32px 22px;
    }

    /* Collapse TOC above the article */
    .jart__body {
      grid-template-columns: minmax(0, 680px);
      gap: 0;
    }

    .jart__toc {
      position: static;
      margin: 0 auto 8px;
      padding: 20px 22px;
      background: #fff;
      border-radius: 20px;
      width: 100%;
    }

    .jart__toc ol {
      border-left: 0;
      padding-left: 0;
      columns: 2;
      column-gap: 24px;
    }

    .jart__toc li {
      break-inside: avoid;
    }
  }

  @media (max-width: 768px) {
    .plans-hero-head {
      margin-bottom: 48px;
    }

    .jurnal-grid {
      grid-template-columns: 1fr;
      gap: 40px;
    }

    .jart__more .jurnal-grid {
      gap: 32px;
    }

    .jurnal-news {
      padding: 48px 16px 80px;
    }

    .jart__lead img {
      border-radius: 20px;
      aspect-ratio: 4 / 3;
    }

    .jart__figure img {
      border-radius: 20px;
    }

    /* the unbroken CTA link is up to ~362px wide and overflows viewports ≤460px — let it wrap */
    .jart__cta a {
      white-space: normal;
    }
  }

  @media (max-width: 430px) {
    .jart__toc ol {
      columns: 1;
    }
  }
}