/* ---------------------------------------------------------------------
   Blog styles for chuadmd.com
   UPLOAD TO: public_html/blog/blog.css

   Every rule is scoped to a .blog- class so nothing here can leak into
   or override your existing site stylesheet. Fonts and colours are
   inherited from your site rather than redefined, so the blog picks up
   your existing identity automatically.

   Tune the two variables below if the defaults don't sit right.
   --------------------------------------------------------------------- */

.blog-wrap {
  --blog-measure: 1120px;
  --blog-accent: currentColor;

  width: 100%;
  max-width: var(--blog-measure);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
  box-sizing: border-box;
}

.blog-wrap--narrow { --blog-measure: 46rem; }

/* Visually hidden, still read by screen readers. */
.blog-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------- Listing head */

.blog-head { margin-bottom: 2.5rem; }

.blog-head__title {
  margin: 0 0 .5rem;
  line-height: 1.15;
}

.blog-head__intro {
  margin: 0;
  max-width: 42rem;
  opacity: .75;
  line-height: 1.6;
}

.blog-notice {
  padding: 2rem 0;
  opacity: .8;
}

/* ----------------------------------------------------------------- Cards */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 2rem;
}

.blog-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.blog-card__media {
  display: block;
  overflow: hidden;
  border-radius: .5rem;
  margin-bottom: 1rem;
  aspect-ratio: 8 / 5;
  background: rgba(128, 128, 128, .12);
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.blog-card:hover .blog-card__media img { transform: scale(1.04); }

.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card__date {
  font-size: .8125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: .4rem;
}

.blog-card__title {
  margin: 0 0 .6rem;
  font-size: 1.25rem;
  line-height: 1.3;
}

.blog-card__title a {
  color: inherit;
  text-decoration: none;
}

.blog-card__title a:hover { text-decoration: underline; }

.blog-card__excerpt {
  margin: 0 0 1rem;
  line-height: 1.6;
  opacity: .8;
}

.blog-card__more {
  margin-top: auto;
  align-self: flex-start;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 1px;
}

/* ------------------------------------------------------------ Pagination */

.blog-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3.5rem;
  flex-wrap: wrap;
}

.blog-pager__link {
  display: inline-block;
  padding: .6rem 1.25rem;
  border: 1px solid currentColor;
  border-radius: .375rem;
  text-decoration: none;
  font-weight: 600;
}

.blog-pager__count {
  font-size: .9375rem;
  opacity: .7;
}

/* ----------------------------------------------------------- Breadcrumbs */

.blog-crumbs {
  font-size: .875rem;
  opacity: .7;
  margin-bottom: 1.75rem;
}

.blog-crumbs a { color: inherit; }
.blog-crumbs span { margin: 0 .4rem; }

/* ------------------------------------------------------------- Post page */

.blog-post__head { margin-bottom: 1.75rem; }

.blog-post__title {
  margin: 0 0 .75rem;
  line-height: 1.2;
}

.blog-post__meta {
  margin: 0;
  font-size: .9375rem;
  opacity: .65;
}

.blog-post__hero {
  margin: 0 0 2.25rem;
}

.blog-post__hero img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: .5rem;
}

/* Article body. These rules only apply inside .blog-post__body, so they
   will not affect any other page on the site. */

.blog-post__body {
  line-height: 1.75;
  font-size: 1.0625rem;
}

.blog-post__body > * + * { margin-top: 1.25rem; }

.blog-post__body h2 {
  margin-top: 2.75rem;
  margin-bottom: .75rem;
  line-height: 1.3;
}

.blog-post__body h3 {
  margin-top: 2rem;
  margin-bottom: .5rem;
  line-height: 1.35;
}

.blog-post__body ul,
.blog-post__body ol { padding-left: 1.5rem; }

.blog-post__body li + li { margin-top: .4rem; }

.blog-post__body img {
  max-width: 100%;
  height: auto;
  border-radius: .375rem;
}

.blog-post__body blockquote {
  margin-left: 0;
  margin-right: 0;
  padding-left: 1.25rem;
  border-left: 3px solid currentColor;
  opacity: .85;
  font-style: italic;
}

.blog-post__body code {
  font-size: .9em;
  padding: .1em .35em;
  border-radius: .25rem;
  background: rgba(128, 128, 128, .15);
}

.blog-post__body pre {
  overflow-x: auto;
  padding: 1rem;
  border-radius: .375rem;
  background: rgba(128, 128, 128, .12);
}

.blog-post__body pre code {
  background: none;
  padding: 0;
}

.blog-post__body table {
  width: 100%;
  border-collapse: collapse;
}

.blog-post__body th,
.blog-post__body td {
  padding: .6rem .75rem;
  border-bottom: 1px solid rgba(128, 128, 128, .3);
  text-align: left;
}

.blog-post__foot {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(128, 128, 128, .25);
}

/* --------------------------------------------------------- Accessibility */

.blog-wrap a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .blog-card__media img { transition: none; }
  .blog-card:hover .blog-card__media img { transform: none; }
}

@media (max-width: 40rem) {
  .blog-wrap { padding: 1.75rem 1rem 3rem; }
  .blog-grid { gap: 2.25rem; }
}