/* ==========================================================================
   Blog: index (/blog/) and single post (/blog/{slug}/)
   Builds on base.css tokens and components (.page-hero, .img-frame, .link-more,
   .price-tag, .access-badge, .beach-card, .eyebrow, reveal). Nothing here restyles them globally.
   ========================================================================== */

/* ----- Shared: meta line, image fallback, card rows ----- */
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px;
  font-size: 14px; line-height: 1.5; color: var(--c-muted);
}
.post-meta__sep { opacity: 0.7; }

.img-frame picture { display: block; width: 100%; height: 100%; }
.media-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: var(--c-foam); }
.img-frame .media-fallback img { width: 56px; height: auto; opacity: 0.55; transform: none; }
.img-zoom:focus-within .img-frame img { transform: scale(1.04); }

/* Centred rows of up to three cards (related beaches, more stories) */
.card-row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(50px, 5vw, 70px) 30px; }
.card-row > li { display: flex; flex: 0 1 calc((100% - 60px) / 3); min-width: 0; }
.card-row > li > * { flex: 1; min-width: 0; }

.post-section-head { margin-bottom: clamp(44px, 5vw, 70px); }

/* ----- Post card (index grid + "More from the Blog") ----- */
.post-card { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.post-card__media { position: relative; display: block; aspect-ratio: 4 / 3; }
.post-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 12px; }
.post-card__cat { padding: 4px 0; }
.post-card__cat:hover, .post-featured__body .eyebrow:hover { color: var(--c-lagoon-dark); text-decoration: underline; text-underline-offset: 3px; }
.post-card__title { font-size: clamp(22px, 1.85vw, 26px); line-height: 1.3; overflow-wrap: break-word; }
.post-card__title a:hover { color: var(--c-lagoon); }
.post-card__excerpt { font-size: 16px; line-height: 1.6; color: var(--c-text); }
.post-card .link-more { margin-top: auto; padding-top: 6px; }

/* ==========================================================================
   Blog index
   ========================================================================== */
.blog-hero { min-height: 560px; }
.blog-index { padding-top: clamp(50px, 6vw, 90px); }

/* Category filter chips */
.blog-cats { margin-bottom: clamp(50px, 6vw, 90px); }
.blog-cats__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.blog-chip {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px;
  border: 1px solid var(--c-line-strong); background: var(--c-white); color: var(--c-ink);
  font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.blog-chip:hover { border-color: var(--c-lagoon); color: var(--c-lagoon); }
.blog-chip.is-active { background: var(--c-lagoon); border-color: var(--c-lagoon); color: var(--c-white); }

/* Featured story: image 60% | text */
.post-featured {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  margin-bottom: clamp(80px, 9vw, 130px); background: var(--c-mist);
}
.post-featured__media { position: relative; min-height: clamp(380px, 38vw, 540px); }
.post-featured__media .img-frame { position: absolute; inset: 0; display: block; }
.post-featured__body {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px;
  padding: clamp(32px, 4.6vw, 72px);
}
.post-featured__body .eyebrow { padding: 4px 0; }
.post-featured__title { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.25; overflow-wrap: break-word; }
.post-featured__title a:hover { color: var(--c-lagoon); }
.post-featured__excerpt { font-size: 17px; line-height: 1.7; }
.post-featured .link-more { margin-top: 6px; }

/* Grid heading row */
.blog-index__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px;
  margin-bottom: clamp(36px, 4vw, 54px); padding-bottom: 22px; border-bottom: 1px solid var(--c-line);
}
.blog-index__title { font-size: var(--fs-h5); line-height: 1.3; }
.blog-index__count { font-size: 14px; letter-spacing: 0.02em; color: var(--c-muted); }

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(50px, 5vw, 70px) 30px; }
.post-grid > li { display: flex; min-width: 0; }

/* Pagination */
.pagination { display: flex; justify-content: center; margin-top: clamp(64px, 7vw, 100px); }
.pagination__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.pagination__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 48px; height: 48px; padding: 0 16px;
  border: 1px solid var(--c-line-strong); color: var(--c-ink); font-family: var(--ff-heading); font-size: 15px; line-height: 1;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pagination__link .icon { width: 11px; height: 11px; stroke-width: 1.8; }
a.pagination__link:hover { border-color: var(--c-lagoon); color: var(--c-lagoon); }
.pagination__link.is-current { background: var(--c-lagoon); border-color: var(--c-lagoon); color: var(--c-white); }
.pagination__link.is-disabled { opacity: 0.4; cursor: default; }
.pagination__gap { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 48px; color: var(--c-muted); }

/* Empty state */
.blog-empty { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 580px; margin: 0 auto; padding: 10px 0 20px; text-align: center; }
.blog-empty .brand-shell { margin: 0 auto 4px; }
.blog-empty__title { font-size: var(--fs-h5); line-height: 1.3; }
.blog-empty .btn { margin-top: 10px; }

