/* Category hub & sub-page templates · loaded on category pages and the
   three sub-page template variants (article, grid, list).
   ------------------------------------------------------------------
   The chrome (top-bar, main-header, breadcrumb, footer) stays as it is
   from the prior generator output. This file only redesigns the
   <main> content area to match the mockup the user approved. */


/* Main nav · match the 22px spacing the sub-sub pages use (comuna-subpage.css).
   The category hubs (turism, natura, etc.) only load comuna-submenu.css (gap:0),
   which made their header nav look tighter than the rest. comuna-cat.css loads
   after comuna-submenu.css, so this wins. */
header.main-header nav.main-nav { gap: 22px; }


/* ============================================================
   1. HUB · photo-hero (replaces the gradient cat-hero)
   ============================================================ */

.cat-hero-photo {
  position: relative;
  padding: clamp(96px, 14vh, 160px) 32px clamp(72px, 10vh, 120px);
  color: var(--chantilly-pure);
  overflow: hidden;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
}
.cat-hero-photo::before {
  content: '';
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.cat-hero-photo::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,23,18,0.10) 0%, rgba(15,23,18,0.55) 100%),
    radial-gradient(ellipse at 25% 85%, rgba(22,32,27,0.45), transparent 65%);
  z-index: 1;
  pointer-events: none;
}

/* Per-category gradient placeholders. When real photos arrive, swap
   each via `background-image: url('...');` and keep the dark overlay
   from `::after` intact. */
.cat-hero-photo.ph-natura::before     {
  background-image: url('../assets/img/hero/hero-semenic.jpeg?v=2026-06-15');
  background-position: center 58%;
  transform: scale(1.18);
  animation: catZoomOut 11s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
  will-change: transform;
}
@keyframes catZoomOut {
  from { transform: scale(1.18); }
  to   { transform: scale(1.0); }
}
@media (prefers-reduced-motion: reduce) {
  .cat-hero-photo.ph-natura::before { animation: none; transform: none; }
}
.cat-hero-photo.ph-cultura::before    {
  background-image: url('../assets/img/hero/hero-cultura.jpg?v=2026-06-18-06');
  background-position: center 50%;
  transform: scale(1.18);
  animation: catZoomOut 11s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .cat-hero-photo.ph-cultura::before { animation: none; transform: none; }
}
.cat-hero-photo.ph-turism::before     {
  background-image: url('../assets/img/hero/hero-turism.jpeg?v=2026-06-18-07');
  background-position: center 50%;
  transform: scale(1.18);
  animation: catZoomOut 11s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .cat-hero-photo.ph-turism::before { animation: none; transform: none; }
}
.cat-hero-photo.ph-comunitate::before {
  background-image: url('../assets/img/hero/hero-comunitate.jpeg?v=2026-06-18-07');
  background-position: center 50%;
  transform: scale(1.18);
  animation: catZoomOut 11s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .cat-hero-photo.ph-comunitate::before { animation: none; transform: none; }
}
.cat-hero-photo.ph-istorie::before    {
  background-image: url('../assets/img/istorie/istorie-25.jpeg?v=2026-06-20');
  background-position: center 50%;
  transform: scale(1.18);
  animation: catZoomOut 11s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .cat-hero-photo.ph-istorie::before { animation: none; transform: none; }
}
.cat-hero-photo.ph-sezoane::before    {
  background-image: url('../assets/img/anotimpuri/hero-sezoane.jpeg?v=2026-06-17');
  background-position: center 58%;
  transform: scale(1.18);
  animation: catZoomOut 11s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .cat-hero-photo.ph-sezoane::before { animation: none; transform: none; }
}
.cat-hero-photo.ph-proiecte::before   {
  background-image: url('../assets/img/hero/hero-proiecte.jpeg?v=2026-06-18-07');
  background-position: center 50%;
  transform: scale(1.18);
  animation: catZoomOut 11s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .cat-hero-photo.ph-proiecte::before { animation: none; transform: none; }
}

.cat-hero-photo-inner {
  position: relative; z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.cat-hero-photo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rustic-taupe-light);
  font-weight: 500;
  margin-bottom: 26px;
}
.cat-hero-photo-eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--rustic-taupe-light);
  opacity: 0.75;
}

.cat-hero-photo h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.9rem);
  font-weight: 300;
  letter-spacing: -0.024em;
  line-height: 1.06;
  margin: 0 0 22px;
  max-width: 14ch;
  text-shadow: 0 2px 14px rgba(15,23,18,0.32);
}
.cat-hero-photo h1 em {
  font-style: normal;
  font-weight: 500;
}

.cat-hero-photo-desc {
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 54ch;
  margin: 0;
  opacity: 0.92;
  text-shadow: 0 1px 8px rgba(15,23,18,0.4);
}


/* ============================================================
   2. HUB · "Explorează X" label + icon tile grid
   ============================================================ */

.cat-tiles {
  background: var(--chantilly-pure);
  padding: clamp(72px, 10vh, 120px) 32px clamp(64px, 8vh, 96px);
}
.cat-tiles-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.cat-tiles-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rustic-taupe);
  font-weight: 500;
  margin: 0 0 38px;
}

.cat-tiles-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width: 1080px) { .cat-tiles-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px)  { .cat-tiles-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px)  { .cat-tiles-grid { grid-template-columns: repeat(2, 1fr); } }


/* ============================================================
   8. MOBILE BREAKPOINT · @414px tighter padding + larger touch zones
   ============================================================ */

@media (max-width: 414px) {
  /* Hub */
  .cat-hero-photo { padding: clamp(72px, 12vh, 100px) 20px clamp(56px, 8vh, 80px); min-height: 380px; }
  .cat-tiles { padding: 48px 20px 36px; }
  .cat-tile { min-height: 96px; padding: 18px 10px 16px; }
  .cat-tile-label { font-size: 0.74rem; }
  .cat-feature-bottom { padding: 0 20px 48px; }
  .cat-feature-bottom-inner {
    padding: 28px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  /* ARTICLE template */
  .sub-article-header { padding: clamp(48px, 7vh, 72px) 20px clamp(24px, 4vh, 32px); }
  .sub-article-body { padding: 0 20px; }
  .sub-article-quote { padding: 0 24px; }
  .sub-article-nav {
    padding: clamp(40px, 6vh, 64px) 20px clamp(56px, 8vh, 88px);
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sub-article-nav-next { text-align: left; align-items: flex-start; }

  /* GRID template */
  .sub-grid { padding: clamp(40px, 6vh, 56px) 20px clamp(56px, 8vh, 80px); }
  .sub-grid-list { gap: 20px; }
  .sub-grid-card-body { padding: 18px 18px 22px; }

  /* LIST template */
  .sub-list { padding: clamp(40px, 6vh, 56px) 20px clamp(56px, 8vh, 80px); }
  .sub-list-layout { gap: 32px; }
  .sub-list-item { padding: 18px 0 20px; }

  /* SEASONAL template */
  .sub-seasonal { padding: clamp(40px, 6vh, 56px) 20px clamp(56px, 8vh, 80px); }
  .sub-seasonal-grid { gap: 14px; }

  /* WCAG 2.5.5: increase touch zone on grid/list cards */
  .sub-grid-card, .sub-list-item { min-height: 48px; }
}

.cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 26px 14px 22px;
  background: var(--chantilly);
  border: 1px solid var(--stone-hearth-soft);
  text-decoration: none;
  color: var(--essex);
  text-align: center;
  transition:
    background 0.25s ease,
    transform 0.3s cubic-bezier(0.2, 0.6, 0.2, 1),
    border-color 0.25s ease;
  min-height: 124px;
}
.cat-tile:hover {
  background: rgba(194, 181, 160, 0.10);
  border-color: var(--rustic-taupe);
  transform: translateY(-2px);
}
.cat-tile-icon {
  width: 32px; height: 32px;
  color: var(--rustic-taupe);
  flex-shrink: 0;
}
.cat-tile-icon svg {
  width: 100%; height: 100%; display: block;
  stroke-width: 1.4;
}
.cat-tile-label {
  font-size: 0.78rem;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--essex);
  line-height: 1.3;
}

/* "Coming soon" badge · top-right pill on a tile + dim look so it reads
   as not-yet-fully-published. Tile stays clickable (lands on placeholder). */
.cat-tile { position: relative; }
.cat-tile-badge {
  position: absolute;
  top: 8px; right: 8px;
  display: inline-block;
  padding: 3px 8px;
  font-size: 0.54rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rustic-taupe);
  background: rgba(194, 181, 160, 0.20);
  border: 1px solid rgba(194, 181, 160, 0.35);
  border-radius: 0;
  line-height: 1.4;
}
.cat-tile.is-soon {
  opacity: 0.72;
  pointer-events: none;
  cursor: not-allowed;
}
.cat-tile.is-soon .cat-tile-icon { opacity: 0.7; }


/* ============================================================
   3. HUB · featured highlight at the bottom (cat-feature reused)
   The .cat-feature rules already exist on category pages; this file
   only re-anchors it visually inside the chantilly-pure flow.
   ============================================================ */

.cat-feature-bottom {
  background: var(--chantilly-pure);
  padding: 0 32px clamp(80px, 10vh, 120px);
}
.cat-feature-bottom-inner {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--essex);
  color: var(--chantilly-pure);
  padding: 44px 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.cat-feature-bottom-text { max-width: 60ch; }
.cat-feature-bottom-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--rustic-taupe-light); font-weight: 500;
  margin-bottom: 12px;
}
.cat-feature-bottom-eyebrow::before {
  content: ''; width: 24px; height: 1px;
  background: var(--rustic-taupe-light); opacity: 0.8;
}
.cat-feature-bottom h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 300; letter-spacing: -0.014em; line-height: 1.22;
  margin: 0 0 12px;
}
.cat-feature-bottom h2 em { font-style: normal; font-weight: 500; color: var(--rustic-taupe-light); }
.cat-feature-bottom-desc {
  font-size: 0.96rem; line-height: 1.65;
  margin: 0; opacity: 0.88;
}
.cat-feature-bottom-link {
  display: inline-flex; align-items: center; gap: 10px;
  flex-shrink: 0;
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--chantilly-pure); text-decoration: none; font-weight: 500;
  padding: 14px 24px;
  border: 1px solid var(--rustic-taupe-light);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.cat-feature-bottom-link:hover {
  background: var(--rustic-taupe);
  border-color: var(--rustic-taupe);
  color: var(--chantilly-pure);
}
@media (max-width: 720px) {
  .cat-feature-bottom-link { min-height: 44px; }
}


/* ============================================================
   4. SUB-PAGE · ARTICLE template
   ============================================================ */

.sub-article {
  background: var(--chantilly-pure);
}
.sub-article-header {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(64px, 8vh, 96px) 32px clamp(28px, 4vh, 40px);
}
.sub-article-meta {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rustic-taupe); font-weight: 500;
  margin-bottom: 22px;
}
.sub-article-meta-divider {
  width: 4px; height: 4px;
  background: var(--rustic-taupe);
  border-radius: 50%; opacity: 0.4;
}
.sub-article-title {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  font-weight: 300; color: var(--essex);
  line-height: 1.08; letter-spacing: -0.018em;
  margin: 0 0 22px;
}
.sub-article-title em { font-style: normal; font-weight: 500; }
.sub-article-lead {
  font-size: 1.15rem; line-height: 1.6;
  color: var(--text-soft); margin: 0;
  font-weight: 300; max-width: 56ch;
}

.sub-article-hero {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--edgecomb-mid);
  max-width: 1100px;
  margin: 0 auto clamp(48px, 6vh, 64px);
}

/* Per-article hero placeholder gradients. Each `.ph-*` slug picks a
   nature-themed degradeu until real photographs arrive; swap each via
   `background-image: url('...')` when the photo is delivered. */
.sub-article-hero.ph-lacul-trei-ape  { background-image: linear-gradient(135deg, #5e7a72 0%, #2a3e3a 100%); }
.sub-article-hero.ph-semenic         { background-image: linear-gradient(135deg, #607968 0%, var(--essex) 100%); }
.sub-article-hero.ph-varful-cuca     { background-image: linear-gradient(135deg, #6a7b6e 0%, #2c3d34 100%); }
.sub-article-hero.ph-depresiunea     { background-image: linear-gradient(135deg, #8b9381 0%, #3e4a3f 100%); }
.sub-article-hero.ph-padurea         { background-image: linear-gradient(135deg, #4b6147 0%, #1c2a1d 100%); }

.sub-article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 32px;
}
.sub-article-body p {
  font-size: 1.02rem; line-height: 1.78;
  color: var(--essex); margin: 0 0 28px;
}
.sub-article-body p:first-of-type::first-letter {
  font-size: 1.4em;
  font-weight: 500;
  color: var(--rustic-taupe);
}

/* Justified article body + balanced quotes (no orphan words) */
.sub-article-body p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.sub-article-quote blockquote { text-wrap: balance; }
/* Quote line rule · one line on desktop, break after first sentence when narrow */
.sub-article-quote .q-br { display: none; }
@media (max-width: 860px) { .sub-article-quote .q-br { display: inline; } }
@media (max-width: 560px) { .sub-article-quote blockquote { font-size: 1.25rem; line-height: 1.4; } }

.sub-article-quote {
  max-width: 800px;
  margin: clamp(56px, 7vh, 80px) auto;
  padding: 0 40px;
  text-align: center;
}
.sub-article-quote::before,
.sub-article-quote::after {
  content: '';
  display: block;
  width: 48px; height: 1px;
  background: var(--rustic-taupe);
  margin: 28px auto;
}
.sub-article-quote blockquote {
  font-size: clamp(1.4rem, 2.8vw, 1.85rem);
  font-weight: 300;
  line-height: 1.42; color: var(--essex);
  margin: 0; letter-spacing: -0.012em;
}

.sub-article-nav {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(56px, 7vh, 96px) 32px clamp(80px, 10vh, 130px);
  border-top: 1px solid var(--stone-hearth-soft);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.sub-article-nav a {
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: var(--essex);
  padding: 8px 0;
  transition: color 0.25s ease, padding 0.3s ease;
}
.sub-article-nav a:hover { color: var(--rustic-taupe); }
.sub-article-nav-prev:hover { padding-left: 10px; }
.sub-article-nav-next { text-align: right; align-items: flex-end; }
.sub-article-nav-next:hover { padding-right: 10px; }
.sub-article-nav-label {
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-soft); font-weight: 500;
}
.sub-article-nav-title {
  font-size: 1rem; font-weight: 400;
  letter-spacing: -0.005em;
}

/* ------------------------------------------------------------
   4b. SUB-PAGE · panoramic photo-hero (marquee variant)
   Used by feature pages where the photograph is the headline
   (Trei Ape). Replaces the meta/title/lead header + .sub-article-hero
   pair with a single full-bleed photograph that carries the title as
   overlay. The background image lives on a dedicated child div so we
   can apply a slow zoom-in to it (opt-in via --zoom-in modifier)
   without scaling the title content along with it.
   ------------------------------------------------------------ */

.sub-article-photo-hero {
  position: relative;
  width: 100%;
  min-height: clamp(440px, 62vh, 640px);
  background-color: var(--essex);
  color: var(--chantilly-pure);
  display: flex; align-items: flex-end;
  margin: 0 0 clamp(48px, 6vh, 72px);
  overflow: hidden;
}
.sub-article-photo-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.sub-article-photo-hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.82) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 28%);
  pointer-events: none;
  z-index: 1;
}
/* Opt-in cinematic zoom-out (start zoomed in, pull back to natural size).
   Mirrors the .cat-hero-photo.ph-natura `catZoomOut` on the natura hub
   for a consistent on-entry feel. Add `.sub-article-photo-hero--zoom-out`. */
.sub-article-photo-hero--zoom-out .sub-article-photo-hero-bg {
  transform: scale(1.18);
  animation: subPhotoZoomOut 14s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
  will-change: transform;
}
@keyframes subPhotoZoomOut {
  from { transform: scale(1.18); }
  to   { transform: scale(1.0); }
}
@media (prefers-reduced-motion: reduce) {
  .sub-article-photo-hero--zoom-out .sub-article-photo-hero-bg { animation: none; transform: none; }
}
.sub-article-photo-hero-inner {
  position: relative; z-index: 2;
  max-width: 1100px; width: 100%;
  margin: 0 auto;
  padding: clamp(56px, 8vh, 96px) clamp(28px, 5vw, 56px) clamp(40px, 6vh, 72px);
}
.sub-article-photo-hero .sub-article-meta {
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 20px;
}
.sub-article-photo-hero .sub-article-meta-divider {
  background: rgba(255, 255, 255, 0.6);
  opacity: 0.7;
}
.sub-article-photo-hero .sub-article-title {
  color: var(--chantilly-pure);
  font-size: clamp(2.2rem, 5.4vw, 3.8rem);
  margin: 0 0 18px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.42);
}
.sub-article-photo-hero .sub-article-title .title-sub {
  display: inline-block;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight: 300; font-style: italic;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 8px;
}
.sub-article-photo-hero .sub-article-lead {
  color: rgba(255, 255, 255, 0.93);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  font-weight: 300;
  max-width: 60ch;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.38);
}

/* Inline stats strip at the bottom of a photo-hero · used on pages where
   we want the headline figures to sit over the image (Semenic). 4 cells
   on a hairline-separated row, with light-on-image typography. */
.sub-article-photo-hero-stats {
  margin-top: clamp(28px, 4vh, 48px);
  padding-top: clamp(20px, 3vh, 32px);
  border-top: 1px solid rgba(255, 255, 255, 0.20);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
  max-width: 760px;
}
.sub-article-photo-hero-stat strong {
  display: block;
  font-family: inherit;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 300;
  letter-spacing: -0.008em;
  color: var(--chantilly-pure);
  line-height: 1.15;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.42);
}
.sub-article-photo-hero-stat small {
  display: block;
  margin-top: 8px;
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
@media (max-width: 720px) {
  .sub-article-photo-hero-stats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 18px;
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .sub-article-photo-hero { min-height: 58vh; }
  .sub-article-photo-hero-inner { padding: 48px 24px 36px; }
}
@media (max-width: 480px) {
  .sub-article-photo-hero { min-height: 62vh; }
  .sub-article-photo-hero .sub-article-title { font-size: clamp(1.85rem, 8vw, 2.4rem); }
  .sub-article-photo-hero .sub-article-lead { font-size: 1rem; }
}

/* ------------------------------------------------------------
   4c. SUB-PAGE · closing stanza · decorated with quote glyph at the
   top and a hairline-+-mountain ornament between the two paragraphs.
   Text is upright serif for editorial gravitas.
   ------------------------------------------------------------ */

.sub-article-closing {
  max-width: 800px;
  margin: clamp(56px, 7vh, 80px) auto clamp(24px, 3vh, 40px);
  padding: 0 32px;
  text-align: center;
  position: relative;
}
.sub-article-closing-icon {
  display: flex; justify-content: center;
  margin: 0 0 22px;
  color: var(--rustic-taupe);
  opacity: 0.85;
}
.sub-article-closing-icon svg {
  width: 32px; height: 28px;
  fill: currentColor;
}
.sub-article-closing p {
  font-family: "Helvetica Neue", "HelveticaNeue", "Helvetica Neue LT", Helvetica, Arial, sans-serif;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.5;
  color: var(--essex);
  font-weight: 400; font-style: normal;
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 60ch;
  margin-inline: auto;
}
.sub-article-closing-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  margin: 24px auto;
  max-width: 240px;
  color: var(--rustic-taupe);
}
.sub-article-closing-divider::before,
.sub-article-closing-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--stone-hearth-soft);
}
.sub-article-closing-divider svg {
  width: 26px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}


/* ------------------------------------------------------------
   4c-bis. SUB-PAGE · article navigation as a CARD with thumbnails,
   serif title, position-in-series, and a central tree divider.
   Used on Trei Ape + Semenic instead of the bare text-link variant.
   ------------------------------------------------------------ */

.sub-article-nav--card {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(40px, 5vh, 56px) 32px clamp(72px, 9vh, 100px);
  border-top: none;
  display: block;
}
.sub-article-nav-card {
  background: var(--chantilly);
  border: 1px solid var(--stone-hearth-soft);
  padding: clamp(28px, 4vh, 40px) clamp(22px, 3vw, 36px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
.sub-article-nav-card--no-next {
  grid-template-columns: 1fr auto;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.sub-article-nav--card .sub-article-nav-prev,
.sub-article-nav--card .sub-article-nav-next {
  display: flex;
  align-items: center;
  gap: 22px;
  text-decoration: none;
  color: var(--essex);
  padding: 0;
  flex-direction: row;
  text-align: left;
  align-items: center;
  transition: color 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.sub-article-nav--card .sub-article-nav-next {
  flex-direction: row-reverse;
  text-align: right;
}
.sub-article-nav--card .sub-article-nav-prev:hover { transform: translateX(-3px); color: var(--rustic-taupe); }
.sub-article-nav--card .sub-article-nav-next:hover { transform: translateX(3px); color: var(--rustic-taupe); }
.sub-article-nav-thumb {
  flex-shrink: 0;
  width: 92px; height: 92px;
  background-size: cover;
  background-position: center;
  background-color: var(--edgecomb-mid);
}
.sub-article-nav-text {
  display: flex; flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.sub-article-nav--card .sub-article-nav-label {
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rustic-taupe);
  font-weight: 500;
}
.sub-article-nav--card .sub-article-nav-title {
  font-family: "Helvetica Neue", "HelveticaNeue", "Helvetica Neue LT", Helvetica, Arial, sans-serif;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  font-weight: 400;
  letter-spacing: -0.008em;
  color: var(--essex);
  line-height: 1.2;
  transition: color 0.3s ease;
}
.sub-article-nav-position {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 500;
  opacity: 0.7;
  margin-top: 2px;
}
.sub-article-nav-center {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--rustic-taupe);
}
.sub-article-nav-center-line {
  width: 1px; height: 22px;
  background: var(--stone-hearth-soft);
}
.sub-article-nav-center svg {
  width: 28px; height: 26px;
  fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.85;
}
@media (max-width: 720px) {
  .sub-article-nav-card {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  .sub-article-nav-center {
    flex-direction: row;
    width: 100%;
  }
  .sub-article-nav-center-line {
    flex: 1; height: 1px; width: auto;
  }
  .sub-article-nav-thumb { width: 76px; height: 76px; }
}

/* "În curând" variant for the nav card · disabled + no thumbnail, replaced
   with a discreet "Coming soon" tag block. Wraps an <a> with href so the
   route is preserved (page exists, just hidden), but pointer-events block
   navigation and tabindex -1 removes from keyboard tab order. */
.sub-article-nav--card .sub-article-nav-prev.is-soon,
.sub-article-nav--card .sub-article-nav-next.is-soon {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
  transform: none !important;
}
.sub-article-nav--card .is-soon .sub-article-nav-thumb {
  background: transparent;
  border: 1px dashed var(--stone-hearth);
  position: relative;
}
.sub-article-nav--card .is-soon .sub-article-nav-thumb::after {
  content: '';
  position: absolute;
  inset: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 1px solid var(--rustic-taupe);
  opacity: 0.55;
}
.sub-article-nav--card .is-soon .sub-article-nav-position {
  color: var(--rustic-taupe);
  opacity: 0.85;
  font-weight: 600;
}

/* Plain (non-card) article nav · coming-soon prev/next links. The page still
   exists, but pointer-events block navigation + tabindex -1 removes it from
   the tab order. A "soon" tag is shown via the data-soon attribute. */
.sub-article-nav:not(.sub-article-nav--card) .sub-article-nav-prev.is-soon,
.sub-article-nav:not(.sub-article-nav--card) .sub-article-nav-next.is-soon {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.55;
}
.sub-article-nav:not(.sub-article-nav--card) .is-soon[data-soon]::after {
  content: attr(data-soon);
  display: block;
  margin-top: 3px;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rustic-taupe);
}


/* ------------------------------------------------------------
   4d. Feature video · Essex-deep marquee with editorial headline,
   iPhone-style phone mockup, side caption with hand-drawn arrow.
   Used on Trei Ape; pairs with .sub-article-stats below as one
   continuous dark block.
   ------------------------------------------------------------ */

.sub-article-video--feature {
  max-width: none;
  margin: clamp(40px, 6vh, 72px) 0 0;
  padding: clamp(60px, 8vh, 100px) 32px clamp(64px, 9vh, 100px);
  background-color: #071914;  /* deep-green base */
  color: var(--chantilly-pure);
  position: relative;
  /* overflow: visible so the phone can break above the section top */
  overflow: visible;
}
/* Layer 1 · Forest photo · blurred, low opacity, atmospheric */
.sub-article-video--feature::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../assets/img/galerie/gal-padurea.jpeg');
  background-size: cover;
  background-position: center;
  filter: blur(2px) saturate(0.7);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
/* Layer 2 · Essex green gradient tint + decorative fir-trees & lake waves
   at the bottom corners (subtle, Stone-Hearth-light on dark green). */
.sub-article-video--feature::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 600' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23C2B5A0' opacity='0.18'%3E%3Cpolygon points='95,395 70,465 120,465'/%3E%3Cpolygon points='95,440 60,520 130,520'/%3E%3Cpolygon points='95,490 50,580 140,580'/%3E%3Crect x='91' y='575' width='8' height='22'/%3E%3Cpolygon points='215,440 195,500 235,500'/%3E%3Cpolygon points='215,475 188,545 242,545'/%3E%3Crect x='212' y='540' width='6' height='15'/%3E%3Cpolygon points='1290,405 1265,475 1315,475'/%3E%3Cpolygon points='1290,450 1255,530 1325,530'/%3E%3Cpolygon points='1290,500 1245,590 1335,590'/%3E%3Crect x='1286' y='585' width='8' height='15'/%3E%3Cpolygon points='1175,445 1153,505 1197,505'/%3E%3Cpolygon points='1175,480 1148,550 1202,550'/%3E%3Crect x='1172' y='547' width='6' height='13'/%3E%3C/g%3E%3Cg fill='none' stroke='%23C2B5A0' stroke-width='1' stroke-linecap='round' opacity='0.22'%3E%3Cpath d='M0 552 Q 100 542 200 552 T 400 552 T 600 552 T 800 552 T 1000 552 T 1200 552 T 1400 552'/%3E%3Cpath d='M0 572 Q 100 562 200 572 T 400 572 T 600 572 T 800 572 T 1000 572 T 1200 572 T 1400 572'/%3E%3Cpath d='M0 590 Q 100 580 200 590 T 400 590 T 600 590 T 800 590 T 1000 590 T 1200 590 T 1400 590'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 25% 55%, rgba(18, 61, 49, 0.55), transparent 75%),
    linear-gradient(90deg, rgba(7, 25, 20, 0.92) 0%, rgba(8, 33, 27, 0.84) 45%, rgba(8, 33, 27, 0.72) 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, center;
  background-size: cover, cover, cover;
  pointer-events: none;
  z-index: 1;
}
.sub-article-video--feature .sub-article-video-inner {
  position: relative; z-index: 2;
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
  justify-items: center;
  text-align: center;
}

/* Editorial column · Helvetica light (matches site) */
.sub-article-video-text {
  max-width: 580px;
}
.sub-article-video-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rustic-taupe-light);
  font-weight: 600;
  margin-bottom: 28px;
}
.sub-article-video-headline {
  font-family: inherit;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--chantilly-pure);
  margin: 0 0 32px;
}
.sub-article-video-headline .line {
  display: block;
}
.sub-article-video-headline .accent {
  color: var(--rustic-taupe-light);
  font-style: normal;
  font-weight: 300;
}
/* Reset browser-default italic on the <em> tags used inside .accent
   so they pick up the headline's serif but stay upright. */
