/* Blog / travel guides — small additions on top of landing.css (which provides
   the shared chrome, hero, prose, faq, rellinks and footer styles). */

/* breadcrumb + post meta sit on the dark navy hero, so they use light text */
.blog-hero .crumbs{font-size:13px;color:#aebfd6;margin-bottom:10px}
.blog-hero .crumbs a{color:#cfdcee;font-weight:600}
.blog-hero .crumbs a:hover{color:#fff}
.blog-hero .crumbs span{color:#8ea4c2}
.blog-hero .postmeta{color:#9fb3cf;font-size:14px;margin-top:14px}
.blog-hero h1{max-width:820px}
.blog-hero .sub{max-width:680px}

/* readable measure for long-form article bodies */
.content .prose{max-width:760px}
.prose h2{font-size:24px;margin:34px 0 12px}
.prose h2:first-child{margin-top:0}

/* blog index: responsive card grid */
.bloggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.postcard{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:24px;transition:.18s;box-shadow:var(--shadow-sm)}
.postcard:hover{border-color:var(--amber);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.postcard h2{font-size:21px;line-height:1.2;margin:2px 0 0}
.postcard p{color:var(--slate);font-size:15px;line-height:1.5;flex:1}
.pc-kicker{display:inline-flex;align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--teal)}
.pc-meta{color:var(--slate);font-size:13px;font-weight:600}

@media(max-width:560px){
  .bloggrid{grid-template-columns:1fr}
  .blog-hero .postmeta{font-size:13px}
}