/* ============================================================
   BOOK MY TRIP — BLOG
   Listing (blog.html) + article reader (post.html)
   ============================================================ */

/* ---------- filter bar ---------- */
.blog-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-7);
}
.blog-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.blog-bar .input { max-width: 260px; }

/* .chip--on lives in components.css alongside .chip */

/* ---------- featured post ---------- */
.pfeat {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: var(--card);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.pfeat:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); }
.pfeat__img { position: relative; overflow: hidden; min-height: 320px; }
.pfeat__img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.pfeat:hover .pfeat__img img { transform: scale(1.06); }
.pfeat__body {
  padding: clamp(26px, 4vw, 46px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pfeat__body h2 { font-size: clamp(1.45rem, 2.4vw, 2rem); margin: var(--sp-4) 0 var(--sp-3); }
.pfeat__body .lead { font-size: 1rem; }
.pfeat__body .btn { align-self: flex-start; }

@media (max-width: 860px) {
  .pfeat { grid-template-columns: 1fr; }
  .pfeat__img { min-height: 220px; aspect-ratio: 16/9; }
}

/* ---------- post card ---------- */
.pcard {
  display: flex;
  flex-direction: column;
  background: var(--card);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease);
}
.pcard:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: rgba(var(--rgb-mauve), .5);
}
.pcard__img { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.pcard__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.pcard:hover .pcard__img img { transform: scale(1.07); }
.pcard__cat {
  position: absolute; top: 13px; left: 13px;
  padding: 5px 12px;
  border-radius: var(--r-full);
  font-size: .72rem; font-weight: 700;
  background: rgba(255,255,255,.92);
  color: var(--navy-800);
  backdrop-filter: blur(6px);
}
.pcard__body {
  padding: var(--sp-5);
  display: flex; flex-direction: column; flex: 1;
}
.pcard__meta {
  display: flex; gap: 7px; align-items: center;
  font-size: .76rem; font-weight: 600;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.pcard__body h3 { font-size: 1.06rem; line-height: 1.4; margin-bottom: 9px; }
.pcard__body p {
  font-size: .89rem; line-height: 1.7;
  color: var(--ink-soft);
  flex: 1;
}
.pcard__more {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: var(--sp-4);
  font-size: .85rem; font-weight: 700;
  /* --red-600: this is 13.6px, and --red-500 only clears 4.5:1 over
     the brightest veil. The card can sit on any part of the sky. */
  color: var(--red-600);
}
.pcard__more svg { width: 15px; height: 15px; transition: transform var(--t-fast) ease; }
.pcard:hover .pcard__more svg { transform: translateX(4px); }

/* ---------- article reader ---------- */
.post-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(34px, 5vw, 60px));
  padding-bottom: var(--sp-6);
  background:
    radial-gradient(700px 340px at 88% -10%, rgba(var(--rgb-mauve), .26), transparent 62%),
    linear-gradient(170deg, rgba(255,255,255,.6), rgba(226,235,248,.38) 70%);
  border-bottom: 1px solid var(--line);
}
.post-hero > * { position: relative; z-index: 1; }
.post-hero h1 {
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  max-width: 22ch;
  margin-top: var(--sp-4);
}
.post-meta {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  font-size: .84rem; font-weight: 600;
  /* --ink-soft, not --ink-mute: this only ever renders inside
     .post-hero, whose mauve wash makes it the densest light surface
     on the article page. Mute measured 4.14:1 there. */
  color: var(--ink-soft);
  margin-top: var(--sp-5);
}
.post-cover {
  aspect-ratio: 16/7;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  margin-bottom: var(--sp-7);
}
.post-cover img { width: 100%; height: 100%; object-fit: cover; }

.prose { max-width: 68ch; margin-inline: auto; }
.prose h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
}
.prose h2:first-child { margin-top: 0; }
.prose p {
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--ink-soft);
  margin-bottom: var(--sp-4);
}
.prose ul {
  display: flex; flex-direction: column; gap: 11px;
  margin: 0 0 var(--sp-5);
}
.prose li {
  display: flex; gap: 12px;
  font-size: .97rem; line-height: 1.75;
  color: var(--ink-soft);
}
.prose li::before {
  content: "";
  flex-shrink: 0;
  width: 7px; height: 7px;
  margin-top: 9px;
  border-radius: 50%;
  /* Mauve, not red. A long article can carry thirty of these, and
     thirty red dots down the left margin read as errors. */
  background: var(--mauve-500);
}
.prose .notice { margin-bottom: var(--sp-5); }

/* share + author strip */
.post-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.share { display: flex; gap: 9px; align-items: center; }
.share span { font-size: .84rem; font-weight: 700; color: var(--ink-mute); }
.share a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--navy-50), var(--mauve-50));
  color: var(--navy-700);
  transition: background var(--t-fast) ease, color var(--t-fast) ease,
              transform var(--t-fast) ease;
}
.share a:hover {
  background: linear-gradient(140deg, var(--navy-800), var(--navy-600));
  color: #fff;
  transform: translateY(-2px);
}
.share a svg { width: 16px; height: 16px; }

/* prev / next */
.post-nav {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
@media (max-width: 640px) { .post-nav { grid-template-columns: 1fr; } }
.post-nav a {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  transition: border-color var(--t-fast) ease, transform var(--t-fast) ease;
}
.post-nav a:hover { border-color: rgba(var(--rgb-mauve), .55); transform: translateY(-3px); }
.post-nav small {
  display: block;
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.post-nav strong { font-size: .93rem; line-height: 1.5; color: var(--navy-900); }
.post-nav a.next { text-align: right; }

@media print {
  .post-hero, .post-foot, .post-nav, .share { break-inside: avoid; }
  .post-cover, .share, .post-nav { display: none; }
}