/* ==========================================================================
   posts.css — Business theme blog.

   Covers four surfaces that deliberately share one visual language:
     · the /blog listing                     (.biz-blog)
     · the post card used by every grid      (.biz-post-card)
     · a single post                         (.biz-post)
     · the `latest_posts` page-builder band  (.biz-latest-posts)

   Category / tag chips are labels, not links — there are no archive pages.

   Brand palette/typography arrive as --color-* / --font-* custom properties
   from the client's website styles; every value here falls back sensibly.
   ========================================================================== */

/* ── Shared card grid ─────────────────────────────────────────────────────── */

.biz-blog__grid,
.biz-post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}
@media (min-width: 640px) {
  .biz-blog__grid,
  .biz-post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .biz-blog__grid,
  .biz-post-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Post card ────────────────────────────────────────────────────────────── */

.biz-post-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-card, 10px);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.biz-post-card:hover,
.biz-post-card:focus-within {
  border-color: var(--color-primary, #012269);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
  transform: translateY(-3px);
}

.biz-post-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  background-color: #f3f4f6;
  overflow: hidden;
}
.biz-post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.biz-post-card:hover .biz-post-card__media img { transform: scale(1.04); }

.biz-post-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #cbd5e1;
}
.biz-post-card__placeholder svg { width: 48px; height: 48px; }

.biz-post-card__body {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.15rem 1.25rem 1.35rem;
  flex: 1 1 auto;
}

