/* =====================================================================
   Thermastore BLOG — content styles only.
   The page also loads the live site's own stylesheets, so the header,
   footer and base typography are the real thing. This file styles ONLY
   the blog content area (scoped to .ts-blog) using the site's real
   fonts + brand colours.  Fonts are the actual Thermastore font files.
   ===================================================================== */

@font-face{font-family:'General Sans';src:url('fonts/GeneralSans-Light.otf') format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/GeneralSans-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/GeneralSans-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/GeneralSans-Semibold.otf') format('opentype');font-weight:600;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/GeneralSans-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'PP Mori';src:url('fonts/PPMori-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'PP Mori';src:url('fonts/PPMori-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}

.ts-blog{
  --green:#00FF00; --ink:#0E0F0F; --muted:#5f6a6b; --line:#e6eaea; --paper-2:#f5f7f7;
  --head:'PP Mori','General Sans',Verdana,Arial,sans-serif;
  --body:'General Sans',Verdana,Arial,sans-serif;
  font-family:var(--body); color:var(--ink); line-height:1.65;
}
.ts-blog *{box-sizing:border-box}
.ts-blog img{display:block;max-width:100%}
.ts-blog h1,.ts-blog h2,.ts-blog h3,.ts-blog h4{font-family:var(--head);font-weight:600;line-height:1.1;color:var(--ink);margin:0}
.ts-wrap{max-width:1140px;margin:0 auto;padding:0 24px}

/* eyebrow + tags */
.ts-blog .eyebrow{font-family:var(--body);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:13px;color:#0a8a18}
.ts-tag{display:inline-flex;align-items:center;background:var(--green);color:#04140a;font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:6px 13px;border-radius:50px}

/* buttons — match the site's green pill */
.ts-btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--body);font-weight:600;font-size:16px;padding:13px 28px;border-radius:50px;border:1.5px solid transparent;cursor:pointer;transition:.18s;text-decoration:none;white-space:nowrap}
.ts-btn-green{background:var(--green);color:#06160c;border-color:var(--green)}
.ts-btn-green:hover{filter:brightness(.92)}
.ts-btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.ts-btn-dark:hover{background:#000}
.ts-btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.ts-btn-outline:hover{background:var(--ink);color:#fff}

/* ---------- HERO banner (matches interior page pattern: bg photo + title) ---------- */
.ts-hero{position:relative;min-height:380px;display:flex;align-items:center;background:#0E0F0F center/cover no-repeat;overflow:hidden}
.ts-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,10,.78),rgba(8,10,10,.35))}
.ts-hero .ts-wrap{position:relative;z-index:2;padding-top:54px;padding-bottom:54px}
.ts-hero .eyebrow{color:var(--green)}
.ts-hero h1{color:#fff;font-size:clamp(40px,6vw,76px);margin:14px 0 16px;max-width:16ch}
.ts-hero h1 .hl{color:var(--green)}
.ts-hero p{color:#dfe6e6;font-size:20px;max-width:60ch;margin:0}
.ts-hero.article{min-height:340px}
.ts-hero .breadcrumb{color:#c7d0d0;font-size:14px;margin-bottom:6px}
.ts-hero .breadcrumb a{color:#c7d0d0;text-decoration:none}
.ts-hero .breadcrumb a:hover{color:#fff}
.ts-hero .byline{display:flex;align-items:center;gap:12px;margin-top:22px;color:#dfe6e6;font-size:15px}
.ts-hero .byline .avatar{width:44px;height:44px;border-radius:50%;background:var(--green);color:#06160c;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:600}
.ts-hero .byline strong{color:#fff;font-weight:600}

/* ---------- listing ---------- */
.ts-section{padding:72px 0}
.ts-section.grey{background:var(--paper-2)}
.ts-filters{display:flex;flex-wrap:wrap;gap:11px;padding-bottom:40px}
.ts-chip{padding:9px 19px;border-radius:50px;border:1.5px solid var(--line);background:#fff;font-size:14.5px;font-weight:500;color:var(--muted);cursor:pointer;transition:.15s;font-family:var(--body)}
.ts-chip:hover{border-color:var(--ink);color:var(--ink)}
.ts-chip.active{background:var(--ink);border-color:var(--ink);color:#fff}

.ts-featured{display:grid;grid-template-columns:1.15fr 1fr;border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:48px;background:#fff}
.ts-featured .media{position:relative;min-height:380px}
.ts-featured .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ts-featured .body{padding:46px 46px;display:flex;flex-direction:column;justify-content:center}
.ts-featured .body h2{font-size:clamp(26px,2.6vw,38px);margin:16px 0 14px;line-height:1.12}
.ts-featured .body p{color:var(--muted);font-size:16.5px;margin:0 0 26px}
.ts-meta{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted)}
.ts-meta .dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.55}

.ts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.ts-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:.2s}
.ts-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(14,15,15,.10)}
.ts-card .media{position:relative;aspect-ratio:3/2;overflow:hidden}
.ts-card .media img{width:100%;height:100%;object-fit:cover;transition:.4s}
.ts-card:hover .media img{transform:scale(1.05)}
.ts-card .media .ts-tag{position:absolute;left:14px;top:14px}
.ts-card .body{padding:24px;display:flex;flex-direction:column;flex:1}
.ts-card h3{font-size:21px;line-height:1.2;margin-bottom:11px}
.ts-card p{color:var(--muted);font-size:15px;margin:0 0 18px}
.ts-card .ts-meta{margin-top:auto}
.ts-card .readmore{margin-top:16px;font-weight:600;font-size:15px;color:var(--ink);display:inline-flex;gap:7px}
.ts-card .readmore .arr{color:#0a8a18;transition:.15s}
.ts-card:hover .readmore .arr{transform:translateX(4px)}
.ts-loadmore{display:flex;justify-content:center;margin-top:52px}

/* ---------- green CTA band (matches site quote band) ---------- */
.ts-cta{background:var(--green)}
.ts-cta .ts-wrap{display:flex;align-items:center;justify-content:space-between;gap:36px;padding:56px 24px;flex-wrap:wrap}
.ts-cta h2{color:#06160c;font-size:clamp(26px,3.2vw,42px);max-width:18ch}
.ts-cta p{color:#063b16;margin:8px 0 0;max-width:44ch;font-size:16.5px}
.ts-cta form{display:flex;gap:10px;flex-wrap:wrap}
.ts-cta input{border:0;border-radius:50px;padding:15px 22px;font-size:16px;min-width:280px;font-family:var(--body)}

/* ---------- article body ---------- */
.ts-feature-img{max-width:1140px;margin:-46px auto 0;padding:0 24px}
.ts-feature-img img{width:100%;border-radius:16px;aspect-ratio:16/8;object-fit:cover;box-shadow:0 18px 50px rgba(14,15,15,.14)}
.ts-article{max-width:760px;margin:0 auto;padding:56px 24px 20px;font-size:18.5px;line-height:1.75;color:#23282a}
.ts-article p{margin:0 0 24px}
.ts-article h2{font-size:32px;margin:44px 0 16px}
.ts-article h3{font-size:24px;margin:34px 0 12px}
.ts-article a{color:#0a8a18;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ts-article ul,.ts-article ol{margin:0 0 24px 22px}
.ts-article li{margin-bottom:9px}
.ts-pullquote{border-left:4px solid var(--green);padding:4px 0 4px 26px;margin:38px 0;font-family:var(--head);font-size:26px;line-height:1.32;color:var(--ink)}
.ts-callout{background:var(--paper-2);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:12px;padding:24px 28px;margin:34px 0;font-size:16.5px}
.ts-callout strong{font-family:var(--head)}
.ts-share{max-width:760px;margin:8px auto 0;padding:30px 24px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:13px}
.ts-share span{font-weight:600}
.ts-share .s{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);text-decoration:none;transition:.15s}
.ts-share .s:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- dark CTA (article end) ---------- */
.ts-cta-dark{background:var(--ink);color:#fff;text-align:center;padding:84px 0}
.ts-cta-dark h2{color:#fff;font-size:clamp(28px,3.6vw,50px);max-width:18ch;margin:0 auto 14px}
.ts-cta-dark h2 .hl{color:var(--green)}
.ts-cta-dark p{color:#aeb6b6;font-size:17px;max-width:46ch;margin:0 auto 28px}
.ts-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media(max-width:1024px){.ts-grid{grid-template-columns:repeat(2,1fr)}.ts-featured{grid-template-columns:1fr}.ts-featured .media{min-height:260px}}
@media(max-width:680px){
  .ts-grid{grid-template-columns:1fr}
  .ts-section{padding:52px 0}
  .ts-cta input{min-width:0;width:100%}.ts-cta form{width:100%}
  .ts-feature-img{margin-top:-20px}
}