/* Blog collection (blog.html). Loaded after styles.css and shared.css. */

/* ---------- Search: a line above and below ---------- */
.blist { padding-top: var(--gutter); }
.bsearch { display: flex; align-items: center; gap: 16px; padding-block: 18px; border-block: 1px solid var(--accent); color: var(--accent); }
.bsearch svg { flex: none; width: 22px; height: 22px; }
.bsearch input {
  flex: 1; min-width: 0; padding: 4px 0; border: 0; background: transparent; color: var(--secondary);
  font: inherit; font-size: 16px; /* body size from the scale on every screen; keeps iOS from zooming in on focus */
  -webkit-appearance: none; appearance: none;
}
.bsearch input:focus { outline: 0; }
.bsearch input::placeholder { color: var(--secondary); opacity: .5; }
.bsearch input::-webkit-search-cancel-button { -webkit-appearance: none; }
.bsearch:focus-within { border-bottom-color: var(--secondary); }

/* ---------- Month group: dark tab sitting on a line ---------- */
.bmonth { margin-top: clamp(32px, 4vw, 56px); }
.bmonth[hidden], .brow[hidden] { display: none; }
.bmonth__head { border-bottom: 1px solid var(--secondary); }
.bmonth__tab { display: inline-block; margin: 0; padding: 12px 24px; background: var(--secondary); color: var(--white); }

/* ---------- Article row: date | photo | title, line, excerpt, tags | arrow ---------- */
.brow {
  display: grid; grid-template-columns: clamp(64px, 7vw, 110px) clamp(220px, 26vw, 460px) minmax(0, 1fr) auto;
  gap: var(--gap) calc(var(--gap) * 2); align-items: center;
  padding-block: clamp(24px, 2.6vw, 40px); border-bottom: 1px solid var(--accent);
}
.brow__date { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.brow__date .label { margin: 0; }
.brow__day { font-family: var(--font-head); font-size: var(--fs-h2); line-height: 1; }
.brow__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--secondary); }
.brow__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
a.brow:hover .brow__img img, a.brow:focus-visible .brow__img img { transform: scale(1.04); }
.brow__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.brow__body h3 { transition: color .35s var(--ease); }
a.brow:hover .brow__body h3 { color: var(--accent); }
.brow__body p { opacity: .85; max-width: 640px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.brow__arrow { align-self: start; width: 32px; height: 32px; color: var(--accent); transition: transform .4s var(--ease), color .4s var(--ease); }
a.brow:hover .brow__arrow { transform: translate(4px, -4px); color: var(--secondary); }
article.brow { cursor: default; }

.bempty { padding-block: clamp(48px, 6vw, 96px); text-align: center; }

/* Tablet and phone: photo on top, then the date, then the article details */
@media (max-width: 900px) {
  .brow { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .brow__img { grid-row: 1; aspect-ratio: 16 / 10; }
  .brow__date { grid-row: 2; flex-direction: row; align-items: baseline; gap: 12px; }
  .brow__day { font-size: var(--fs-h3); }
  .brow__body { grid-row: 3; }
  .brow__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { .brow__img img, .brow__arrow, .brow__body h3 { transition: none; } }