/* ═══════════════════════════════════════════════════
   Tayarut — Audience Design System
   עולם מטיילים vs עולם תיירנים
   ═══════════════════════════════════════════════════ */

/* ── TRAVELER WORLD ──────────────────────────────── */
:root,
[data-audience="travelers"] {
  --tn-bg:          #EEF6F4;
  --tn-bg-alt:      #E4F0EE;
  --tn-ink:         #0D2A26;
  --tn-ink-deep:    #081A16;
  --tn-primary:     #5DBFB0;
  --tn-primary-lt:  #9FDDD0;
  --tn-primary-dk:  #2A8A7A;
  --tn-accent:      #C8A85A;
  --tn-accent-lt:   #EDD898;
  --tn-hero-a:      #0A4A6A;
  --tn-hero-b:      #4A7A2A;
  --tn-dark:        #0D2A26;
  --tn-dark2:       #0A2220;
  --tn-surface:     #FFFFFF;
  --tn-border:      rgba(13,42,38,.10);
  --tn-border-lt:   rgba(13,42,38,.06);
  --tn-tag-bg:      rgba(93,191,176,.12);
  --tn-tag-color:   #2A8A7A;

  /* card image placeholder tints */
  --tn-ph-1: linear-gradient(145deg,#1A5A3A,#2A8A58,#4AAA78);
  --tn-ph-2: linear-gradient(145deg,#0A3A5A,#1A6A8A,#3A9AB0);
  --tn-ph-3: linear-gradient(145deg,#6A4A1A,#A07830,#C89840);
}

/* ── PRO WORLD ────────────────────────────────────── */
[data-audience="pro"] {
  --tn-bg:          #F0EDE8;
  --tn-bg-alt:      #E8E4DE;
  --tn-ink:         #1A1612;
  --tn-ink-deep:    #0E0C0A;
  --tn-primary:     #8A6A3A;
  --tn-primary-lt:  #C4A06A;
  --tn-primary-dk:  #5A3A18;
  --tn-accent:      #2A6A5A;
  --tn-accent-lt:   #4A9A88;
  --tn-hero-a:      #1A1612;
  --tn-hero-b:      #2A2018;
  --tn-dark:        #1A1612;
  --tn-dark2:       #120E0A;
  --tn-surface:     #FAF8F4;
  --tn-border:      rgba(26,22,18,.12);
  --tn-border-lt:   rgba(26,22,18,.06);
  --tn-tag-bg:      rgba(138,106,58,.10);
  --tn-tag-color:   #5A3A18;

  --tn-ph-1: linear-gradient(145deg,#2A1A0A,#4A3018,#6A4A28);
  --tn-ph-2: linear-gradient(145deg,#1A2A1A,#2A4A2A,#3A6A3A);
  --tn-ph-3: linear-gradient(145deg,#1A1A2A,#2A2A4A,#3A3A6A);
}

/* ══════════════════════════
   AUDIENCE POPUP
   ══════════════════════════ */
.tn-popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tn-fade-in .3s ease both;
}
.tn-popup-backdrop.is-hidden {
  animation: tn-fade-out .25s ease both;
  pointer-events: none;
}
@keyframes tn-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes tn-fade-out { from { opacity: 1; } to { opacity: 0; } }

.tn-popup {
  background: #fff;
  border-radius: 24px;
  width: min(600px, calc(100vw - 32px));
  overflow: hidden;
  animation: tn-popup-in .4s cubic-bezier(.34,1.56,.64,1) both;
  box-shadow: 0 32px 80px rgba(0,0,0,.22);
  position: relative;
}
@keyframes tn-popup-in {
  from { opacity: 0; transform: translateY(40px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tn-popup__header {
  padding: 36px 36px 24px;
  text-align: center;
}
.tn-popup__logo {
  font-size: 22px;
  font-weight: 900;
  color: #0D2A26;
  margin-bottom: 16px;
  letter-spacing: -.5px;
}
.tn-popup__logo span { color: #5DBFB0; }
.tn-popup__title {
  font-size: 26px;
  font-weight: 900;
  color: #0D2A26;
  margin-bottom: 8px;
  line-height: 1.1;
}
.tn-popup__sub {
  font-size: 14px;
  color: rgba(13,42,38,.5);
  font-weight: 300;
  line-height: 1.6;
}

.tn-popup__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.tn-popup__choice {
  padding: 28px 28px 32px;
  cursor: pointer;
  transition: background .2s;
  border: none;
  background: transparent;
  text-align: right;
  font-family: 'Noto Sans Hebrew', sans-serif;
  position: relative;
  overflow: hidden;
}
.tn-popup__choice::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .2s;
}
.tn-popup__choice:hover::before { opacity: 1; }
.tn-popup__choice--travelers {
  background: #EEF6F4;
  border-top: 1px solid rgba(13,42,38,.08);
  border-left: 1px solid rgba(13,42,38,.06);
}
.tn-popup__choice--travelers::before { background: #E0F0EC; }
.tn-popup__choice--pro {
  background: #F0EDE8;
  border-top: 1px solid rgba(26,22,18,.08);
}
.tn-popup__choice--pro::before { background: #E8E4DC; }

.tn-popup__choice-icon {
  font-size: 32px;
  margin-bottom: 12px;
  display: block;
  position: relative;
  z-index: 1;
}
.tn-popup__choice-title {
  font-size: 17px;
  font-weight: 900;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.tn-popup__choice--travelers .tn-popup__choice-title { color: #0D2A26; }
.tn-popup__choice--pro .tn-popup__choice-title { color: #1A1612; }
.tn-popup__choice-desc {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}
.tn-popup__choice--travelers .tn-popup__choice-desc { color: rgba(13,42,38,.55); }
.tn-popup__choice--pro .tn-popup__choice-desc { color: rgba(26,22,18,.5); }

.tn-popup__choice-cta {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 8px;
  position: relative;
  z-index: 1;
  transition: transform .15s;
}
.tn-popup__choice:hover .tn-popup__choice-cta { transform: translateX(-3px); }
.tn-popup__choice--travelers .tn-popup__choice-cta { background: #5DBFB0; color: #0A3A30; }
.tn-popup__choice--pro       .tn-popup__choice-cta { background: #8A6A3A; color: #FAF8F4; }

.tn-popup__skip {
  text-align: center;
  padding: 14px;
  font-size: 12px;
  color: rgba(13,42,38,.35);
  cursor: pointer;
  border-top: 1px solid rgba(13,42,38,.06);
  transition: color .2s;
  background: none;
  border-left: none; border-right: none; border-bottom: none;
  width: 100%;
  font-family: 'Noto Sans Hebrew', sans-serif;
}
.tn-popup__skip:hover { color: rgba(13,42,38,.6); }

/* ══════════════════════════
   AUDIENCE SWITCHER (header)
   ══════════════════════════ */
.tn-audience-switch {
  display: flex;
  background: rgba(13,42,38,.07);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
[data-audience="pro"] .tn-audience-switch {
  background: rgba(26,22,18,.07);
}
.tn-aud-btn {
  font-family: 'Noto Sans Hebrew', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: rgba(13,42,38,.45);
  transition: all .2s;
  white-space: nowrap;
}
.tn-aud-btn.is-active {
  background: var(--tn-primary);
  color: #fff;
}
[data-audience="pro"] .tn-aud-btn.is-active {
  background: var(--tn-primary);
  color: #FAF8F4;
}

/* ══════════════════════════
   INNER PAGES — shared skin
   ══════════════════════════ */

/* Hero inner (for archive/single) */
.tn-inner-hero {
  background: var(--tn-dark);
  padding: 80px 0 60px;
  position: relative;
  overflow: hidden;
}
.tn-inner-hero::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(93,191,176,.12), transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
[data-audience="pro"] .tn-inner-hero::before {
  background: radial-gradient(circle, rgba(138,106,58,.12), transparent 65%);
}
.tn-inner-hero__kicker {
  font-size: 10px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--tn-primary-lt);
  margin-bottom: 10px;
}
.tn-inner-hero__title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 0 0 12px;
}
.tn-inner-hero__sub {
  font-size: 15px;
  color: rgba(255,255,255,.5);
  font-weight: 300;
  max-width: 50ch;
}

/* Breadcrumb */
.tn-bc {
  padding: 12px 0;
  border-bottom: 1px solid var(--tn-border);
  margin-bottom: 40px;
}
.tn-bc__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.tn-bc__link { font-size: 13px; color: var(--tn-primary); }
.tn-bc__sep  { font-size: 12px; color: rgba(13,42,38,.3); }
.tn-bc__current { font-size: 13px; color: rgba(13,42,38,.5); }

/* Content card */
.tn-content-card {
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 20px;
}

/* Tags */
.tn-tag {
  display: inline-block;
  background: var(--tn-tag-bg);
  color: var(--tn-tag-color);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 6px;
}

/* Pagination */
.tn-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 48px;
  flex-wrap: wrap;
}
.tn-pagination a,
.tn-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 8px;
  font-size: 14px; font-weight: 700;
  border: 1px solid var(--tn-border);
  background: var(--tn-surface);
  color: var(--tn-ink);
  transition: all .2s;
}
.tn-pagination .current,
.tn-pagination a:hover {
  background: var(--tn-primary);
  color: #fff;
  border-color: transparent;
}

/* ══════════════════════════
   SINGLE TRAIL
   ══════════════════════════ */
.tn-trail-single__hero {
  height: 380px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 32px;
  position: relative;
}
.tn-trail-single__hero img { width:100%; height:100%; object-fit:cover; }
.tn-trail-single__badges {
  position: absolute;
  bottom: 20px; right: 20px;
  display: flex; gap: 8px;
}
.tn-trail-single__badge {
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  color: white;
  font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: 8px;
}

/* ══════════════════════════
   ARCHIVE FILTERS
   ══════════════════════════ */
.tn-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.tn-filter-btn {
  font-family: 'Noto Sans Hebrew', sans-serif;
  font-size: 13px; font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--tn-border);
  background: var(--tn-surface);
  color: var(--tn-ink);
  cursor: pointer;
  transition: all .2s;
}
.tn-filter-btn:hover,
.tn-filter-btn.is-active {
  background: var(--tn-primary);
  color: #fff;
  border-color: transparent;
}

/* ══════════════════════════
   PRO INNER PAGES skin
   ══════════════════════════ */
[data-audience="pro"] .tn-section__label { color: var(--tn-primary-lt); }
[data-audience="pro"] .tn-section__all   { color: var(--tn-primary-lt); }
[data-audience="pro"] .tn-partner-card__area  { color: var(--tn-primary); }
[data-audience="pro"] .tn-partner-card__cta   { background: var(--tn-primary); }
[data-audience="pro"] .tn-reco-card__cat      { color: var(--tn-primary); }
[data-audience="pro"] .tn-sc-card__tag        { color: var(--tn-primary-lt); border-color: rgba(138,106,58,.35); background: rgba(138,106,58,.15); }
[data-audience="pro"] .tn-trail-card__region  { color: var(--tn-primary); }
[data-audience="pro"] .tn-trail-card::after   { background: var(--tn-primary); }
[data-audience="pro"] .tn-region-bar { border-top-color: var(--tn-primary); }
[data-audience="pro"] .tn-btn--primary { background: var(--tn-primary); }
[data-audience="pro"] .tn-diag--to-dark::after  { background: var(--tn-dark); }
[data-audience="pro"] .tn-diag--to-light::after { background: var(--tn-bg); }
[data-audience="pro"] .tn-inner-hero::before { background: radial-gradient(circle,rgba(138,106,58,.12),transparent 65%); }
[data-audience="pro"] body { background: var(--tn-bg); }

/* smooth audience transition */
body { transition: background .4s ease; }
.tn-section, .tn-inner-hero, .tn-partner-card, .tn-reco-card {
  transition: background .3s ease;
}

/* ── Diagonal dividers need block not flex ── */
.tn-diag[data-show-for] { display: block !important; }
[data-audience="travelers"] .tn-diag[data-show-for="pro"],
[data-audience="pro"]       .tn-diag[data-show-for="travelers"] {
  display: none !important;
}

/* Default (no audience yet) — show travelers */
:not([data-audience]) [data-show-for="travelers"] { display: block; }
:not([data-audience]) [data-show-for="pro"]       { display: none !important; }
:not([data-audience]) .tn-hero__btns[data-show-for="travelers"] { display: flex; }
:not([data-audience]) [data-show-for="travelers"].tn-partners-grid,
:not([data-audience]) [data-show-for="travelers"].tn-recos-grid,
:not([data-audience]) [data-show-for="travelers"].tn-trails-grid { display: grid; }

/* Audience applied — show correct, hide other */
[data-audience="travelers"] [data-show-for="travelers"] { display: block; }
[data-audience="travelers"] [data-show-for="pro"]       { display: none !important; }
[data-audience="travelers"] .tn-hero__btns[data-show-for="travelers"],
[data-audience="travelers"] .tn-hero__pro-stats[data-show-for="travelers"] { display: flex; }
[data-audience="travelers"] [data-show-for="travelers"].tn-partners-grid,
[data-audience="travelers"] [data-show-for="travelers"].tn-recos-grid,
[data-audience="travelers"] [data-show-for="travelers"].tn-trails-grid,
[data-audience="travelers"] [data-show-for="travelers"].tn-showcase-grid { display: grid; }

[data-audience="pro"] [data-show-for="pro"]       { display: block; }
[data-audience="pro"] [data-show-for="travelers"] { display: none !important; }
[data-audience="pro"] .tn-hero__btns[data-show-for="pro"] { display: flex; }
[data-audience="pro"] [data-show-for="pro"].tn-partners-grid { display: grid; }