/* ============================================================
   TraPay Blog — scoped styles (Phase 2b blog port)
   Ported from the approved previews:
   blog-index / blog-single / blog-category.
   Aliases brand vars from trapay-tokens.css. No CSS in Blade.
   ============================================================ */

.tp-blog{
  --brand: var(--colors-primary-DEFAULT);
  --brand-2: var(--colors-primary-500);
  --brand-50: var(--colors-primary-50);
  --accent: var(--colors-semantic-warning-base);
  --green: var(--colors-semantic-success-base);
  --ink: var(--colors-surface-foreground);
  --muted: var(--colors-neutral-500);
}

/* page-load reveal */
@keyframes tpb-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.tp-blog .rise{opacity:0;animation:tpb-rise .6s cubic-bezier(.2,.7,.2,1) forwards}
.tp-blog .d1{animation-delay:.05s}.tp-blog .d2{animation-delay:.12s}.tp-blog .d3{animation-delay:.19s}
.tp-blog .d4{animation-delay:.26s}.tp-blog .d5{animation-delay:.33s}.tp-blog .d6{animation-delay:.40s}

/* ---------- filter chips (svc-chip) + draggable scroller ---------- */
.tp-blog .chip{display:inline-flex;align-items:center;gap:.5rem;border:1px solid #e5e9f0;background:#fff;
  border-radius:9999px;padding:.5rem .95rem;font-size:.875rem;font-weight:600;color:var(--ink);
  transition:transform .25s ease,background .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease}
.tp-blog .chip:hover{transform:translateY(-2px);background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:0 8px 20px -8px rgba(13,62,126,.45)}
.tp-blog .chip.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.tp-blog .chip-scroller{position:relative;max-width:62rem;margin-inline:auto}
.tp-blog .chip-track{display:flex;flex-wrap:nowrap;gap:.625rem;overflow-x:auto;scroll-behavior:smooth;
  padding:.25rem .25rem 1rem;cursor:grab;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-end,0px),
    #000 calc(100% - var(--fade-start,72px)),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-end,0px),
    #000 calc(100% - var(--fade-start,72px)),transparent 100%)}
.tp-blog .chip-track::-webkit-scrollbar{display:none}
.tp-blog .chip-track.dragging{cursor:grabbing;scroll-behavior:auto}
.tp-blog .chip-track .chip{flex:0 0 auto;-webkit-user-select:none;user-select:none}

/* ---------- post card ---------- */
.tp-blog .post{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s}
.tp-blog .post:hover{transform:translateY(-6px);box-shadow:0 22px 48px -18px color-mix(in srgb,var(--brand) 26%,transparent);
  border-color:color-mix(in srgb,var(--brand) 22%,transparent)}
.tp-blog .cover{display:block;aspect-ratio:16/10;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  position:relative;overflow:hidden}
.tp-blog .cover::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 80% -10%,rgba(255,255,255,.18),transparent 60%)}
.tp-blog .cover-mark{position:absolute;bottom:-10px;inset-inline-start:-6px;font-size:6rem;font-weight:800;
  color:#fff;opacity:.12;line-height:1;z-index:1}
.tp-blog .post:hover .cover img{transform:scale(1.05)}
.tp-blog .cover img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tp-blog .cat{position:absolute;top:14px;inset-inline-start:14px;z-index:2;background:rgba(255,255,255,.92);
  color:var(--brand);font-size:.8125rem;font-weight:600;padding:.25rem .7rem;border-radius:9999px;backdrop-filter:blur(4px)}
.tp-blog .post h2,.tp-blog .post h3{transition:color .3s ease}
.tp-blog .post:hover h2,.tp-blog .post:hover h3{color:var(--brand)}
.tp-blog .readmore svg{transition:transform .3s}
.tp-blog .post:hover .readmore svg{transform:translateX(-5px)}

/* ---------- big hero featured post ---------- */
.tp-blog .hero-post{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s}
.tp-blog .hero-post:hover{transform:translateY(-5px);
  box-shadow:0 28px 60px -22px color-mix(in srgb,var(--brand) 30%,transparent);
  border-color:color-mix(in srgb,var(--brand) 22%,transparent)}
.tp-blog .hero-split{display:grid;grid-template-columns:1fr}
@media (min-width:768px){.tp-blog .hero-split{grid-template-columns:1.15fr 1fr}}
.tp-blog .hcover{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--brand),var(--brand-2));min-height:280px}
@media (min-width:768px){.tp-blog .hcover{min-height:380px}}
.tp-blog .hcover::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 82% -10%,rgba(255,255,255,.22),transparent 58%)}
.tp-blog .hcover::before{content:"";position:absolute;inset:0;opacity:.6;
  background:radial-gradient(55% 55% at 16% 92%,rgba(255,255,255,.10),transparent 60%)}
