/* =========================================================================
   2Pets — עמודי המגזין. יורש את הטוקנים מ-directory.css
   ========================================================================= */

.tp-mag { --cat: var(--tp-forest); }


/* ---------- כרטיס כתבה ---------- */

.tp-post { display: flex; flex-direction: column; gap: 11px; }

.tp-post__media {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--tp-r-md);
  background: var(--cat, var(--tp-forest));
  box-shadow: var(--tp-sh-1);
  aspect-ratio: 16 / 10;
  transition: transform .38s var(--tp-ease), box-shadow .38s var(--tp-ease);
}
.tp-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--tp-ease); }
.tp-post:hover .tp-post__media { transform: translateY(-4px); box-shadow: var(--tp-sh-3); }
.tp-post:hover .tp-post__media img { transform: scale(1.045); }

/* אין תמונה — בלוק צבע לפי קטגוריה, עם כתם אור שנותן עומק */
.tp-post__media.is-empty::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(90% 80% at 78% 12%, rgba(255,255,255,.18), transparent 62%);
}

.tp-post__cat {
  position: absolute; inset-block-end: 13px; inset-inline-start: 13px; z-index: 2;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--tp-ink);
  border-radius: 999px; padding: 5px 13px;
  font-size: 12px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: var(--tp-sh-1);
}
.tp-post__cat.is-static { position: static; background: var(--tp-lime); text-decoration: none; }

.tp-post__title {
  font-family: var(--tp-dsp);
  margin: 0; font-weight: 700; letter-spacing: -.025em; line-height: 1.12;
  font-size: 20px;
}
.tp-post__title a { color: var(--tp-ink); text-decoration: none; background-image: linear-gradient(var(--tp-lime-mark), var(--tp-lime-mark)); background-size: 0 .5em; background-position: 100% 88%; background-repeat: no-repeat; transition: background-size .34s var(--tp-ease); }
.tp-post__title a:hover { background-size: 100% .5em; color: var(--tp-ink); }

