/* ============================================================
   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:1200/630;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));aspect-ratio:1200/630;min-height:280px}
@media (min-width:768px){.tp-blog .hcover{aspect-ratio:auto;min-height:0;height:100%}}
.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;object-position:right center;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(70% 90% at 92% -30%,color-mix(in srgb,var(--brand) 14%,transparent),transparent 62%)}
.tp-blog .cat-head::before{content:"";position:absolute;pointer-events:none;
  inset-inline-start:-140px;bottom:-160px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand) 12%,transparent),transparent 68%)}
.tp-blog .cat-head .rise{position:relative;z-index:1}
.tp-blog .cat-icon{width:60px;height:60px;border-radius:1.1rem;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 34px -12px color-mix(in srgb,var(--brand) 60%,transparent);
  outline:6px solid color-mix(in srgb,var(--brand) 10%,transparent);outline-offset:0}
/* header title bigger + heavier than default tp-h2 */
.tp-blog .cat-head .tp-h2{font-weight:800;letter-spacing:-.01em;
  font-size:clamp(1.9rem,1.3rem+2.4vw,2.6rem)}
.tp-blog .cat-head .tp-lead{max-width:44rem;color:color-mix(in srgb,var(--ink) 74%,transparent)}
.tp-blog .cat-head .cat-count{display:inline-flex;align-items:center;gap:.4rem;
  padding:.32rem .8rem;border-radius:999px;background:color-mix(in srgb,var(--brand) 9%,#fff);
  border:1px solid color-mix(in srgb,var(--brand) 16%,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}

/* ============================================================
   RELATED SERVICES (blog post → live order-form CTAs)
   ============================================================ */
.rel-services .rs-card{
  text-decoration:none;
  transition:transform .35s var(--tp-ease,cubic-bezier(.2,.7,.2,1)),
             box-shadow .35s,border-color .35s;
}
.rel-services .rs-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 44px -16px color-mix(in srgb, var(--c) 30%, transparent);
  border-color:color-mix(in srgb, var(--c) 35%, transparent);
}
/* icon tile — tinted at rest, fills service color on hover */
.rel-services .rs-tile{
  background:color-mix(in srgb, var(--c) 10%, #fff);
  transition:background .3s, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.rel-services .rs-card:hover .rs-tile{
  background:color-mix(in srgb, var(--c) 16%, #fff);
  transform:scale(1.06);
}
.rel-services .rs-arrow{transition:transform .3s var(--tp-ease,cubic-bezier(.2,.7,.2,1))}
.rel-services .rs-card:hover .rs-arrow{transform:translateX(-4px)}
@media (prefers-reduced-motion:reduce){
  .rel-services .rs-card,
  .rel-services .rs-card:hover,
  .rel-services .rs-tile,
  .rel-services .rs-card:hover .rs-tile,
  .rel-services .rs-arrow,
  .rel-services .rs-card:hover .rs-arrow{transition:none;transform:none}
}

/* ============================================================
   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; }

/* category header band — dark (light gradient washes out light --ink text) */
.dark .tp-blog .cat-head{ background:linear-gradient(160deg, color-mix(in srgb, var(--brand) 22%, #0f172a), #030712 72%); border-color:#1f2937 !important; }
.dark .tp-blog .cat-head::after{ background:radial-gradient(80% 70% at 88% -20%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 60%); }
.dark .tp-blog .cat-head .tp-h2{ color:#e5e7eb !important; }
.dark .tp-blog .cat-head .tp-lead{ color:#cbd5e1 !important; }
.dark .tp-blog .cat-head .tp-small{ color:#94a3b8 !important; }
.dark .tp-blog .cat-head::before{ background:radial-gradient(circle,color-mix(in srgb,var(--brand) 20%,transparent),transparent 68%); }
.dark .tp-blog .cat-icon{ outline-color:color-mix(in srgb,var(--brand) 24%,transparent); }
.dark .tp-blog .cat-head .cat-count{ background:color-mix(in srgb,var(--brand) 20%,#0b1220); border-color:color-mix(in srgb,var(--brand) 30%,transparent); }

/* related services — dark */
.dark .rel-services .rs-card{ background:#0f172a; border-color:#1f2937; }
.dark .rel-services .rs-card h3{ color:#e5e7eb; }
.dark .rel-services .rs-tile{ background:color-mix(in srgb, var(--c) 26%, #0f172a); }
.dark .rel-services .rs-card:hover .rs-tile{ background:color-mix(in srgb, var(--c) 34%, #0f172a); }
.dark .rel-services .rs-card:hover{ border-color:color-mix(in srgb, var(--c) 45%, transparent); }

/* ------------------------------------------------------------------
   DARK MODE contrast fixes (WCAG AA)
   These sections bake inline color:var(--ink|--muted|--c|--brand) or
   ship hardcoded brand colors in the post body. In dark mode they land
   on a near-black page/surface and drop to ~1.2–1.9 contrast. Force
   readable light colors. Scoped to .tp-blog so nothing leaks.
   ------------------------------------------------------------------ */

/* Tailwind v4 compiles dark:bg-* as :is(.dark *) inside a later @layer, so
   .bg-white wins the cascade and these surfaces stay white even in dark mode.
   Force the dark surfaces here (this file loads after the Tailwind build). */
.dark .rel-services.bg-white,
.dark .rel-services{ background:#030712 !important; }
/* related-posts section ("مطالب مرتبط") — plain section.bg-white inside the blog */
.dark .tp-blog section.bg-white,
.dark section.rel-services + section.bg-white{ background:#030712 !important; }
.dark .tp-blog .post.bg-white,
.dark .tp-blog .post{ background:#111827 !important; border-color:#1f2937 !important; }

/* related-services + related-posts section headings/ledes (inline var(--ink)/(--muted)) */
.dark .tp-blog .tp-h2,
.dark .rel-services .tp-h2{ color:#e5e7eb !important; }
.dark .tp-blog .tp-lead{ color:#cbd5e1 !important; }

/* related-post cards: card bg is dark:bg-gray-900 but text uses inline vars */
.dark .tp-blog .post .tp-h3,
.dark .tp-blog .post h3{ color:#e5e7eb !important; }
.dark .tp-blog .post .tp-small,
.dark .tp-blog .post .tp-body{ color:#94a3b8 !important; }
.dark .tp-blog .post .readmore{ color:#93b4e8 !important; }

/* rs-go eyebrow: inline color:var(--c) (brand blue) sinks into the dark card */
.dark .rel-services .rs-go{ color:#93b4e8 !important; }

/* amber eyebrow badge (inline color:#b45309 on accent-tinted bg) — too dark
   on the dark section bg. Lighten text + strengthen the pill background. */
.dark .tp-blog section .text-center > .tp-eyebrow[style*="b45309"],
.dark .rel-services .text-center > .tp-eyebrow{
  color:#fcd34d !important;
  background:color-mix(in srgb, var(--accent, #F59E0B) 22%, #0f172a) !important;
}

/* section-header "مشاهدهٔ همه" link (inline color:var(--brand)) — desktop-only
   (hidden sm:inline-flex), brand blue sinks into the dark section bg */
.dark .tp-blog section .flex > a[style*="--brand"],
.dark .tp-blog section a.tp-eyebrow[style*="--brand"]{ color:#93b4e8 !important; }

/* article body: legacy post HTML ships inline #374151 text + #0d3e7e links */
.dark .tp-blog article p,
.dark .tp-blog .prose p{ color:#cbd5e1 !important; }
.dark .tp-blog article a,
.dark .tp-blog .prose a{ color:#93b4e8 !important; }

/* ==================================================================
   TAILWIND-SUBSET SHIM for modernized post bodies
   ------------------------------------------------------------------
   ~23 posts were "modernized" with raw Tailwind utility classes
   (grid / flex / col-span / spacing / color / typography) that the
   theme CSS never shipped. Result: those posts rendered unstyled —
   grid bodies collapsed to a 1-word-per-line sliver, flex rows lost
   alignment, cards had no padding/background.
   This block ships exactly the utilities those bodies use, values =
   Tailwind defaults, ALL scoped to .tp-blog so nothing leaks to the
   rest of the site. Body HTML is left untouched.
   (Follow-up: convert these bodies to native .tp-* design-system
   classes via the optimize-post loop, then this block can shrink.)
   ================================================================== */

/* --- display / layout --- */
.tp-blog .flex{display:flex}
.tp-blog .inline-flex{display:inline-flex}
.tp-blog .grid{display:grid}
/* use 1fr (not minmax(0,1fr)): a col-span-2 child collapses a minmax(0,1fr)
   track to 0px, which stacks Persian text 1 word per line (RTL bug) */
.tp-blog .grid-cols-1{grid-template-columns:repeat(1,1fr)}
.tp-blog .grid-cols-2{grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){
  .tp-blog .sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
  .tp-blog .sm\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
}
/* every direct grid child must be allowed to shrink, else long Persian words
   blow the track and the column collapses to a 1-char-per-line sliver */
.tp-blog .grid > *{min-width:0}
.tp-blog .flex-wrap{flex-wrap:wrap}
.tp-blog .items-center{align-items:center}
.tp-blog .justify-between{justify-content:space-between}
.tp-blog .justify-center{justify-content:center}
/* grid/flex items must be allowed to shrink, else long Persian words blow the track */
.tp-blog [class*="col-span-"]{min-width:0}

/* --- gaps --- */
.tp-blog .gap-2{gap:.5rem}
.tp-blog .gap-3{gap:.75rem}
.tp-blog .gap-4{gap:1rem}
.tp-blog .gap-5{gap:1.25rem}
.tp-blog .gap-6{gap:1.5rem}

/* --- sizing --- */
.tp-blog .w-full{width:100%}
.tp-blog .w-100{width:100%}
.tp-blog .h-auto{height:auto}
.tp-blog .max-w-7xl{max-width:80rem}
.tp-blog .mx-auto{margin-inline:auto}
.tp-blog .m-auto{margin:auto}
.tp-blog .object-contain{object-fit:contain}

/* --- padding --- */
.tp-blog .p-4{padding:1rem}
.tp-blog .p-5{padding:1.25rem}
.tp-blog .p-6{padding:1.5rem}
.tp-blog .p-8{padding:2rem}
.tp-blog .px-4{padding-inline:1rem}
.tp-blog .px-6{padding-inline:1.5rem}
.tp-blog .px-7{padding-inline:1.75rem}
.tp-blog .py-1\.5{padding-block:.375rem}
.tp-blog .py-2{padding-block:.5rem}
.tp-blog .py-3\.5{padding-block:.875rem}
.tp-blog .py-4{padding-block:1rem}

/* --- margins --- */
.tp-blog .mb-3{margin-bottom:.75rem}
.tp-blog .mb-4{margin-bottom:1rem}
.tp-blog .mb-6{margin-bottom:1.5rem}
.tp-blog .mt-2{margin-top:.5rem}
.tp-blog .mt-3{margin-top:.75rem}
.tp-blog .mt-5{margin-top:1.25rem}
.tp-blog .mt-6{margin-top:1.5rem}
.tp-blog .mt-8{margin-top:2rem}
.tp-blog .my-3{margin-block:.75rem}
.tp-blog .my-4{margin-block:1rem}
.tp-blog .my-6{margin-block:1.5rem}
.tp-blog .my-8{margin-block:2rem}
.tp-blog .my-10{margin-block:2.5rem}

/* --- borders / radius / shadow --- */
.tp-blog .border{border-width:1px;border-style:solid}
.tp-blog .border-2{border-width:2px;border-style:solid}
.tp-blog .border-b{border-bottom-width:1px;border-bottom-style:solid}
.tp-blog .border-s-4{border-inline-start-width:4px;border-inline-start-style:solid}
.tp-blog .border-l-4{border-left-width:4px;border-left-style:solid}
.tp-blog .border-gray-200{border-color:#e5e7eb}
.tp-blog .border-blue-200{border-color:#bfdbfe}
.tp-blog .border-green-200{border-color:#bbf7d0}
.tp-blog .border-green-500{border-color:#22c55e}
.tp-blog .border-red-200{border-color:#fecaca}
.tp-blog .border-red-500{border-color:#ef4444}
.tp-blog .border-yellow-200{border-color:#fef08a}
.tp-blog .rounded-lg{border-radius:.5rem}
.tp-blog .rounded-xl{border-radius:.75rem}
.tp-blog .rounded-2xl{border-radius:1rem}
.tp-blog .rounded-full{border-radius:9999px}
.tp-blog .shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
.tp-blog .shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}

/* --- backgrounds --- */
.tp-blog .bg-white{background-color:#fff}
.tp-blog .bg-gray-50{background-color:#f9fafb}
.tp-blog .bg-blue-50{background-color:#eff6ff}
.tp-blog .bg-green-50{background-color:#f0fdf4}
.tp-blog .bg-red-50{background-color:#fef2f2}
.tp-blog .bg-yellow-50{background-color:#fefce8}
.tp-blog .bg-yellow-500{background-color:#eab308}

/* --- text color --- */
.tp-blog .text-gray-700{color:#374151}
.tp-blog .text-gray-900{color:#111827}
.tp-blog .text-white{color:#fff}
.tp-blog .text-blue-600{color:#2563eb}
.tp-blog .text-green-700{color:#15803d}
.tp-blog .text-red-700{color:#b91c1c}

/* --- text size / weight / leading --- */
.tp-blog .text-base{font-size:1rem}
.tp-blog .text-lg{font-size:1.125rem}
.tp-blog .text-xl{font-size:1.25rem}
.tp-blog .text-2xl{font-size:1.5rem}
.tp-blog .font-medium{font-weight:500}
.tp-blog .font-semibold{font-weight:600}
.tp-blog .font-bold{font-weight:700}
.tp-blog .leading-tight{line-height:1.25}
.tp-blog .leading-relaxed{line-height:1.85}
.tp-blog .underline{text-decoration-line:underline}

/* --- transitions / transform base --- */
.tp-blog .transition{transition:color,background-color,border-color,transform,box-shadow .15s ease}
.tp-blog .transition-colors{transition:color,background-color,border-color .15s ease}
.tp-blog .transition-all{transition:all .2s ease}
.tp-blog .duration-200{transition-duration:.2s}
.tp-blog .cursor-pointer{cursor:pointer}
.tp-blog summary.marker\:hidden::-webkit-details-marker,.tp-blog .marker\:hidden::-webkit-details-marker{display:none}
.tp-blog .marker\:hidden{list-style:none}

/* --- interaction states --- */
.tp-blog .hover\:-translate-y-0\.5:hover{transform:translateY(-.125rem)}
.tp-blog .hover\:text-blue-800:hover{color:#1e40af}
.tp-blog .hover\:bg-yellow-600:hover{background-color:#ca8a04}
.tp-blog details[open] .group-open\:rotate-180,.tp-blog .group[open] .group-open\:rotate-180{transform:rotate(180deg)}
.tp-blog .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
.tp-blog .focus\:ring-2:focus{box-shadow:0 0 0 2px var(--brand,#2563eb)}
.tp-blog .focus\:ring-offset-2:focus{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--brand,#2563eb)}

/* --- responsive variants --- */
@media (min-width:640px){
  .tp-blog .sm\:px-6{padding-inline:1.5rem}
  .tp-blog .sm\:col-span-6{grid-column:span 6/span 6}
  .tp-blog .sm\:col-span-8{grid-column:span 8/span 8}
}
@media (min-width:768px){
  .tp-blog .md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
  .tp-blog .md\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
  .tp-blog .md\:grid-cols-12{grid-template-columns:repeat(12,1fr)}
  .tp-blog .md\:col-span-2{grid-column:span 2/span 2}
  .tp-blog .md\:col-span-4{grid-column:span 4/span 4}
  .tp-blog .md\:col-span-6{grid-column:span 6/span 6}
  .tp-blog .md\:col-span-8{grid-column:span 8/span 8}
}
@media (min-width:1024px){
  .tp-blog .lg\:gap-6{gap:1.5rem}
  .tp-blog .lg\:p-10{padding:2.5rem}
  .tp-blog .lg\:px-8{padding-inline:2rem}
  .tp-blog .lg\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
}

/* ==================================================================
   IMPROVE-POST semantic components (scoped .tp-blog)
   CTA button, mini-card grid, numbered steps, native <details> FAQ,
   figure. Design-system tokens (brand blue + amber). Reusable across
   posts converted by the improve-post / optimize-post skills.
   ================================================================== */

/* CTA button — brand blue, one hover lift */
.tp-blog .tp-cta-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.9rem 1.9rem;border-radius:.9rem;
  background:var(--colors-primary-DEFAULT,#0d3e7e);color:#fff !important;
  font-weight:600;text-decoration:none;
  box-shadow:0 10px 22px -10px rgba(13,62,126,.55);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.tp-blog .tp-cta-btn:hover{transform:translateY(-2px);
  box-shadow:0 16px 30px -12px rgba(13,62,126,.6)}

/* figure */
.tp-blog .tp-figure{margin:1.75rem 0;text-align:center}
.tp-blog .tp-figure img{max-width:100%;height:auto;border-radius:1rem;
  box-shadow:0 8px 24px -14px rgba(0,0,0,.35)}

/* mini-card grid (methods) */
.tp-blog .tp-cards-grid{display:grid;gap:1rem;grid-template-columns:1fr;margin:1.5rem 0}
@media (min-width:768px){.tp-blog .tp-cards-grid{grid-template-columns:repeat(3,1fr)}}
.tp-blog .tp-mini-card{border:1px solid #e5e7eb;border-radius:1rem;padding:1.4rem;
  background:#fff;transition:transform .3s,box-shadow .3s,border-color .3s}
.tp-blog .tp-mini-card:hover{transform:translateY(-4px);
  box-shadow:0 18px 40px -18px rgba(13,62,126,.28);
  border-color:color-mix(in srgb,var(--colors-primary-DEFAULT,#0d3e7e) 28%,transparent)}
.tp-blog .tp-mini-card h3{margin:0 0 .5rem;color:var(--colors-primary-DEFAULT,#0d3e7e)}

/* numbered steps */
.tp-blog .tp-steps{display:flex;flex-direction:column;gap:1rem;margin:1.5rem 0}
.tp-blog .tp-step{display:flex;gap:1rem;align-items:flex-start;
  border:1px solid #e5e7eb;border-radius:1rem;padding:1.3rem;background:#fff}
.tp-blog .tp-step-num{flex:0 0 auto;width:2.4rem;height:2.4rem;border-radius:9999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--colors-primary-50,#eef4fc);color:var(--colors-primary-DEFAULT,#0d3e7e);
  font-weight:700;font-size:1.05rem}
.tp-blog .tp-step h3{margin:0 0 .35rem}

/* FAQ — native <details> accordion */
.tp-blog .tp-faq{display:flex;flex-direction:column;gap:.75rem;margin:1.25rem 0}
.tp-blog .tp-faq details{border:1px solid #e5e7eb;border-radius:.9rem;
  background:#fff;overflow:hidden}
.tp-blog .tp-faq summary{cursor:pointer;list-style:none;padding:1rem 1.25rem;
  font-weight:600;color:var(--colors-surface-foreground,#111827);
  position:relative;padding-inline-start:2.6rem}
.tp-blog .tp-faq summary::-webkit-details-marker{display:none}
.tp-blog .tp-faq summary::before{content:"+";position:absolute;inset-inline-start:1.1rem;
  color:var(--colors-primary-DEFAULT,#0d3e7e);font-weight:700}
.tp-blog .tp-faq details[open] summary::before{content:"–"}
.tp-blog .tp-faq details p{margin:0;padding:0 1.25rem 1.1rem;color:#374151;line-height:2}

/* dark mode */
.dark .tp-blog .tp-mini-card,
.dark .tp-blog .tp-step,
.dark .tp-blog .tp-faq details{background:#0f172a;border-color:#1f2937}
.dark .tp-blog .tp-faq p{color:#cbd5e1}
.dark .tp-blog .tp-faq summary{color:#e5e7eb}

/* ── Easy Table of Contents ─────────────────────────────────────────── */
.tp-blog .tp-toc{
  margin:0 0 2rem;
  border:1px solid var(--colors-neutral-200,#e5e7eb);
  border-radius:18px;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.10);
  overflow:hidden;
}
.tp-blog .tp-toc-head{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:1rem 1.2rem;border:0;cursor:pointer;font:inherit;
  color:var(--ink,#0f172a);
  background:linear-gradient(180deg, var(--brand-50,#eef4ff), transparent);
  border-bottom:1px solid var(--colors-neutral-200,#eef1f6);
}
.tp-blog .tp-toc.is-collapsed .tp-toc-head{border-bottom-color:transparent}
.tp-blog .tp-toc-title{
  display:inline-flex;align-items:center;gap:.6rem;
  font-weight:800;font-size:1.02rem;letter-spacing:-.01em;
}
.tp-blog .tp-toc-ico{
  color:var(--brand,#0d3e7e);flex:0 0 auto;
  padding:.3rem;border-radius:8px;background:var(--brand-50,#eef4ff);
  width:28px;height:28px;box-sizing:content-box;
}
.tp-blog .tp-toc-caret{color:var(--muted,#94a3b8);transition:transform .3s ease}
.tp-blog .tp-toc.is-collapsed .tp-toc-caret{transform:rotate(-90deg)}

.tp-blog .tp-toc-list{
  list-style:none;margin:0;padding:.6rem;
  scrollbar-width:thin;scrollbar-color:var(--colors-neutral-200,#cbd5e1) transparent;
}
.tp-blog .tp-toc-list::-webkit-scrollbar{width:6px}
.tp-blog .tp-toc-list::-webkit-scrollbar-thumb{background:var(--colors-neutral-200,#cbd5e1);border-radius:3px}
.tp-blog .tp-toc.is-collapsed .tp-toc-list{display:none}

.tp-blog .tp-toc-item{margin:1px 0;position:relative}

.tp-blog .tp-toc-link{
  display:flex;align-items:center;gap:.6rem;
  padding:.5rem .6rem;border-radius:11px;
  color:var(--muted,#475569);text-decoration:none;line-height:1.65;
  font-size:.94rem;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.tp-blog .tp-toc-link:hover{
  background:var(--brand-50,#f1f5ff);color:var(--brand,#0d3e7e);
}
.tp-blog .tp-toc-link.is-active{
  color:var(--brand,#0d3e7e);font-weight:700;
  background:var(--brand-50,#eaf1ff);
}

/* Number chip (top-level H2 only) */
.tp-blog .tp-toc-n{
  flex:0 0 auto;width:1.55rem;height:1.55rem;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;font-size:.8rem;font-weight:800;line-height:1;
  background:var(--brand-50,#e3ecff);color:var(--brand,#0d3e7e);
  transition:background .16s ease,color .16s ease;
}
.tp-blog .tp-toc-link:hover .tp-toc-n,
.tp-blog .tp-toc-link.is-active .tp-toc-n{
  background:var(--brand,#0d3e7e);color:#fff;
}

/* Sub-items (H3/H4): indent + dot marker + tree guide line, no number */
.tp-blog .tp-toc-item.lvl-3,
.tp-blog .tp-toc-item.lvl-4{padding-inline-start:1rem}
.tp-blog .tp-toc-item.lvl-4{padding-inline-start:2rem}
.tp-blog .tp-toc-item.lvl-3 .tp-toc-link,
.tp-blog .tp-toc-item.lvl-4 .tp-toc-link{font-size:.88rem}
.tp-blog .tp-toc-item.lvl-3 .tp-toc-link::before,
.tp-blog .tp-toc-item.lvl-4 .tp-toc-link::before{
  content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;
  background:var(--colors-neutral-300,#cbd5e1);
  margin-inline-start:.5rem;transition:background .16s ease;
}
.tp-blog .tp-toc-item.lvl-3 .tp-toc-link:hover::before,
.tp-blog .tp-toc-item.lvl-4 .tp-toc-link:hover::before,
.tp-blog .tp-toc-item.lvl-3 .tp-toc-link.is-active::before,
.tp-blog .tp-toc-item.lvl-4 .tp-toc-link.is-active::before{
  background:var(--brand,#0d3e7e);
}

/* Desktop: TOC beside article in a flex row. Sticky is bounded by the row
   wrapper, so it stops at the article's end (no floating into related posts). */
@media (min-width:1100px){
  .tp-blog .tp-toc-wrap{
    display:flex;align-items:flex-start;gap:2.5rem;
  }
  .tp-blog .tp-toc-wrap > article{flex:1 1 auto;min-width:0}
  .tp-blog .tp-toc-wrap .tp-toc{
    position:sticky;top:90px;flex:0 0 280px;width:280px;order:2;
    max-height:calc(100vh - 120px);display:flex;flex-direction:column;
    margin-bottom:2rem;
  }
  .tp-blog .tp-toc-list{max-height:none;flex:1 1 auto;overflow:auto}
}

/* Dark mode */
.dark .tp-blog .tp-toc{
  background:#0f172a;border-color:#1f2937;
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
}
.dark .tp-blog .tp-toc-head{
  color:#e5e7eb;background:linear-gradient(180deg,#111c30,transparent);
  border-bottom-color:#1f2937;
}
.dark .tp-blog .tp-toc-ico{background:#111c30}
.dark .tp-blog .tp-toc-link{color:#94a3b8}
.dark .tp-blog .tp-toc-link:hover,
.dark .tp-blog .tp-toc-link.is-active{background:#111c30;color:#bfdbfe}
.dark .tp-blog .tp-toc-n{background:#1e293b;color:#bfdbfe}
.dark .tp-blog .tp-toc-link:hover .tp-toc-n,
.dark .tp-blog .tp-toc-link.is-active .tp-toc-n{background:#3b82f6;color:#fff}