/* ==========================================================================
   Single post
   ========================================================================== */
.post-hero { min-height: clamp(560px, 80vh, 780px); padding-bottom: clamp(80px, 9vw, 120px); }
.post-hero .media-cover::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.22) 32%, rgba(0, 0, 0, 0.3) 62%, rgba(0, 0, 0, 0.62) 100%);
}
.post-hero__inner { gap: 18px; max-width: 1040px; }
.post-hero__crumbs ol { display: flex; flex-wrap: wrap; justify-content: center; }
.post-hero__crumbs li { font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; }
.post-hero__crumbs li + li::before { content: "/"; margin: 0 10px; opacity: 0.7; }
.post-hero__crumbs a { display: inline-block; padding: 15px 2px; color: var(--c-white); }
.post-hero__crumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.post-hero__title {
  max-width: 980px; color: var(--c-white); font-size: clamp(36px, 4.7vw, 70px); line-height: 1.12;
  overflow-wrap: break-word; text-wrap: balance;
}
.post-hero__title .nowrap { white-space: nowrap; }
.post-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); }
.post-hero__meta > * + *::before { content: "·"; margin: 0 12px; opacity: 0.8; }

.post-body { padding-block: clamp(64px, 7.5vw, 110px) clamp(70px, 8vw, 110px); }

/* Editorial column */
.post-content { max-width: 760px; margin-inline: auto; font-size: 18px; line-height: 1.8; color: var(--c-text); }
.post-content > * + * { margin-top: 1.4em; }
.post-content > p:first-child { font-size: clamp(19px, 1.55vw, 21px); line-height: 1.75; color: var(--c-ink); }
.post-content strong { font-weight: 500; color: var(--c-ink); }
.post-content > h2, .post-content > h3 { scroll-margin-top: 110px; overflow-wrap: break-word; }
.post-content > h2 { margin-top: 2.1em; font-size: clamp(28px, 2.4vw, 34px); line-height: 1.3; }
.post-content > h3 { margin-top: 1.7em; font-size: clamp(22px, 1.85vw, 26px); line-height: 1.35; }
.post-content > h2 + *, .post-content > h3 + * { margin-top: 16px; }
.post-content > h2 + h3 { margin-top: 26px; }

.post-link {
  color: var(--c-lagoon); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
.post-link:hover { color: var(--c-lagoon-dark); text-decoration-thickness: 2px; }
.post-content strong .post-link { font-weight: 500; }

/* Lists: teal dots, numbered steps */
.post-content > ul > li, .post-content > ol > li { position: relative; padding-left: 30px; }
.post-content > ul > li + li, .post-content > ol > li + li { margin-top: 0.6em; }
.post-content > ul > li::before {
  content: ""; position: absolute; left: 5px; top: 0.9em; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--c-lagoon);
}
.post-content > ol { counter-reset: post-step; }
.post-content > ol > li { counter-increment: post-step; padding-left: 44px; }
.post-content > ol > li::before {
  content: counter(post-step, decimal-leading-zero); position: absolute; left: 0; top: 0;
  font-family: var(--ff-heading); color: var(--c-lagoon);
}

/* Pull quote */
.post-content > .post-quote { margin-block: 2.4em; padding: 4px 0 4px clamp(22px, 3vw, 36px); border-left: 2px solid var(--c-lagoon); }
.post-quote blockquote p { font-family: var(--ff-heading); font-size: clamp(22px, 2.1vw, 28px); line-height: 1.5; color: var(--c-ink); }
.post-quote figcaption { margin-top: 16px; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-lagoon); }
.post-quote cite { font-style: normal; }

/* Figure: breaks out of the text column up to 1000px wide */
.post-content > .post-figure {
  margin-block: 2.6em;
  margin-inline: calc((min(1000px, 100vw - 2 * var(--gutter)) - 100%) / -2);
}
.post-figure__media { aspect-ratio: 3 / 2; }
.post-figure figcaption { max-width: 760px; margin: 14px auto 0; font-size: 14px; line-height: 1.6; color: var(--c-muted); text-align: center; }

/* Tip / note box */
.post-content > .post-tip {
  display: flex; align-items: flex-start; gap: 16px; margin-block: 2.2em; padding: 26px 30px;
  background: var(--c-foam); border-left: 3px solid var(--c-lagoon);
}
.post-tip__icon { width: 24px; height: 24px; margin-top: 3px; color: var(--c-lagoon); stroke-width: 1.6; }
.post-tip__title { margin-bottom: 6px; font-family: var(--ff-heading); font-size: 20px; line-height: 1.4; color: var(--c-ink); }
.post-tip__text { font-size: 16px; line-height: 1.7; }

