/* Blog pages (blog-a, blog-b, blog-c listings + the sample post).
   Owned by the blog agent. Do not add rules for other page groups here. */

/* Preview cards: visually complete, but they do not navigate.
   The anchor has no href, so it is inert; this makes that legible. */
.la-blog-preview,
.la-blog-preview * {
  cursor: default;
}

.la-blog-preview {
  position: relative;
}

/* Quiet the card slightly so the featured (clickable) post reads as the lead. */
.la-blog-preview .home-3-blog-image,
.la-blog-preview .home-2-small-blog-image,
.la-blog-preview .blog-3-image {
  opacity: 0.92;
}

/* Small corner tag so nobody mistakes a preview card for a broken link. */
.la-blog-preview::after {
  content: "Preview";
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(33, 30, 29, 0.55);
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* Sample post page: keep article images inside the column. */
.blog-details-card .rich-text img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* The template's fixed-width figure style overflows with our screenshots. */
.blog-details-card .rich-text figure {
  max-width: 100% !important;
  margin-left: 0;
  margin-right: 0;
}

/* Screenshot lightbox thumbnails: our two article images have different
   aspect ratios than the template art; keep the grid tidy. */
.blog-details-light-box-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Article body rhythm: the template collapses paragraph margins, so
   consecutive lines run together under each heading. */
.blog-details-card .rich-text p {
  margin-top: 0;
  margin-bottom: 16px;
}

.blog-details-card .rich-text p:last-child {
  margin-bottom: 0;
}

.blog-details-card .rich-text h2 {
  margin-top: 8px;
  margin-bottom: 12px;
}

/* The two inline article images have very different native sizes, so a
   two-column row renders them lopsided. Stack them full width instead. */
.blog-details-image-grid {
  grid-template-columns: 1fr !important;
}

.blog-details-page-image-wrapper {
  width: 100%;
}

/* The lightbox anchors carry no href (a bare "#" jumped to page top),
   but the Webflow lightbox still opens them on click. */
.blog-details-light-box {
  cursor: pointer;
}

/* Blog B bottom CTA: the template's right-hand image cluster (fake phone
   number art) is removed, so the CTA runs a single centered column. */
.blog-page + .section .cta-2-grid {
  grid-template-columns: 1fr;
}

/* The creamy hero wash is a template bitmap that other pages already dropped. */
.blog-page-bg,
.blog-2-bg-wrapper,
.blog-3-bg-wrapper,
.section.blog-page,
.section.blog-a {
  background-image: none !important;
}

.blog-page-bg {
  display: none !important;
}

/* Every listing card uses the AI workflow automation frame: 1080×608. */
.home-3-blog-collection-list,
.home-2-blog-grid,
.home-1-blog-main-grid,
.blog-3-collection-list {
  align-items: stretch;
}

.home-3-blog-collection-item,
.home-3-blog-link-wrapper,
.blog-2-collection-item,
.blog-2-link-wrapper,
.home-2-small-blog-collection-item,
.home-2-small-blog-link,
.home-1-blog-collection-item,
.home-1-blog-link-wrapper,
.blog-3-collection-item,
.blog-3-link-wrapper {
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
}

.home-3-blog-image-wrapper,
.home-2-small-blog-image-wrapper,
.home-2-big-blog-image-wrapper,
.home-1-blog-image-wrapper,
.blog-3-image-wrapper {
  aspect-ratio: 1080 / 608 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden;
  flex: none;
}

.home-3-blog-image,
.home-2-small-blog-image,
.home-2-big-blog-image,
.home-1-blog-image,
.blog-3-image {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center;
}

/* Title length was the only thing still changing card height. Reserve four
   lines, which is the longest title on the listing. */
.blog-title-text {
  min-height: 6em;
}

/* ---------------------------------------------------------------------------
   Listings: /blog/, /blog/<n>/ and /blog/tag/<tag>/ (src/site/blogList.js).
   The tag menu is Blog A's pill tab menu, made of real links; the pager reuses
   the same pill. Hover changes color only, never size. */
.la-blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 40px;
}

.la-blog-list .blog-1-tab-link {
  display: inline-flex;
  transition: background-color .2s, border-color .2s, color .2s;
}

.la-blog-list a.blog-1-tab-link:not(.w--current):hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary-dark);
}

.la-blog-list .blog-1-tab-link.w--current {
  background-color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
  color: #fff;
}

.la-blog-list .home-3-blog-link-wrapper { transition: opacity .2s; }
.la-blog-list .home-3-blog-link-wrapper:hover .blog-title-text { color: var(--brand-primary-dark); }
.la-blog-list .blog-title-text { transition: color .2s; }

/* Posts with no named author carry the lilAgents mark. */
.la-blog-author-mark {
  object-fit: contain !important;
  background: #fff;
  padding: 3px;
}

/* Pager */
.la-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 56px;
}

.la-pager-nums {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.la-pager-num {
  min-width: 42px;
  justify-content: center;
}

.la-pager .is-off {
  opacity: .4;
  pointer-events: none;
}

.la-blog-rss {
  margin: 28px 0 0;
  text-align: center;
  font-size: 14px;
}

.la-blog-rss a,
.la-post-tags a {
  color: var(--brand-primary-dark);
  text-decoration: none;
  transition: color .2s;
}

.la-blog-rss a:hover,
.la-post-tags a:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

@media screen and (max-width: 479px) {
  .la-blog-tags { gap: 8px; margin-bottom: 32px; }
  .la-pager { margin-top: 40px; gap: 10px; }
  .la-pager-nums { order: -1; width: 100%; }
}

/* Drafts and scheduled posts, shown in `pnpm dev` only (never in a
   production build). A pill on the card image and beside the post's back link. */
.home-3-blog-image-wrapper { position: relative; }

.la-draft-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 100px;
  background: #b45309;
  color: #fff;
  font-family: var(--brand-font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
}

.la-draft-pill.is-inline {
  position: static;
  display: inline-block;
  margin: 0 0 22px 12px;
  vertical-align: baseline;
}

/* One card per row on phones: titles no longer need the reserved four lines. */
@media screen and (max-width: 479px) {
  .la-blog-list .blog-title-text { min-height: 0; }
  .la-blog-list .home-3-blog-content-wrapper { gap: 16px; }
}