.sub-article-video-headline em {
  font-style: normal;
}
.sub-article-video-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0 0 32px;
  color: rgba(247, 246, 241, 0.78);
  max-width: 38ch;
}
.sub-article-video-cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 28px;
  border: 1px solid var(--rustic-taupe-light);
  color: var(--rustic-taupe-light);
  text-decoration: none;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  background: transparent;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.sub-article-video-cta:hover {
  background: var(--rustic-taupe-light);
  color: var(--essex-deep);
  border-color: var(--rustic-taupe-light);
}
.sub-article-video-cta .play-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.sub-article-video-cta .play-icon svg {
  width: 8px; height: 8px;
  fill: currentColor;
}

/* iPhone-style phone mockup */
.sub-article-video-figure {
  margin: 0;
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
}
.sub-article-video-phone {
  position: relative;
  /* Height follows the video (aspect-ratio is on the <video>, not here) so it
     never depends on percentage-height resolving against an aspect-ratio box,
     which broke on mobile. overflow:hidden clips the screen to the frame. */
  max-width: 360px;
  width: 100%;
  overflow: hidden;
  background: #0a0a0a;
  border-radius: 52px;
  padding: 14px 12px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  border: 2px solid #1a1a1a;
}

/* Custom play overlay · sits on top of the video poster until the
   user clicks. JS toggles .is-hidden to reveal native controls + play. */
.sub-article-video-overlay {
  position: absolute;
  top: 14px; left: 12px; right: 12px; bottom: 14px;
  border-radius: 38px;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.18) 100%);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.35s ease;
}
.sub-article-video-overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.sub-article-video-overlay-circle {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.55);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease, background 0.3s ease;
}
.sub-article-video-overlay:hover .sub-article-video-overlay-circle {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 1);
}
.sub-article-video-overlay-circle svg {
  width: 26px; height: 26px;
  fill: var(--essex-deep);
  margin-left: 4px;
}
.sub-article-video-phone::before {
  content: '';
  position: absolute;
  top: 26px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 30px;
  background: #000;
  border-radius: 18px;
  z-index: 2;
  pointer-events: none;
}
.sub-article-video-phone video {
  /* The video defines the frame height via its own 9:16 portrait ratio
     (reliable everywhere), filling the width. object-fit:cover crops the
     poster/video to that box so there are no black gaps or overflow. */
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
  border-radius: 38px;
  background: #000;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

/* Side caption with hand-drawn arrow */
.sub-article-video-aside {
  margin-top: 24px;
  font-family: inherit;
  font-style: italic;
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--rustic-taupe-light);
  max-width: 180px;
  text-align: center;
  position: relative;
}
.sub-article-video-aside-arrow {
  width: 64px; height: 40px;
  display: block;
  margin: 0 auto 8px;
  color: var(--rustic-taupe-light);
  opacity: 0.85;
}

/* Desktop: 2 columns. Text on the LEFT (justify-self: start), phone on
   the RIGHT (justify-self: end). The phone breaks UP modestly out of
   the section so it visually emerges from the dark band; the white
   buffer above (section margin-top) keeps it clear of body §2 text.
   margin-bottom compensates so the section doesn't grow extra-tall. */
@media (min-width: 920px) {
  .sub-article-video--feature .sub-article-video-inner {
    grid-template-columns: 1fr auto;
    gap: clamp(40px, 5vw, 64px);
    text-align: left;
    justify-items: stretch;
    align-items: start;
  }
  .sub-article-video-text {
    justify-self: start;
    max-width: 460px;
  }
  .sub-article-video-figure {
    justify-self: end;
    position: relative;
    transform: translateY(-90px);
    margin-bottom: -90px;
  }
}
/* Side caption floats to the RIGHT of the phone only when there is room.
   The phone sits flush to the right edge of the 1060px inner, so the absolute
   aside (left: 100% + 28px) overflowed the viewport between ~920–1240px.
   Below 1240px the aside stays in normal flow (centered, under the phone). */
@media (min-width: 1240px) {
  .sub-article-video-aside {
    position: absolute;
    left: calc(100% + 28px);
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    text-align: left;
    max-width: 150px;
  }
  .sub-article-video-aside-arrow {
    margin: 0 0 8px;
    transform: scaleX(-1);
  }
}
@media (max-width: 560px) {
  .sub-article-video--feature { padding: 56px 24px 64px; }
  .sub-article-video-phone { max-width: 300px; }
  .sub-article-video-overlay-circle { width: 72px; height: 72px; }
}

/* ------------------------------------------------------------
   4e. Stats row · 4 mini-stats – visually merged with the video
   feature above (same #071914 base, NO top border). Cells are
   separated by thin vertical hairlines instead of grid gap, so
   the whole row reads as one editorial info strip.
   ------------------------------------------------------------ */

.sub-article-stats {
  background-color: #071914;
  color: var(--chantilly-pure);
  padding: clamp(36px, 5vh, 56px) 32px clamp(56px, 7vh, 80px);
  position: relative;
}
.sub-article-stats-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: center;
}
.sub-article-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 6px 24px;
  border-left: 1px solid rgba(194, 181, 160, 0.16);
}
.sub-article-stat:first-child {
  border-left: none;
}
.sub-article-stat-icon {
  flex-shrink: 0;
  color: var(--rustic-taupe-light);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.85;
}
.sub-article-stat-icon svg {
  width: 28px; height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sub-article-stat-text { min-width: 0; }
.sub-article-stat strong {
  display: block;
  font-family: inherit;
  font-size: clamp(1.25rem, 1.85vw, 1.55rem);
  font-weight: 300;
  letter-spacing: -0.012em;
  color: var(--chantilly-pure);
  line-height: 1.1;
}
.sub-article-stat small {
  display: block;
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247, 246, 241, 0.5);
  margin-top: 8px;
  font-weight: 500;
}
@media (max-width: 760px) {
  .sub-article-stats { padding: clamp(36px, 5vh, 56px) 24px clamp(48px, 6vh, 72px); }
  .sub-article-stats-inner {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
    column-gap: 0;
    max-width: 520px;
  }
  .sub-article-stat { padding: 4px 16px; }
}
@media (max-width: 760px) and (min-width: 421px) {
  /* Vertical hairline between paired stats – only in 2-column mode */
  .sub-article-stat:nth-child(odd) { border-left: none; }
  .sub-article-stat:nth-child(even) { border-left: 1px solid rgba(194, 181, 160, 0.16); }
}
@media (max-width: 420px) {
  /* Single-column · constrain inner so every row is the same width,
     making every icon land at the same X position (no centering drift). */
  .sub-article-stats-inner {
    grid-template-columns: 1fr;
    row-gap: 22px;
    max-width: 220px;
    justify-items: stretch;
  }
  .sub-article-stat {
    padding: 0;
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: 18px;
    align-items: center;
    justify-content: start;
    text-align: left;
  }
  .sub-article-stat-icon {
    width: 36px; height: 36px;
  }
  .sub-article-stat-icon svg {
    width: 32px; height: 32px;
  }
}

/* ------------------------------------------------------------
   4f. SUB-PAGE · inline gallery (cream bg, after closing/stats)
   4-column masonry-ish grid of square photos; hover zoom + lift.
   Click opens the JPEG in a new tab (no lightbox JS – minimal).
   ------------------------------------------------------------ */

.sub-article-gallery {
  background: var(--chantilly-pure);
  padding: clamp(56px, 7vh, 96px) 32px clamp(48px, 6vh, 80px);
}
.sub-article-gallery-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.sub-article-gallery-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(36px, 5vh, 56px);
}
.sub-article-gallery-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rustic-taupe);
  font-weight: 500;
  margin-bottom: 16px;
}
.sub-article-gallery h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--essex);
  margin: 0 0 12px;
}
.sub-article-gallery h2 em {
  font-style: normal;
  font-weight: 500;
  color: var(--rustic-taupe);
}
.sub-article-gallery-lead {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0;
}

.sub-article-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.sub-article-gallery-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--edgecomb-mid);
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.sub-article-gallery-cell::before {
  content: '';
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(1.04) saturate(1.12) contrast(1.03);
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1), filter 0.4s ease;
}
/* Cells that use a real <img> (season galleries, lazy-loaded) instead of a
   CSS-background ::before. The <img> paints above the (now empty) ::before. */
.sub-article-gallery-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.04) saturate(1.12) contrast(1.03);
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1), filter 0.4s ease;
}
@media (hover: hover) and (pointer: fine) {
  .sub-article-gallery-cell:hover {
    box-shadow: 0 12px 30px -10px rgba(15, 23, 18, 0.4);
    transform: translateY(-2px);
  }
  .sub-article-gallery-cell:hover::before,
  .sub-article-gallery-cell:hover img {
    transform: scale(1.07);
    filter: brightness(1.12) saturate(1.25) contrast(1.05);
  }
}
.sub-article-gallery-cell:focus-visible {
  outline: 2px solid var(--rustic-taupe);
  outline-offset: 3px;
}

/* Masonry variant (CSS multi-column) · mixed-orientation archive photos
   (istorie). Cells flow to natural height instead of square crops. */
.sub-article-gallery-grid--masonry {
  display: block;
  column-count: 4;
  column-gap: 10px;
}
.sub-article-gallery-grid--masonry > .sub-article-gallery-cell {
  display: block;
  width: 100%;
  aspect-ratio: auto;
  margin: 0 0 10px;
  break-inside: avoid;
}
.sub-article-gallery-grid--masonry > .sub-article-gallery-cell img {
  position: static;
  width: 100%;
  height: auto;
}
@media (max-width: 980px) { .sub-article-gallery-grid--masonry { column-count: 3; } }
@media (max-width: 600px) {
  .sub-article-gallery-grid--masonry { column-count: 2; column-gap: 8px; }
  .sub-article-gallery-grid--masonry > .sub-article-gallery-cell { margin-bottom: 8px; }
}
/* collapsed masonry shows the first 12 (overrides the square-grid n+9 rule) */
.sub-article-gallery-grid--masonry.is-collapsed > .sub-article-gallery-cell:nth-child(-n+12) { display: block; }
.sub-article-gallery-grid--masonry.is-collapsed > .sub-article-gallery-cell:nth-child(n+13)  { display: none; }

/* ------------------------------------------------------------
   4i. SUB-PAGE · Pemi recipe collection (grouped masonry cards)
   Used by comunitate/retete-pemesti. Recipes vary in length, so a
   CSS multi-column masonry packs them without ragged rows.
   ------------------------------------------------------------ */
.recipe-group {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}
.recipe-group-title {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--essex);
  margin: clamp(34px, 5vh, 54px) 0 clamp(18px, 2.6vh, 26px);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--stone-hearth-soft);
}
.recipe-group-title em { font-style: normal; font-weight: 500; color: var(--rustic-taupe); }
.recipe-grid {
  column-count: 2;
  column-gap: clamp(18px, 2.4vw, 28px);
}
@media (max-width: 720px) { .recipe-grid { column-count: 1; } }
.recipe-card {
  break-inside: avoid;
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  background: var(--chantilly-pure);
  border: 1px solid var(--stone-hearth-soft);
  border-top: 3px solid var(--amber-warm, #C8A773);
  padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 32px);
}
.recipe-card-head {
  display: flex;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 14px;
}
.recipe-card-num {
  flex: none;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 300;
  line-height: 1;
  color: var(--amber-warm, #C8A773);
  font-variant-numeric: tabular-nums;
}
.recipe-card-title {
  margin: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--essex);
}
.recipe-card-sub {
  display: block;
  margin-top: 4px;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--rustic-taupe);
}
.recipe-card-method {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--essex);
}
.recipe-card-method + .recipe-card-method { margin-top: 10px; }
.recipe-card-method-label {
  display: block;
  margin-bottom: 2px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rustic-taupe);
}

/* ---- Recipe page · editorial layout (split hero, category overview,
   split closing, torn-paper seams). Used by comunitate/retete-pemesti. ---- */
.recipe-page { background: var(--chantilly-pure); }

/* split hero: text + photo */
.recipe-hero { background: var(--chantilly-pure); }
.recipe-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.recipe-hero-text { padding: clamp(44px, 7vh, 96px) clamp(26px, 4vw, 64px); align-self: center; }
.recipe-hero-eyebrow {
  display: block;
  font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--rustic-taupe); font-weight: 600; margin-bottom: clamp(20px, 4vh, 34px);
}
.recipe-hero-title {
  margin: 0 0 18px;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 300; line-height: 1.04; letter-spacing: -0.018em;
  color: var(--essex);
}
.recipe-hero-sub {
  display: block;
  font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--rustic-taupe); font-weight: 500; margin-bottom: 18px;
}
.recipe-hero-sub::after {
  content: ''; display: block; width: 40px; height: 1px;
  background: var(--rustic-taupe); opacity: 0.6; margin-top: 18px;
}
.recipe-hero-text p {
  font-size: 0.98rem; line-height: 1.75; color: var(--essex); margin: 0 0 16px;
}
.recipe-hero-text p:last-child { margin-bottom: 0; }
.recipe-hero-media {
  background-size: cover; background-position: center; background-repeat: no-repeat;
  min-height: clamp(360px, 60vh, 640px);
}

/* torn-paper seam (inline SVG strip colored via fill) */
.recipe-torn { display: block; width: 100%; height: 26px; line-height: 0; position: relative; z-index: 2; }
.recipe-torn svg { display: block; width: 100%; height: 100%; }
.recipe-torn--cream svg { fill: var(--chantilly); }
.recipe-torn--white svg { fill: var(--chantilly-pure); }
.recipe-torn--up { margin-top: -25px; }
.recipe-torn--down { margin-bottom: -25px; }