.tp-blog .hmark{position:absolute;bottom:-34px;inset-inline-start:-14px;font-size:15rem;font-weight:800;
  color:#fff;opacity:.13;line-height:1}
.tp-blog .hero-post:hover .hcover img{transform:scale(1.04)}
.tp-blog .hcover img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tp-blog .hero-badge{position:absolute;top:18px;inset-inline-start:18px;z-index:2;display:inline-flex;align-items:center;
  gap:.45rem;background:rgba(255,255,255,.94);color:var(--brand);font-size:.8125rem;font-weight:600;
  padding:.32rem .9rem;border-radius:9999px;backdrop-filter:blur(4px)}
.tp-blog .hero-post h2{transition:color .3s}
.tp-blog .hero-post:hover h2{color:var(--brand)}

/* ---------- pagination ---------- */
.tp-blog .pg{display:inline-flex;min-width:42px;height:42px;align-items:center;justify-content:center;padding:0 .5rem;
  border:1px solid var(--colors-neutral-200);border-radius:.7rem;background:#fff;color:var(--colors-neutral-700);
  font-size:.9375rem;font-weight:500;transition:all .22s}
.tp-blog .pg:hover{border-color:color-mix(in srgb,var(--brand) 40%,transparent);color:var(--brand)}
.tp-blog .pg.active{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.tp-blog .pg.disabled{opacity:.45;pointer-events:none}

@media (prefers-reduced-motion:reduce){.tp-blog .rise{animation:none;opacity:1}}

/* ============================================================
   Single post + category header (blog-single / blog-category)
   ============================================================ */

/* reading progress bar */
.tp-blog .progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:60;background:transparent}
.tp-blog .progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--accent));
  transition:width .1s linear}

/* breadcrumb */
.tp-blog .crumb{color:var(--muted);transition:color .2s}
.tp-blog .crumb:hover{color:var(--brand)}

/* category header band */
.tp-blog .cat-head{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--brand-50),#fff 72%)}
.tp-blog .cat-head::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 70% at 88% -20%,color-mix(in srgb,var(--brand) 10%,transparent),transparent 60%)}
.tp-blog .cat-icon{width:64px;height:64px;border-radius:1.1rem;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 30px -14px color-mix(in srgb,var(--brand) 60%,transparent)}

/* article title (Estedad) */
.tp-blog .art-title{font-family:var(--tp-font-heading);font-weight:800;
  font-size:clamp(2rem,1.4rem+2.6vw,3rem);line-height:1.42;letter-spacing:-.015em;color:var(--ink)}

/* cover */
.tp-blog .art-cover{position:relative;overflow:hidden;border-radius:1.5rem;aspect-ratio:16/7;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 30px 60px -28px color-mix(in srgb,var(--brand) 45%,transparent)}
.tp-blog .art-cover::after{content:"";position:absolute;inset:0;
  background:radial-gradient(110% 80% at 82% -10%,rgba(255,255,255,.20),transparent 58%)}
.tp-blog .art-cover::before{content:"";position:absolute;inset:0;opacity:.5;
  background:
    radial-gradient(50% 60% at 14% 100%,rgba(255,255,255,.10),transparent 60%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 2px,transparent 2px 22px)}
.tp-blog .art-cover-mark{position:absolute;bottom:-26px;inset-inline-start:-10px;font-size:12rem;font-weight:800;
  color:#fff;opacity:.13;line-height:1}
.tp-blog .art-cover img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}

/* prose: scoped, generous Persian line-height, NO ad-hoc text sizes */
.tp-blog .prose{color:var(--colors-neutral-700)}
.tp-blog .prose p{font-size:1rem;line-height:2.1;margin:0 0 1.45rem}
.tp-blog .prose>p:first-of-type{font-size:1.0625rem;line-height:2.1;color:var(--ink)}
.tp-blog .prose h2{font-family:var(--tp-font-heading);font-weight:800;font-size:1.4rem;line-height:1.6;
  color:var(--ink);margin:2.5rem 0 1rem}
