/* ============================================================
   Kona Poké — Blog (index + article pages)
   Reuses base reset, fonts, colors, header, footer and buttons
   from styles.css. Blog pages load: styles.css + blog.css.
   Self-contained: a few prose/visit/photo rules are copied from
   story.css so the blog needs only this one extra stylesheet.
   ============================================================ */

.blog-page { background: var(--cream); color: var(--ink); }

/* shared containers (copied from story.css) */
.story-wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
.story-narrow { max-width: 760px; }

/* ============ BLOG INDEX ============ */
.blog-hero {
  padding: clamp(104px, 12vw, 150px) 0 clamp(26px, 4vw, 44px);
  background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
  text-align: center;
}
.blog-hero .eyebrow,
.blog-eyebrow,
.post-eyebrow {
  display: inline-block; font-family: 'Jost', sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.blog-hero h1 {
  font-family: 'Jost', sans-serif; font-weight: 300; line-height: 1.02; color: var(--ink);
  font-size: clamp(40px, 7vw, 72px); letter-spacing: -0.01em;
}
.blog-hero h1 .em { font-weight: 600; color: var(--accent); }
.blog-hero-lead {
  max-width: 660px; margin: 18px auto 0; font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6; color: #45605c;
}

.blog-main { padding: clamp(24px, 4vw, 52px) 0 clamp(56px, 8vw, 90px); }
.post-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px; max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px);
}
.post-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid rgba(0,131,144,0.14); border-radius: 18px; overflow: hidden;
  text-decoration: none; transition: transform .15s ease, box-shadow .2s ease;
}
.post-card:hover { transform: translateY(-5px); box-shadow: 0 24px 46px -26px rgba(0,72,71,0.5); }
.post-card-img { aspect-ratio: 16/10; width: 100%; object-fit: cover; display: block; background: #e8f1f0; }
.post-card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card .card-cat { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.post-card h2, .post-card h3 { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.25; color: var(--ink); }
.post-card .card-excerpt { font-size: 14.5px; line-height: 1.55; color: #5a6f6a; flex: 1; }
.post-card .card-meta { font-size: 12.5px; color: #8a9a93; margin-top: 4px; }

/* ============ ARTICLE PAGE ============ */
.post-hero { padding: clamp(104px, 12vw, 144px) 0 0; text-align: center; }
.post-h1 {
  font-family: 'Jost', sans-serif; font-weight: 300; line-height: 1.08; letter-spacing: -0.01em;
  color: var(--ink); font-size: clamp(31px, 5vw, 54px); max-width: 880px; margin: 0 auto;
}
.post-h1 .em { font-weight: 600; color: var(--accent); }
.post-meta { margin-top: 16px; font-size: 14px; color: #7c8d87; }
.post-meta time { color: #7c8d87; }

.post-hero-figure { max-width: 1000px; margin: clamp(26px, 4vw, 40px) auto 0; padding: 0 clamp(16px, 4vw, 40px); }
.post-hero-figure img {
  width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover;
  border-radius: 20px; box-shadow: 0 30px 60px -34px rgba(0,20,20,0.55); display: block;
}
.post-hero-cta { text-align: center; margin: clamp(18px, 3vw, 28px) auto 0; padding: 0 clamp(16px, 4vw, 40px); }

/* narrative body (prose copied from story.css) */
.post-body { padding: clamp(20px, 3vw, 44px) 0 clamp(40px, 6vw, 72px); }
.post-body .story-narrow { margin: 0 auto; }
.post-body p { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.78; color: #3a524f; }
.post-body p + p { margin-top: 22px; }
.post-body h2 { font-family: 'Jost', sans-serif; font-weight: 600; font-size: clamp(24px, 3vw, 34px); line-height: 1.18; color: var(--ink); margin: 38px 0 14px; }
.post-body h2 .em { color: var(--accent); }
.post-body h3 { font-family: 'Jost', sans-serif; font-weight: 600; font-size: clamp(19px, 2.2vw, 23px); line-height: 1.25; color: var(--ink); margin: 28px 0 10px; }
.post-body a:not(.btn) { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.post-body a:not(.btn):hover { color: var(--accent-light); }

/* inline floated photo (copied from story.css) */
.story-inline-photo {
  float: right; width: 44%; max-width: 360px; height: auto;
  margin: 6px 0 16px 30px; border-radius: 16px; box-shadow: 0 22px 50px -28px rgba(0,20,20,0.5);
}
@media (max-width: 600px) {
  .story-inline-photo { float: none; width: 100%; max-width: 100%; margin: 26px 0; }
}

/* light-background check list (article listicles) */
.post-list { list-style: none; margin: 18px 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.post-list li { position: relative; padding-left: 34px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.5; color: #3a524f; }
.post-list li::before {
  content: '✓'; position: absolute; left: 0; top: 1px; width: 23px; height: 23px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--accent);
}

/* in-article conversion CTAs */
.post-cta {
  margin: 30px 0; padding: 22px 24px; border-radius: 16px;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.post-cta p { margin: 0; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.5; color: var(--ink); font-weight: 500; }
.post-cta .btn { margin: 0; }
.post-cta-order { background: rgba(0,131,144,0.08); border: 1px solid rgba(0,131,144,0.20); }
.post-cta-cater { background: rgba(255,107,91,0.08); border: 1px solid rgba(255,107,91,0.24); }

/* ============ VISIT STRIP (copied from story.css) ============ */
.post-visit { padding: clamp(48px, 7vw, 80px) 0; background: #fff; text-align: center; }
.post-visit h2 { font-family: 'Jost', sans-serif; font-weight: 400; font-size: clamp(26px, 4vw, 42px); color: var(--ink); }
.post-visit h2 .em { font-weight: 600; color: var(--accent); }
.post-visit-lead { margin: 14px auto 0; max-width: 600px; font-size: clamp(16px, 1.5vw, 19px); color: #45605c; }
.post-visit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 920px; margin: 30px auto 0; text-align: left; }
.post-visit-card { display: flex; flex-direction: column; gap: 4px; background: var(--cream); border: 1px solid rgba(0,131,144,0.14); border-radius: 16px; padding: 20px 22px; text-decoration: none; transition: transform .12s ease, box-shadow .15s ease; }
.post-visit-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(0,72,71,0.5); }
.post-visit-card .city { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 19px; color: var(--accent); }
.post-visit-card .addr { font-size: 13.5px; color: #62786f; }
.post-visit-cater { margin-top: 26px; font-size: 16px; color: #45605c; }
.post-visit-cater a { color: var(--accent); font-weight: 600; text-decoration: none; }
.post-visit-cater a:hover { text-decoration: underline; }

/* ============ RELATED POSTS ============ */
.post-related { padding: clamp(44px, 6vw, 76px) 0; background: var(--cream); }
.post-related h2 { font-family: 'Jost', sans-serif; font-weight: 400; font-size: clamp(24px, 3.4vw, 36px); color: var(--ink); text-align: center; }
.post-related h2 .em { font-weight: 600; color: var(--accent); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; max-width: 1000px; margin: 28px auto 0; padding: 0 clamp(20px, 5vw, 40px); }