/* category overview band */
.recipe-overview { background: var(--chantilly); padding: clamp(36px, 5vh, 64px) 32px clamp(40px, 6vh, 72px); text-align: center; }
.recipe-overview-inner { max-width: 1100px; margin: 0 auto; }
.recipe-overview-wheat { color: var(--amber-warm, #C8A773); margin-bottom: 14px; }
.recipe-overview-wheat svg { width: 30px; height: 30px; }
.recipe-overview h2 {
  margin: 0 0 10px; font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 300; letter-spacing: -0.012em; color: var(--essex);
}
.recipe-overview-sub {
  display: block; font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--rustic-taupe); font-weight: 500; margin-bottom: 18px;
}
.recipe-overview-lead { max-width: 620px; margin: 0 auto clamp(32px, 5vh, 48px); font-size: 1rem; line-height: 1.7; color: var(--text-soft, #5d6660); }
.recipe-cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.6vw, 20px); }
@media (max-width: 900px) { .recipe-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .recipe-cat-grid { grid-template-columns: repeat(2, 1fr); } }
.recipe-cat-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: clamp(22px, 2.6vw, 32px) 14px;
  background: var(--chantilly-pure); border: 1px solid var(--stone-hearth-soft);
  text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
@media (hover: hover) {
  .recipe-cat-tile:hover { transform: translateY(-3px); border-color: var(--amber-warm, #C8A773); box-shadow: 0 14px 30px -16px rgba(15,23,18,0.4); }
}
.recipe-cat-tile:focus-visible { outline: 2px solid var(--rustic-taupe); outline-offset: 3px; }
.recipe-cat-icon { color: var(--essex); }
.recipe-cat-icon svg { width: 40px; height: 40px; }
.recipe-cat-name { font-size: 1rem; font-weight: 500; line-height: 1.25; color: var(--essex); }
.recipe-cat-count {
  font-size: 0.74rem; letter-spacing: 0.06em; color: var(--rustic-taupe);
  padding-top: 10px; border-top: 1px solid var(--stone-hearth-soft); width: 38px;
}
.recipe-cat-arrow { color: var(--amber-warm, #C8A773); font-size: 1.05rem; line-height: 1; }

/* recipe body (groups) on cream */
.recipe-body { background: var(--chantilly); padding: clamp(8px, 2vh, 24px) 0 clamp(40px, 6vh, 72px); }
.recipe-group { scroll-margin-top: 90px; }
.recipe-card { background: var(--chantilly-pure); }

/* split closing */
.recipe-closing { background: var(--chantilly-pure); }
.recipe-closing-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.recipe-closing-text { padding: clamp(44px, 7vh, 88px) clamp(26px, 4vw, 64px); align-self: center; }
.recipe-closing-text h2 { margin: 0 0 18px; font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 300; letter-spacing: -0.012em; color: var(--essex); }
.recipe-closing-text p { font-size: 0.98rem; line-height: 1.75; color: var(--essex); margin: 0 0 16px; }
.recipe-closing-quote {
  margin: clamp(22px, 3vh, 32px) 0 0; padding: clamp(20px, 3vw, 28px) clamp(22px, 3vw, 30px);
  background: var(--chantilly); border-left: 3px solid var(--amber-warm, #C8A773); position: relative;
}
.recipe-closing-quote::before {
  content: '\201C'; position: absolute; top: 2px; left: 12px;
  font-size: 3rem; line-height: 1; color: var(--amber-warm, #C8A773); opacity: 0.5;
}
.recipe-closing-quote p {
  margin: 0; padding-left: 28px; font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 300; line-height: 1.3; color: var(--essex);
}
.recipe-closing-media { background-size: cover; background-position: center; min-height: clamp(340px, 56vh, 600px); }

@media (max-width: 860px) {
  .recipe-hero-inner, .recipe-closing-inner { grid-template-columns: 1fr; }
  .recipe-hero-media { min-height: 280px; order: -1; }
  .recipe-closing-media { min-height: 260px; }
}

/* recipe page source line */
.recipe-source { background: var(--chantilly-pure); padding: clamp(28px, 4vh, 44px) 32px clamp(40px, 6vh, 64px); }
.recipe-source p { max-width: 1100px; margin: 0 auto; font-size: 0.82rem; opacity: 0.7; color: var(--essex); }

/* ------------------------------------------------------------
   4j. SUB-PAGE · cultural events calendar (comunitate/evenimente)
   Alternating media rows with a calendar date-stamp on the photo.
   ------------------------------------------------------------ */
.events-intro { max-width: 720px; margin: 0 auto; padding: 0 32px; }
.events-intro p { font-size: 1.02rem; line-height: 1.78; color: var(--essex); margin: 0 0 18px; }
.events-list {
  max-width: 1080px; margin: 0 auto;
  padding: clamp(24px, 3.5vh, 40px) 32px clamp(20px, 3vh, 32px);
  display: flex; flex-direction: column; gap: clamp(30px, 4.5vh, 56px);
}
.event-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); align-items: center; }
.event-media { position: relative; }
.event-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--essex); }
.event-date {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; flex-direction: column; align-items: center;
  min-width: 78px; padding: 9px 14px; text-align: center;
  background: var(--essex); color: var(--chantilly-pure);
  box-shadow: 0 8px 20px -10px rgba(15, 23, 18, 0.6);
}
.event-date-d { font-size: 1.15rem; font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; }
.event-date-m { margin-top: 5px; font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber-warm, #C8A773); font-weight: 600; }
.event-tag {
  display: inline-block; margin-bottom: 12px; padding: 4px 12px;
  background: var(--amber-warm, #C8A773); color: var(--essex);
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
}
.event-title { margin: 0 0 6px; font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 400; line-height: 1.2; color: var(--essex); }
.event-meta { margin: 0 0 12px; font-size: 0.85rem; color: var(--rustic-taupe); }
.event-desc { margin: 0 0 18px; font-size: 0.98rem; line-height: 1.72; color: var(--essex); }
.event-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  color: var(--essex); text-decoration: none;
  border-bottom: 1px solid var(--amber-warm, #C8A773); padding-bottom: 3px;
  transition: color 0.25s ease, gap 0.25s ease;
}
.event-link:hover { color: var(--rustic-taupe); gap: 12px; }
.event-row--reverse .event-media { order: 2; }
.events-note {
  max-width: 1080px; margin: 0 auto; padding: 0 32px clamp(8px, 2vh, 16px);
  font-size: 0.82rem; color: var(--rustic-taupe); font-style: italic;
}
.events-intro-emph {
  margin: clamp(20px, 3vh, 30px) 0 0;
  padding-top: clamp(18px, 2.5vh, 26px);
  border-top: 1px solid var(--stone-hearth-soft);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-style: italic; font-weight: 300; line-height: 1.5;
  color: var(--rustic-taupe);
}
.events-outro {
  max-width: 720px; margin: 0 auto;
  padding: clamp(36px, 5vh, 60px) 32px clamp(44px, 6vh, 76px);
  text-align: center;
}
.events-outro h2 {
  margin: 0 0 18px; font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 300; letter-spacing: -0.012em; color: var(--essex);
}
.events-outro p { font-size: 1rem; line-height: 1.75; color: var(--essex); margin: 0 0 16px; }
.events-outro p.events-outro-emph {
  margin-top: 24px; font-style: italic; font-weight: 300;
  font-size: clamp(1.1rem, 1.7vw, 1.32rem); line-height: 1.45; color: var(--rustic-taupe);
}
@media (max-width: 760px) {
  .event-row, .event-row--reverse { grid-template-columns: 1fr; }
  .event-row--reverse .event-media { order: 0; }
}

/* Gastronomie gallery · 34 per-cell rules */
.sub-article-gallery-cell.ph-gastro-01::before { background-image: url('../assets/img/restaurante/gastro-01.jpg'); }
.sub-article-gallery-cell.ph-gastro-02::before { background-image: url('../assets/img/restaurante/gastro-02.jpg'); }
.sub-article-gallery-cell.ph-gastro-03::before { background-image: url('../assets/img/restaurante/gastro-03.jpg'); }
.sub-article-gallery-cell.ph-gastro-04::before { background-image: url('../assets/img/restaurante/gastro-04.jpg'); }
.sub-article-gallery-cell.ph-gastro-05::before { background-image: url('../assets/img/restaurante/gastro-05.jpg'); }
.sub-article-gallery-cell.ph-gastro-07::before { background-image: url('../assets/img/restaurante/gastro-07.jpg'); }
.sub-article-gallery-cell.ph-gastro-09::before { background-image: url('../assets/img/restaurante/gastro-09.jpg'); }
.sub-article-gallery-cell.ph-gastro-11::before { background-image: url('../assets/img/restaurante/gastro-11.jpg'); }
.sub-article-gallery-cell.ph-gastro-12::before { background-image: url('../assets/img/restaurante/gastro-12.jpg'); }
.sub-article-gallery-cell.ph-gastro-13::before { background-image: url('../assets/img/restaurante/gastro-13.jpg'); }
.sub-article-gallery-cell.ph-gastro-14::before { background-image: url('../assets/img/restaurante/gastro-14.jpg'); }
.sub-article-gallery-cell.ph-gastro-15::before { background-image: url('../assets/img/restaurante/gastro-15.jpg'); }
.sub-article-gallery-cell.ph-gastro-16::before { background-image: url('../assets/img/restaurante/gastro-16.jpg'); }
.sub-article-gallery-cell.ph-gastro-17::before { background-image: url('../assets/img/restaurante/gastro-17.jpg'); }
.sub-article-gallery-cell.ph-gastro-18::before { background-image: url('../assets/img/restaurante/gastro-18.jpg'); }
.sub-article-gallery-cell.ph-gastro-19::before { background-image: url('../assets/img/restaurante/gastro-19.jpg'); }
.sub-article-gallery-cell.ph-gastro-20::before { background-image: url('../assets/img/restaurante/gastro-20.jpg'); }
.sub-article-gallery-cell.ph-gastro-21::before { background-image: url('../assets/img/restaurante/gastro-21.jpg'); }
.sub-article-gallery-cell.ph-gastro-22::before { background-image: url('../assets/img/restaurante/gastro-22.jpg'); }
.sub-article-gallery-cell.ph-gastro-23::before { background-image: url('../assets/img/restaurante/gastro-23.jpg'); }
.sub-article-gallery-cell.ph-gastro-24::before { background-image: url('../assets/img/restaurante/gastro-24.jpg'); }
.sub-article-gallery-cell.ph-gastro-25::before { background-image: url('../assets/img/restaurante/gastro-25.jpg'); }
.sub-article-gallery-cell.ph-gastro-26::before { background-image: url('../assets/img/restaurante/gastro-26.jpg'); }
.sub-article-gallery-cell.ph-gastro-27::before { background-image: url('../assets/img/restaurante/gastro-27.jpg'); }
.sub-article-gallery-cell.ph-gastro-28::before { background-image: url('../assets/img/restaurante/gastro-28.jpg'); }
.sub-article-gallery-cell.ph-gastro-29::before { background-image: url('../assets/img/restaurante/gastro-29.jpg'); }
.sub-article-gallery-cell.ph-gastro-30::before { background-image: url('../assets/img/restaurante/gastro-30.jpg'); }
.sub-article-gallery-cell.ph-gastro-31::before { background-image: url('../assets/img/restaurante/gastro-31.jpg'); }
.sub-article-gallery-cell.ph-gastro-32::before { background-image: url('../assets/img/restaurante/gastro-32.jpg'); }
.sub-article-gallery-cell.ph-gastro-33::before { background-image: url('../assets/img/restaurante/gastro-33.jpg'); }
.sub-article-gallery-cell.ph-gastro-34::before { background-image: url('../assets/img/restaurante/gastro-34.jpg'); }

/* Per-cell background-images – kept here so HTML stays minimal */
.sub-article-gallery-cell.ph-trei-ape-1::before { background-image: url('../assets/img/trei-ape/trei-ape-1.jpeg'); }
.sub-article-gallery-cell.ph-trei-ape-2::before { background-image: url('../assets/img/trei-ape/trei-ape-2.jpeg'); }
.sub-article-gallery-cell.ph-trei-ape-3::before { background-image: url('../assets/img/trei-ape/trei-ape-3.jpeg'); }
.sub-article-gallery-cell.ph-trei-ape-4::before { background-image: url('../assets/img/trei-ape/trei-ape-4.jpeg'); }
.sub-article-gallery-cell.ph-trei-ape-5::before { background-image: url('../assets/img/trei-ape/trei-ape-5.jpeg'); }
.sub-article-gallery-cell.ph-trei-ape-6::before { background-image: url('../assets/img/trei-ape/trei-ape-6.jpeg'); }
.sub-article-gallery-cell.ph-trei-ape-7::before { background-image: url('../assets/img/trei-ape/trei-ape-7.jpeg'); }
.sub-article-gallery-cell.ph-trei-ape-8::before  { background-image: url('../assets/img/trei-ape/trei-ape-8.jpeg'); }
.sub-article-gallery-cell.ph-trei-ape-9::before  { background-image: url('../assets/img/trei-ape/trei-ape-9.jpeg'); }
.sub-article-gallery-cell.ph-trei-ape-10::before { background-image: url('../assets/img/trei-ape/trei-ape-10.jpeg'); }

.sub-article-gallery-cell.ph-semenic-hero::before { background-image: url('../assets/img/semenic/semenic-hero.jpeg'); }
.sub-article-gallery-cell.ph-semenic-old::before  { background-image: url('../assets/img/semenic/muntele-semenic.webp'); }
.sub-article-gallery-cell.ph-semenic-1::before  { background-image: url('../assets/img/semenic/semenic-1.jpeg'); }
.sub-article-gallery-cell.ph-semenic-2::before  { background-image: url('../assets/img/semenic/semenic-2.jpeg'); }
.sub-article-gallery-cell.ph-semenic-3::before  { background-image: url('../assets/img/semenic/semenic-3.jpeg'); }
.sub-article-gallery-cell.ph-semenic-4::before  { background-image: url('../assets/img/semenic/semenic-4.jpeg'); }
.sub-article-gallery-cell.ph-semenic-5::before  { background-image: url('../assets/img/semenic/semenic-5.jpeg'); }
.sub-article-gallery-cell.ph-semenic-6::before  { background-image: url('../assets/img/semenic/semenic-6.jpeg'); }
.sub-article-gallery-cell.ph-semenic-7::before  { background-image: url('../assets/img/semenic/semenic-7.jpeg'); }
.sub-article-gallery-cell.ph-semenic-8::before  { background-image: url('../assets/img/semenic/semenic-8.jpeg'); }
.sub-article-gallery-cell.ph-semenic-9::before  { background-image: url('../assets/img/semenic/semenic-9.jpeg'); }
.sub-article-gallery-cell.ph-semenic-10::before { background-image: url('../assets/img/semenic/semenic-10.jpeg'); }
.sub-article-gallery-cell.ph-semenic-11::before { background-image: url('../assets/img/semenic/semenic-11.jpeg'); }
.sub-article-gallery-cell.ph-semenic-12::before { background-image: url('../assets/img/semenic/semenic-12.jpeg'); }
.sub-article-gallery-cell.ph-semenic-13::before { background-image: url('../assets/img/semenic/semenic-13.jpeg'); }
.sub-article-gallery-cell.ph-semenic-14::before { background-image: url('../assets/img/semenic/semenic-14.jpeg'); }

.sub-article-gallery-cell.ph-garana-hero::before { background-image: url('../assets/img/garana/garana-hero.jpeg'); }
.sub-article-gallery-cell.ph-garana-1::before  { background-image: url('../assets/img/garana/garana-1.jpeg'); }
.sub-article-gallery-cell.ph-garana-2::before  { background-image: url('../assets/img/garana/garana-2.jpeg'); }
.sub-article-gallery-cell.ph-garana-3::before  { background-image: url('../assets/img/garana/garana-3.jpeg'); }
.sub-article-gallery-cell.ph-garana-4::before  { background-image: url('../assets/img/garana/garana-4.jpeg'); }
.sub-article-gallery-cell.ph-garana-5::before  { background-image: url('../assets/img/garana/garana-5.jpeg'); }
.sub-article-gallery-cell.ph-garana-6::before  { background-image: url('../assets/img/garana/garana-6.jpeg'); }
.sub-article-gallery-cell.ph-garana-7::before  { background-image: url('../assets/img/garana/garana-7.jpeg'); }
.sub-article-gallery-cell.ph-garana-8::before  { background-image: url('../assets/img/garana/garana-8.jpeg'); }
.sub-article-gallery-cell.ph-garana-9::before  { background-image: url('../assets/img/garana/garana-9.jpeg'); }
.sub-article-gallery-cell.ph-garana-10::before { background-image: url('../assets/img/garana/garana-10.jpeg'); }
.sub-article-gallery-cell.ph-garana-11::before { background-image: url('../assets/img/garana/garana-11.jpeg'); }
.sub-article-gallery-cell.ph-garana-12::before { background-image: url('../assets/img/garana/garana-12.jpeg'); }
.sub-article-gallery-cell.ph-garana-13::before { background-image: url('../assets/img/garana/garana-13.jpeg'); }
.sub-article-gallery-cell.ph-garana-14::before { background-image: url('../assets/img/garana/garana-14.jpeg'); }
.sub-article-gallery-cell.ph-garana-15::before { background-image: url('../assets/img/garana/garana-15.jpeg'); }
.sub-article-gallery-cell.ph-garana-16::before { background-image: url('../assets/img/garana/garana-16.jpeg'); }
.sub-article-gallery-cell.ph-garana-17::before { background-image: url('../assets/img/garana/garana-17.jpeg'); }
.sub-article-gallery-cell.ph-garana-18::before { background-image: url('../assets/img/garana/garana-18.jpeg'); }
.sub-article-gallery-cell.ph-garana-19::before { background-image: url('../assets/img/garana/garana-19.jpeg'); }
.sub-article-gallery-cell.ph-garana-20::before { background-image: url('../assets/img/garana/garana-20.jpeg'); }
.sub-article-gallery-cell.ph-garana-21::before { background-image: url('../assets/img/garana/garana-21.jpeg'); }
.sub-article-gallery-cell.ph-garana-22::before { background-image: url('../assets/img/garana/garana-22.jpeg'); }
.sub-article-gallery-cell.ph-garana-23::before { background-image: url('../assets/img/garana/garana-23.jpeg'); }
.sub-article-gallery-cell.ph-garana-24::before { background-image: url('../assets/img/garana/garana-24.jpeg'); }
.sub-article-gallery-cell.ph-garana-25::before { background-image: url('../assets/img/garana/garana-25.jpeg'); }
.sub-article-gallery-cell.ph-garana-26::before { background-image: url('../assets/img/garana/garana-26.jpeg'); }
.sub-article-gallery-cell.ph-garana-27::before { background-image: url('../assets/img/garana/garana-27.jpeg'); }
.sub-article-gallery-cell.ph-garana-28::before { background-image: url('../assets/img/garana/garana-28.jpeg'); }

@media (max-width: 880px) {
  .sub-article-gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
@media (max-width: 540px) {
  .sub-article-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}

/* Collapsed gallery · shows first 8 cells (2 rows on desktop 4-col grid).
   Two buttons (more/less) live in .sub-article-gallery-actions; JS toggles
   `is-collapsed` on the grid AND `is-expanded` on the actions wrapper. */
.sub-article-gallery-grid.is-collapsed > .sub-article-gallery-cell:nth-child(n+9) {
  display: none;
}
/* Sezon variant · denser collapse (4 cells visible, rest hidden until expanded). */
.sub-article-gallery-grid--sezon.is-collapsed > .sub-article-gallery-cell:nth-child(n+5) {
  display: none;
}
.sub-article-gallery-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 4vh, 40px);
}
.sub-article-gallery-action-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 28px;
  background: transparent;
  border: 1px solid var(--rustic-taupe);
  color: var(--essex);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, gap 0.3s ease;
}
.sub-article-gallery-action-btn:hover {
  background: var(--rustic-taupe);
  color: var(--chantilly-pure);
  gap: 18px;
}
.sub-article-gallery-action-btn:focus-visible {
  outline: 2px solid var(--essex);
  outline-offset: 3px;
}
.sub-article-gallery-action-btn-arrow {
  font-size: 0.95rem;
  line-height: 1;
}
/* Default state · "more" visible, "less" hidden. Switches when actions
   wrapper gets `.is-expanded`. */
.sub-article-gallery-less-btn { display: none; }
.sub-article-gallery-actions.is-expanded .sub-article-gallery-more-btn { display: none; }
.sub-article-gallery-actions.is-expanded .sub-article-gallery-less-btn { display: inline-flex; }


/* ============================================================
   5. SUB-PAGE · GRID template (3-column gallery)
   ============================================================ */

.sub-grid {
  background: var(--chantilly-pure);
  padding: clamp(48px, 7vh, 80px) 32px clamp(72px, 10vh, 110px);
}
.sub-grid-inner { max-width: 1240px; margin: 0 auto; }

.sub-grid-header {
  max-width: 760px;
  margin: 0 0 clamp(48px, 6vh, 72px);
}
.sub-grid-eyebrow {
  font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--rustic-taupe); font-weight: 500;
  margin-bottom: 18px;
}
.sub-grid h1 {
  font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  font-weight: 300; letter-spacing: -0.018em; line-height: 1.1;
  color: var(--essex); margin: 0 0 18px;
}
.sub-grid h1 em { font-style: normal; font-weight: 500; }
.sub-grid-lead {
  font-size: 1rem; line-height: 1.65;
  color: var(--text-soft); margin: 0;
}

.sub-grid-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 980px)  { .sub-grid-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .sub-grid-list { grid-template-columns: 1fr; } }

.sub-grid-card {
  display: flex; flex-direction: column;
  background: var(--chantilly);
  border: 1px solid var(--stone-hearth-soft);
  text-decoration: none; color: var(--essex);
  position: relative;
  transition: transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1), border-color 0.3s ease;
}
.sub-grid-card:hover { transform: translateY(-3px); border-color: var(--rustic-taupe); }