.biz-post-card__cats {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.biz-post-card__cat {
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-primary, #012269);
  background-color: #eef2ff;
  border-radius: 9999px;
  padding: .22rem .6rem;
}

.biz-post-card__title {
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}
.biz-post-card__title a {
  color: #1f2937;
  text-decoration: none;
}
.biz-post-card__title a:hover { color: var(--color-primary, #012269); }

.biz-post-card__excerpt {
  color: #6b7280;
  font-size: .92rem;
  line-height: 1.55;
  margin: 0;
  /* Keep every card in a row the same height regardless of excerpt length. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.biz-post-card__meta {
  color: #9ca3af;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  margin: auto 0 0;
  padding-top: .4rem;
}

/* ── Listing ──────────────────────────────────────────────────────────────── */

.biz-blog {
  background-color: #fff;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.5rem) 0 clamp(2.5rem, 1.25rem + 3vw, 4.5rem);
}

.biz-blog__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 0.75rem;
}

.biz-blog__head {
  text-align: center;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.biz-blog__title {
  color: var(--color-primary, #012269);
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-weight: 700;
  font-size: clamp(1.85rem, 1.25rem + 1.5vw, 2.5rem);
  margin: 0;
}
.biz-blog__lede {
  color: #4b5563;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 660px;
  margin: .85rem auto 0;
}

.biz-blog__empty,
.biz-post-list__empty {
  text-align: center;
  color: #6b7280;
  font-size: 1.02rem;
  padding: 3rem 0;
  margin: 0;
}

/* ── Pager ────────────────────────────────────────────────────────────────── */

.biz-post-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.biz-post-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 .6rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #fff;
  color: #4b5563;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.biz-post-pager__btn:hover {
  border-color: var(--color-primary, #012269);
  color: var(--color-primary, #012269);
}
.biz-post-pager__btn.is-active {
  background-color: var(--color-primary, #012269);
  border-color: var(--color-primary, #012269);
  color: #fff;
}
.biz-post-pager__btn svg { width: 1rem; height: 1rem; }
.biz-post-pager__gap { color: #9ca3af; padding: 0 .15rem; }

/* ── Single post ──────────────────────────────────────────────────────────── */

.biz-post {
  background-color: #fff;
  padding-bottom: clamp(2rem, 1.25rem + 3vw, 4rem);
}

.biz-post__hero {
  width: 100%;
  max-height: 520px;
  overflow: hidden;
  background-color: #f3f4f6;
}
.biz-post__hero img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

/* The article column. Kept narrow for comfortable line length; the section
   renderer below deliberately breaks out of it (see .biz-post__sections). */
.biz-post__head,
.biz-post__body,
.biz-post__footer,
.biz-post__nav {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.biz-post__head {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}

.biz-post__cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  margin-bottom: .9rem;
}
.biz-post__cat {
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-primary, #012269);
  background-color: #eef2ff;
  border-radius: 9999px;
  padding: .28rem .7rem;
}

.biz-post__title {
  color: #111827;
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-weight: 800;
  font-size: clamp(1.9rem, 1.25rem + 2vw, 2.75rem);
  line-height: 1.2;
  margin: 0;
}

.biz-post__lede {
  color: #4b5563;
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 1rem 0 0;
}

.biz-post__meta {
  color: #9ca3af;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .02em;
  margin: 1.1rem 0 0;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}
.biz-post__author { color: #4b5563; }
.biz-post__meta-sep { padding: 0 .45rem; }

.biz-post__body {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  color: #374151;
  font-size: 1.02rem;
}

/* A post built on a page-builder layout renders full-bleed sections, which
   supply their own inner widths and backgrounds — so no column padding here. */
.biz-post__sections { padding-top: clamp(1rem, 2vw, 1.75rem); }

/* With a layout the sections *are* the page — no theme chrome renders around
   them (see pages/post.php), so the wrapper adds no spacing of its own either.
   Each section brings its own. */
.biz-post--layout { padding-bottom: 0; }
.biz-post--layout .biz-post__sections { padding-top: 0; }

.biz-post__footer {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  border-top: 1px solid #e5e7eb;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.biz-post__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}
.biz-post__tags-label,
.biz-post__share-label {
  color: #9ca3af;
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-right: .2rem;
}
.biz-post__tag {
  color: #4b5563;
  background-color: #f3f4f6;
  border-radius: 6px;
  padding: .25rem .55rem;
  font-size: .82rem;
  font-weight: 600;
}

.biz-post__share {
  display: flex;
  align-items: center;
  gap: .45rem;
  position: relative;
}
.biz-post__share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  background-color: #fff;
  color: #4b5563;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.biz-post__share-btn:hover {
  background-color: var(--color-primary, #012269);
  border-color: var(--color-primary, #012269);
  color: #fff;
}
.biz-post__share-btn svg { width: 18px; height: 18px; }

.biz-post__share-toast {
  position: absolute;
  right: 0;
  bottom: calc(100% + .45rem);
  background-color: #111827;
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: .3rem .55rem;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.biz-post__share-toast.is-visible { opacity: 1; }

/* Prev / next */
.biz-post__nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 640px) {
  .biz-post__nav { grid-template-columns: 1fr 1fr; }
}
.biz-post__nav-link {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem 1.15rem;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-card, 10px);
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.biz-post__nav-link:hover {
  border-color: var(--color-primary, #012269);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}
.biz-post__nav-link--next { text-align: right; }
.biz-post__nav-dir {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #9ca3af;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.biz-post__nav-link--next .biz-post__nav-dir { justify-content: flex-end; }
.biz-post__nav-dir svg { width: 14px; height: 14px; }
.biz-post__nav-title {
  color: #1f2937;
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
}
.biz-post__nav-link:hover .biz-post__nav-title { color: var(--color-primary, #012269); }
.biz-post__nav-spacer { display: none; }
@media (min-width: 640px) {
  .biz-post__nav-spacer { display: block; }
}

/* Related strip */
.biz-post__related {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background-color: #f9fafb;
}
.biz-post__related-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.biz-post__related-title {
  color: var(--color-primary, #012269);
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 1.25rem + 1vw, 1.85rem);
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  text-align: center;
}

/* ── post_list section ────────────────────────────────────────────────────── */

.biz-post-list {
  background-color: #fff;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.5rem) 0 clamp(2.5rem, 1.25rem + 3vw, 4rem);
}
.biz-post-list--bg-muted { background-color: #f9fafb; }

.biz-post-list__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.biz-post-list__head {
  text-align: center;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.biz-post-list__title {
  color: var(--color-primary, #012269);
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.25rem + 1vw, 2.25rem);
  margin: 0 0 .75rem;
}
.biz-post-list__lede {
  color: #4b5563;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 660px;
  margin: 0 auto;
}

/* ── latest_posts section — editorial spotlight ────────────────────────────
   Newest post runs large on the left, the next few stack as compact rows on
   the right. Deliberately card-less: rounded media sitting on the section
   background, hairline rules between rows. Distinct from the /blog grid above
   so a homepage carrying both doesn't read as the same block twice.
   ────────────────────────────────────────────────────────────────────────── */

.biz-latest-posts {
  background-color: #fff;
  padding: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) 0;
}
.biz-latest-posts--bg-muted { background-color: #f8fafc; }

.biz-latest-posts__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Header: title left, "view all" right, hairline underneath. */
.biz-latest-posts__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid rgba(15, 23, 42, .1);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.biz-latest-posts__head-text { max-width: 640px; }

.biz-latest-posts__title {
  color: var(--color-primary, #012269);
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.15rem + 1.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0;
}
.biz-latest-posts__lede {
  color: #64748b;
  font-size: 1.02rem;
  line-height: 1.6;
  margin: .7rem 0 0;
}

.biz-latest-posts__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.2rem;
  border: 1px solid rgba(15, 23, 42, .14);
  border-radius: 9999px;
  background-color: transparent;
  color: var(--color-primary, #012269);
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.biz-latest-posts__btn svg {
  width: 1rem;
  height: 1rem;
  transition: transform .25s ease;
}
.biz-latest-posts__btn:hover {
  background-color: var(--color-primary, #012269);
  border-color: var(--color-primary, #012269);
  color: #fff;
}
.biz-latest-posts__btn:hover svg { transform: translateX(3px); }

/* Spotlight + rail */
.biz-lp-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3vw, 2.25rem);
  align-items: stretch;
}
@media (min-width: 1024px) {
  .biz-lp-layout--split {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: clamp(2rem, 3vw, 3.25rem);
  }
}

/* Shared meta line (spotlight + rows). */
.biz-lp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0;
  color: #94a3b8;
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.biz-lp-meta__cat { color: var(--color-primary, #012269); }
.biz-lp-meta__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: currentColor;
  opacity: .55;
}

/* Placeholder for a post with no featured image. */
.biz-post-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #cbd5e1;
}
.biz-post-ph svg { width: 40px; height: 40px; }

/* Spotlight */
.biz-lp-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* flex-grow lets the image absorb any height the rail adds beside it, so the
   two columns finish level without hard-coding a height. */
.biz-lp-feature__media {
  display: block;
  flex: 1 1 auto;
  min-height: 200px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-card, 16px);
  background-color: #f1f5f9;
}
.biz-lp-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}
.biz-lp-feature:hover .biz-lp-feature__media img { transform: scale(1.04); }

.biz-lp-feature__body {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding-top: 1.25rem;
}

.biz-lp-feature__title {
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
  margin: 0;
}
.biz-lp-feature__title a {
  color: #0f172a;
  text-decoration: none;
  transition: color .2s ease;
}
/* Stretched link — the whole article is clickable, but only the title is a
   link, so screen readers and the tab order see one target per post. */
.biz-lp-feature__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.biz-lp-feature:hover .biz-lp-feature__title a { color: var(--color-primary, #012269); }

.biz-lp-feature__excerpt {
  color: #64748b;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.biz-lp-feature__read {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .2rem;
  color: var(--color-primary, #012269);
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: .95rem;
  font-weight: 600;
}
.biz-lp-feature__read svg {
  width: 1rem;
  height: 1rem;
  transition: transform .25s ease;
}
.biz-lp-feature:hover .biz-lp-feature__read svg { transform: translateX(4px); }

/* Rail */
.biz-lp-rail {
  display: flex;
  flex-direction: column;
}
.biz-lp-rail .biz-post-row { padding: 1.15rem 0; }
.biz-lp-rail .biz-post-row + .biz-post-row { border-top: 1px solid rgba(15, 23, 42, .09); }
.biz-lp-rail .biz-post-row:first-child { padding-top: 0; }
.biz-lp-rail .biz-post-row:last-child { padding-bottom: 0; }
/* Stacked under the spotlight on narrow screens — needs its own separator. */
@media (max-width: 1023px) {
  .biz-lp-rail {
    padding-top: clamp(1.25rem, 3vw, 1.75rem);
    border-top: 1px solid rgba(15, 23, 42, .09);
  }
}

/* Overflow rows (a section configured for more than four posts) */
.biz-lp-more {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(15, 23, 42, .09);
}
@media (min-width: 640px) {
  .biz-lp-more { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .biz-lp-more { grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2rem; }
}

/* ── Post row (thumbnail + title) ──────────────────────────────────────────
   Used by the rail and the overflow grid above; see partials/post_row.php.
   ────────────────────────────────────────────────────────────────────────── */

.biz-post-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.biz-post-row__media {
  display: block;
  flex: 0 0 auto;
  width: 104px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background-color: #f1f5f9;
}
@media (max-width: 400px) {
  .biz-post-row__media { width: 84px; }
}
.biz-post-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}
.biz-post-row:hover .biz-post-row__media img { transform: scale(1.06); }
.biz-post-row .biz-post-ph svg { width: 28px; height: 28px; }

.biz-post-row__body {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-width: 0;
}

.biz-post-row__title {
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  /* Two lines max so rows keep an even rhythm whatever the headline length. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.biz-post-row__title a {
  color: #0f172a;
  text-decoration: none;
  transition: color .2s ease;
}
.biz-post-row__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.biz-post-row:hover .biz-post-row__title a { color: var(--color-primary, #012269); }

/* Keyboard focus lands on the stretched link — ring the whole item instead of
   just the title text. Progressive enhancement; without :has the anchor's own
   outline still shows. */
.biz-lp-feature:has(a:focus-visible),
.biz-post-row:has(a:focus-visible) {
  outline: 2px solid var(--color-primary, #012269);
  outline-offset: 6px;
  border-radius: 8px;
}
.biz-lp-feature:has(a:focus-visible) a:focus-visible,
.biz-post-row:has(a:focus-visible) a:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .biz-lp-feature__media img,
  .biz-post-row__media img,
  .biz-lp-feature__read svg,
  .biz-latest-posts__btn svg {
    transition: none;
    transform: none;
  }
}