.tp-blog .prose h3{font-weight:600;font-size:1.125rem;line-height:1.7;color:var(--ink);margin:2rem 0 .75rem}
.tp-blog .prose ul,.tp-blog .prose ol{margin:0 0 1.45rem;padding-inline-start:0;list-style:none}
.tp-blog .prose ul li{position:relative;padding-inline-start:1.6rem;margin-bottom:.75rem;font-size:1rem;line-height:2}
.tp-blog .prose ul li::before{content:"";position:absolute;inset-inline-start:.2rem;top:.7rem;width:.5rem;height:.5rem;
  border-radius:9999px;background:var(--accent)}
.tp-blog .prose ol{counter-reset:tpb;padding-inline-start:0}
.tp-blog .prose ol li{position:relative;padding-inline-start:2rem;margin-bottom:.75rem;font-size:1rem;line-height:2;counter-increment:tpb}
.tp-blog .prose ol li::before{content:counter(tpb);position:absolute;inset-inline-start:0;top:.25rem;
  width:1.4rem;height:1.4rem;border-radius:9999px;background:var(--brand-50);color:var(--brand);
  font-size:.8rem;font-weight:600;display:flex;align-items:center;justify-content:center}
.tp-blog .prose a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--brand) 35%,transparent)}
.tp-blog .prose strong{color:var(--ink);font-weight:600}
.tp-blog .prose blockquote{margin:2rem 0;padding:1.25rem 1.5rem;border-inline-start:3px solid var(--brand);
  background:var(--brand-50);border-radius:0 1rem 1rem 0;color:var(--ink);font-size:1rem;line-height:1.9}
.tp-blog .prose img{width:100%;border-radius:1rem;margin:2rem 0}
.tp-blog .prose h2:first-child,.tp-blog .prose h3:first-child{margin-top:0}

/* share + tags */
.tp-blog .share-btn{width:42px;height:42px;border-radius:.8rem;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--colors-neutral-200);color:var(--colors-neutral-600);transition:all .22s}
.tp-blog .share-btn:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-2px)}
.tp-blog .tag{display:inline-flex;align-items:center;font-size:.8125rem;font-weight:500;color:var(--colors-neutral-600);
  background:var(--colors-neutral-100);border-radius:9999px;padding:.32rem .85rem;transition:background .22s,color .22s}
.tp-blog .tag:hover{background:var(--brand);color:#fff}

/* author box */
.tp-blog .author-box{border:1px solid var(--colors-neutral-200);border-radius:1.25rem;background:#fff}
.tp-blog .author-av{width:60px;height:60px;border-radius:9999px;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1.3rem;flex:0 0 auto;overflow:hidden}
.tp-blog .author-av img{width:100%;height:100%;object-fit:cover}

/* comments */
.tp-blog .comment-input,.tp-blog .comment-area{width:100%;background:#fff;border:1px solid var(--colors-neutral-200);
  border-radius:.85rem;padding:.75rem .9rem;font-size:.9375rem;color:var(--ink);outline:none;
  transition:border-color .25s,box-shadow .25s}
.tp-blog .comment-input:focus,.tp-blog .comment-area:focus{border-color:color-mix(in srgb,var(--brand) 45%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}
.tp-blog .comment{border:1px solid var(--colors-neutral-200);border-radius:1.1rem;background:#fff}
.tp-blog .comment-av{width:44px;height:44px;border-radius:9999px;background:var(--brand-50);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto;overflow:hidden}
.tp-blog .comment-av img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   DARK MODE — blog
   ============================================================ */
.dark .tp-blog {
  --ink: #e5e7eb;
  --muted: #94a3b8;
  --brand-50: color-mix(in srgb, var(--colors-primary-DEFAULT) 22%, #0f172a);
}
.dark .tp-blog .chip { background: #0f172a; border-color: #1f2937; color: #e5e7eb; }
.dark .tp-blog .chip:hover { background: var(--brand); color: #fff; }
.dark .tp-blog .comment-input,
.dark .tp-blog .comment-area { background: #0f172a; border-color: #1f2937; color: #e5e7eb; }
.dark .tp-blog .comment-input::placeholder,
.dark .tp-blog .comment-area::placeholder { color: #64748b; }
.dark .tp-blog .comment { background: #0f172a; border-color: #1f2937; }
.dark .tp-blog .comment-av { background: color-mix(in srgb, var(--brand) 30%, #0f172a); color: #cfe0ff; }