/* ==========================================================================
   blog.css — /blogg list + single article (post) styling.
   Matches the Topolis design system (Frank Ruhl Libre headings, green accent).
   ========================================================================== */

/* ── Blog list ── */
.tp-blog-hero .nt-page-hero__copy{max-width:620px}
.tp-blog-list{padding:56px 0 88px}
.tp-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.tp-blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e9e9e9;border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.tp-blog-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.09);border-color:transparent}
.tp-blog-card__media{aspect-ratio:16/10;overflow:hidden;background:#f2f2ef}
.tp-blog-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.tp-blog-card:hover .tp-blog-card__media img{transform:scale(1.05)}
.tp-blog-card__body{display:flex;flex-direction:column;gap:10px;padding:22px 24px 24px;flex:1}
.tp-blog-card__date{font-size:12px;color:#2d5a3d;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.tp-blog-card__title{font-family:'Frank Ruhl Libre',Georgia,serif;font-size:21px;font-weight:500;line-height:1.3;margin:0;color:#1d1d1b}
.tp-blog-card__excerpt{font-size:15px;line-height:1.6;color:#5f5f5f;margin:0;flex:1}
.tp-blog-card__more{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:#1d1d1b;margin-top:4px}
.tp-blog-card__more svg{width:17px;height:17px;transition:transform .2s ease}
.tp-blog-card:hover .tp-blog-card__more svg{transform:translateX(4px)}
@media(max-width:980px){.tp-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media(max-width:600px){.tp-blog-grid{grid-template-columns:1fr}.tp-blog-list{padding:36px 0 60px}}

/* ── Single article ── */
.tp-article-main{padding-bottom:40px}
.tp-art-wrap{max-width:760px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.tp-article__head{padding-top:34px;text-align:center}
.tp-article__back{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#666;text-decoration:none;margin-bottom:26px;transition:color .15s}
.tp-article__back:hover{color:#1d1d1b}
.tp-article__back svg{width:17px;height:17px}
.tp-article__eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2d5a3d;margin:0 0 12px}
.tp-article__title{font-family:'Frank Ruhl Libre',Georgia,serif;font-size:clamp(30px,4.2vw,46px);font-weight:500;line-height:1.14;margin:0 0 18px;color:#1d1d1b}
.tp-article__meta{display:flex;align-items:center;justify-content:center;gap:12px;font-size:14px;color:#777}
.tp-article__meta .tp-dot{width:4px;height:4px;border-radius:50%;background:#c9c9c9;display:inline-block}
.tp-article__hero{max-width:1000px;margin:34px auto 0;padding:0 24px}
.tp-article__hero img{width:100%;border-radius:22px;display:block;aspect-ratio:16/9;object-fit:cover}
.tp-article__body{padding-top:36px;font-size:17.5px;line-height:1.75;color:#2c2c2c}
.tp-article__body h2{font-family:'Frank Ruhl Libre',Georgia,serif;font-size:28px;font-weight:500;line-height:1.25;margin:38px 0 14px;color:#1d1d1b}
.tp-article__body h3{font-family:'Frank Ruhl Libre',Georgia,serif;font-size:22px;font-weight:500;margin:30px 0 12px;color:#1d1d1b}
.tp-article__body p{margin:0 0 20px}
.tp-article__body a{color:#2d5a3d;text-decoration:underline;text-underline-offset:2px}
.tp-article__body ul,.tp-article__body ol{margin:0 0 20px;padding-left:22px}
.tp-article__body li{margin:0 0 8px}
.tp-article__body img{border-radius:16px;margin:10px 0}
.tp-article__body blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:3px solid #adddbd;font-style:italic;color:#444}

/* CTA */
.tp-article__cta{max-width:760px;margin:48px auto 0;padding:40px;text-align:center;background:#adddbd;border-radius:24px}
.tp-article__cta h3{font-family:'Frank Ruhl Libre',Georgia,serif;font-size:26px;font-weight:500;margin:0 0 10px;color:#12331f}
.tp-article__cta p{font-size:16px;line-height:1.6;color:#1f4530;margin:0 auto 22px;max-width:520px}
.tp-article__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.tp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 28px;border-radius:999px;font-weight:500;font-family:'Frank Ruhl Libre',Georgia,serif;text-transform:uppercase;letter-spacing:.06em;font-size:14px;text-decoration:none;transition:all .15s}
.tp-btn--primary{background:#020202;color:#fff}
.tp-btn--primary:hover{background:#222}
.tp-btn--ghost{background:transparent;color:#12331f;border:1px solid rgba(0,0,0,.35)}
.tp-btn--ghost:hover{background:rgba(0,0,0,.06)}

/* Related posts */
.tp-related-posts{padding:64px 0 20px}
.tp-related-posts__head{text-align:center;margin-bottom:34px}
.tp-related-posts__eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2d5a3d;margin:0 0 8px}
.tp-related-posts__title{font-family:'Frank Ruhl Libre',Georgia,serif;font-size:clamp(24px,3vw,34px);font-weight:500;margin:0;color:#1d1d1b}

@media(max-width:600px){
  .tp-article__cta{padding:28px 22px}
  .tp-article__hero{padding:0 16px}
  .tp-article__body{font-size:16.5px}
}

/* ── Gallery block grid fix (bulletproof) ──
   Legacy style.css rule ".nt-gallery{display:grid;grid-template-columns:repeat(3,..)}"
   was written for the OLD structure where .nt-gallery WAS the image grid. The new
   template uses .nt-gallery as a <section> wrapper and .nt-gallery__grid as the grid,
   so the legacy rule squeezes everything into one narrow column. These rules (loaded
   last, with !important) neutralise it and restore the responsive image grid. */
.section.nt-gallery{display:block !important}
.nt-gallery > .wrap{max-width:1200px;margin:0 auto}
.nt-gallery .nt-gallery__grid{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;gap:14px;margin-top:24px}
.nt-gallery .nt-gallery__item{display:block;position:relative;overflow:hidden;border-radius:14px;aspect-ratio:4/3;cursor:zoom-in;box-shadow:0 4px 14px rgba(21,21,21,.06)}
.nt-gallery .nt-gallery__item img{width:100%;height:100%;object-fit:cover;border-radius:14px;aspect-ratio:auto;transition:transform .45s ease}
.nt-gallery .nt-gallery__item:hover img{transform:scale(1.06)}
/* keep the lightbox image uncropped (beats ".nt-gallery img") */
.nt-gallery__lb .nt-gallery__lb-img{aspect-ratio:auto !important;object-fit:contain !important;width:auto;height:auto;max-width:92vw;max-height:80vh;border-radius:8px}
@media(max-width:600px){.nt-gallery .nt-gallery__grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) !important;gap:10px}}