/* ==========================================================================
   Blog  (/resources/blog/)

   The four live blogs merged into one, with the old blogs as categories (the
   doc). Shared, from stylesheets already linked: the page banner. Page-local:
     .blg-filter   the banner's category filter (collection-filter.js)
     .blg-card     a latest post: date, category, title, byline, excerpt
     .blg-archive  the archive, "clearly marked as archive" (the doc)
     .blg-row      an archive post: title, date, category

     §1 banner white · §2 latest neutral-2-100 · §3 archive white
   ========================================================================== */

#latest,#archive,.blg-year{scroll-margin-top:24px}
.blg-posts[hidden],.blg-latest[hidden],.blg-archive[hidden],.blg-year[hidden],
.blg-card[hidden],.blg-row[hidden],.blg-empty[hidden]{display:none}

/* --------------------------------------------------------------------------
   §1 Banner: the boundary line and the category filter
   -------------------------------------------------------------------------- */
.blg-banner .page-banner__body p{margin:0}
.blg-banner__note{
  margin:16px 0 0;max-width:62ch;
  font:400 14px/21px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.blg-banner__note a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.blg-banner__note a:hover{color:var(--ps-color-brand-500)}
/* the subscribe button (BLG-01) under the boundary line; long labels wrap on a phone */
.blg-banner .page-banner__ctas{margin-top:24px}
.blg-banner .page-banner__ctas .ps-btn--large{max-width:100%}
.blg-banner .page-banner__ctas .ps-btn--large .ps-btn__text{white-space:normal;min-width:0}
.blg-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:28px}
.blg-filter[hidden]{display:none}
.blg-filter__label{font:500 14px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.blg-filter__select{
  min-width:0;max-width:100%;
  appearance:none;-webkit-appearance:none;
  background:var(--sv-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23697077' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1px solid var(--ps-color-neutral-2-300);border-radius:10px;
  padding:11px 40px 11px 14px;
  font:400 15px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500);
  cursor:pointer;transition:border-color .2s ease-out,box-shadow .2s ease-out;
}
.blg-filter__select:hover{border-color:var(--ps-color-neutral-2-500)}
.blg-filter__select:focus-visible{outline:none;border-color:var(--ps-color-brand-500);box-shadow:0 0 0 3px rgba(198,12,48,.12)}
.blg-filter__count{margin:0;font:500 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.blg-filter__clear,.blg-empty__reset{
  background:none;border:0;padding:0;cursor:pointer;
  font:500 13px/19px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px;
}
.blg-filter__clear[hidden]{display:none}
.blg-filter__clear:hover,.blg-empty__reset:hover{color:var(--ps-color-brand-500)}

/* --------------------------------------------------------------------------
   Band heads (as the Technical Library's)
   -------------------------------------------------------------------------- */
.blg-latest,.blg-archive{padding-block:48px}
.blg-band__head,.blg-grid,.blg-years,.blg-empty__text{grid-column-end:span var(--ps-grid-columns)}
.blg-band__head{margin-bottom:28px}
.blg-band__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.blg-band__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:68ch}

/* --------------------------------------------------------------------------
   §2 Latest posts
   -------------------------------------------------------------------------- */
.blg-latest{background:var(--ps-color-neutral-2-100);border-block:1px solid var(--ps-color-neutral-2-300)}
.blg-grid{display:grid;grid-template-columns:1fr;gap:16px}
.blg-card{
  display:flex;flex-direction:column;gap:8px;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:22px 22px 20px;
}
.blg-card__meta{
  display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;
  font:500 12px/16px var(--ps-font);letter-spacing:.04em;color:var(--ps-color-brand-600);
}
.blg-card__cat{color:var(--ps-color-secondary-5-500);letter-spacing:normal}
.blg-card__title{margin:0;color:var(--ps-color-neutral-3-500)}
.blg-card__title a{color:inherit}
.blg-card__title a:hover{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.blg-card__by{margin:0;font:400 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.blg-card__excerpt{margin:0;font:400 14px/21px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500);
  /* the excerpt stays verbatim in the markup; long ones are cut to six lines */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden}

/* --------------------------------------------------------------------------
   §3 The archive
   -------------------------------------------------------------------------- */
.blg-archive{background:var(--sv-white)}
.blg-archive__flag{
  display:inline-block;margin:0 0 14px;padding:4px 10px;border-radius:999px;
  background:var(--ps-color-neutral-2-100);border:1px solid var(--ps-color-neutral-2-300);
  font:500 12px/16px var(--ps-font);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ps-color-neutral-3-500);
}
.blg-years{display:flex;flex-direction:column;gap:28px}
.blg-year__title{margin:0 0 8px;color:var(--ps-color-neutral-3-500)}
.blg-year__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ps-color-neutral-2-300)}
.blg-row a{
  display:flex;flex-direction:column;gap:4px;
  padding:14px 0;border-bottom:1px solid var(--ps-color-neutral-2-300);
}
.blg-row__title{font:500 15px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-brand-600)}
.blg-row a:hover .blg-row__title{color:var(--ps-color-brand-500);text-decoration:underline;text-underline-offset:2px}
.blg-row__meta{
  display:flex;flex-wrap:wrap;gap:4px 12px;
  font:400 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500);
}
.blg-row__meta time{font-variant-numeric:tabular-nums;white-space:nowrap}
/* a row whose byline shows (BLG-18): the title and the byline stack */
.blg-row__main{display:flex;flex-direction:column;gap:2px;min-width:0}
.blg-row__by{font:400 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}

.blg-empty{padding-block:40px 64px}
.blg-empty__text{margin:0;color:var(--ps-color-secondary-5-500)}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width:640px){
  .blg-latest,.blg-archive{padding-block:64px}
  .blg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  /* title left, date and category right, once there is room */
  .blg-row a{flex-direction:row;align-items:baseline;justify-content:space-between;gap:24px}
  .blg-row__meta{flex:none;justify-content:flex-end;text-align:right;max-width:40%}
}
@media (min-width:1024px){
  .blg-latest,.blg-archive{padding-block:80px}
  .blg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1350px){
  .blg-band__head,.blg-grid,.blg-years,.blg-empty__text{grid-column-start:2;grid-column-end:span 10}
}

@media (prefers-reduced-motion:reduce){
  .blg-filter__select{transition:none}
}