/* ===== TourTour blog ===== shared styling for blog.html + all posts */
:root { --blog-display: "Newsreader", Georgia, "Times New Roman", serif; --blog-sans: "Schibsted Grotesk", -apple-system, system-ui, sans-serif; }

/* header */
.blog-hero { max-width: 720px; margin: 0 auto; padding: 2.25rem 1.5rem 0; text-align: center; }
.blog-hero .blog-back { display: inline-block; margin-bottom: 1.5rem; font-family: var(--blog-sans); font-size: .82rem; font-weight: 600; color: var(--on-2); text-decoration: none; }
.blog-hero .blog-back:hover { color: var(--accent); }
.blog-hero .kicker { display: inline-block; font-family: var(--blog-sans); font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin: 0 0 .85rem; }
.blog-hero h1 { font-family: var(--blog-display); font-weight: 600; font-size: clamp(1.95rem, 4.6vw, 3rem); line-height: 1.07; letter-spacing: -.01em; margin: 0 0 .9rem; color: var(--on); }
.blog-hero .blog-meta { font-family: var(--blog-sans); font-size: .9rem; color: var(--on-2); }
.first-hero { padding-top: 6.5rem; }
.first-hero-2 { padding-top: 6.5rem; }
.blog-heroimg { max-width: 960px; margin: 2.5rem auto 0; padding: 0 1.5rem; }
.blog-heroimg img { width: 100%; height: auto; border-radius: 18px; display: block; box-shadow: 0 24px 60px rgba(22,21,15,.14); }
.blog-heroimg figcaption { margin-top: .7rem; font-family: var(--blog-sans); font-size: .8rem; color: var(--on-3); text-align: center; }

/* body */
.blog-body { max-width: 720px; margin: 0 auto; padding: 2.75rem 1.5rem 4rem; }
.blog-body > p, .blog-body > ul, .blog-body > ol { font-family: var(--blog-sans); font-size: 1.075rem; line-height: 1.75; color: var(--on); margin: 0 0 1.25rem; }
.blog-body .lead { font-size: 1.2rem; line-height: 1.6; }
.blog-body h2 { font-family: var(--blog-display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; margin: 3rem 0 1rem; color: var(--on); }
.blog-body h3 { font-family: var(--blog-sans); font-weight: 700; font-size: 1.18rem; margin: 2.25rem 0 .55rem; color: var(--on); }
.blog-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.blog-body ul, .blog-body ol { padding-left: 1.25rem; }
.blog-body li { margin: .45rem 0; line-height: 1.7; }
.rowlabel { font-weight: 700; color: var(--on); }

/* figures / app images */
.blog-fig { margin: 2.25rem 0; }
.blog-fig img { width: 100%; height: auto; border-radius: 16px; display: block; box-shadow: 0 14px 34px rgba(22,21,15,.11); }
.blog-fig figcaption { margin-top: .65rem; font-family: var(--blog-sans); font-size: .82rem; color: var(--on-2); text-align: center; }
.blog-fig--phone { max-width: 290px; margin: 2.25rem auto; }
.blog-fig--phone img { border-radius: 26px; }
.blog-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2.25rem 0; }
.blog-duo img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 12px 28px rgba(22,21,15,.10); }

/* comparison table */
.blog-table-scroll { overflow-x: auto; margin: 1.75rem 0 2.25rem; -webkit-overflow-scrolling: touch; }
.blog-table { width: 100%; border-collapse: collapse; font-family: var(--blog-sans); font-size: .92rem; min-width: 640px; }
.blog-table th, .blog-table td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.45; }
.blog-table th { font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--on-2); }
.blog-table tbody tr:first-child { background: var(--surface-p); }
.blog-table tbody tr:first-child td:first-child { font-weight: 700; }

/* CTA */
.blog-cta { max-width: 720px; margin: 3.5rem auto 0; padding: 2rem; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-p); }
.blog-cta h3 { margin: 0 0 .6rem; font-family: var(--blog-display); font-weight: 600; font-size: 1.4rem; color: var(--on); }
.blog-cta p { font-family: var(--blog-sans); margin: 0 0 1.15rem; color: var(--on); line-height: 1.6; }
.blog-cta .cta-btn { display: inline-block; background: var(--brand); color: var(--on-brand); font-family: var(--blog-sans); font-weight: 600; font-size: .92rem; padding: .72rem 1.5rem; border-radius: 999px; text-decoration: none; }
.blog-cta .cta-btn:hover { opacity: .92; }

/* related links */
.blog-related { position: static; display: block; height: auto; max-width: 720px; margin: 3.25rem auto 0; padding: 1.75rem 1.5rem 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; }
.blog-related .kicker { display: block; margin-bottom: .35rem; font-family: var(--blog-sans); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-2); }
.blog-related a { display: block; font-family: var(--blog-display); font-size: 1.05rem; padding: .55rem 0; color: var(--on); text-decoration: none; border-bottom: 1px solid var(--border); }
.blog-related a:last-child { border-bottom: none; }
.blog-related a:hover { color: var(--accent); }

/* index list */
.blog-index { max-width: 880px; margin: 0 auto; padding: 1rem 1.5rem 5rem; }
.post-card { display: grid; grid-template-columns: 220px 1fr; gap: 1.75rem; padding: 1.85rem 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; align-items: center; }
.post-card:hover .post-title { color: var(--accent); }
.post-thumb { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; box-shadow: 0 10px 26px rgba(22,21,15,.10); }
.post-kicker { font-family: var(--blog-sans); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--on-2); }
.post-title { font-family: var(--blog-display); font-weight: 600; font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: .35rem 0 .5rem; line-height: 1.14; transition: color .15s; color: var(--on); }
.post-excerpt { font-family: var(--blog-sans); color: var(--on-2); line-height: 1.6; margin: 0; font-size: .95rem; }
.post-card--lead .post-thumb { box-shadow: 0 16px 38px rgba(22,21,15,.16); }

@media (max-width: 620px) {
  .post-card { grid-template-columns: 1fr; gap: 1rem; }
  .blog-duo { grid-template-columns: 1fr; }
}