/* Disabled placeholder cards · target pages not yet drafted (per content-templates-rules) */
.sub-grid-card[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.sub-grid-card[aria-disabled="true"]::after {
  content: '';
  position: absolute;
  inset: 12px 12px auto auto;
  width: 8px; height: 8px;
  background: var(--rustic-taupe);
  border-radius: 50%;
  opacity: 0.7;
}
.sub-grid-card-photo {
  aspect-ratio: 4 / 3;
  background-size: cover; background-position: center;
  background-color: var(--edgecomb-mid);
}

/* Per-card photo placeholders. Slug-based gradients that approximate
   the subject visually; swap to `background-image: url('...')` once
   real photographs land. */
.sub-grid-card-photo.ph-belvedere-lac   { background-image: linear-gradient(135deg, #5e7a72 0%, #2a3e3a 100%); }
.sub-grid-card-photo.ph-varf-semenic    { background-image: linear-gradient(135deg, #607968 0%, var(--essex) 100%); }
.sub-grid-card-photo.ph-drum-creasta    { background-image: linear-gradient(135deg, #8a8466 0%, #4a4530 100%); }
.sub-grid-card-photo.ph-poiana-lupului  { background-image: linear-gradient(135deg, #9aa178 0%, #5a6448 100%); }
.sub-grid-card-photo.ph-cuca-plateau    { background-image: linear-gradient(135deg, #6a7b6e 0%, #2c3d34 100%); }
.sub-grid-card-photo.ph-stanci-padina   { background-image: linear-gradient(135deg, #806c5a 0%, #4a3a2e 100%); }
.sub-grid-card-photo.ph-varf-gozna      { background-image: linear-gradient(135deg, #6e7c84 0%, #2e3c46 100%); }
.sub-grid-card-photo.ph-tatarului       { background-image: linear-gradient(135deg, #786348 0%, #3a2e22 100%); }
.sub-grid-card-photo.ph-fag-pure        { background-image: linear-gradient(135deg, #4b6147 0%, #1c2a1d 100%); }
.sub-grid-card-body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 8px; }
.sub-grid-card-title {
  font-size: 1.02rem; font-weight: 500;
  color: var(--essex); letter-spacing: -0.008em; line-height: 1.3;
}
.sub-grid-card-desc {
  font-size: 0.88rem; line-height: 1.55;
  color: var(--text-soft); margin: 0;
}

.sub-grid-loadmore { text-align: center; margin-top: 56px; }
.sub-grid-loadmore button {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 28px;
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--essex); background: transparent;
  border: 1px solid var(--rustic-taupe);
  cursor: pointer; font-weight: 600;
  transition: background 0.25s ease, color 0.25s ease;
  font-family: inherit;
}
.sub-grid-loadmore button:hover { background: var(--rustic-taupe); color: var(--chantilly-pure); }


/* ============================================================
   6. SUB-PAGE · LIST template (left list + right featured)
   ============================================================ */

.sub-list {
  background: var(--chantilly-pure);
  padding: clamp(48px, 7vh, 80px) 32px clamp(72px, 10vh, 110px);
}
.sub-list-inner { max-width: 1240px; margin: 0 auto; }

.sub-list-header {
  max-width: 760px;
  margin: 0 0 clamp(48px, 6vh, 72px);
}
.sub-list-eyebrow {
  font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--rustic-taupe); font-weight: 500; margin-bottom: 18px;
}
.sub-list h1 {
  font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  font-weight: 300; letter-spacing: -0.018em; line-height: 1.1;
  color: var(--essex); margin: 0 0 18px;
}
.sub-list h1 em { font-style: normal; font-weight: 500; }
.sub-list-lead {
  font-size: 1rem; line-height: 1.65;
  color: var(--text-soft); margin: 0;
}

.sub-list-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 820px) { .sub-list-layout { grid-template-columns: 1fr; gap: 40px; } }

.sub-list-items {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--stone-hearth-soft);
}
.sub-list-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--stone-hearth-soft);
  text-decoration: none; color: var(--essex);
  transition: padding-left 0.3s ease, color 0.25s ease;
}
.sub-list-item:hover { padding-left: 12px; color: var(--rustic-taupe); }
.sub-list-item-title {
  font-size: 1.05rem; font-weight: 500; letter-spacing: -0.008em;
}
.sub-list-item-desc {
  font-size: 0.9rem; line-height: 1.55;
  color: var(--text-soft); margin: 0;
}

.sub-list-featured {
  background: var(--chantilly);
  border: 1px solid var(--stone-hearth-soft);
  display: flex; flex-direction: column;
}
.sub-list-featured-photo {
  aspect-ratio: 4 / 3;
  background-size: cover; background-position: center;
  background-color: var(--edgecomb-mid);
}

/* Per-featured photo placeholders for LIST template */
.sub-list-featured-photo.ph-trei-ape-trail { background-image: linear-gradient(135deg, #6b7e58 0%, #2c3823 100%); }


/* ============================================================
   7. SUB-PAGE · SEASONAL template (4 vertical-photo cards)
   ============================================================ */

.sub-seasonal {
  background: var(--chantilly-pure);
  padding: clamp(48px, 7vh, 80px) 32px clamp(72px, 10vh, 110px);
}
.sub-seasonal-inner { max-width: 1240px; margin: 0 auto; }
.sub-seasonal-header {
  max-width: 760px;
  margin: 0 0 clamp(48px, 6vh, 72px);
}
.sub-seasonal-eyebrow {
  font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--rustic-taupe); font-weight: 500; margin-bottom: 18px;
}
.sub-seasonal h1 {
  font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  font-weight: 300; letter-spacing: -0.018em; line-height: 1.1;
  color: var(--essex); margin: 0 0 18px;
}
.sub-seasonal h1 em { font-style: normal; font-weight: 500; }
.sub-seasonal-lead {
  font-size: 1rem; line-height: 1.65;
  color: var(--text-soft); margin: 0;
}

.sub-seasonal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 920px) { .sub-seasonal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .sub-seasonal-grid { grid-template-columns: 1fr; } }

.sub-seasonal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--chantilly-pure);
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  background-color: var(--edgecomb-mid);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.sub-seasonal-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,23,18,0) 40%, rgba(15,23,18,0.85) 100%);
  pointer-events: none;
  transition: background 0.35s ease;
}
.sub-seasonal-card:hover { transform: translateY(-3px); }
.sub-seasonal-card:hover::after {
  background: linear-gradient(180deg, rgba(15,23,18,0.10) 25%, rgba(15,23,18,0.88) 100%);
}
.sub-seasonal-card-body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 22px 22px 24px;
}
.sub-seasonal-card-title {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin: 0 0 6px;
}
.sub-seasonal-card-sub {
  font-size: 0.82rem;
  line-height: 1.4;
  opacity: 0.88;
  margin: 0;
}

/* Per-season photo placeholders */
.sub-seasonal-card.ph-primavara { background-image: linear-gradient(170deg, #93a07d 0%, #4f5e3f 100%); }
.sub-seasonal-card.ph-vara      { background-image: linear-gradient(170deg, #8da66c 0%, #3f5333 100%); }
.sub-seasonal-card.ph-toamna    { background-image: linear-gradient(170deg, #b88751 0%, #5a3e1f 100%); }
.sub-seasonal-card.ph-iarna     { background-image: linear-gradient(170deg, #b0c3cb 0%, #4a606a 100%); }


/* Per-card GRID placeholders for the rest of Natură */
.sub-grid-card-photo.ph-pitigoi      { background-image: linear-gradient(135deg, #6a7d6a 0%, #2a3b2c 100%); }
.sub-grid-card-photo.ph-cinteza      { background-image: linear-gradient(135deg, #836b48 0%, #3d2e1c 100%); }
.sub-grid-card-photo.ph-bufnita      { background-image: linear-gradient(135deg, #5e5043 0%, #2a221a 100%); }
.sub-grid-card-photo.ph-ciocanitoare { background-image: linear-gradient(135deg, #7a4a2e 0%, #38200f 100%); }
.sub-grid-card-photo.ph-mierla       { background-image: linear-gradient(135deg, #4b443c 0%, #1d1812 100%); }
.sub-grid-card-photo.ph-cuc          { background-image: linear-gradient(135deg, #6c5840 0%, #2e261a 100%); }
.sub-grid-card-photo.ph-pajura       { background-image: linear-gradient(135deg, #7a8694 0%, #2e3640 100%); }
.sub-grid-card-photo.ph-erete        { background-image: linear-gradient(135deg, #948464 0%, #4a4126 100%); }
.sub-grid-card-photo.ph-soim         { background-image: linear-gradient(135deg, #908070 0%, #3e3528 100%); }

.sub-grid-card-photo.ph-cerb         { background-image: linear-gradient(135deg, #7e5d3a 0%, #3a2818 100%); }
.sub-grid-card-photo.ph-urs          { background-image: linear-gradient(135deg, #5d4838 0%, #261c14 100%); }
.sub-grid-card-photo.ph-lup          { background-image: linear-gradient(135deg, #6b7281 0%, #2c3340 100%); }
.sub-grid-card-photo.ph-vulpe        { background-image: linear-gradient(135deg, #a25a32 0%, #4e2818 100%); }
.sub-grid-card-photo.ph-mistret      { background-image: linear-gradient(135deg, #4d423a 0%, #1f1a14 100%); }
.sub-grid-card-photo.ph-jder         { background-image: linear-gradient(135deg, #76583c 0%, #321f12 100%); }
.sub-grid-card-photo.ph-veverita     { background-image: linear-gradient(135deg, #8d573a 0%, #422518 100%); }
.sub-grid-card-photo.ph-pisica       { background-image: linear-gradient(135deg, #8d8472 0%, #3e3a30 100%); }
.sub-grid-card-photo.ph-rapitor      { background-image: linear-gradient(135deg, #524c44 0%, #20191a 100%); }

.sub-grid-card-photo.ph-cimbrisor    { background-image: linear-gradient(135deg, #806fa3 0%, #38304a 100%); }
.sub-grid-card-photo.ph-sunatoare    { background-image: linear-gradient(135deg, #d4b550 0%, #6b5520 100%); }
.sub-grid-card-photo.ph-coada-soric  { background-image: linear-gradient(135deg, #d6c8b4 0%, #6e5e48 100%); }
.sub-grid-card-photo.ph-isop         { background-image: linear-gradient(135deg, #7b8da6 0%, #303d52 100%); }
.sub-grid-card-photo.ph-menta        { background-image: linear-gradient(135deg, #8aa276 0%, #3e503a 100%); }
.sub-grid-card-photo.ph-soc          { background-image: linear-gradient(135deg, #c0cbb7 0%, #5e6755 100%); }
.sub-grid-card-photo.ph-tei          { background-image: linear-gradient(135deg, #c9c08a 0%, #6e6440 100%); }
.sub-grid-card-photo.ph-jneapan      { background-image: linear-gradient(135deg, #4b6a4d 0%, #1d2d20 100%); }
.sub-grid-card-photo.ph-musetel      { background-image: linear-gradient(135deg, #e2d6a8 0%, #6e6240 100%); }

.sub-grid-card-photo.ph-hribi        { background-image: linear-gradient(135deg, #826a48 0%, #3a2e1f 100%); }
.sub-grid-card-photo.ph-cantarela    { background-image: linear-gradient(135deg, #d99c3e 0%, #6e4818 100%); }
.sub-grid-card-photo.ph-galbiori     { background-image: linear-gradient(135deg, #bf8536 0%, #5a3c14 100%); }
.sub-grid-card-photo.ph-mana         { background-image: linear-gradient(135deg, #c0b894 0%, #5a5234 100%); }
.sub-grid-card-photo.ph-iuteasc      { background-image: linear-gradient(135deg, #8d4a3e 0%, #38201a 100%); }
.sub-grid-card-photo.ph-pestrita     { background-image: linear-gradient(135deg, #7e6442 0%, #38281a 100%); }
.sub-grid-card-photo.ph-buretele     { background-image: linear-gradient(135deg, #a37c52 0%, #422f1f 100%); }
.sub-grid-card-photo.ph-zbarci       { background-image: linear-gradient(135deg, #67473b 0%, #2c1e18 100%); }
.sub-grid-card-photo.ph-coral        { background-image: linear-gradient(135deg, #c5854f 0%, #5e3a1f 100%); }

.sub-grid-card-photo.ph-cerb-urma    { background-image: linear-gradient(135deg, #908072 0%, #3a322c 100%); }
.sub-grid-card-photo.ph-urs-urma     { background-image: linear-gradient(135deg, #7d6c5b 0%, #322a22 100%); }
.sub-grid-card-photo.ph-lup-urma     { background-image: linear-gradient(135deg, #8c95a3 0%, #2c3340 100%); }
.sub-grid-card-photo.ph-vulpe-urma   { background-image: linear-gradient(135deg, #b4a890 0%, #5e5240 100%); }
.sub-grid-card-photo.ph-mistret-urma { background-image: linear-gradient(135deg, #7c6b58 0%, #2f261c 100%); }
.sub-grid-card-photo.ph-iepure-urma  { background-image: linear-gradient(135deg, #aaa090 0%, #4e463a 100%); }
.sub-grid-card-photo.ph-jder-urma    { background-image: linear-gradient(135deg, #8d7b62 0%, #2f261c 100%); }
.sub-grid-card-photo.ph-pisica-urma  { background-image: linear-gradient(135deg, #807466 0%, #322a22 100%); }
.sub-grid-card-photo.ph-pasari-urma  { background-image: linear-gradient(135deg, #abb2b8 0%, #353a40 100%); }

.sub-grid-card-photo.ph-ceata-vale   { background-image: linear-gradient(135deg, #b4bdc1 0%, #46505a 100%); }
.sub-grid-card-photo.ph-rasarit-rece { background-image: linear-gradient(135deg, #c6905a 0%, #3a2c1c 100%); }
.sub-grid-card-photo.ph-apus-creste  { background-image: linear-gradient(135deg, #b66e3b 0%, #3a261a 100%); }
.sub-grid-card-photo.ph-nori-furtuna { background-image: linear-gradient(135deg, #5a6470 0%, #1c2126 100%); }
.sub-grid-card-photo.ph-stele        { background-image: linear-gradient(135deg, #303a4c 0%, #0d101a 100%); }
.sub-grid-card-photo.ph-curcubeu     { background-image: linear-gradient(135deg, #678fbe 0%, #2c4068 100%); }
.sub-grid-card-photo.ph-luna-plina   { background-image: linear-gradient(135deg, #4a5160 0%, #1a1d22 100%); }
.sub-grid-card-photo.ph-zapada-ninge { background-image: linear-gradient(135deg, #c0c8d0 0%, #4a525e 100%); }
.sub-grid-card-photo.ph-galb-toamna  { background-image: linear-gradient(135deg, #d49050 0%, #5e3a18 100%); }

/* Cultură · article hero gradients */
.sub-article-hero.ph-jazz            { background-image: linear-gradient(135deg, #3a2f48 0%, #16101c 100%); }
.sub-article-hero.ph-folk            { background-image: linear-gradient(135deg, #4a3a2e 0%, #1c1410 100%); }
.sub-article-hero.ph-kirchweih       { background-image: linear-gradient(135deg, #6e4838 0%, #2c1c14 100%); }
.sub-article-hero.ph-casa-artelor    { background-image: linear-gradient(135deg, #5e5040 0%, #2a221a 100%); }
.sub-article-hero.ph-muzeul-pemilor  { background-image: linear-gradient(135deg, #5a4a3a 0%, #261e16 100%); }

/* Cultură · feature-bottom hub feature gradient (uses ph-cultura already) */

/* Cultură · GRID placeholders */
.sub-grid-card-photo.ph-expo-foto    { background-image: linear-gradient(135deg, #7e5a3a 0%, #382418 100%); }
.sub-grid-card-photo.ph-expo-arta    { background-image: linear-gradient(135deg, #8e6048 0%, #3a261c 100%); }
.sub-grid-card-photo.ph-expo-etno    { background-image: linear-gradient(135deg, #98785a 0%, #44321f 100%); }
.sub-grid-card-photo.ph-expo-rezi    { background-image: linear-gradient(135deg, #7c6850 0%, #322820 100%); }
.sub-grid-card-photo.ph-expo-instal  { background-image: linear-gradient(135deg, #5a4e3e 0%, #221c14 100%); }
.sub-grid-card-photo.ph-expo-grafica { background-image: linear-gradient(135deg, #5a3a4a 0%, #221620 100%); }
.sub-grid-card-photo.ph-expo-sculpt  { background-image: linear-gradient(135deg, #4e4538 0%, #1c1812 100%); }
.sub-grid-card-photo.ph-expo-pictura { background-image: linear-gradient(135deg, #6c5040 0%, #28201a 100%); }
.sub-grid-card-photo.ph-expo-textile { background-image: linear-gradient(135deg, #845030 0%, #382016 100%); }

.sub-grid-card-photo.ph-pat-biserici { background-image: linear-gradient(135deg, #6e5c44 0%, #2c241a 100%); }
.sub-grid-card-photo.ph-pat-case     { background-image: linear-gradient(135deg, #7a6450 0%, #2e261e 100%); }
.sub-grid-card-photo.ph-pat-obiecte  { background-image: linear-gradient(135deg, #8a704e 0%, #382c1c 100%); }
.sub-grid-card-photo.ph-pat-mesteri  { background-image: linear-gradient(135deg, #7c5a3e 0%, #34241a 100%); }
.sub-grid-card-photo.ph-pat-costume  { background-image: linear-gradient(135deg, #6e3c30 0%, #2c1812 100%); }
.sub-grid-card-photo.ph-pat-fanfara  { background-image: linear-gradient(135deg, #5e4838 0%, #20161c 100%); }
.sub-grid-card-photo.ph-pat-arhiva   { background-image: linear-gradient(135deg, #4a423a 0%, #1a1614 100%); }
.sub-grid-card-photo.ph-pat-instr    { background-image: linear-gradient(135deg, #604030 0%, #261810 100%); }
.sub-grid-card-photo.ph-pat-monum    { background-image: linear-gradient(135deg, #5a4438 0%, #221814 100%); }

.sub-grid-card-photo.ph-foto-1900    { background-image: linear-gradient(135deg, #82786a 0%, #34302a 100%); }
.sub-grid-card-photo.ph-foto-interb  { background-image: linear-gradient(135deg, #6e5e48 0%, #2c241a 100%); }
.sub-grid-card-photo.ph-foto-comunist { background-image: linear-gradient(135deg, #4a3e30 0%, #181410 100%); }
.sub-grid-card-photo.ph-foto-familii { background-image: linear-gradient(135deg, #5e5044 0%, #221c16 100%); }
.sub-grid-card-photo.ph-foto-kirchw  { background-image: linear-gradient(135deg, #6c5040 0%, #281c14 100%); }
.sub-grid-card-photo.ph-foto-portrete { background-image: linear-gradient(135deg, #56463a 0%, #1c1612 100%); }
.sub-grid-card-photo.ph-foto-peisaj  { background-image: linear-gradient(135deg, #5a5040 0%, #1e1a14 100%); }
.sub-grid-card-photo.ph-foto-meserii { background-image: linear-gradient(135deg, #6e5040 0%, #281c14 100%); }
.sub-grid-card-photo.ph-foto-festiv  { background-image: linear-gradient(135deg, #503e34 0%, #1c1410 100%); }

/* Cultură · LIST featured placeholders */
.sub-list-featured-photo.ph-garana-cultural { background-image: linear-gradient(135deg, #5a4a36 0%, #20180e 100%); }
.sub-list-featured-photo.ph-brebu-cultural  { background-image: linear-gradient(135deg, #6e5a44 0%, #2c2014 100%); }

/* Turism · article hero gradients */
.sub-article-hero.ph-trasee   { background-image: linear-gradient(135deg, #6b7e58 0%, #2c3823 100%); }
.sub-article-hero.ph-via      { background-image: linear-gradient(135deg, #8a6648 0%, #38261c 100%); }
.sub-article-hero.ph-partia   { background-image: linear-gradient(135deg, #8da6b8 0%, #2a3e4a 100%); }
.sub-article-hero.ph-electric { background-image: linear-gradient(135deg, #4f6f7c 0%, #2C4A52 100%); }

/* Comunitate · article hero gradients */
.sub-article-hero.ph-radio    { background-image: linear-gradient(135deg, #7b6651 0%, #2e2418 100%); }
.sub-article-hero.ph-scoala   { background-image: linear-gradient(135deg, #8a7558 0%, #38301f 100%); }
.sub-article-hero.ph-viata    { background-image: linear-gradient(135deg, #6c5a44 0%, #2c2418 100%); }

/* Featured list placeholders */
.sub-list-featured-photo.ph-voluntari    { background-image: linear-gradient(135deg, #6b7e58 0%, #2c3823 100%); }
.sub-list-featured-photo.ph-interviu-mp  { background-image: linear-gradient(135deg, #62543f 0%, #281e10 100%); }
.sub-list-featured-photo.ph-tineret-fest { background-image: linear-gradient(135deg, #756040 0%, #2e2414 100%); }
.sub-list-featured-photo.ph-reteta-supa  { background-image: linear-gradient(135deg, #8c6444 0%, #38241a 100%); }

/* Istorie, Sezoane, Proiecte · article hero gradients */
.sub-article-hero.ph-istorie-foto { background-image: linear-gradient(135deg, #6e5e48 0%, #2c241a 100%); }
.sub-article-hero.ph-istorie-pat  { background-image: linear-gradient(135deg, #5e4c38 0%, #281e14 100%); }
.sub-article-hero.ph-primavara    { background-image: linear-gradient(170deg, #93a07d 0%, #4f5e3f 100%); }
.sub-article-hero.ph-vara         { background-image: linear-gradient(170deg, #8da66c 0%, #3f5333 100%); }
.sub-article-hero.ph-toamna       { background-image: linear-gradient(170deg, #b88751 0%, #5a3e1f 100%); }
.sub-article-hero.ph-iarna        { background-image: linear-gradient(170deg, #b0c3cb 0%, #4a606a 100%); }
.sub-article-hero.ph-infra        { background-image: linear-gradient(135deg, #4a5b6c 0%, #1a2230 100%); }
.sub-article-hero.ph-mediu        { background-image: linear-gradient(135deg, #5a7a52 0%, #1d2e1e 100%); }
.sub-article-hero.ph-cultura-proj { background-image: linear-gradient(135deg, #6e5240 0%, #2c1e14 100%); }

/* Featured list placeholders for these categories */
.sub-list-featured-photo.ph-doc-feature   { background-image: linear-gradient(135deg, #6c5640 0%, #2c2014 100%); }
.sub-list-featured-photo.ph-lista-proj    { background-image: linear-gradient(135deg, #5e6f88 0%, #20283a 100%); }
.sub-list-featured-body { padding: 24px 24px 26px; }
.sub-list-featured-eyebrow {
  display: block;
  font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--rustic-taupe); font-weight: 500; margin-bottom: 14px;
}
.sub-list-featured-title {
  font-size: 1.08rem; font-weight: 500;
  color: var(--essex); letter-spacing: -0.008em; line-height: 1.3;
  margin: 0 0 10px;
}
.sub-list-featured-desc {
  font-size: 0.9rem; line-height: 1.55;
  color: var(--text-soft); margin: 0 0 18px;
}
.sub-list-featured-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--essex); text-decoration: none; font-weight: 600;
  position: relative; padding-bottom: 4px;
  transition: color 0.25s ease;
}
.sub-list-featured-link::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--rustic-taupe);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease;
}
.sub-list-featured-link:hover { color: var(--rustic-taupe); }
.sub-list-featured-link:hover::after { transform: scaleX(1); }


/* ─────────────────────────────────────────────────────────────────────────
   §4i · SEASON CALLOUT  (used on sezoane/{primavara,vara,toamna,iarna}.html)
   Compact "CE VEI GĂSI" pattern: eyebrow + h2 + short lead + CTA link.
   Lives inside .sub-article-body wrapper for consistent column width.
   ───────────────────────────────────────────────────────────────────────── */
.sub-article-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rustic-taupe);
  font-weight: 500;
  margin-bottom: 16px;
}
.sub-article-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--rustic-taupe);
  opacity: 0.8;
}
.sub-article-more-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--essex);
  font-weight: 600;
  border-bottom: 1px solid var(--rustic-taupe);
  padding-bottom: 5px;
  transition: color 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}
.sub-article-more-link:hover {
  color: var(--rustic-taupe);
  border-color: var(--essex);
  gap: 14px;
}

/* Trasee montane gallery photos */
.sub-article-gallery-cell.ph-trasee-1::before { background-image: url('../assets/img/trasee/trasee-1.jpeg'); }
.sub-article-gallery-cell.ph-trasee-2::before { background-image: url('../assets/img/trasee/trasee-2.jpeg'); }
.sub-article-gallery-cell.ph-trasee-3::before { background-image: url('../assets/img/trasee/trasee-3.jpeg'); }
.sub-article-gallery-cell.ph-trasee-4::before { background-image: url('../assets/img/trasee/trasee-4.jpeg'); }
.sub-article-gallery-cell.ph-trasee-5::before { background-image: url('../assets/img/trasee/trasee-5.jpeg'); }


/* ─────────────────────────────────────────────────────────────────────────
   §4y · VIA TRANSILVANICA · Bornele section (stat-grid pe chantilly)
   ───────────────────────────────────────────────────────────────────────── */
.via-bornele {
  background: var(--chantilly);
  padding: clamp(80px, 11vh, 140px) clamp(20px, 4vw, 40px);
}
.via-bornele-inner { max-width: 1180px; margin: 0 auto; }
.via-bornele-header { text-align: center; margin-bottom: clamp(44px, 6vh, 68px); }
.via-bornele-eyebrow {
  display: inline-block;
  font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--rustic-taupe); font-weight: 500;
  margin-bottom: 14px;
}
.via-bornele-title {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 300; letter-spacing: -0.012em; line-height: 1.18;
  color: var(--essex); margin: 0 0 18px;
  max-width: 26ch; margin-left: auto; margin-right: auto;
}
.via-bornele-title em { font-style: normal; font-weight: 500; }
.via-bornele-lead {
  font-size: 1.02rem; line-height: 1.7;
  color: var(--text-base);
  max-width: 60ch;
  margin: 0 auto;
  text-align: center;
}
.via-bornele-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(22px, 3vw, 36px);
  margin: clamp(40px, 5vh, 60px) auto 0;
}
@media (max-width: 800px) {
  .via-bornele-grid { grid-template-columns: repeat(2, 1fr); }
}
.via-bornele-stat {
  background: var(--chantilly-pure);
  border: 1px solid var(--stone-hearth);
  padding: clamp(26px, 3vw, 36px) clamp(20px, 2vw, 26px);
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.via-bornele-stat-icon {
  width: 28px; height: 28px;
  color: var(--rustic-taupe);
  fill: none; stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.via-bornele-stat strong {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 300;
  color: var(--essex);
  letter-spacing: -0.006em;
  line-height: 1;
}
.via-bornele-stat small {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 500;
}
.via-bornele-coda {
  font-size: 1rem; line-height: 1.7;
  color: var(--text-base);
  margin: clamp(36px, 5vh, 56px) auto 0;
  max-width: 60ch;
  text-align: center;
  font-style: normal;
}


/* ─────────────────────────────────────────────────────────────────────────
   §4z · VIA TRANSILVANICA · brand-orange variant for hero stat icons
   The official "T" mark uses an unmistakable orange. Treat it like the
   Salvamont red: semantic exception to the Benjamin Moore palette.
   Combined selector beats the later `--icons` rule (same specificity).
   ───────────────────────────────────────────────────────────────────────── */
.sub-article-photo-hero-stats--icons.sub-article-photo-hero-stats--via .sub-article-photo-hero-stat svg {
  color: #E97725;
}

/* §4z.1 · Vivid forest-green wash on the photo hero (this page only).
   Pulls focal point higher up + boosts photo saturation/contrast so it
   reads "alive" without losing the cinematic feel. */
.sub-article-photo-hero--via .sub-article-photo-hero-bg {
  background-position: center 22%;
  filter: saturate(1.22) contrast(1.06);
}
.sub-article-photo-hero--via::after {
  background:
    linear-gradient(180deg,
      rgba(54, 100, 70, 0.30) 0%,
      rgba(54, 100, 70, 0.12) 32%,
      rgba(0, 0, 0, 0) 50%,
      rgba(15, 23, 18, 0.60) 80%,
      rgba(15, 23, 18, 0.85) 100%);
}


/* ─────────────────────────────────────────────────────────────────────────
   §4aa · VIA TRANSILVANICA · OVERVIEW MAP (intro text left + Romania map right)
   Same skeleton as §4w trasee-overview, dedicated styling.
   ───────────────────────────────────────────────────────────────────────── */
.via-overview {
  background: var(--chantilly-pure);
  padding: clamp(80px, 11vh, 140px) clamp(20px, 4vw, 40px);
  border-bottom: 1px solid var(--stone-hearth-soft);
}
.via-overview-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 440px) 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 960px) {
  .via-overview-inner { grid-template-columns: 1fr; }
}
.via-overview-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.via-overview-text p {
  font-size: 1.04rem;
  line-height: 1.72;
  color: var(--text-base);
  margin: 0;
}
.via-overview-map {
  position: relative;
  background: var(--chantilly-pure);
  border: 1px solid var(--stone-hearth);
  padding: clamp(12px, 1.5vw, 20px);
  box-shadow: 0 18px 44px rgba(15,23,18,0.08);
  overflow: hidden;
}
.via-overview-map svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Tertiary underlined link (mirrors §10.3 + .trasee-overview-link styling) */
.via-overview-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 0 0 4px;
  border: none;
  border-bottom: 1px solid var(--essex);
  color: var(--essex);
  background: transparent;
  text-decoration: none;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  align-self: flex-start;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.via-overview-link:hover {
  color: var(--rustic-taupe);
  border-bottom-color: var(--rustic-taupe);
}

/* §4aa.1 · Leaflet GPX map – replaces the SVG overview map */
.via-overview-map--leaflet {
  padding: 0;
  overflow: hidden;
}
.via-gpx-map {
  width: 100%;
  height: clamp(360px, 50vh, 520px);
  background: var(--chantilly-pure);
  position: relative;
}
.via-gpx-map .maplibregl-canvas { outline: none; }
.via-gpx-map .maplibregl-ctrl-attrib {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--rustic-taupe);
}
.via-gpx-map .maplibregl-ctrl-attrib a { color: var(--essex); }
/* Foot row under the map: download button + source credit */
.via-gpx-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  padding: 14px 16px 4px;
}
.via-gpx-credit {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--rustic-taupe);
}
.via-gpx-credit a {
  color: var(--essex);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.via-gpx-credit a:hover { color: var(--rustic-taupe); }

/* Download .gpx button */
.via-gpx-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 18px;
  background: var(--essex);
  color: var(--chantilly-pure);
  text-decoration: none;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--essex);
  transition: background 0.3s ease, color 0.3s ease;
}
.via-gpx-download:hover {
  background: var(--chantilly-pure);
  color: var(--essex);
}
.via-gpx-download svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.via-gpx-download em {
  font-style: normal;
  letter-spacing: 0.08em;
}
/* Start / end pins for the GPX track (CSS-only, no PNG markers) */
.via-gpx-pin {
  display: flex;
  align-items: center;
  justify-content: center;
}
.via-gpx-pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid #F7F6F1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.via-gpx-pin--start .via-gpx-pin-dot { background: var(--essex); }
.via-gpx-pin--end .via-gpx-pin-dot { background: #E97725; }


/* ─────────────────────────────────────────────────────────────────────────
   §4j · SEASON PHOTO-HERO TINT VARIANTS
   Extends `.sub-article-photo-hero::after` with a third gradient layer
   carrying the season colour (≈35% peak, fades diagonally to transparent).
   Photo still dominates; identity hint reinforces season-band cards.
   Palette mirrors `.season-band-card--<season>` (§4g) for consistency.
   ───────────────────────────────────────────────────────────────────────── */
.sub-article-photo-hero--primavara::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.82) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 28%),
    linear-gradient(135deg, rgba(139, 107, 71, 0.38) 0%, rgba(139, 107, 71, 0.16) 45%, rgba(139, 107, 71, 0.04) 70%, transparent 100%);
}
.sub-article-photo-hero--vara::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.82) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 28%),
    linear-gradient(135deg, rgba(53, 84, 71, 0.38) 0%, rgba(53, 84, 71, 0.16) 45%, rgba(53, 84, 71, 0.04) 70%, transparent 100%);
}
.sub-article-photo-hero--toamna::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.82) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 28%),
    linear-gradient(135deg, rgba(147, 80, 36, 0.38) 0%, rgba(147, 80, 36, 0.16) 45%, rgba(147, 80, 36, 0.04) 70%, transparent 100%);
}
.sub-article-photo-hero--iarna::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.82) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 28%),
    linear-gradient(135deg, rgba(63, 84, 105, 0.38) 0%, rgba(63, 84, 105, 0.16) 45%, rgba(63, 84, 105, 0.04) 70%, transparent 100%);
}

/* Center hero content vertically when there's no stats overlay (sezoane pages).
   Default .sub-article-photo-hero is flex-end so title sits near the bottom;
   without stats the empty space above looks awkward – center the stack. */
.sub-article-photo-hero--primavara,
.sub-article-photo-hero--vara,
.sub-article-photo-hero--toamna,
.sub-article-photo-hero--iarna { align-items: center; }

/* Push the "Ce vei găsi" callout down a bit when it follows the season-tabs */
.season-tabs + .sub-article-body { margin-top: clamp(56px, 9vh, 96px); }


/* ─────────────────────────────────────────────────────────────────────────
   §4m · GALLERY LIGHTBOX (driven by js/lightbox.js)
   Intercepts gallery cell clicks → full-screen overlay with prev/next/esc.
   Built dynamically once per session; toggles `hidden` to show/hide.
   ───────────────────────────────────────────────────────────────────────── */
.lightbox-overlay[hidden] { display: none !important; }
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(8, 12, 10, 0.65);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 64px);
  animation: lightboxFadeIn 0.22s ease-out;
}
@keyframes lightboxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lightbox-figure {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.lightbox-image {
  display: block;
  max-width: min(100%, 1400px);
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #0c100e;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  animation: lightboxImgFade 0.25s ease-out;
}
@keyframes lightboxImgFade {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}
.lightbox-caption {
  color: rgba(247, 246, 241, 0.78);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
  margin: 0;
  max-width: 70ch;
}
.lightbox-btn {
  position: absolute;
  z-index: 2; /* sit above .lightbox-figure (z-index:auto) – prev arrow was painted under the photo */
  background: rgba(247, 246, 241, 0.06);
  border: 1px solid rgba(247, 246, 241, 0.32);
  color: var(--chantilly-pure);
  cursor: pointer;
  width: 52px;
  height: 52px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  border-radius: 2px;
}
.lightbox-btn:hover {
  background: rgba(247, 246, 241, 0.18);
  border-color: rgba(247, 246, 241, 0.7);
}
.lightbox-btn:focus-visible {
  outline: 2px solid var(--rustic-taupe-light);
  outline-offset: 4px;
}
.lightbox-btn[hidden] { display: none !important; }
.lightbox-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lightbox-close { top: clamp(16px, 3vh, 32px); right: clamp(16px, 3vw, 40px); }
.lightbox-prev  { left: clamp(16px, 3vw, 40px); top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: clamp(16px, 3vw, 40px); top: 50%; transform: translateY(-50%); }
.lightbox-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox-next:hover { transform: translateY(-50%) translateX(3px); }

@media (max-width: 640px) {
  .lightbox-overlay { padding: 14px; }
  .lightbox-btn { width: 44px; height: 44px; }
  .lightbox-btn svg { width: 18px; height: 18px; }
  .lightbox-close { top: 14px; right: 14px; }
  .lightbox-prev { left: 12px; }
  .lightbox-next { right: 12px; }
  .lightbox-image { max-height: 76vh; }
  .lightbox-caption { font-size: 0.7rem; letter-spacing: 0.10em; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox-overlay, .lightbox-image { animation: none; }
  .lightbox-prev:hover, .lightbox-next:hover { transform: translateY(-50%); }
}

.sub-article-gallery a.sub-article-gallery-cell { cursor: zoom-in; }


/* ─────────────────────────────────────────────────────────────────────────
   §4n · ARTICLE "În curând" BANNER (top-of-page draft notice)
   Rendered before <article> on pages whose hub tile carries is-soon.
   Signals to visitors arriving via a direct/shared URL that the content
   is still in preparation. Pure visual; no behavioural effect on links.
   ───────────────────────────────────────────────────────────────────────── */
.sub-article-soon-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px clamp(20px, 4vw, 36px);
  background: linear-gradient(180deg, rgba(194,181,160,0.18), rgba(194,181,160,0.06));
  border-top: 1px solid rgba(194,181,160,0.45);
  border-bottom: 1px solid rgba(194,181,160,0.45);
  color: var(--essex);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
}
.sub-article-soon-banner::before {
  content: '';
  display: inline-block;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rustic-taupe);
  box-shadow: 0 0 0 3px rgba(194,181,160,0.18);
  animation: pulseSoonBanner 2.2s ease-in-out infinite;
}
@keyframes pulseSoonBanner {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .sub-article-soon-banner::before { animation: none; }
}
@media (max-width: 600px) {
  .sub-article-soon-banner {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    padding: 12px 16px;
    gap: 10px;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   §4o · TRAIL CATALOG – used on turism/trasee.html
   Card grid with marker chip, stats and description.
   ───────────────────────────────────────────────────────────────────────── */
.trasee-catalog {
  background: var(--chantilly);
  padding: clamp(80px, 11vh, 140px) clamp(20px, 4vw, 40px);
}
.trasee-catalog-inner { max-width: 1180px; margin: 0 auto; }
.trasee-catalog-header { text-align: center; margin-bottom: clamp(44px, 6vh, 68px); }
.trasee-catalog-eyebrow {
  display: inline-block;
  font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--rustic-taupe); font-weight: 500;
  margin-bottom: 14px;
}
.trasee-catalog-title {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 300; letter-spacing: -0.012em; line-height: 1.18;
  color: var(--essex); margin: 0;
  max-width: 24ch; margin-left: auto; margin-right: auto;
}
.trasee-catalog-title em { font-style: normal; font-weight: 500; }

.trasee-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3vw, 34px);
}
@media (max-width: 960px) {
  .trasee-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .trasee-grid { grid-template-columns: 1fr; }
}

.trasee-card {
  background: var(--chantilly-pure);
  padding: 0;
  border: 1px solid var(--stone-hearth-soft);
  display: flex; flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .trasee-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(15,23,18,0.10);
  }
}

.trasee-card-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #2C4A52;
}

.trasee-card-body {
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.trasee-card-marker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.trasee-card-marker-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: white;
  font-size: 0.82rem;
  font-weight: 600;
  flex-shrink: 0;
}
.trasee-card-marker-num--1,
.trasee-card-marker-num--2,
.trasee-card-marker-num--3 { background: var(--rustic-taupe); }
.trasee-card-marker-num--4,
.trasee-card-marker-num--5,
.trasee-card-marker-num--6 { background: var(--essex); }
.trasee-card-marker-label {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-soft);
}

.trasee-card h3 {
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--essex);
  line-height: 1.3;
  margin: 0 0 8px;
}
.trasee-card-route {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-soft);
  margin: 0 0 22px;
}

.trasee-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 22px 0;
  padding: 22px 0;
  border-top: 1px solid var(--stone-hearth-soft);
  border-bottom: 1px solid var(--stone-hearth-soft);
}
.trasee-card-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.trasee-card-stat-icon {
  width: 24px;
  height: 24px;
  color: var(--essex);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 4px;
  opacity: 0.7;
}
.trasee-card-stat-value {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--essex);
  line-height: 1;
  letter-spacing: -0.004em;
}
.trasee-card-stat-label {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.trasee-card-desc {
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--text-base);
  margin: 0;
  flex: 1;
}

.trasee-card-season {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--rustic-taupe); font-weight: 500;
  margin-top: 22px;
}
.trasee-card-season::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--rustic-taupe);
}


/* ─────────────────────────────────────────────────────────────────────────
   §4p · FEATURED TRAIL – dark green bg, text left, photo right
   ───────────────────────────────────────────────────────────────────────── */
.trasee-featured {
  background: linear-gradient(135deg, var(--essex) 0%, #0F1712 100%);
  color: var(--chantilly-pure);
  padding: 0;
}
.trasee-featured-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 0;
  align-items: stretch;
  min-height: clamp(380px, 50vh, 500px);
}
@media (max-width: 800px) {
  .trasee-featured-inner { grid-template-columns: 1fr; }
}

.trasee-featured-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 7vh, 80px) clamp(28px, 5vw, 72px);
}
.trasee-featured-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rustic-taupe-light);
  font-weight: 500;
  margin-bottom: 18px;
}
.trasee-featured-title {
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  font-weight: 300;
  letter-spacing: -0.012em;
  line-height: 1.22;
  color: var(--chantilly-pure);
  margin: 0 0 22px;
}
.trasee-featured-title em { font-style: normal; font-weight: 500; }
.trasee-featured-desc {
  font-size: 1rem;
  line-height: 1.72;
  color: var(--chantilly-pure);
  opacity: 0.86;
  margin: 0 0 32px;
  max-width: 50ch;
}
.trasee-featured-stats {
  display: flex;
  gap: clamp(28px, 4vw, 52px);
  flex-wrap: wrap;
}
.trasee-featured-stat {
  display: flex;
  align-items: center;
  gap: 14px;
}
.trasee-featured-stat-icon {
  width: 30px;
  height: 30px;
  color: var(--rustic-taupe-light);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.trasee-featured-stat-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.trasee-featured-stat-value {
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--chantilly-pure);
  line-height: 1;
  letter-spacing: -0.006em;
}
.trasee-featured-stat-label {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rustic-taupe-light);
  opacity: 0.9;
}

.trasee-featured-visual {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: #2C4A52;
  min-height: clamp(280px, 38vh, 500px);
  filter: saturate(1.28) contrast(1.10);
}
/* Stronger left-edge fade into the dark band + vivid forest-green top wash */
.trasee-featured-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(31, 45, 39, 0.70) 0%,
      rgba(31, 45, 39, 0.30) 12%,
      rgba(31, 45, 39, 0) 35%),
    linear-gradient(180deg,
      rgba(54, 100, 70, 0.24) 0%,
      rgba(54, 100, 70, 0.06) 40%,
      rgba(0, 0, 0, 0) 65%);
  pointer-events: none;
  z-index: 1;
}
/* Bottom vignette + right-edge fall-off for cinematic depth */
.trasee-featured-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0) 55%,
      rgba(15, 23, 18, 0.42) 100%),
    radial-gradient(ellipse at 75% 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0.20) 100%);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 800px) {
  .trasee-featured-visual { min-height: 340px; }
}

/* §4p.1 · Featured visual hosts a cinematic video instead of a still photo.
   Vivid filter (saturate + contrast) gives it the "alive" feel.
   Fade-in via JS-added .is-ready avoids the abrupt start. */
.trasee-featured-visual--video {
  overflow: hidden;
  background-color: var(--essex);
}
.trasee-featured-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(1.24) contrast(1.08);
  opacity: 0;
  transition: opacity 1.8s ease;
}
.trasee-featured-video.is-ready { opacity: 1; }
/* Soft left-edge fade into the dark band + subtle forest-green top tint */
.trasee-featured-visual--video::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(31,45,39,0.45) 0%, rgba(31,45,39,0) 18%),
    linear-gradient(180deg, rgba(54,100,70,0.16) 0%, rgba(0,0,0,0) 32%);
  z-index: 2;
  pointer-events: none;
}
/* Soft bottom vignette for cinematic feel */
.trasee-featured-visual--video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(0,0,0,0.32) 100%);
  z-index: 2;
  pointer-events: none;
}

/* §4p.2 · Italic lead under the title (Drumul Crucii subtitle) */
.trasee-featured-lead {
  margin: -8px 0 16px;
  font-style: italic;
  font-size: 1.16rem;
  line-height: 1.5;
  color: rgba(247, 246, 241, 0.86);
}
@media (max-width: 800px) {
  .trasee-featured-lead { font-size: 1.06rem; }
}

/* §4p.3 · Three-line emphatic coda at the bottom of the text block */
.trasee-featured-coda {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(247, 246, 241, 0.14);
}
.trasee-featured-coda p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(247, 246, 241, 0.78);
  font-style: italic;
}
.trasee-featured-coda p + p { margin-top: 4px; }
.trasee-featured-visual-map {
  position: absolute;
  bottom: clamp(14px, 2vw, 22px);
  right: clamp(14px, 2vw, 22px);
  background: rgba(247, 246, 241, 0.96);
  padding: 14px;
  width: clamp(120px, 22%, 168px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
  border: 1px solid rgba(15,23,18,0.06);
}
.trasee-featured-visual-map svg { width: 100%; height: auto; display: block; }
.trasee-featured-visual-map-label {
  display: block;
  margin-top: 6px;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-align: center;
}


/* ─────────────────────────────────────────────────────────────────────────
   §4q · SAFETY BAND – light bg + red SALVAMONT call-out + icon tips
   ───────────────────────────────────────────────────────────────────────── */
.trasee-safety {
  background: var(--chantilly-pure);
  color: var(--text-base);
  padding: clamp(80px, 10vh, 130px) clamp(20px, 4vw, 40px);
}
.trasee-safety-inner { max-width: 1180px; margin: 0 auto; }
.trasee-safety-header {
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--stone-hearth-soft);
}
.trasee-safety-eyebrow {
  font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--rustic-taupe); font-weight: 500;
  display: block; margin-bottom: 12px;
}
.trasee-safety-title {
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  font-weight: 300; margin: 0;
  letter-spacing: -0.008em; line-height: 1.22;
  color: var(--essex);
}
.trasee-safety-title em { font-style: normal; font-weight: 500; color: var(--rustic-taupe); }
.trasee-safety-emergency {
  display: flex; align-items: center; gap: 16px;
  background: var(--chantilly-pure);
  padding: 14px 24px;
  border: 1.5px solid #C9272D;
}
.trasee-safety-emergency-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #C9272D;
  border-radius: 50%;
  color: #C9272D; flex-shrink: 0;
}
.trasee-safety-emergency-icon svg { width: 22px; height: 22px; fill: currentColor; }
.trasee-safety-emergency-text { display: flex; flex-direction: column; gap: 3px; }
.trasee-safety-emergency-label {
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 500;
}
.trasee-safety-emergency-number {
  font-size: 1.2rem; font-weight: 600;
  letter-spacing: 0.04em;
}
.trasee-safety-emergency-number a {
  color: #C9272D; text-decoration: none;
}
.trasee-safety-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(22px, 3vw, 40px);
}
.trasee-safety-item {
  display: flex; flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.trasee-safety-item-icon {
  width: 32px; height: 32px;
  color: var(--essex);
  fill: none; stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 2px;
}
.trasee-safety-item-num {
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--rustic-taupe); font-weight: 500;
}
.trasee-safety-item h4 {
  font-size: 1.02rem; font-weight: 500;
  margin: 0; letter-spacing: -0.004em;
  line-height: 1.32;
  color: var(--essex);
}
.trasee-safety-item p {
  font-size: 0.9rem; line-height: 1.62;
  margin: 0;
  color: var(--text-base);
}


/* ─────────────────────────────────────────────────────────────────────────
   §4r · APPS PANEL – title left, 4 link cards right
   ───────────────────────────────────────────────────────────────────────── */
.trasee-apps {
  background: var(--chantilly);
  padding: clamp(72px, 9vh, 110px) clamp(20px, 4vw, 40px);
}
.trasee-apps-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 900px) {
  .trasee-apps-inner { grid-template-columns: 1fr; }
}
.trasee-apps-header {
  text-align: left;
  margin-bottom: 0;
}
.trasee-apps-eyebrow {
  display: block;
  font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--rustic-taupe); font-weight: 500;
  margin-bottom: 14px;
}
.trasee-apps-title {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 300; color: var(--essex);
  margin: 0; letter-spacing: -0.008em;
}
.trasee-apps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1000px) {
  .trasee-apps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .trasee-apps-grid { grid-template-columns: 1fr; }
}
.trasee-apps-link {
  background: var(--chantilly-pure);
  border: 1px solid var(--stone-hearth);
  padding: 16px 20px;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: background 0.3s ease, color 0.3s ease;
}
.trasee-apps-link:hover {
  background: var(--essex);
  color: var(--chantilly);
}
.trasee-apps-link:hover .trasee-apps-link-name { color: var(--chantilly); }
.trasee-apps-link:hover .trasee-apps-link-desc { color: var(--chantilly); opacity: 0.7; }
.trasee-apps-link:hover .trasee-apps-link-icon svg { stroke: var(--chantilly); }
.trasee-apps-link:hover .trasee-apps-link-arrow { color: var(--chantilly); }
.trasee-apps-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--essex);
  flex-shrink: 0;
  transition: border-color 0.3s ease;
}
.trasee-apps-link:hover .trasee-apps-link-icon { border-color: var(--chantilly); }
.trasee-apps-link-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--essex);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s ease;
}
.trasee-apps-link-text {
  flex: 1;
  min-width: 0;
}
.trasee-apps-link-name {
  display: block;
  font-size: 0.92rem; font-weight: 500;
  color: var(--essex);
}
.trasee-apps-link-desc {
  display: block;
  font-size: 0.72rem; color: var(--text-soft);
  margin-top: 3px;
  line-height: 1.35;
}
.trasee-apps-link-arrow {
  font-size: 1rem; color: var(--rustic-taupe);
  flex-shrink: 0;
}


/* §4r1 · GALLERY side-layout modifier (title left, photos right) */
.sub-article-gallery--side .sub-article-gallery-inner {
  max-width: 1280px;
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.sub-article-gallery--side .sub-article-gallery-header {
  text-align: left;
  margin-bottom: 0;
  max-width: none;
}
.sub-article-gallery--side .sub-article-gallery-header h2 { text-align: left; }
.sub-article-gallery--side .sub-article-gallery-lead {
  text-align: left;
  max-width: 30ch;
  margin: 14px 0 0;
}
.sub-article-gallery--side .sub-article-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.sub-article-gallery--side .sub-article-gallery-cell {
  aspect-ratio: 1 / 1;
}
@media (max-width: 1100px) {
  .sub-article-gallery--side .sub-article-gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 900px) {
  .sub-article-gallery--side .sub-article-gallery-inner {
    grid-template-columns: 1fr;
  }
  .sub-article-gallery--side .sub-article-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 500px) {
  .sub-article-gallery--side .sub-article-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   §4s · BIG TRAILS MAP – stylized SVG + legend, full-width section
   Sits between intro body and catalog.
   ───────────────────────────────────────────────────────────────────────── */
.trasee-map {
  background: var(--chantilly-pure);
  padding: clamp(64px, 9vh, 100px) clamp(20px, 4vw, 40px);
  border-top: 1px solid var(--stone-hearth-soft);
  border-bottom: 1px solid var(--stone-hearth-soft);
}
.trasee-map-inner { max-width: 1180px; margin: 0 auto; }
.trasee-map-header { text-align: center; margin-bottom: clamp(36px, 5vh, 56px); }
.trasee-map-eyebrow {
  display: inline-block;
  font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--rustic-taupe); font-weight: 500;
  margin-bottom: 14px;
}
.trasee-map-title {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 300; letter-spacing: -0.012em; line-height: 1.2;
  color: var(--essex); margin: 0;
  max-width: 24ch; margin-left: auto; margin-right: auto;
}
.trasee-map-title em { font-style: normal; font-weight: 500; }
.trasee-map-svg-wrap {
  position: relative;
  background: linear-gradient(180deg, #C8DCC8 0%, #DFE6D2 50%, #EEE7D6 100%);
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid var(--stone-hearth-soft);
  box-shadow: 0 18px 44px rgba(15,23,18,0.08);
  margin-bottom: clamp(28px, 4vh, 44px);
}
.trasee-map-svg-wrap svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
}

.trasee-map-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px 28px;
  max-width: 980px;
  margin: 0 auto;
}
.trasee-map-legend-item {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.84rem;
  color: var(--text-base);
}
.trasee-map-legend-line {
  display: inline-block;
  flex-shrink: 0;
  width: 36px; height: 4px;
  border-radius: 2px;
  position: relative;
}
.trasee-map-legend--banda-rosie .trasee-map-legend-line { background: #C9272D; }
.trasee-map-legend--banda-albastra .trasee-map-legend-line { background: #2657A8; }
.trasee-map-legend--punct-rosu .trasee-map-legend-line {
  background: repeating-linear-gradient(to right, #C9272D 0, #C9272D 4px, transparent 4px, transparent 8px);
}
.trasee-map-legend--local .trasee-map-legend-line {
  background: repeating-linear-gradient(to right, var(--rustic-taupe) 0, var(--rustic-taupe) 6px, transparent 6px, transparent 10px);
}
.trasee-map-legend--lac .trasee-map-legend-line {
  background: #9CC4DA;
  border: 1px solid #3D88B5;
  height: 8px;
  border-radius: 3px;
}
.trasee-map-legend-text {
  font-size: 0.84rem;
  color: var(--essex);
}
.trasee-map-legend-text small {
  display: block;
  font-size: 0.7rem;
  color: var(--text-soft);
  letter-spacing: 0.02em;
  margin-top: 1px;
}


/* ─────────────────────────────────────────────────────────────────────────
   §4t · CLOSING CTA – extends sub-article-closing with a final button
   ───────────────────────────────────────────────────────────────────────── */
.sub-article-closing-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(28px, 4vh, 40px);
  padding: 16px clamp(28px, 4vw, 38px);
  background: var(--essex);
  color: var(--chantilly-pure);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--essex);
  transition: background 0.25s ease, color 0.25s ease, padding 0.25s ease;
}
.sub-article-closing-cta:hover {
  background: var(--rustic-taupe);
  border-color: var(--rustic-taupe);
  padding-left: clamp(34px, 5vw, 46px);
}
.sub-article-closing-cta:focus-visible {
  outline: 2px solid var(--rustic-taupe-light);
  outline-offset: 4px;
}
.sub-article-closing-cta-arrow {
  font-size: 1.1rem;
  line-height: 1;
}


/* ─────────────────────────────────────────────────────────────────────────
   §4u · HERO CTA – inverse button on dark photo hero (skill §10.4)
   Chantilly bg + Essex text, sharp corners, .16em uppercase.
   ───────────────────────────────────────────────────────────────────────── */
.sub-article-photo-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: clamp(22px, 3vh, 32px) 0 clamp(28px, 4vh, 44px);
  padding: 16px 32px;
  background: var(--chantilly);
  color: var(--essex);
  text-decoration: none;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  border: none;
  transition: background 0.3s ease, color 0.3s ease;
  align-self: flex-start;
  width: fit-content;
}
.sub-article-photo-hero-cta:hover {
  background: var(--essex-light);
  color: var(--chantilly);
}
.sub-article-photo-hero-cta:focus-visible {
  outline: 2px solid var(--rustic-taupe-light);
  outline-offset: 4px;
}


/* §4v · STATS with icons variant (used on hero of trasee) */
.sub-article-photo-hero-stats--icons .sub-article-photo-hero-stat {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
.sub-article-photo-hero-stats--icons .sub-article-photo-hero-stat svg {
  width: 30px; height: 30px;
  color: var(--rustic-taupe-light);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.sub-article-photo-hero-stats--icons .sub-article-photo-hero-stat-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}


/* ─────────────────────────────────────────────────────────────────────────
   §4w · OVERVIEW SECTION – body intro (left) + big map with list (right)
   Replaces the old standalone .trasee-map + body intro flow.
   ───────────────────────────────────────────────────────────────────────── */
.trasee-overview {
  background: var(--chantilly-pure);
  padding: clamp(80px, 11vh, 140px) clamp(20px, 4vw, 40px);
  border-bottom: 1px solid var(--stone-hearth-soft);
}
.trasee-overview-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 960px) {
  .trasee-overview-inner { grid-template-columns: 1fr; }
}
.trasee-overview-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.trasee-overview-text p {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--text-base);
  margin: 0;
}
.trasee-overview-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 0 0 4px;
  border: none;
  border-bottom: 1px solid var(--essex);
  color: var(--essex);
  background: transparent;
  text-decoration: none;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  align-self: flex-start;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.trasee-overview-link:hover {
  color: var(--rustic-taupe);
  border-bottom-color: var(--rustic-taupe);
}

.trasee-overview-map {
  position: relative;
  background: var(--chantilly-pure);
  border: 1px solid var(--stone-hearth);
  padding: clamp(12px, 1.5vw, 20px);
  box-shadow: 0 18px 44px rgba(15,23,18,0.08);
  overflow: hidden;
}
.trasee-overview-map svg {
  width: 100%; height: auto; display: block;
}

.trasee-overview-map-list {
  position: absolute;
  top: clamp(20px, 3%, 36px);
  left: clamp(20px, 3%, 36px);
  background: var(--chantilly-pure);
  padding: 18px 22px;
  box-shadow: 0 10px 24px rgba(15,23,18,0.08);
  z-index: 3;
  max-width: clamp(180px, 32%, 240px);
  border: 1px solid var(--stone-hearth-soft);
}
.trasee-overview-map-list ol {
  list-style: none;
  padding: 0; margin: 0;
}
.trasee-overview-map-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  font-size: 0.82rem;
  color: var(--essex);
  line-height: 1.3;
}
.trasee-overview-map-list-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  flex-shrink: 0;
}
.trasee-overview-map-list-num--1,
.trasee-overview-map-list-num--2,
.trasee-overview-map-list-num--3 { background: var(--rustic-taupe); }
.trasee-overview-map-list-num--4,
.trasee-overview-map-list-num--5,
.trasee-overview-map-list-num--6 { background: var(--essex); }

@media (max-width: 600px) {
  .trasee-overview-map-list {
    position: static;
    max-width: 100%;
    margin-bottom: 14px;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   §4x · CTA BAND – full-width dark closing replacement
   ───────────────────────────────────────────────────────────────────────── */
.sub-article-cta-band {
  background: linear-gradient(135deg, var(--essex) 0%, #0F1712 100%);
  color: var(--chantilly-pure);
  padding: clamp(48px, 7vh, 80px) clamp(20px, 4vw, 40px);
}
.sub-article-cta-band-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 760px) {
  .sub-article-cta-band-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
.sub-article-cta-band-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sub-article-cta-band-text h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 300;
  letter-spacing: -0.012em;
  line-height: 1.18;
  margin: 0;
}
.sub-article-cta-band-text p {
  font-size: 0.94rem;
  line-height: 1.62;
  margin: 0;
  opacity: 0.84;
  max-width: 60ch;
}
.sub-article-cta-band-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 32px;
  background: var(--chantilly);
  color: var(--essex);
  text-decoration: none;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  border: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.sub-article-cta-band-button:hover {
  background: var(--essex-light);
  color: var(--chantilly);
}
.sub-article-cta-band-button:focus-visible {
  outline: 2px solid var(--rustic-taupe-light);
  outline-offset: 4px;
}
@media (max-width: 760px) {
  .sub-article-cta-band-button { justify-self: center; }
}


/* ─────────────────────────────────────────────────────────────────────────
   §4k · HERO TOOLBAR + SUBTITLE + CTA
   Replaces the stats overlay on sezoane sub-pages with:
   - Top toolbar (eyebrow + position + reading time + "Toate anotimpurile" pill)
   - Decorative season icon above title
   - Italic subtitle below title
   - Outlined CTA button at the bottom
   ───────────────────────────────────────────────────────────────────────── */
.sub-article-photo-hero-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(60px, 12vh, 110px);
  flex-wrap: wrap;
}
.sub-article-photo-hero-toolbar .sub-article-meta { margin: 0; }
.sub-article-photo-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--chantilly-pure);
  color: var(--essex);
  padding: 11px 18px;
  text-decoration: none;
  font-size: 0.66rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background 0.25s ease, color 0.25s ease;
}
.sub-article-photo-hero-pill:hover {
  background: var(--rustic-taupe-light);
  color: var(--essex);
}
.sub-article-photo-hero-pill svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.sub-article-photo-hero-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  color: var(--chantilly-pure);
  margin-bottom: 22px;
  opacity: 0.88;
}
.sub-article-photo-hero-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sub-article-subtitle {
  font-family: "Helvetica Neue", "HelveticaNeue", "Helvetica Neue LT", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.55rem);
  font-weight: 400;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.94);
  letter-spacing: 0.005em;
  margin: 10px 0 28px;
  max-width: 32ch;
}
.sub-article-photo-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  color: var(--chantilly-pure);
  padding: 14px 26px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background 0.25s ease, border-color 0.25s ease;
  margin-top: 26px;
}
.sub-article-photo-hero-cta:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.95);
}
.sub-article-photo-hero-cta svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}


/* ─────────────────────────────────────────────────────────────────────────
   §4l · SEASON TABS STRIP (immediately below the photo-hero)
   Four side-by-side tabs (icon + name + descriptor). Active tab has a taupe
   underline accent and rust-coloured name. Hairline dividers between tabs.
   ───────────────────────────────────────────────────────────────────────── */
.season-tabs {
  background: var(--chantilly);
  padding: 28px 32px;
  border-bottom: 1px solid var(--stone-hearth-soft);
}
.season-tabs-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.season-tab {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 18px 22px;
  text-decoration: none;
  color: var(--essex);
  border-bottom: 2px solid transparent;
  transition: background 0.22s ease, border-color 0.22s ease;
  position: relative;
}
.season-tab + .season-tab::before {
  content: '';
  position: absolute;
  top: 22%;
  bottom: 22%;
  left: 0;
  width: 1px;
  background: var(--stone-hearth-soft);
}
.season-tab:hover { background: rgba(0, 0, 0, 0.02); }
.season-tab.is-active { border-bottom-color: var(--rustic-taupe); }
.season-tab.is-active .season-tab-name { color: var(--rustic-taupe); }
.season-tab-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--rustic-taupe);
}
.season-tab-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.season-tab-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.season-tab-name {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--essex);
  transition: color 0.22s ease;
}
.season-tab-desc {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.55;
  color: var(--rustic-taupe);
  opacity: 0.82;
  font-weight: 500;
}

@media (max-width: 880px) {
  .season-tabs-inner { grid-template-columns: repeat(2, 1fr); }
  .season-tab + .season-tab::before { display: none; }
  .season-tab { border-bottom: 1px solid var(--stone-hearth-soft); }
  .season-tab.is-active { border-bottom-color: var(--rustic-taupe); }
}
@media (max-width: 480px) {
  .season-tabs-inner { grid-template-columns: 1fr; }
  .season-tabs { padding: 18px 16px; }
}


/* ─────────────────────────────────────────────────────────────────────────
   §4g · SEASON BAND CARDS  (hub Anotimpuri)
   Wide horizontal banners stacked; each shows a season photo with a
   season-colored gradient overlay fading left→right. Title + lead + CTA
   live on the left over the tinted area.
   ───────────────────────────────────────────────────────────────────────── */
.season-band-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 980px;
  margin: 36px auto 0;
  padding: 0 24px;
}
.season-band-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--chantilly-pure);
  height: clamp(380px, 48vh, 480px);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--essex);
  transition: transform 0.3s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.3s ease;
}
.season-band-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}
.season-band-card-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  transition: transform 1.2s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.season-band-card:hover .season-band-card-photo { transform: scale(1.06); }
.season-band-card-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.season-band-card-content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 44px 48px;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
}
.season-band-card-icon {
  width: 36px;
  height: 36px;
  opacity: 0.88;
  margin-bottom: 10px;
}
.season-band-card-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.season-band-card-title {
  font-family: "Helvetica Neue", "HelveticaNeue", "Helvetica Neue LT", Helvetica, Arial, sans-serif;
  font-size: clamp(32px, 3.3vw, 42px);
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 6px;
  color: inherit;
}
.season-band-card-eyebrow {
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.20em;
  font-weight: 600;
  opacity: 0.82;
  margin-bottom: 22px;
}
.season-band-card-lead {
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 28px;
  max-width: 420px;
  opacity: 0.95;
}
.season-band-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  font-weight: 600;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  color: inherit;
  align-self: flex-start;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.season-band-card-btn-arrow {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.season-band-card:hover .season-band-card-btn {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.9);
}
.season-band-card:hover .season-band-card-btn-arrow { transform: translateX(3px); }

/* Hover · unify text tone to chantilly cream + full opacity */
.season-band-card:hover .season-band-card-title,
.season-band-card:hover .season-band-card-eyebrow,
.season-band-card:hover .season-band-card-lead,
.season-band-card:hover .season-band-card-btn,
.season-band-card:hover .season-band-card-icon {
  color: var(--chantilly-pure);
  opacity: 1;
}

/* Season variants – light decorative overlay only.
   The photo dominates. Text legibility comes from text-shadow on .content,
   plus a soft season tint that hints at the colour palette without masking
   the photograph. */
.season-band-card--primavara .season-band-card-overlay {
  background: linear-gradient(105deg, rgba(139, 107, 71, 0.42) 0%, rgba(139, 107, 71, 0.22) 38%, rgba(139, 107, 71, 0.04) 65%, transparent 100%);
}
.season-band-card--vara .season-band-card-overlay {
  background: linear-gradient(105deg, rgba(53, 84, 71, 0.42) 0%, rgba(53, 84, 71, 0.22) 38%, rgba(53, 84, 71, 0.04) 65%, transparent 100%);
}
.season-band-card--toamna .season-band-card-overlay {
  background: linear-gradient(105deg, rgba(147, 80, 36, 0.42) 0%, rgba(147, 80, 36, 0.22) 38%, rgba(147, 80, 36, 0.04) 65%, transparent 100%);
}
.season-band-card--iarna .season-band-card-overlay {
  background: linear-gradient(105deg, rgba(63, 84, 105, 0.42) 0%, rgba(63, 84, 105, 0.22) 38%, rgba(63, 84, 105, 0.04) 65%, transparent 100%);
}

/* Tablet – slightly stronger overlay so text stays legible */
@media (max-width: 880px) {
  .season-band-card-content { padding: 24px 28px; max-width: 480px; }
  .season-band-card--primavara .season-band-card-overlay { background: linear-gradient(110deg, rgba(139,107,71,0.92) 0%, rgba(139,107,71,0.62) 50%, rgba(139,107,71,0.12) 78%, transparent 100%); }
  .season-band-card--vara .season-band-card-overlay      { background: linear-gradient(110deg, rgba(53,84,71,0.92) 0%, rgba(53,84,71,0.62) 50%, rgba(53,84,71,0.12) 78%, transparent 100%); }
  .season-band-card--toamna .season-band-card-overlay    { background: linear-gradient(110deg, rgba(147,80,36,0.92) 0%, rgba(147,80,36,0.62) 50%, rgba(147,80,36,0.12) 78%, transparent 100%); }
  .season-band-card--iarna .season-band-card-overlay     { background: linear-gradient(110deg, rgba(63,84,105,0.92) 0%, rgba(63,84,105,0.62) 50%, rgba(63,84,105,0.12) 78%, transparent 100%); }
}

/* Mobile – content takes full width; overlay flips to vertical fade */
@media (max-width: 600px) {
  .season-band-stack { gap: 14px; padding: 0 14px; }
  .season-band-card { height: clamp(200px, 38vh, 260px); }
  .season-band-card-content { padding: 20px 22px; max-width: 100%; }
  .season-band-card-title { font-size: 24px; }
  .season-band-card-lead { font-size: 12.5px; max-width: 100%; margin-bottom: 14px; }
  .season-band-card-btn { padding: 8px 14px; font-size: 10px; }
  .season-band-card--primavara .season-band-card-overlay { background: linear-gradient(180deg, rgba(139,107,71,0.10) 0%, rgba(139,107,71,0.32) 70%, rgba(139,107,71,0.45) 100%); }
  .season-band-card--vara .season-band-card-overlay      { background: linear-gradient(180deg, rgba(53,84,71,0.10) 0%, rgba(53,84,71,0.32) 70%, rgba(53,84,71,0.45) 100%); }
  .season-band-card--toamna .season-band-card-overlay    { background: linear-gradient(180deg, rgba(147,80,36,0.10) 0%, rgba(147,80,36,0.32) 70%, rgba(147,80,36,0.45) 100%); }
  .season-band-card--iarna .season-band-card-overlay     { background: linear-gradient(180deg, rgba(63,84,105,0.10) 0%, rgba(63,84,105,0.32) 70%, rgba(63,84,105,0.45) 100%); }
  .season-band-card-content { justify-content: flex-end; }
}

/* Per-season photo paths · uses card-<season>.jpeg uploaded by user */
.season-band-card.ph-primavara .season-band-card-photo { background-image: url('../assets/img/anotimpuri/card-primavara.jpeg'); }
.season-band-card.ph-vara      .season-band-card-photo { background-image: url('../assets/img/anotimpuri/card-vara.jpeg'); }
.season-band-card.ph-toamna    .season-band-card-photo { background-image: url('../assets/img/anotimpuri/card-toamna.jpeg'); }
.season-band-card.ph-iarna     .season-band-card-photo { background-image: url('../assets/img/anotimpuri/card-iarna.jpeg'); }


/* ─────────────────────────────────────────────────────────────────────────
   §4h · PHOTO-HERO SLIDESHOW (4 fotografii, fade crossfade + season tint)
   Total cycle 24s · each slide visible ~4s with 2s smooth crossfade.
   Each slide carries its own season-colored tint via ::after that fades
   in/out together with the slide. Pure CSS, no JS.
   Use modifier `.sub-article-photo-hero--slideshow` on the header for a
   slightly shorter hero box that shows more of each photo.
   ───────────────────────────────────────────────────────────────────────── */
/* Slideshow inherits the default photo-hero height (same as Trei Ape/Semenic/Gărâna) */
.sub-article-photo-hero-slider {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.sub-article-photo-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  animation: heroSlideShow 24s ease-in-out infinite;
  will-change: opacity;
}
/* Per-slide season-colored tint · diagonal gradient, subtle (≈22% peak) */
.sub-article-photo-hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sub-article-photo-hero-slider .sub-article-photo-hero-slide:nth-child(1)::after {
  background: linear-gradient(135deg, rgba(139, 107, 71, 0.34) 0%, rgba(139, 107, 71, 0.12) 55%, rgba(139, 107, 71, 0) 100%);
}
.sub-article-photo-hero-slider .sub-article-photo-hero-slide:nth-child(2)::after {
  background: linear-gradient(135deg, rgba(53, 84, 71, 0.34) 0%, rgba(53, 84, 71, 0.12) 55%, rgba(53, 84, 71, 0) 100%);
}
.sub-article-photo-hero-slider .sub-article-photo-hero-slide:nth-child(3)::after {
  background: linear-gradient(135deg, rgba(147, 80, 36, 0.34) 0%, rgba(147, 80, 36, 0.12) 55%, rgba(147, 80, 36, 0) 100%);
}
.sub-article-photo-hero-slider .sub-article-photo-hero-slide:nth-child(4)::after {
  background: linear-gradient(135deg, rgba(63, 84, 105, 0.34) 0%, rgba(63, 84, 105, 0.12) 55%, rgba(63, 84, 105, 0) 100%);
}

/* Stagger · 24s cycle, 6s per slot, 2s smooth crossfade.
   Slide 1 visible 0–4s · slide 2: 6–10s · slide 3: 12–16s · slide 4: 18–22s. */
.sub-article-photo-hero-slider .sub-article-photo-hero-slide:nth-child(1) { animation-delay: 0s; }
.sub-article-photo-hero-slider .sub-article-photo-hero-slide:nth-child(2) { animation-delay: -6s; }
.sub-article-photo-hero-slider .sub-article-photo-hero-slide:nth-child(3) { animation-delay: -12s; }
.sub-article-photo-hero-slider .sub-article-photo-hero-slide:nth-child(4) { animation-delay: -18s; }

@keyframes heroSlideShow {
  0%, 17%  { opacity: 1; }   /* fully visible 0–4s of 24s cycle */
  25%, 92% { opacity: 0; }   /* fade out 4–6s, hidden 6–22s */
  100%     { opacity: 1; }   /* fade back in 22–24s for loop */
}

@media (prefers-reduced-motion: reduce) {
  .sub-article-photo-hero-slide { animation: none; opacity: 1; }
  .sub-article-photo-hero-slider .sub-article-photo-hero-slide:not(:first-child) { display: none; }
  /* Season band cards · drop hover lift + photo zoom + button arrow shift */
  .season-band-card,
  .season-band-card-photo,
  .season-band-card-btn,
  .season-band-card-btn-arrow { transition: none; }
  .season-band-card:hover { transform: none; box-shadow: none; }
  .season-band-card:hover .season-band-card-photo { transform: none; }
  .season-band-card:hover .season-band-card-btn-arrow { transform: none; }
}


/* ─────────────────────────────────────────────────────────────────────────
   §4bb · GĂRÂNA ELECTRIC PARK · PHOTO-HERO VARIANT (--park)
   Lime-green wash on top of essex base. Same skeleton as §4z (--via).
   Used by: pages/comuna1/turism/electric-park.html (RO/EN/DE).
   ───────────────────────────────────────────────────────────────────────── */
.sub-article-photo-hero--park .sub-article-photo-hero-bg {
  background-position: center 30%;
  filter: saturate(1.18) contrast(1.06);
}
.sub-article-photo-hero--park::after {
  background:
    linear-gradient(180deg,
      rgba(31, 45, 39, 0.45) 0%,
      rgba(31, 45, 39, 0.18) 30%,
      rgba(0, 0, 0, 0) 50%,
      rgba(15, 23, 18, 0.62) 80%,
      rgba(15, 23, 18, 0.88) 100%),
    linear-gradient(110deg,
      rgba(196, 220, 60, 0.16) 0%,
      rgba(196, 220, 60, 0) 45%);
}
/* Hero stat icons in lime accent for --park */
.sub-article-photo-hero-stats--park .sub-article-photo-hero-stat svg {
  color: #C4DC3C;
  stroke: #C4DC3C;
}
.sub-article-photo-hero-stats--park .sub-article-photo-hero-stat svg path,
.sub-article-photo-hero-stats--park .sub-article-photo-hero-stat svg circle,
.sub-article-photo-hero-stats--park .sub-article-photo-hero-stat svg rect {
  stroke: #C4DC3C;
  fill: none;
}

/* §4bb.1 · Animated 4-trail SVG overlay on the --park hero.
   Hairline 2px strokes draw in on load with a soft glow filter.
   Sits above the dark gradient (z-index 2), below the title (raised to 3).
   Refined neon take: lower opacity, gentler glow, matches chip colours. */
.ep-hero-trails {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.84;
}
.sub-article-photo-hero--park .sub-article-photo-hero-inner { z-index: 3; }

.ep-trail {
  stroke-dasharray: 2200;
  stroke-dashoffset: 2200;
  animation: epTrailDraw 3.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: stroke-dashoffset;
}
.ep-trail--galben { stroke: #F2C73C; animation-delay: 0.30s; }
.ep-trail--verde  { stroke: #5DBF60; animation-delay: 0.60s; }
.ep-trail--rosu   { stroke: #E55C4A; animation-delay: 0.90s; }
.ep-trail--negru  { stroke: rgba(247, 246, 241, 0.42); animation-delay: 1.20s; }

@keyframes epTrailDraw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ep-trail { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 480px) {
  .ep-hero-trails { opacity: 0.58; }
}


/* ─────────────────────────────────────────────────────────────────────────
   §4cc · GĂRÂNA ELECTRIC PARK · 5-TRAIL GRID
   Five trail cards (galben / verde / negru / rosu / mov), each with a
   coloured left band, header, description, and 3-stat dl. Replaces the
   via-bornele stat-grid for the electric-park page.
   ───────────────────────────────────────────────────────────────────────── */
.park-trails {
  background: var(--chantilly);
  padding: clamp(80px, 11vh, 140px) clamp(20px, 4vw, 40px);
  border-bottom: 1px solid var(--stone-hearth-soft);
}
.park-trails-inner { max-width: 1280px; margin: 0 auto; }
.park-trails-header {
  text-align: center;
  margin-bottom: clamp(44px, 6vh, 68px);
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}
.park-trails-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rustic-taupe);
  margin-bottom: 16px;
  font-weight: 500;
}
.park-trails-title {
  font-size: clamp(1.9rem, 3.8vw, 2.7rem);
  line-height: 1.16;
  color: var(--essex);
  font-weight: 400;
  margin: 0 0 18px;
}
.park-trails-title em { font-style: normal; font-weight: 500; }
.park-trails-lead {
  font-size: 1.04rem;
  line-height: 1.72;
  color: var(--text-base);
  margin: 0;
}
.park-trails-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 28px);
}
@media (max-width: 960px) {
  .park-trails-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .park-trails-grid { grid-template-columns: 1fr; }
}
.park-trail {
  background: var(--chantilly-pure);
  border: 1px solid var(--stone-hearth);
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 14px 32px rgba(15, 23, 18, 0.06);
  transition: transform 0.32s ease, box-shadow 0.32s ease;
}
.park-trail:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(15, 23, 18, 0.10);
}
.park-trail-head { padding-left: 0; }
.park-trail-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rustic-taupe);
  margin-bottom: 8px;
  font-weight: 500;
}
/* Small colour swatch chip · refined site-style indicator */
.park-trail-chip {
  display: inline-block;
  width: 11px;
  height: 11px;
  background: var(--essex);
  border: 1px solid rgba(31, 45, 39, 0.18);
  box-shadow: 0 1px 2px rgba(15, 23, 18, 0.10);
  flex: 0 0 auto;
}
.park-trail-name {
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--essex);
  font-weight: 500;
  margin: 0;
}
.park-trail-desc {
  font-size: 0.94rem;
  line-height: 1.68;
  color: var(--text-base);
  margin: 0;
  padding-left: 0;
}
.park-trail-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 6px 0 0;
  padding: 14px 16px 12px 18px;
  background: var(--chantilly);
  border-top: 1px solid var(--stone-hearth-soft);
}
.park-trail-stats > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.park-trail-stats dt {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rustic-taupe);
  font-weight: 500;
  margin: 0;
}
.park-trail-stats dd {
  font-size: 0.94rem;
  color: var(--essex);
  font-weight: 500;
  margin: 0;
  text-align: right;
}

/* Trail colour chip · 5 variants (small square swatch next to tag) */
.park-trail--galben .park-trail-chip { background: #F2C73C; }
.park-trail--verde  .park-trail-chip { background: #4CAF50; }
.park-trail--negru  .park-trail-chip { background: var(--essex); }
.park-trail--rosu   .park-trail-chip { background: #D94B3A; }
.park-trail--mov    .park-trail-chip { background: #7A5CC1; }

@media (prefers-reduced-motion: reduce) {
  .park-trail { transition: none; }
  .park-trail:hover { transform: none; box-shadow: 0 14px 32px rgba(15, 23, 18, 0.06); }
}


/* ─────────────────────────────────────────────────────────────────────────
   §4dd · GĂRÂNA ELECTRIC PARK · annotated aerial map (overview panel)
   Replaces the plain <img> aerial with a 3-layer composite:
   - aerial photo background
   - 5 colour-coded SVG trail paths (with soft glow + draw-in animation)
   - HTML labels positioned over key points (START, Belvedere, village)
   Below the photo: a legend strip with chip-dot + trail name + length.
   Used inside .via-overview-map on electric-park.html (RO/EN/DE).
   ───────────────────────────────────────────────────────────────────────── */
.via-overview-map--aerial { padding: 0; }
.park-aerial {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--chantilly-pure);
}
.park-aerial-stage {
  position: relative;
  line-height: 0;
  overflow: hidden;
}
.park-aerial-bg {
  width: 100%;
  height: auto;
  display: block;
}
.via-overview-map--aerial svg.park-aerial-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Trail draw-in animation, staggered per colour */
.park-aerial-trail {
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: parkAerialDraw 2.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: stroke-dashoffset;
}
.park-aerial-trail--galben { animation-delay: 0.15s; }
.park-aerial-trail--verde  { animation-delay: 0.45s; }
.park-aerial-trail--negru  { animation-delay: 0.75s; opacity: 0.86; }
.park-aerial-trail--rosu   { animation-delay: 1.05s; }
.park-aerial-trail--mov    { animation-delay: 1.35s; }
@keyframes parkAerialDraw { to { stroke-dashoffset: 0; } }

/* POI text tags floating over the photo */
.park-aerial-tag {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--chantilly-pure);
  background: rgba(31, 45, 39, 0.78);
  padding: 5px 10px;
  border: 1px solid rgba(247, 246, 241, 0.18);
  white-space: nowrap;
  line-height: 1.2;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.park-aerial-tag--start { left: 23.5%; top: 20%; }
.park-aerial-tag--belv  { left: 30.5%; top: 61%; }
.park-aerial-tag--sat   { left: 64%; top: 74%; }

/* Legend strip below the photo · essex band, lime accents on lengths */
.park-aerial-legend {
  list-style: none;
  margin: 0;
  padding: 16px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  background: var(--essex);
  border-top: 1px solid var(--stone-hearth);
}
.park-aerial-legend li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8rem;
  color: var(--chantilly-pure);
  font-weight: 400;
}
.park-aerial-legend strong {
  color: #C4DC3C;
  font-weight: 500;
  margin-left: 2px;
}
.park-aerial-dot {
  width: 14px;
  height: 4px;
  display: inline-block;
  flex: 0 0 auto;
}
.park-aerial-dot--galben { background: #F2C73C; }
.park-aerial-dot--verde  { background: #4CAF50; }
.park-aerial-dot--negru  { background: var(--essex); border: 1px solid rgba(247, 246, 241, 0.4); }
.park-aerial-dot--rosu   { background: #D94B3A; }
.park-aerial-dot--mov    { background: #7A5CC1; }

@media (max-width: 640px) {
  .park-aerial-tag { font-size: 0.62rem; padding: 4px 7px; }
  .park-aerial-legend { gap: 8px 16px; padding: 13px 16px; }
  .park-aerial-legend li { font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .park-aerial-trail { animation: none; stroke-dashoffset: 0; }
}


/* ─────────────────────────────────────────────────────────────────────────
   §4ee · TURISM · PENSIUNI · zone-grouped accommodation directory
   Layout: 4 zone sections (Gărâna, Poiana Lupului, Trei Ape, Brebu Nou),
   each with a compact 3-column grid of cards. Card style mirrors
   .park-trail: chantilly bg + stone-hearth border, small tag + name +
   description + web/phone meta + "vezi pe hartă" link.
   Used by: pages/comuna1/turism/pensiuni.html (RO/EN/DE).
   ───────────────────────────────────────────────────────────────────────── */
.pensiuni-zone {
  position: relative;
  padding: 0;
  background-color: var(--essex);
  border-bottom: 0;
}
/* Gap between adjacent zone sections – chantilly page bg shows between blocks. */
.pensiuni-zone + .pensiuni-zone {
  margin-top: clamp(36px, 5vh, 56px);
}
/* Extra gap below the last zone (Brebu Nou) before the back-to banner. */
.pensiuni-zone:last-of-type {
  margin-bottom: clamp(48px, 6vh, 72px);
}
/* Single tall hero strip · cinematic per-zone photo at top with smooth
   gradient fade into the essex green body where header + cards live. */
.pensiuni-zone::before {
  content: '';
  display: block;
  height: clamp(340px, 48vh, 460px);
  background-size: cover;
  background-position: center 50%;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
/* Per-zone hero image + crop framing (background-position). */
.pensiuni-zone#zona-garana::before {
  background-image: url('../assets/img/hero/hero-monografie.jpg');
  background-position: center 55%;
}
.pensiuni-zone#zona-poiana::before {
  background-image: url('../assets/img/jazz/jazz1.jpg');
  background-position: center 50%;
}
.pensiuni-zone#zona-trei-ape::before {
  background-image: url('../assets/img/trei-ape/trei-ape-hero.jpeg');
  background-position: center 45%;
}
.pensiuni-zone#zona-brebu::before {
  background-image: url('../assets/img/brebu.jpeg');
  background-position: center 50%;
}
/* Restaurante page · "restaurante separate" zone */
.pensiuni-zone#zona-restaurante::before {
  background-image: url('../assets/img/restaurante/carul-pastrav.jpeg');
  background-position: center 50%;
}
/* Restaurante page · "cu masa la pensiune" zone */
.pensiuni-zone#zona-cu-masa::before {
  background-image: url('../assets/img/restaurante/la-maria.jpeg');
  background-position: center 50%;
}
/* Zone variant without ::before hero strip (essex green only – image pending). */
.pensiuni-zone--no-hero::before {
  display: none;
}
.pensiuni-zone--no-hero .pensiuni-zone-inner {
  padding-top: clamp(56px, 7vh, 84px);
}
.pensiuni-zone-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px) clamp(60px, 8vh, 100px);
}
.pensiuni-zone-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vh, 44px);
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.pensiuni-zone-eyebrow {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rustic-taupe-light);
  margin-bottom: 6px;
  font-weight: 500;
}
.pensiuni-zone-title {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.18;
  color: var(--chantilly-pure);
  font-weight: 400;
  margin: 0;
}
.pensiuni-zone-title em { font-style: normal; font-weight: 500; color: #fff; }
.pensiuni-zone-count {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rustic-taupe-light);
  font-weight: 500;
}
.pensiuni-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 960px) { .pensiuni-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pensiuni-grid { grid-template-columns: 1fr; } }

.pensiune {
  background: var(--chantilly-pure);
  border: 1px solid var(--stone-hearth);
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 10px 26px rgba(15, 23, 18, 0.05);
  transition: transform 0.32s ease, box-shadow 0.32s ease;
}
.pensiune:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15, 23, 18, 0.09);
}
.pensiune-head { display: flex; flex-direction: column; gap: 4px; }
.pensiune-tag {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rustic-taupe);
  font-weight: 500;
}
.pensiune-name {
  font-size: 1.18rem;
  line-height: 1.2;
  color: var(--essex);
  font-weight: 500;
  margin: 0;
}
.pensiune-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-base);
  margin: 0;
  flex: 1;
}
.pensiune-meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 12px;
  border-top: 1px solid var(--stone-hearth-soft);
}
.pensiune-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
  color: var(--essex);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}
.pensiune-link:hover { color: var(--rustic-taupe); }
.pensiune-link svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pensiune-link--muted {
  color: var(--rustic-taupe);
  font-style: italic;
}
.pensiune-link--muted:hover { color: var(--rustic-taupe); }
/* Request-info link · for pensiuni without published contact details.
   Replaces the bureaucratic-sounding "Contact prin Primărie" with an
   editorial CTA that links to a pre-filled mailto. */
.pensiune-link--request {
  color: var(--essex);
  font-weight: 500;
  border-bottom: 1px solid var(--stone-hearth-soft);
  padding-bottom: 4px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.pensiune-link--request:hover {
  color: var(--rustic-taupe);
  border-bottom-color: var(--rustic-taupe);
}
.pensiune-link--request svg {
  transition: transform 0.3s ease;
}
.pensiune-link--request:hover svg {
  transform: translateX(2px);
}
.pensiune-map-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rustic-taupe);
  text-decoration: none;
  font-weight: 500;
  align-self: flex-start;
  border-bottom: 1px solid var(--stone-hearth-soft);
  padding-bottom: 3px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.pensiune-map-link:hover {
  color: var(--essex);
  border-bottom-color: var(--essex);
}
@media (prefers-reduced-motion: reduce) {
  .pensiune { transition: none; }
  .pensiune:hover { transform: none; box-shadow: 0 10px 26px rgba(15, 23, 18, 0.05); }
}


/* ─────────────────────────────────────────────────────────────────────────
   §4ff · PROIECTE · Turism + Cultură · "Gărâna · refugiu artistic"
   Two sections: existente (10 cards) + în proiect (13 cards).
   Card style mirrors .pensiune (chantilly bg, stone-hearth border).
   Top-left numeric tag + name + description; status chip bottom-left.
   Used by: pages/comuna1/proiecte.html (RO/EN/DE).
   ───────────────────────────────────────────────────────────────────────── */
.proiecte-section {
  padding: clamp(60px, 8vh, 100px) clamp(20px, 4vw, 40px);
  border-bottom: 1px solid var(--stone-hearth-soft);
}
.proiecte-section:nth-of-type(odd)  { background: var(--chantilly); }
.proiecte-section:nth-of-type(even) { background: var(--chantilly-pure); }
.proiecte-section-inner { max-width: 1280px; margin: 0 auto; }
.proiecte-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vh, 44px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--stone-hearth-soft);
}
.proiecte-section-eyebrow {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rustic-taupe);
  margin-bottom: 6px;
  font-weight: 500;
}
.proiecte-section-title {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.18;
  color: var(--essex);
  font-weight: 400;
  margin: 0;
}
.proiecte-section-title em { font-style: normal; font-weight: 500; }
.proiecte-section-count {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rustic-taupe);
  font-weight: 500;
}
.proiecte-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 960px) { .proiecte-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .proiecte-grid { grid-template-columns: 1fr; } }

.proiect {
  background: var(--chantilly-pure);
  border: 1px solid var(--stone-hearth);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 10px 26px rgba(15, 23, 18, 0.05);
  transition: transform 0.32s ease, box-shadow 0.32s ease;
}
.proiect:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15, 23, 18, 0.09);
}
.proiect-num {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  font-weight: 500;
  color: var(--rustic-taupe);
}
.proiect-name {
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--essex);
  font-weight: 500;
  margin: 0;
}
.proiect-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-base);
  margin: 0;
  flex: 1;
}
.proiect-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rustic-taupe);
  font-weight: 500;
  padding-top: 8px;
  border-top: 1px solid var(--stone-hearth-soft);
}
.proiect-status::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  background: var(--rustic-taupe);
}
.proiect--existent .proiect-status::before { background: #4CAF50; }
.proiect--in-curs .proiect-status::before { background: #F2C73C; }
.proiect--proiect .proiect-status::before { background: #7A6957; }

@media (prefers-reduced-motion: reduce) {
  .proiect { transition: none; }
  .proiect:hover { transform: none; box-shadow: 0 10px 26px rgba(15, 23, 18, 0.05); }
}


/* ============================================================
   PENSIUNE · with side thumbnail variant (portrait photo on the left).
   Used on restaurante page Section 1 to highlight Carul cu Păstrăv + La Maria
   when only portrait-format photos are available.
   ============================================================ */
.pensiune--with-thumb {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0 22px;
  padding: 0;
  align-items: stretch;
  overflow: hidden;
}
.pensiune-thumb {
  display: block;
  width: 140px;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  background: var(--edgecomb-mid);
  align-self: stretch;
}
.pensiune--with-thumb .pensiune-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 18px 0;
  min-height: 220px;
}
@media (max-width: 540px) {
  .pensiune--with-thumb {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .pensiune-thumb {
    width: 100%;
    height: 220px;
    min-height: 0;
    aspect-ratio: auto;
  }
  .pensiune--with-thumb .pensiune-body {
    padding: 22px;
    min-height: 0;
  }
}


/* ============================================================
   GASTRO STATS · 4-column metric band sitting between hero and hub.
   Inspired by the editorial mockup – icons + value + label, no card chrome.
   ============================================================ */
.gastro-stats {
  background: var(--chantilly-pure);
  padding: clamp(36px, 5vh, 56px) clamp(20px, 4vw, 40px);
  border-bottom: 1px solid var(--edgecomb-mid);
}
.gastro-stats-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.gastro-stat {
  display: flex;
  align-items: center;
  gap: 16px;
}
.gastro-stat-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rustic-taupe);
  border-radius: 50%;
  color: var(--rustic-taupe);
}
.gastro-stat-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gastro-stat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.gastro-stat-value {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 500;
  color: var(--essex);
  letter-spacing: -0.005em;
}
.gastro-stat-label {
  font-size: 0.82rem;
  color: var(--text-mute);
  line-height: 1.4;
}
@media (max-width: 880px) {
  .gastro-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 540px) {
  .gastro-stats-inner { grid-template-columns: 1fr; }
}


/* ============================================================
   GASTRO CODA · editorial closing band before the back-to link.
   Centered editorial line + CTA button to comuna.html.
   ============================================================ */
.gastro-coda {
  background: var(--chantilly);
  padding: clamp(48px, 7vh, 76px) clamp(20px, 4vw, 40px);
  text-align: center;
  border-top: 1px solid var(--edgecomb-mid);
}
.gastro-coda-inner { max-width: 760px; margin: 0 auto; }
.gastro-coda-text {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--essex);
  margin: 0 0 28px;
}
.gastro-coda-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--essex);
  color: var(--chantilly-pure);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease, gap 0.3s ease;
}
.gastro-coda-cta:hover {
  background: var(--essex-light);
  gap: 16px;
}
.gastro-coda-cta:focus-visible {
  outline: 2px solid var(--essex);
  outline-offset: 3px;
}


/* ============================================================
   PENSIUNI FEATURES · 4-column advantages banner (essex deep)
   Sits between the hub grid and the quote. Icons + title + desc.
   ============================================================ */
.pen-features {
  position: relative;
  overflow: hidden;
  background: var(--essex-deep);
  padding: clamp(48px, 7vh, 76px) clamp(20px, 4vw, 40px) clamp(96px, 13vh, 150px);
  color: var(--chantilly-pure);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* Decorative flower row blooming along the bottom of the "before you set off"
   band, beneath the four tips. Full width, purely decorative. */
.pen-flowers {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: clamp(72px, 11vh, 120px);
  pointer-events: none;
  opacity: 0;                       /* shown only while the spring tab is active */
  transition: opacity 0.6s ease;
}
.pen-flowers.is-active { opacity: 1; }
.pen-flowers.is-active .ss-flower {
  animation: ssBloom 1.3s cubic-bezier(0.34, 1.4, 0.5, 1) backwards;
  animation-delay: var(--d);
}
.pen-features-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.pen-feature {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.pen-feature-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: var(--rustic-taupe-light);
}
.pen-feature-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pen-feature-text { flex: 1; }
.pen-feature-text h3 {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
  color: #fff;
}
.pen-feature-text p {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--chantilly);
  margin: 0;
  opacity: 0.78;
}
@media (max-width: 880px) {
  .pen-features-inner { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 540px) {
  .pen-features-inner { grid-template-columns: 1fr; gap: 22px; }
}


/* ============================================================
   PENSIUNI HUB · "Alege zona potrivită" · 4-zone card grid
   Centered airy header + photo cards with badge + count + desc.
   ============================================================ */
.pen-hub {
  background: var(--chantilly-pure);
  padding: clamp(56px, 8vh, 96px) 24px clamp(56px, 8vh, 96px);
}
.pen-hub-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.pen-hub-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(48px, 6vh, 72px);
}
.pen-hub-title {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.18;
  color: var(--essex);
  margin: 0 0 22px;
}
.pen-hub-divider {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--rustic-taupe);
  margin: 0 auto 28px;
  opacity: 0.55;
}
.pen-hub-lead {
  font-size: 1rem;
  line-height: 1.72;
  color: var(--text-mute);
  margin: 0 0 22px;
}
.pen-hub-map-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--essex);
  text-decoration: none;
  border-bottom: 1px solid var(--rustic-taupe);
  padding-bottom: 4px;
  transition: gap 0.25s ease, color 0.25s ease;
}
.pen-hub-map-link:hover { gap: 14px; color: var(--rustic-taupe); }

.pen-hub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
/* 2-column variant – used on restaurante.html (Restaurante + Cu masă la pensiune). */
.pen-hub-grid--2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 540px) {
  .pen-hub-grid--2 { grid-template-columns: 1fr; }
}
.pen-hub-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  text-decoration: none;
  color: var(--essex);
  border: 1px solid var(--edgecomb-mid);
  transition: transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.pen-hub-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(15, 23, 18, 0.35);
  border-color: var(--rustic-taupe);
}
.pen-hub-card:focus-visible {
  outline: 2px solid var(--essex);
  outline-offset: 3px;
}
.pen-hub-card-photo {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--edgecomb-mid);
}
.pen-hub-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.pen-hub-card:hover .pen-hub-card-photo img { transform: scale(1.05); }
.pen-hub-card-badge {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  display: inline-block;
  padding: 6px 12px;
  background: rgba(22, 32, 27, 0.86);
  color: var(--chantilly-pure);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.pen-hub-card-body {
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.pen-hub-card-name {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--essex);
  margin: 0;
}
.pen-hub-card-count {
  font-size: 0.78rem;
  color: var(--rustic-taupe);
  margin-bottom: 10px;
}
.pen-hub-card-desc {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-mute);
  margin: 0;
}
@media (max-width: 880px) {
  .pen-hub-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 540px) {
  .pen-hub-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pen-hub-card,
  .pen-hub-card-photo img,
  .pen-hub-map-link { transition: none; }
  .pen-hub-card:hover { transform: none; }
  .pen-hub-card:hover .pen-hub-card-photo img { transform: none; }
}


/* ============================================================
   ELECTRIC PARK · TRASEUL VERDE – interactive aerial map
   2-col grid (text + aerial map with SVG route overlay + POI markers).
   ============================================================ */
.ve2 {
  --e: #1F2D27;
  --ed: #16201B;
  --cr: #F2F1EB;
  --st: #C2B5A0;
  --lime: #C6F032;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 580px;
  background: var(--ed);
  color: #fff;
  margin: 0;
}
.ve2-text {
  padding: clamp(32px, 4.5vw, 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ve2-eyebrow {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--st);
  margin-bottom: 20px;
}
.ve2-title {
  margin: 0 0 22px;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1.18;
}
.ve2-body {
  margin: 0 0 14px;
  max-width: 480px;
  font-size: 0.96rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.84);
}
.ve2-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 38px;
  margin-top: 18px;
}
.ve2-stat {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ve2-stat svg {
  width: 25px;
  height: 25px;
  stroke: var(--st);
  flex: none;
}
.ve2-stat b {
  display: block;
  font-size: 1.12rem;
  font-weight: 600;
}
.ve2-stat span {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--st);
}
.ve2-map {
  position: relative;
  overflow: hidden;
  min-height: 360px;
}
.ve2-map__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ve2-map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, var(--ed) 0%, rgba(22, 32, 27, 0.22) 15%, rgba(22, 32, 27, 0) 36%);
}
.ve2-map__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}
.ve2-route {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: ve2draw 2.6s ease forwards 0.3s;
}
@keyframes ve2draw {
  to { stroke-dashoffset: 0; }
}
.ve2-poi {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.ve2-poi__dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--lime);
  color: var(--ed);
  border: 3px solid rgba(22, 32, 27, 0.85);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(198, 240, 50, 0.6);
  animation: ve2pulse 2.6s ease-in-out infinite;
}
.ve2-poi__dot--solar { background: #FFD24A; font-size: 0.95rem; }
.ve2-poi--start .ve2-poi__dot { background: #fff; }
.ve2-poi--end .ve2-poi__dot { background: var(--lime); }
@keyframes ve2pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(198, 240, 50, 0.5); }
  50%      { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 0 8px rgba(198, 240, 50, 0); }
}
.ve2-poi__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  font-size: 0.76rem;
  font-weight: 600;
  color: #fff;
  background: rgba(22, 32, 27, 0.92);
  border-radius: 6px;
  transition: max-width 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
  padding: 6px 0;
  margin-left: 6px;
}
.ve2-poi:hover .ve2-poi__label,
.ve2-poi:focus-visible .ve2-poi__label {
  max-width: 220px;
  opacity: 1;
  padding: 6px 11px;
}
.ve2-poi:hover .ve2-poi__dot {
  animation: none;
  transform: scale(1.12);
  transition: transform 0.2s;
}
.ve2-map__key {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: rgba(22, 32, 27, 0.82);
  padding: 9px 13px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.ve2-map__key span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: #fff;
}
.ve2-map__key i {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  display: inline-block;
  font-style: normal;
}
.ve2-key-sun {
  width: auto !important;
  height: auto !important;
  color: #FFD24A;
  font-size: 0.9rem;
}
@media (max-width: 780px) {
  .ve2 { grid-template-columns: 1fr; }
  .ve2-map { min-height: 380px; order: -1; }
  .ve2-map::before { background: linear-gradient(0deg, var(--ed) 0%, rgba(22, 32, 27, 0) 36%); }
  .ve2-poi__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ve2-route { animation: none; stroke-dashoffset: 0; }
  .ve2-poi__dot { animation: none; }
}

/* ============================================================
   GHID SEZONIER · turism/ghid-sezonier.html
   ------------------------------------------------------------
   §A  Hub section · 4 season cards
   §B  Lacul Trei Ape · text + 4 mini-photos by season
   §C  Gallery per-cell rules (ph-sezon-01..08)
   ============================================================ */

/* §A · SEZOANE SECTION ------------------------------------- */
.ghid-sezon {
  padding: 110px 32px;
  background: var(--bg-soft, #F7F4EE);
}
.ghid-sezon-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.ghid-sezon-header {
  text-align: center;
  margin-bottom: 64px;
}
.ghid-sezon-title {
  font-family: inherit;
  font-weight: 300;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  color: var(--ink, #1F2D27);
  margin: 0 0 22px;
  letter-spacing: -0.012em;
}
.ghid-sezon-title em {
  font-style: italic;
  color: var(--accent, #A87F3F);
}
.ghid-sezon-divider {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--line, rgba(31,45,39,0.22));
  margin: 0 auto 22px;
}
.ghid-sezon-lead {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-soft, #4E5A52);
}

.ghid-sezon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.ghid-sezon-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--line-soft, rgba(31,45,39,0.10));
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
.ghid-sezon-card:hover {
  box-shadow: 0 14px 40px rgba(31,45,39,0.10);
  transform: translateY(-2px);
}

.ghid-sezon-card-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #E8E4DD;
  overflow: hidden;
}
.ghid-sezon-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.ghid-sezon-card:hover .ghid-sezon-card-photo img {
  transform: scale(1.04);
}

.ghid-sezon-card-body {
  padding: 28px 24px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.ghid-sezon-card-name {
  font-family: inherit;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--ink, #1F2D27);
  margin: 0;
  letter-spacing: -0.01em;
}
.ghid-sezon-card-period {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-soft, #6A7770);
  margin-top: -6px;
}
.ghid-sezon-card-desc {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--ink-soft, #4E5A52);
}

.ghid-sezon-card-temp {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 4px;
  margin-top: 4px;
  border-top: 1px dashed var(--line-soft, rgba(31,45,39,0.14));
}
.ghid-sezon-card-temp svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--accent, #A87F3F);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ghid-sezon-card-temp-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ghid-sezon-card-temp-text small {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft, #7A857F);
}
.ghid-sezon-card-temp-text strong {
  font-weight: 500;
  font-size: 1.04rem;
  color: var(--ink, #1F2D27);
  font-variant-numeric: tabular-nums;
}

.ghid-sezon-card-list {
  margin-top: 2px;
}
.ghid-sezon-card-list-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-soft, #7A857F);
  margin-bottom: 8px;
}
.ghid-sezon-card-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ghid-sezon-card-list li {
  position: relative;
  padding-left: 16px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-soft, #4E5A52);
}
.ghid-sezon-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent, #A87F3F);
}

@media (max-width: 1080px) {
  .ghid-sezon-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 600px) {
  .ghid-sezon { padding: 80px 20px; }
  .ghid-sezon-grid { grid-template-columns: 1fr; gap: 22px; }
  .ghid-sezon-header { margin-bottom: 44px; }
  .ghid-sezon-card-body { padding: 22px 20px 24px; }
}

/* §B · LACUL TREI APE · seasonal interactive hero --------- */
.ss-hero {
  position: relative;
  width: 100%;
  min-height: clamp(460px, 56vw, 600px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: #16201B;
  font-family: inherit;
}
.ss-hero__base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%; /* framing pulled up so more of the lake shows */
  z-index: 0;
  transition: filter 1.2s ease; /* mood shifts with the season */
}

/* Seasonal colour grade · a tint blends with the photo, a filter shifts the
   mood. Driven by [data-season] on .ss-hero (set by the switcher JS). */
.ss-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: background 1.2s ease, opacity 1.2s ease;
}
.ss-hero[data-season="spring"] .ss-hero__base { filter: saturate(1.28) brightness(1.06) hue-rotate(-8deg); }
.ss-hero[data-season="spring"] .ss-tint { background: #79BE55; opacity: .45; mix-blend-mode: soft-light; }
.ss-hero[data-season="summer"] .ss-hero__base { filter: saturate(1.55) brightness(1.12) contrast(1.06); }
.ss-hero[data-season="summer"] .ss-tint { background: #1E8BD8; opacity: .45; mix-blend-mode: overlay; }
.ss-hero[data-season="autumn"] .ss-hero__base { filter: sepia(.6) saturate(1.8) hue-rotate(-20deg) brightness(1); }
.ss-hero[data-season="autumn"] .ss-tint { background: #A85E1E; opacity: .58; mix-blend-mode: multiply; }
.ss-hero[data-season="winter"] .ss-hero__base { filter: saturate(.22) brightness(1.28) contrast(.9); }
.ss-hero[data-season="winter"] .ss-tint { background: #CFE4F5; opacity: .62; mix-blend-mode: screen; }
.ss-layers {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.ss-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.ss-layer.is-active { opacity: 1; }

/* Primăvara · flori care înfloresc din pământ */
.ss-stem { fill: none; stroke: #5E8C42; stroke-width: 2.4; stroke-linecap: round; }
.ss-flower {
  transform-box: fill-box;
  transform-origin: 50% 100%;            /* grow up from the base of the stem */
  transform: scale(var(--s, 1));
}
.ss-layer--spring.is-active .ss-flower {
  animation: ssBloom 1.3s cubic-bezier(0.34, 1.4, 0.5, 1) backwards;
  animation-delay: var(--d);
}
@keyframes ssBloom {
  from { opacity: 0; transform: scale(0); }
  40%  { opacity: 1; }
  to   { opacity: 1; transform: scale(var(--s, 1)); }
}

/* Vara · nori plutesc */
.ss-cloud { transform: translateY(calc(var(--y) * 1px)); }
.ss-layer--summer.is-active .ss-cloud {
  animation: ssDrift var(--dur, 70s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes ssDrift {
  from { transform: translate(-200px, calc(var(--y) * 1px)); }
  to   { transform: translate(1800px, calc(var(--y) * 1px)); }
}

/* Toamna · frunze cad rotindu-se */
.ss-leaf { transform: translate(calc(var(--x) * 1%), -5%); }
.ss-layer--autumn.is-active .ss-leaf {
  animation: ssFall var(--dur, 8s) linear infinite;
  animation-delay: var(--d);
}
@keyframes ssFall {
  from { transform: translate(calc(var(--x) * 1%), -5%) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  to   { transform: translate(calc(var(--x) * 1% + 60px), 105%) rotate(420deg); opacity: 0; }
}

/* Toamna · ploaie care cade oblic */
.ss-drop { transform: translate(calc(var(--x) * 1%), -10%); }
.ss-layer--autumn.is-active .ss-drop {
  animation: ssRain var(--dur, 1.2s) linear infinite;
  animation-delay: var(--d);
}
@keyframes ssRain {
  from { transform: translate(calc(var(--x) * 1%), -12%); opacity: 0; }
  12%  { opacity: .55; }
  88%  { opacity: .55; }
  to   { transform: translate(calc(var(--x) * 1% - 26px), 112%); opacity: 0; }
}

/* Iarna · fulgi de zăpadă */
.ss-flake { transform: translate(calc(var(--x) * 1%), -3%); }
.ss-layer--winter.is-active .ss-flake {
  animation: ssSnow var(--dur, 7s) linear infinite;
  animation-delay: var(--d);
}
@keyframes ssSnow {
  from { transform: translate(calc(var(--x) * 1%), -3%); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  to   { transform: translate(calc(var(--x) * 1% + 40px), 105%); opacity: 0; }
}

.ss-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(22, 32, 27, 0.88) 0%, rgba(22, 32, 27, 0.50) 38%, rgba(22, 32, 27, 0.05) 68%, rgba(22, 32, 27, 0.15) 100%);
}

.ss-hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 48px);
  color: #FFFFFF;
}
.ss-hero__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 16px;
}
.ss-hero__title {
  margin: 0 0 18px;
  font-family: inherit;
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: #FFFFFF;
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.35);
}
.ss-hero__title em {
  font-style: normal;
  font-weight: 500;
  color: var(--accent, #C2A878);
}
.ss-hero__lead {
  margin: 0 0 28px;
  max-width: 560px;
  font-size: clamp(0.94rem, 1.4vw, 1.04rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  min-height: 3.3em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
  transition: opacity 0.4s ease;
}
/* Controls row · season switch on the left, "more" CTA pushed right */
.ss-hero__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 28px;
}
.ss-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  background: rgba(22, 32, 27, 0.45);
  padding: 0;
  border-radius: 0;
  border: 1px solid rgba(242, 241, 235, 0.30);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ss-btn {
  appearance: none;
  border: 0;
  border-right: 1px solid rgba(242, 241, 235, 0.18);
  cursor: pointer;
  font-family: inherit;
  padding: 12px 24px;
  border-radius: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  color: rgba(242, 241, 235, 0.82);
  transition: background 0.25s ease, color 0.25s ease;
}
.ss-btn:last-child { border-right: 0; }
.ss-btn:hover { color: #FFFFFF; background: rgba(242, 241, 235, 0.10); }
.ss-btn.is-active {
  background: var(--chantilly);
  color: var(--essex);
}
.ss-btn:focus-visible { outline: 2px solid var(--chantilly); outline-offset: 2px; }

.ss-hero__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242, 241, 235, 0.90);
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 241, 235, 0.45);
  padding-bottom: 4px;
  transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease;
}
.ss-hero__more:hover {
  color: var(--amber-warm, #C8A773);
  border-color: var(--amber-warm, #C8A773);
  gap: 14px;
}

@media (max-width: 600px) {
  .ss-hero { min-height: 460px; }
  .ss-hero__controls { justify-content: center; }
  .ss-switch { width: 100%; justify-content: center; }
  .ss-btn { flex: 1 1 auto; padding: 10px 12px; font-size: 0.68rem; letter-spacing: 0.10em; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-flower, .ss-cloud, .ss-leaf, .ss-flake, .ss-drop { animation: none !important; }
  .ss-layer { transition: opacity 0.2s ease; }
}

/* §C · GHID-SEZONIER GALLERY · per-cell background images -- */
.sub-article-gallery-cell.ph-sezon-01::before { background-image: url('../assets/img/anotimpuri/primavara/primavara_05.jpg'); }
.sub-article-gallery-cell.ph-sezon-02::before { background-image: url('../assets/img/anotimpuri/primavara/primavara_15.jpg'); }
.sub-article-gallery-cell.ph-sezon-03::before { background-image: url('../assets/img/anotimpuri/vara/vara_10.jpg'); }
.sub-article-gallery-cell.ph-sezon-04::before { background-image: url('../assets/img/anotimpuri/vara/vara_18.jpg'); }
.sub-article-gallery-cell.ph-sezon-05::before { background-image: url('../assets/img/anotimpuri/toamna/toamna_05.jpg'); }
.sub-article-gallery-cell.ph-sezon-06::before { background-image: url('../assets/img/anotimpuri/toamna/toamna_15.jpg'); }
.sub-article-gallery-cell.ph-sezon-07::before { background-image: url('../assets/img/anotimpuri/iarna/iarna_07.jpg'); }
.sub-article-gallery-cell.ph-sezon-08::before { background-image: url('../assets/img/anotimpuri/iarna/iarna_18.jpg'); }

/* ------------------------------------------------------------
   4g. SUB-PAGE · "Știați că?" editorial callout
   Dark inset card with an amber rule, used to surface a single
   memorable fact inside a long-form article. Sits in the body
   text column (720px) and keeps the page gutter on mobile.
   ------------------------------------------------------------ */
.sub-article-callout {
  max-width: 720px;
  margin: clamp(40px, 6vh, 64px) auto;
  padding: 0 32px;
}
.sub-article-callout-box {
  background: var(--essex);
  color: var(--chantilly-pure);
  padding: clamp(28px, 4.5vw, 44px) clamp(26px, 4.5vw, 48px);
  border-left: 4px solid var(--amber-warm, #C8A773);
}
.sub-article-callout-box .sub-article-callout-eyebrow {
  display: block;
  margin: 0 0 14px;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--amber-warm, #C8A773);
}
.sub-article-callout-box .sub-article-callout-title {
  margin: 0 0 16px;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.28;
  color: var(--chantilly-pure);
}
.sub-article-callout-box p {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.9);
}
.sub-article-callout-box p:last-child { margin-bottom: 0; }
.sub-article-callout-box strong { color: var(--chantilly-pure); font-weight: 600; }
.sub-article-callout-box p.sub-article-callout-quote {
  margin-top: 18px;
  padding-left: 16px;
  border-left: 2px solid rgba(255, 255, 255, 0.28);
  font-style: italic;
  color: rgba(255, 255, 255, 0.82);
}

/* ------------------------------------------------------------
   4h. SUB-PAGE · editorial media (section tags, split rows,
   figures, photo pairs). Used to interleave photographs through
   a long-form article: text beside image, full-width figures,
   and side-by-side pairs, all on the chantilly reading canvas.
   ------------------------------------------------------------ */
.sub-article-tag {
  display: inline-block;
  margin: 0 0 16px;
  padding: 5px 13px;
  background: var(--amber-warm, #C8A773);
  color: var(--essex);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
}

/* section header split: text column + image column, side by side */
.sub-article-split {
  max-width: 1080px;
  margin: clamp(44px, 6vh, 72px) auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.sub-article-split-text > :first-child { margin-top: 0; }
.sub-article-split-text h2 { margin: 0 0 18px; }
.sub-article-split-text p {
  font-size: 1.02rem; line-height: 1.78;
  color: var(--essex); margin: 0 0 20px;
}
.sub-article-split-text p:last-child { margin-bottom: 0; }
.sub-article-split-media { margin: 0; }
.sub-article-split--reverse .sub-article-split-text  { order: 2; }
.sub-article-split--reverse .sub-article-split-media { order: 1; }

/* full-width single figure */
.sub-article-figure {
  max-width: 1080px;
  margin: clamp(40px, 5.5vh, 64px) auto;
  padding: 0 32px;
}
.sub-article-figure--narrow { max-width: 760px; }

/* stacked official-channel links inside a dark CTA band */
.cta-links { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; flex: none; }
@media (min-width: 861px) { .cta-links { align-items: flex-end; } }
.cta-links a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--chantilly-pure); text-decoration: none;
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  border-bottom: 1px solid var(--amber-warm, #C8A773); padding-bottom: 3px;
  transition: gap 0.25s ease, color 0.25s ease;
}
.cta-links a:hover { gap: 12px; color: var(--amber-warm, #C8A773); }

/* four photographs in a row (portrait crops), responsive */
.sub-article-quad {
  max-width: 1080px;
  margin: clamp(40px, 5.5vh, 64px) auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}
.sub-article-quad figure { margin: 0; }
.sub-article-quad img {
  display: block; width: 100%;
  aspect-ratio: 3 / 4; object-fit: cover; background: var(--essex);
}
.sub-article-quad figcaption {
  margin-top: 10px; font-size: 0.78rem; font-style: italic;
  color: var(--rustic-taupe); line-height: 1.42;
}
@media (max-width: 760px) { .sub-article-quad { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .sub-article-quad { grid-template-columns: 1fr; } }

/* two photographs, side by side (portrait crops) */
.sub-article-duo {
  max-width: 1080px;
  margin: clamp(40px, 5.5vh, 64px) auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
}
.sub-article-duo figure { margin: 0; }

/* shared image + caption treatment */
.sub-article-split-media img,
.sub-article-figure img,
.sub-article-duo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--essex);
}
.sub-article-split-media img { aspect-ratio: 4 / 3; }
.sub-article-figure img      { aspect-ratio: 16 / 9; }
.sub-article-figure--narrow img { aspect-ratio: 3 / 2; }
.sub-article-duo img         { aspect-ratio: 3 / 4; }
.sub-article-split-media figcaption,
.sub-article-figure figcaption,
.sub-article-duo figcaption {
  margin-top: 10px;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--rustic-taupe);
  line-height: 1.5;
}

@media (max-width: 760px) {
  .sub-article-split { grid-template-columns: 1fr; gap: 22px; }
  .sub-article-split--reverse .sub-article-split-text,
  .sub-article-split--reverse .sub-article-split-media { order: 0; }
  .sub-article-duo { grid-template-columns: 1fr; gap: 18px; }
  .sub-article-duo img { aspect-ratio: 4 / 3; }
}


/* =========================================================================
   §4ab · ASOCIAȚII CULTURALE page  (comunitate/asociatii.html)
   Editorial layout: photo-hero + "Cine suntem" (intro + 4 pillars) +
   association cards (2-up + 1 wide) + photo CTA band + quote.
   ========================================================================= */

/* Hero eyebrow (over the dark photo) */
.assoc-hero-eyebrow {
  display: block;
  font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(255,255,255,0.82); font-weight: 500; margin-bottom: 18px;
}

/* ── "Cine suntem" : intro text (left) + 4 pillars (right) ─────────────── */
.assoc-about { background: var(--chantilly-pure); padding: clamp(44px,6vh,84px) 0; }
.assoc-about-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px,4vw,40px);
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px,5vw,72px); align-items: start;
}
.assoc-about-text h2 {
  margin: 0 0 22px; font-size: clamp(1.7rem,3.2vw,2.4rem);
  font-weight: 300; letter-spacing: -0.012em; color: var(--essex);
}
.assoc-about-text p { font-size: 1rem; line-height: 1.78; color: var(--essex); margin: 0 0 16px; }
.assoc-about-text p:last-child { margin-bottom: 0; }

.assoc-pillars { display: grid; grid-template-columns: repeat(4,1fr); }
.assoc-pillar { padding: 2px clamp(14px,1.8vw,24px); position: relative; }
.assoc-pillar:first-child { padding-left: 0; }
.assoc-pillar + .assoc-pillar { border-left: 1px solid var(--stone-hearth-soft); }
.assoc-pillar-icon { color: var(--rustic-taupe); display: block; margin-bottom: 16px; }
.assoc-pillar-icon svg {
  width: 34px; height: 34px; fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.assoc-pillar h3 { margin: 0 0 10px; font-size: 1.02rem; font-weight: 500; color: var(--essex); }
.assoc-pillar p { margin: 0; font-size: 0.86rem; line-height: 1.6; color: var(--text-soft,#5d6660); }

@media (max-width: 900px) {
  .assoc-about-inner { grid-template-columns: 1fr; gap: clamp(28px,5vw,40px); }
  .assoc-pillars { grid-template-columns: repeat(2,1fr); row-gap: 30px; }
  .assoc-pillar:first-child { padding-left: clamp(14px,1.8vw,24px); }
  .assoc-pillar:nth-child(odd) { border-left: none; padding-left: 0; }
}
@media (max-width: 540px) {
  .assoc-pillars { grid-template-columns: 1fr; row-gap: 0; }
  .assoc-pillar, .assoc-pillar:first-child { padding: 0; }
  .assoc-pillar + .assoc-pillar {
    border-left: none; border-top: 1px solid var(--stone-hearth-soft);
    padding-top: 22px; margin-top: 22px;
  }
  .assoc-pillar:nth-child(odd) { padding-left: 0; }
}

/* ── "Asociațiile noastre" : cards ────────────────────────────────────── */
.assoc-list-section {
  background: var(--chantilly);
  padding: clamp(44px,6vh,80px) 0 clamp(48px,7vh,88px);
}
.assoc-list-inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px,4vw,40px); }
.assoc-list-inner > h2 {
  margin: 0 0 clamp(28px,4vh,40px); font-size: clamp(1.7rem,3.2vw,2.4rem);
  font-weight: 300; letter-spacing: -0.012em; color: var(--essex);
}
.assoc-list { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,2.4vw,30px); }
.assoc-card {
  display: grid; grid-template-columns: minmax(140px,40%) 1fr;
  background: var(--chantilly-pure); border: 1px solid var(--stone-hearth-soft);
  overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) {
  .assoc-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -20px rgba(15,23,18,0.42); }
}
.assoc-card--wide { grid-column: 1 / -1; grid-template-columns: minmax(220px,32%) 1fr; }
.assoc-card-photo { background-size: cover; background-position: center; min-height: 220px; }
.assoc-card-body {
  padding: clamp(22px,2.4vw,34px); display: flex; flex-direction: column; gap: 14px;
}
.assoc-card-head { display: flex; align-items: center; gap: 14px; }
.assoc-card-logo { color: var(--rustic-taupe); flex-shrink: 0; }
.assoc-card-logo svg {
  width: 36px; height: 36px; fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.assoc-card-name {
  margin: 0; font-size: clamp(1.2rem,1.8vw,1.5rem); font-weight: 400;
  letter-spacing: -0.01em; color: var(--essex); line-height: 1.15;
}
.assoc-card-sub {
  display: block; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rustic-taupe); font-weight: 500; margin-top: 4px;
}
.assoc-card-desc { margin: 0; font-size: 0.94rem; line-height: 1.7; color: var(--essex); }
.assoc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.assoc-tag {
  font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  color: var(--rustic-taupe);
  background: var(--chantilly); border: 1px solid var(--stone-hearth-soft);
  padding: 6px 12px; border-radius: 0;
}
/* Single text-only association card (no photo available) */
.assoc-card--noimage { grid-column: 1 / -1; grid-template-columns: 1fr; }
.assoc-card-link {
  margin-top: auto; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  padding: 12px 24px; background: var(--essex); color: var(--chantilly-pure);
  text-decoration: none; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500; transition: background 0.3s ease;
}
.assoc-card-link:hover { background: var(--essex-light); }
.assoc-card-link:focus-visible { outline: 2px solid var(--rustic-taupe); outline-offset: 3px; }

@media (max-width: 860px) {
  .assoc-list { grid-template-columns: 1fr; }
  .assoc-card, .assoc-card--wide { grid-template-columns: 1fr; }
  .assoc-card-photo { min-height: 200px; order: -1; }
}

/* §4ab.1 · open-list intro + CTA fine-print (asociatii.html) */
.assoc-list-lead {
  max-width: 70ch; margin: -8px 0 clamp(28px,4vh,40px);
  font-size: 0.98rem; line-height: 1.7; color: var(--text-soft,#5d6660);
}
.sub-article-cta-band-note {
  font-size: 0.8rem !important; opacity: 0.6 !important; margin-top: 2px !important;
}

/* §4n.1 · inline CTA link inside the project-status banner (electric-park) */
.sub-article-soon-banner a {
  color: var(--rustic-taupe); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.sub-article-soon-banner a:hover { color: var(--essex); border-color: var(--essex); }


/* =========================================================================
   §4ac · VOLUNTARIAT page (comunitate/voluntariat.html)
   Editorial: photo-hero + intro + duo cards (Proiecte/Idei) +
   "Cum te poți implica" pillars + quote + dual CTA + coda.
   ========================================================================= */
.vol-duo {
  max-width: 1100px; margin: clamp(40px,6vh,72px) auto; padding: 0 clamp(20px,4vw,40px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,2.4vw,28px);
}
.vol-duo-card {
  background: var(--chantilly-pure); border: 1px solid var(--stone-hearth-soft);
  padding: clamp(28px,3vw,40px); display: flex; flex-direction: column; gap: 14px;
}
.vol-duo-icon { color: var(--rustic-taupe); }
.vol-duo-icon svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.vol-duo-card h2 { margin: 0; font-size: clamp(1.3rem,2vw,1.7rem); font-weight: 400; letter-spacing: -0.01em; color: var(--essex); }
.vol-duo-card p { margin: 0; font-size: 0.96rem; line-height: 1.7; color: var(--essex); flex: 1; }
.vol-duo-link {
  margin-top: 4px; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  color: var(--essex); text-decoration: none; font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500; border-bottom: 1px solid var(--rustic-taupe-light); padding-bottom: 4px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.vol-duo-link:hover { color: var(--rustic-taupe); border-color: var(--rustic-taupe); }
@media (max-width: 700px) { .vol-duo { grid-template-columns: 1fr; } }

.vol-ways { background: var(--chantilly); padding: clamp(48px,7vh,84px) 0; }
.vol-ways-inner { max-width: 1100px; margin: 0 auto; padding: 0 clamp(20px,4vw,40px); }
.vol-ways-head { text-align: center; margin-bottom: clamp(30px,4vh,48px); }
.vol-ways-head .sub-article-tag { display: inline-block; margin-bottom: 14px; }
.vol-ways-head h2 { margin: 0; font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 300; letter-spacing: -0.012em; color: var(--essex); }

.vol-cta {
  background: linear-gradient(135deg, var(--essex) 0%, #0F1712 100%);
  color: var(--chantilly-pure); padding: clamp(48px,7vh,88px) clamp(20px,4vw,40px); text-align: center;
}
.vol-cta-inner { max-width: 720px; margin: 0 auto; }
.vol-cta h2 { margin: 0 0 14px; font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 300; letter-spacing: -0.012em; }
.vol-cta p { margin: 0 0 30px; font-size: 0.98rem; line-height: 1.65; opacity: 0.85; }
.vol-cta-buttons { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }
.vol-cta-or { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.55; }
.vol-cta-button-ghost {
  display: inline-flex; align-items: center; gap: 14px; padding: 16px 32px;
  background: transparent; color: var(--chantilly-pure); border: 1px solid var(--rustic-taupe-light);
  text-decoration: none; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.vol-cta-button-ghost:hover { background: var(--rustic-taupe); border-color: var(--rustic-taupe); color: var(--chantilly-pure); }
.vol-cta-button-ghost:focus-visible { outline: 2px solid var(--rustic-taupe-light); outline-offset: 4px; }

.vol-coda { max-width: 680px; margin: clamp(48px,7vh,84px) auto clamp(64px,9vh,110px); padding: 0 32px; text-align: center; }
.vol-coda::before { content: ''; display: block; width: 48px; height: 1px; background: var(--rustic-taupe); margin: 0 auto 28px; }
.vol-coda p { font-size: clamp(1.15rem,2vw,1.5rem); font-weight: 300; line-height: 1.5; color: var(--essex); margin: 0; letter-spacing: -0.01em; }
.vol-coda p + p { margin-top: 4px; }
.vol-coda strong { font-weight: 500; }


/* =========================================================================
   §4ad · RELATED LINKS grid – cross-links at the end of an article
   (4 thumbnail cards: thumb + eyebrow + title + arrow). Used on scoala.html.
   ========================================================================= */
.sub-article-related { max-width: 1100px; margin: clamp(48px,7vh,80px) auto clamp(8px,2vh,16px); padding: 0 clamp(20px,4vw,40px); }
.sub-article-related-head { text-align: center; margin-bottom: clamp(24px,3.5vh,38px); }
.sub-article-related-head .sub-article-tag { display: inline-block; margin-bottom: 14px; }
.sub-article-related-head h2 { margin: 0; font-size: clamp(1.5rem,2.8vw,2.05rem); font-weight: 300; letter-spacing: -0.012em; color: var(--essex); }
.sub-article-related-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(14px,1.8vw,22px); }
.sub-article-related-card { display: flex; flex-direction: column; background: var(--chantilly-pure); border: 1px solid var(--stone-hearth-soft); text-decoration: none; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
@media (hover: hover) { .sub-article-related-card:hover { transform: translateY(-3px); border-color: var(--amber-warm,#C8A773); box-shadow: 0 14px 30px -16px rgba(15,23,18,0.4); } }
.sub-article-related-card:focus-visible { outline: 2px solid var(--rustic-taupe); outline-offset: 3px; }
.sub-article-related-thumb { aspect-ratio: 3 / 2; background-size: cover; background-position: center; background-color: var(--edgecomb-mid); }
.sub-article-related-body { padding: 15px 18px 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.sub-article-related-eyebrow { font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rustic-taupe); font-weight: 600; }
.sub-article-related-title { font-size: 1.02rem; font-weight: 500; line-height: 1.25; color: var(--essex); }
.sub-article-related-arrow { margin-top: auto; padding-top: 6px; color: var(--amber-warm,#C8A773); font-size: 1rem; line-height: 1; }
@media (max-width: 860px) { .sub-article-related-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px) { .sub-article-related-grid { grid-template-columns: 1fr; } }


/* =========================================================================
   §4ae · CITE-QUOTE – left-bordered testimony quote with attribution
   (mirrors Kirchweih .kw-story-quote). Glyph + italic serif + <cite>.
   ========================================================================= */
.sub-article-cite-quote {
  position: relative;
  max-width: 760px;
  margin: clamp(40px,6vh,64px) auto;
  padding: clamp(30px,4vw,40px) clamp(26px,3.5vw,40px);
  background: var(--chantilly-pure);
  border-left: 3px solid var(--rustic-taupe);
  font-family: "Helvetica Neue", "HelveticaNeue", "Helvetica Neue LT", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-size: clamp(1.04rem,1.5vw,1.22rem);
  line-height: 1.7;
  color: var(--essex);
}
.sub-article-cite-quote::before {
  content: '\201C';
  position: absolute; top: 6px; left: 14px;
  font-size: 4rem; font-family: "Helvetica Neue", "HelveticaNeue", "Helvetica Neue LT", Helvetica, Arial, sans-serif;
  color: var(--rustic-taupe); line-height: 1; opacity: 0.38;
}
.sub-article-cite-quote cite {
  display: block; margin-top: 18px;
  font-style: normal; font-size: 0.74rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rustic-taupe); font-weight: 500;
}


/* §4af · festival hero eyebrow (matches jazz/folk/kirchweih look) – for howling on the generic photo-hero */
.sub-article-fest-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
  font-weight: 500; color: var(--chantilly-pure); opacity: 0.92;
  margin-bottom: 4px;
}
.sub-article-fest-eyebrow::before {
  content: ''; width: 32px; height: 1px; background: var(--rustic-taupe-light); flex: 0 0 auto;
}


/* =========================================================================
   §4ag · shared FESTIVAL hero + stats – mirrors jazz/folk/kirchweih.
   Used by howling (which is on the generic comuna-cat stylesheet).
   ========================================================================= */
.fest-hero {
  position: relative; min-height: 88vh; max-height: 920px;
  display: flex; align-items: flex-end;
  color: var(--chantilly-pure); overflow: hidden;
}
.fest-hero-photo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  animation: festKenBurns 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes festKenBurns {
  0%   { transform: scale(1.0)  translate(0,    0);    }
  100% { transform: scale(1.07) translate(-1%, -1.5%); }
}
@media (prefers-reduced-motion: reduce) { .fest-hero-photo { animation: none; } }
.fest-hero-content {
  position: relative; z-index: 2;
  max-width: 1240px; margin: 0 auto;
  padding: 0 32px clamp(60px, 10vh, 120px); width: 100%;
}
.fest-hero-title {
  font-size: clamp(2.6rem, 6.2vw, 5.4rem); font-weight: 300;
  line-height: 1.04; letter-spacing: -0.025em; margin: 0 0 28px; max-width: 22ch;
}
.fest-hero-title em { font-style: normal; font-weight: 500; color: var(--rustic-taupe-light); }
.fest-hero-meta {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 18px;
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; margin: 0;
}
.fest-hero-meta-divider { display: inline-block; width: 4px; height: 4px; background: var(--rustic-taupe-light); border-radius: 50%; }
.fest-stats {
  background: var(--chantilly); padding: 64px 32px;
  border-top: 1px solid var(--stone-hearth-soft); border-bottom: 1px solid var(--stone-hearth-soft);
}
.fest-stats-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; }
.fest-stat strong { display: block; font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 300; letter-spacing: -0.01em; color: var(--essex); line-height: 1; margin-bottom: 10px; }
.fest-stat span { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-soft); font-weight: 500; }
@media (max-width: 760px) { .fest-stats-inner { grid-template-columns: repeat(2, 1fr); row-gap: 28px; } }

/* §4ag.1 · breathing room between festival hero and the intro text (howling) */
.fest-hero + .sub-article-body { margin-top: clamp(72px, 10vh, 120px); }

/* §4ah · Wolfsberg Ski logo mark (ski + tiroliana) */
.wolfsberg-logo { display:block; margin: clamp(28px,4vh,44px) auto clamp(2px,1vh,8px); width:116px; height:auto; }

/* §4ah.1 · vivid + taller photo-hero (ski, tiroliana) */
.sub-article-photo-hero--vivid .sub-article-photo-hero-bg { filter: saturate(1.2) contrast(1.06); }
.sub-article-photo-hero--tall { min-height: clamp(500px, 68vh, 700px); }
@media (max-width: 480px) { .sub-article-photo-hero--tall { min-height: 64vh; } }

/* §4ai · full-bleed image banner (puncte-panoramice featured viewpoint) */
.sub-article-banner { width: 100%; margin: clamp(44px,6vh,76px) 0; }
.sub-article-banner img,
.sub-article-banner video { display: block; width: 100%; height: clamp(300px, 46vh, 540px); object-fit: cover; }

/* §4ai.1 · natural-aspect video player (puncte-panoramice) – not cropped/zoomed.
   Scoped with :not(--feature) so it never overrides the full-bleed green video
   marquee (.sub-article-video--feature, defined earlier) via source order. */
.sub-article-video:not(.sub-article-video--feature) { max-width: 880px; margin: clamp(40px,6vh,72px) auto; padding: 0 clamp(20px,4vw,32px); }
.sub-article-video:not(.sub-article-video--feature) video { display: block; width: 100%; height: auto; max-height: 78vh; background: #0c0c0c; border: 1px solid var(--stone-hearth-soft); }

/* §4aj · essex-green band showing a full (uncropped) image (puncte-panoramice) */
.sub-article-photo-band { background: var(--essex); padding: clamp(36px,6vh,72px) clamp(20px,4vw,40px); }
.sub-article-photo-band img { display: block; max-width: 1100px; max-height: 80vh; width: auto; height: auto; margin: 0 auto; }