/* PNG Culture 1.3.0 — Blog: the blog page, article cards and the article layout.
   Hand-kept like stock.css (npm run build does not touch it) and loaded after it,
   in the same cascade layer, using the theme's tokens only. */
@layer components {
  /* Page hero ------------------------------------------------------------ */
  .pc-blog-hero { position: relative; isolation: isolate; background: var(--pc-surface); }
  .pc-blog-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(48rem 20rem at 100% 0, color-mix(in srgb, var(--pc-brand) 12%, transparent), transparent 70%),
                radial-gradient(36rem 16rem at 0 100%, color-mix(in srgb, var(--pc-brand) 7%, transparent), transparent 70%);
  }
  .pc-blog-hero__icon {
    display: grid; place-items: center; flex: none; width: 5rem; height: 5rem; border-radius: 1.5rem;
    background: var(--pc-brand); color: var(--pc-brand-ink); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--pc-brand) 70%, transparent);
  }
  .pc-blog-hero__icon.mx-auto { width: 4rem; height: 4rem; border-radius: 1.25rem; }

  /* Grid and cards -------------------------------------------------------- */
  .pc-blog-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  @media (min-width: 640px) { .pc-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .pc-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }

  .pc-blog-card { display: flex; flex-direction: column; overflow: hidden; height: 100%; }
  .pc-blog-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--pc-paper); border-bottom: 1px solid var(--pc-line); }
  .pc-blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
  .pc-blog-card:hover .pc-blog-card__media img, .pc-blog-card:focus-within .pc-blog-card__media img { transform: scale(1.03); }
  .pc-blog-card__placeholder {
    display: grid; place-items: center; width: 100%; height: 100%; color: var(--pc-muted);
    background-image: conic-gradient(var(--pc-checker-b) 25%, transparent 0 50%, var(--pc-checker-b) 0 75%, transparent 0);
    background-size: 22px 22px;
  }
  .pc-blog-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: .6rem; padding: 1.1rem 1.25rem 1.25rem; }
  .pc-blog-card__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
  .pc-blog-card__title a { color: var(--pc-ink); }
  .pc-blog-card__excerpt {
    color: var(--pc-muted); font-size: .92rem; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .pc-blog-card .pc-blog-meta { margin-top: auto; padding-top: .35rem; }

  /* The latest article, wide, on page 1 of the blog. */
  @media (min-width: 768px) {
    .pc-blog-card--feature { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
    .pc-blog-card--feature .pc-blog-card__media { aspect-ratio: auto; min-height: 20rem; border-bottom: 0; border-right: 1px solid var(--pc-line); }
    .pc-blog-card--feature .pc-blog-card__media img { position: absolute; inset: 0; }
    .pc-blog-card--feature .pc-blog-card__body { justify-content: center; gap: .8rem; padding: 2rem 2.25rem; }
  }
  .pc-blog-card--feature .pc-blog-card__title { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.15; }
  .pc-blog-card--feature .pc-blog-card__excerpt { font-size: 1.02rem; -webkit-line-clamp: 4; }
  .pc-blog-card--feature .pc-blog-meta { margin-top: .4rem; }

  /* Byline: author · date · reading time. */
  .pc-blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .85rem; font-size: .82rem; color: var(--pc-muted); }
  .pc-blog-meta > * { position: relative; display: inline-flex; align-items: center; }
  .pc-blog-meta > * + *::before {
    content: ""; position: absolute; left: -.5rem; top: 50%; width: 3px; height: 3px; border-radius: 999px;
    background: currentColor; opacity: .55; transform: translateY(-50%);
  }
  .pc-blog-meta__author { gap: .5rem; font-weight: 650; color: var(--pc-ink); }
  .pc-blog-meta--lg { margin-top: 1.4rem; font-size: .92rem; }
  .pc-avatar {
    display: inline-grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 999px;
    background: var(--pc-ink); color: #fff; font-size: .75rem; font-weight: 800; object-fit: cover;
  }
  .pc-blog-meta--lg .pc-avatar { width: 2.25rem; height: 2.25rem; font-size: .9rem; }

  /* Article ------------------------------------------------------------ */
  .pc-blog-head, .pc-blog-body, .pc-blog-measure { max-width: 46rem; margin-inline: auto; }
  .pc-blog-head { margin-top: 2rem; }
  .pc-blog-chip { color: var(--pc-brand); border-color: color-mix(in srgb, var(--pc-brand) 30%, var(--pc-line)); }
  a.pc-blog-chip:hover { border-color: var(--pc-brand); }
  .pc-blog-title {
    margin-top: .9rem; font-family: var(--font-display); font-weight: 800;
    font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance;
  }
  .pc-blog-cover {
    display: block; width: 100%; max-width: 64rem; max-height: 36rem; margin-inline: auto; object-fit: cover;
    border-radius: 1.5rem; border: 1px solid var(--pc-line); background: var(--pc-paper);
  }
  .pc-blog-body { margin-top: 2.5rem; font-size: 1.08rem; line-height: 1.8; }
  .pc-blog-body h2 { font-size: clamp(1.4rem, 1.2rem + .7vw, 1.75rem); margin-top: 2.2em; scroll-margin-top: 6rem; }
  .pc-blog-body h3 { font-size: 1.25rem; margin-top: 1.8em; }
  .pc-blog-body h2 + *, .pc-blog-body h3 + * { margin-top: .7em; }
  .pc-blog-body figure { margin-block: 2em; }
  .pc-blog-body figure img, .pc-blog-body p > img { display: block; width: 100%; height: auto; border-radius: 1rem; border: 1px solid var(--pc-line); }
  .pc-blog-body figcaption { margin-top: .6rem; text-align: center; font-size: .85rem; line-height: 1.5; color: var(--pc-muted); }
  .pc-blog-body figure:has(> table) { overflow-x: auto; border: 1px solid var(--pc-line); border-radius: 1rem; background: var(--pc-surface); }
  .pc-blog-body table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
  .pc-blog-body th, .pc-blog-body td { padding: .7rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--pc-line); }
  .pc-blog-body thead th { background: var(--pc-paper); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pc-muted); }
  .pc-blog-body tbody tr:last-child td { border-bottom: 0; }
  .pc-blog-body hr { border: 0; border-top: 1px solid var(--pc-line); margin-block: 2.5em; }
}

/* Header fit (1.3.0). The Blog link makes the primary menu wider, so the
   header gives way in steps instead of wrapping "Pick a date" or scrolling
   sideways (at 1024px it already overflowed by 84px before 1.3.0):
   - below 1440px "Pick a date" is its icon, with the words kept for screen readers;
   - between 1024px and 1279px the search box becomes the search button,
     which opens the drawer's search, as it does below 768px.
   In the utilities layer, so it outranks the templates' display utilities. */
@layer utilities {
  .pc-header .pc-btn[data-pc-datepicker] { white-space: nowrap; }
  @media (max-width: 1439.98px) {
    .pc-header .pc-btn[data-pc-datepicker] { width: 44px; padding-inline: 0; }
    .pc-header .pc-btn[data-pc-datepicker] > span {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
      clip-path: inset(50%); white-space: nowrap; border-width: 0;
    }
  }
  @media (min-width: 1024px) and (max-width: 1279.98px) {
    .pc-header form[data-pc-search] { display: none; }
    .pc-header .pc-iconbtn[data-pc-focus="search"] { display: inline-grid; }
  }
}