.tp-post__excerpt {
  margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--tp-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.tp-post.is-lead .tp-post__media { aspect-ratio: 16 / 9; }
.tp-post.is-lead .tp-post__title { font-size: clamp(30px, 3.6vw, 46px); line-height: .98; letter-spacing: -.04em; }
.tp-post.is-lead .tp-post__excerpt { font-size: 17.5px; -webkit-line-clamp: 3; }

.tp-post.is-row { flex-direction: row; gap: 18px; align-items: flex-start; padding-bottom: 22px; border-bottom: 1px solid var(--tp-hair); }
.tp-post.is-row .tp-post__media { flex-shrink: 0; width: 190px; aspect-ratio: 3 / 2; }
.tp-post.is-row .tp-post__title { font-size: 23px; }


/* ---------- חזית ---------- */

.tp-front { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 30px; padding: 34px 0 36px; align-items: start; }
.tp-front__side { display: flex; flex-direction: column; gap: 24px; }

.tp-catbar { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 40px; }
.tp-catbar .tp-chip:hover { background: var(--cat); border-color: var(--cat); color: #fff; }

.tp-section__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.tp-section__bar .tp-section__head { margin: 0; }
.tp-more { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 700; color: var(--tp-forest); text-decoration: none; }
.tp-more svg { width: 16px; height: 16px; transition: transform .26s var(--tp-ease); }
.tp-more:hover svg { transform: translateX(-3px); }

.tp-postgrid { display: grid; gap: 26px; }
.tp-postgrid.is-4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tp-postgrid.is-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.tp-front__more { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 46px; align-items: start; }
.tp-front__list { display: flex; flex-direction: column; gap: 22px; }
.tp-front__list .tp-post.is-row:last-child { border-bottom: 0; padding-bottom: 0; }

.tp-signup {
  background: var(--tp-ink); color: #F4F7EE;
  border-radius: var(--tp-r-md); padding: 26px;
  display: flex; flex-direction: column; gap: 13px;
  box-shadow: var(--tp-sh-2);
}
.tp-signup h3 { font-family: var(--tp-dsp); margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.04; }
.tp-signup p { margin: 0; font-size: 15px; line-height: 1.5; color: #AFB8A8; }
.tp-signup input[type="email"], .tp-signup input[type="text"] {
  width: 100%; border: 0; border-radius: var(--tp-r-sm); padding: 13px 16px;
  background: rgba(255,255,255,.07); color: #F4F7EE; font: inherit; font-size: 15px;
}
.tp-signup input::placeholder { color: #8C978A; }
.tp-signup button, .tp-signup input[type="submit"] {
  width: 100%; border: 0; border-radius: var(--tp-r-sm); padding: 14px;
  background: var(--tp-lime); color: var(--tp-ink);
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}

.tp-cta.is-split { align-items: center; }
.tp-cta__eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.tp-cta__actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 6px; }
.tp-cta__peek { width: 340px; max-width: 100%; transform: rotate(-2deg); }
.tp-cta__peek .tp-card { box-shadow: var(--tp-sh-3); }
.tp-cta__peek .tp-card:hover { transform: translateY(-5px) rotate(1deg); }


/* ---------- כתבה ---------- */

.tp-article__head { position: relative; padding: 26px 0 0; max-width: 62ch; isolation: isolate; }
.tp-article__title {
  font-family: var(--tp-dsp);
  margin: 0 0 16px;
  font-size: clamp(34px, 5.4vw, 70px);
  line-height: .9; font-weight: 800; letter-spacing: -.045em; text-wrap: balance;
}
.tp-article__meta { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; font-size: 14.5px; font-weight: 600; color: var(--tp-muted); }
.tp-article__meta a { text-decoration: none; }
.tp-dot { width: 4px; height: 4px; border-radius: 999px; background: #C2C4BA; }

.tp-article__lead { margin: 28px 0 0; }
.tp-article__lead img { width: 100%; height: auto; border-radius: var(--tp-r-lg); box-shadow: var(--tp-sh-2); display: block; }

.tp-article__cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; padding-top: 40px; }
.tp-article__aside { position: sticky; top: 22px; display: flex; flex-direction: column; gap: 18px; }

.tp-article__body > * + * { margin-top: 20px; }
.tp-article__body h2 { font-family: var(--tp-dsp); font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-top: 34px; }
.tp-article__body h3 { font-family: var(--tp-dsp); font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 28px; }
.tp-article__body img { max-width: 100%; height: auto; border-radius: var(--tp-r-md); }
.tp-article__body ul, .tp-article__body ol { padding-inline-start: 1.3em; font-size: 17.5px; line-height: 1.7; color: var(--tp-body); }
.tp-article__body li + li { margin-top: 8px; }

.tp-article__body blockquote {
  margin: 30px 0; padding: 24px 26px;
  background: var(--tp-card); border: 1px solid var(--tp-hair); border-inline-start: 5px solid var(--tp-coral);
  border-radius: var(--tp-r-md);
  box-shadow: var(--tp-sh-1), var(--tp-inner);
}
.tp-article__body blockquote p {
  font-family: var(--tp-dsp);
  font-size: clamp(19px, 2vw, 24px); line-height: 1.34; font-weight: 700; letter-spacing: -.02em; color: var(--tp-ink);
}


/* ---------- כרטיס האינדקס בתוך התוכן ---------- */

.tp-inline-dir {
  margin: 34px 0;
  background: var(--tp-forest); color: #F4F7EE;
  border-radius: var(--tp-r-md); padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--tp-sh-2);
  position: relative; overflow: hidden;
}
.tp-inline-dir::after {
  content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -14%;
  width: 320px; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(140,207,20,.26), transparent 66%);
  pointer-events: none;
}
.tp-inline-dir__eyebrow { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: var(--tp-lime); }
.tp-inline-dir h3 { font-family: var(--tp-dsp); margin: 0; font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
.tp-inline-dir p { margin: 0; font-size: 16px; line-height: 1.5; color: #B4BDAC; }
.tp-inline-dir .tp-btn { align-self: flex-start; position: relative; z-index: 1; }
.tp-inline-dir.is-aside { margin: 0; padding: 22px; }
.tp-inline-dir.is-aside h3 { font-size: 21px; }

.tp-widget { background: var(--tp-card); border: 1px solid var(--tp-hair); border-radius: var(--tp-r-md); padding: 20px; box-shadow: var(--tp-sh-1), var(--tp-inner); }
.tp-widget__title { font-family: var(--tp-dsp); margin: 0 0 12px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }

.tp-band.is-slim { flex-direction: row; align-items: center; justify-content: space-between; padding: 26px 34px; }
.tp-band.is-slim h2 { font-size: clamp(20px, 2.4vw, 28px); }


/* ---------- responsive ---------- */

@media (max-width: 1020px) {
  .tp-front { grid-template-columns: 1fr; gap: 34px; }
  .tp-front__more { grid-template-columns: 1fr; gap: 34px; }
  .tp-article__cols { grid-template-columns: 1fr; gap: 32px; }
  .tp-article__aside { position: static; }
  .tp-cta.is-split { flex-direction: column; align-items: flex-start; }
  .tp-cta__peek { transform: none; width: 100%; }
}

@media (max-width: 700px) {
  .tp-postgrid.is-4, .tp-postgrid.is-3 { grid-template-columns: 1fr; gap: 22px; }
  .tp-post.is-row { flex-direction: column; gap: 12px; }
  .tp-post.is-row .tp-post__media { width: 100%; aspect-ratio: 16 / 10; }
  .tp-band.is-slim { flex-direction: column; align-items: flex-start; gap: 16px; }
  .tp-catbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tp-catbar::-webkit-scrollbar { display: none; }
}


/* עמוד רגיל — טור יחיד */
.tp-article__body.is-solo { max-width: 68ch; margin-inline: auto; padding-top: 34px; }
.tp-pagelinks { display: flex; gap: 8px; padding-top: 20px; }