/* Inline beach card */
.post-content > .post-beach {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); margin-block: 2.4em;
  background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--shadow-soft);
}
.post-beach__media { position: relative; min-height: 290px; }
.post-beach__media .img-frame { position: absolute; inset: 0; display: block; }
.post-beach__media .price-tag { top: 16px; left: 16px; }
.post-beach__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(22px, 2.6vw, 32px); }
.post-beach__body .beach-tags { font-size: 14px; line-height: 1.5; }
.post-beach__name { font-family: var(--ff-heading); font-size: clamp(22px, 1.9vw, 25px); line-height: 1.25; color: var(--c-ink); }
.post-beach__name a:hover { color: var(--c-lagoon); }
.post-beach__text { font-size: 15px; line-height: 1.6; }
.post-beach__access, .beach-card__access { display: flex; flex-wrap: wrap; gap: 6px; }
.post-beach__access .access-badge, .beach-card__access .access-badge { white-space: normal; }
.post-beach__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 8px; }

/* Footer: tags, share, author */
.post-footer { display: flex; flex-direction: column; gap: 32px; max-width: 760px; margin: clamp(56px, 6vw, 80px) auto 0; }
.post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.post-tags__label, .post-share__label { font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink); }
.post-tags__list { display: flex; flex-wrap: wrap; gap: 8px; }
.post-tag { padding: 6px 14px; border-radius: 999px; background: var(--c-mist); font-size: 13px; line-height: 1.4; color: var(--c-text); }

.post-share {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  padding-block: 24px; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
}
.post-share__label { display: inline-flex; align-items: center; gap: 10px; }
.post-share__label .icon { width: 16px; height: 16px; color: var(--c-lagoon); stroke-width: 1.6; }
.post-share__list { display: flex; flex-wrap: wrap; gap: 10px; }
.post-share__link {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--c-line-strong); color: var(--c-ink); font-size: 14px; line-height: 1;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.post-share__link:hover { background: var(--c-lagoon); border-color: var(--c-lagoon); color: var(--c-white); }
.post-share__link .icon { width: 16px; height: 16px; stroke-width: 1.5; }
.post-share__link .icon--fill { fill: currentColor; stroke: none; }

.post-author { display: flex; align-items: flex-start; gap: 22px; padding: clamp(24px, 3vw, 34px); background: var(--c-cream); }
.post-author__avatar { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--c-white); }
.post-author__avatar img { width: 34px; height: auto; }
.post-author__name { font-family: var(--ff-heading); font-size: 22px; line-height: 1.3; color: var(--c-ink); }
.post-author__meta { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--c-muted); }
.post-author__bio { margin-top: 10px; font-size: 15px; line-height: 1.65; }
.post-author__bio a { color: var(--c-lagoon); text-decoration: underline; text-underline-offset: 3px; }
.post-author__bio a:hover { color: var(--c-lagoon-dark); }

/* Related beaches (base .beach-card) */
.post-related .beach-card { height: 100%; }
.post-related .beach-card__media .img-frame { position: absolute; inset: 0; display: block; }
.post-related .beach-card__body { flex: 1; align-items: flex-start; }
.post-related .beach-card__text { flex: 0 0 auto; }
.beach-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: auto; padding-top: 6px; }

/* More stories + back link */
.post-more__back { text-align: center; }
.card-row + .post-more__back { margin-top: clamp(56px, 6vw, 80px); }
.link-more--back .icon { width: 12px; height: 12px; }
.link-more--back:hover .icon { transform: translateX(-3px); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-row > li { flex-basis: calc((100% - 30px) / 2); }
  .post-featured { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .post-featured { grid-template-columns: 1fr; }
  .post-featured__media { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
  .blog-hero { min-height: 460px; }
  .blog-cats__list { gap: 8px; }
  .blog-chip { padding: 0 16px; font-size: 12px; }
  .post-grid { grid-template-columns: 1fr; }
  .card-row > li { flex-basis: 100%; }
  .post-featured__media { aspect-ratio: 4 / 3; }
  .post-featured__body { padding: 28px 22px 32px; }
  .pagination__link--step { padding: 0 14px; }
  .pagination__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

  .post-hero { min-height: 520px; padding-bottom: 70px; }
  .post-hero__meta { font-size: 14px; }
  .post-hero__title .nowrap { white-space: normal; }
  .post-hero__meta > :first-child { flex-basis: 100%; }
  .post-hero__meta > :nth-child(2)::before { content: none; }
  .post-content { font-size: 17px; }
  .post-content > .post-tip { padding: 22px 20px; gap: 12px; }
  .post-share { flex-direction: column; align-items: flex-start; }
  .post-author { flex-direction: column; gap: 16px; }
}
@media (max-width: 600px) {
  .post-content > .post-beach { grid-template-columns: 1fr; }
  .post-beach__media { min-height: 0; aspect-ratio: 16 / 10; }
}