/* ==========================================================================
   Blog styles — layered on top of style.css, reusing its --af-* tokens.
   ========================================================================== */

/* The article/sidebar split is a plain Bootstrap row, so there is no width
   cap here — the col-lg-8 does that job. .post-list keeps its own measure. */
.post-layout {
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.post-list {
  max-width: 760px;
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

/* --- Breadcrumb ----------------------------------------------------------- */
.post__crumbs {
  font-size: .82rem;
  color: var(--af-ink-soft);
  margin-bottom: 1.5rem;
}
.post__crumbs a { color: inherit; }

/* --- Post header ---------------------------------------------------------- */
.post__cat {
  display: inline-block;
  margin-bottom: .75rem;
  padding: .25rem .7rem;
  border-radius: 99px;
  background: var(--af-blue);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}

.post__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-bottom: 1rem;
}

.post__lede {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--af-ink-soft);
  margin-bottom: 2rem;
}

.post__meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--af-line);
  font-size: .88rem;
}
.post__meta a { color: inherit; text-decoration: none; }
.post__meta span { display: block; color: var(--af-ink-soft); font-size: .82rem; }
.post__avatar { border-radius: 50%; object-fit: cover; }

/* --- Post body ------------------------------------------------------------
   Generous measure and spacing — the whole point of the 760px cap above. */
.post__body {
  padding: 2rem 0;
  font-size: 1.06rem;
  line-height: 1.75;
}
.post__body h2 {
  margin: 2.5rem 0 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.post__body p  { margin-bottom: 1.25rem; }
.post__body ol,
.post__body ul { margin: 0 0 1.5rem 1.25rem; }
.post__body li { margin-bottom: .6rem; }
.post__body strong { font-weight: 600; }

/* --- Topics --------------------------------------------------------------- */
.post__topics {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
}
.post__topics a {
  display: inline-block;
  padding: .3rem .75rem;
  border: 1px solid rgba(15, 15, 15, .2);
  border-radius: 99px;
  font-size: .82rem;
  color: var(--af-ink-soft);
  text-decoration: none;
}
.post__topics a:hover { border-color: var(--af-blue); color: var(--af-blue); }

/* --- Author box ----------------------------------------------------------- */
.post__author,
.author-head {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: var(--af-radius-md);
  background: rgba(15, 15, 15, .04);
}
.post__author img,
.author-head img { border-radius: 50%; object-fit: cover; flex: none; }
.post__author strong,
.author-head h1 { display: block; font-size: 1.05rem; margin: 0; }
.post__author span,
.author-head span { display: block; font-size: .85rem; color: var(--af-ink-soft); }
.post__author p,
.author-head p { margin: .5rem 0 0; font-size: .92rem; line-height: 1.6; }

.author-head { margin-bottom: 3rem; }
.author-head h1 { font-size: 1.6rem; font-weight: 700; }

/* --- Listing -------------------------------------------------------------- */
.post-list__title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.03em;
  margin-bottom: .5rem;
}
.post-list__count {
  font-size: .88rem;
  color: var(--af-ink-soft);
  margin-bottom: 2.5rem;
}

.post-card {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--af-line);
}
.post-card__cats a {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--af-blue);
  text-decoration: none;
  margin-right: .75rem;
}
.post-card h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: .5rem 0;
}
.post-card h2 a { color: inherit; text-decoration: none; }
.post-card h2 a:hover { color: var(--af-blue); }
.post-card p { color: var(--af-ink-soft); margin-bottom: .5rem; }
.post-card__meta { font-size: .82rem; color: var(--af-ink-soft); }

@media (max-width: 575.98px) {
  .post__author,
  .author-head { flex-direction: column; gap: 1rem; }
}


/* ==========================================================================
   SIDEBAR
   Hardcoded widget lists. Every list here is plain markup — add or remove
   <li> items directly in the page.
   ========================================================================== */
.sidebar {
  position: sticky;
  top: calc(var(--af-nav-height) + 1rem);   /* clears the sticky navbar */
}

.widget {
  margin-bottom: 1.75rem;
  padding: 1.25rem;
  border: 1px solid var(--af-line);
  border-radius: var(--af-radius-md);
}

.widget__title {
  margin: 0 0 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--af-line);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* --- Category list — stacked rows with a count chip ----------------------- */
.widget__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.widget__list li + li { border-top: 1px solid var(--af-line); }
.widget__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem 0;
  font-size: .95rem;
  color: var(--af-ink);
  text-decoration: none;
  transition: color var(--af-speed) var(--af-ease),
              padding-left var(--af-speed) var(--af-ease);
}
.widget__list a:hover {
  color: var(--af-blue);
  padding-left: .35rem;
}
.widget__count {
  flex: none;
  min-width: 26px;
  padding: .1rem .45rem;
  border-radius: 99px;
  background: rgba(15, 15, 15, .07);
  font-size: .75rem;
  font-weight: 600;
  text-align: center;
  color: var(--af-ink-soft);
}

/* --- Tag cloud — inline pills --------------------------------------------- */
.widget__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.widget__tags a {
  display: inline-block;
  padding: .35rem .7rem;
  border: 1px solid rgba(15, 15, 15, .2);
  border-radius: 99px;
  font-size: .82rem;
  color: var(--af-ink-soft);
  text-decoration: none;
  transition: border-color var(--af-speed) var(--af-ease),
              color var(--af-speed) var(--af-ease);
}
.widget__tags a:hover {
  border-color: var(--af-blue);
  color: var(--af-blue);
}

/* --- CTA widget ----------------------------------------------------------- */
.widget--cta {
  background: var(--af-ink);
  border-color: var(--af-ink);
  color: #fff;
  text-align: center;
}
.widget--cta .widget__title {
  border-bottom-color: rgba(255, 255, 255, .2);
  color: #fff;
}
.widget--cta p {
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .75);
  margin-bottom: 1rem;
}

/* Below lg the sidebar drops under the article, so sticky must switch off —
   a sticky element inside normal flow just jams against the viewport. */
@media (max-width: 991.98px) {
  .sidebar { position: static; }
}


/* ==========================================================================
   HOMEPAGE POST SECTION
   ========================================================================== */
.post-section { padding: var(--af-section-y) 0; }

.post-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.post-section__head .eyebrow { margin-bottom: .5rem; }

.post-section__title {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0;
}

/* --- Tile ------------------------------------------------------------------
   Full-height flex column so tiles in the same row line their footers up
   even when the titles wrap to different line counts. */
.post-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--af-line);
  border-radius: var(--af-radius-lg);
  overflow: hidden;
  background: #fff;
  transition: transform var(--af-speed) var(--af-ease),
              border-color var(--af-speed) var(--af-ease);
}
.post-tile:hover {
  transform: translateY(-4px);
  border-color: var(--af-blue);
}

.post-tile__media {
  display: block;
  overflow: hidden;
  background: var(--af-cream-deep);
}
.post-tile__media img {
  display: block;
  width: 100%;
  height: auto;              /* releases the height attribute — see style.css */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--af-speed) var(--af-ease);
}
.post-tile:hover .post-tile__media img { transform: scale(1.04); }

.post-tile__body {
  display: flex;
  flex-direction: column;
  flex: 1;                   /* pushes .post-tile__meta to the bottom */
  padding: 1.25rem;
}

.post-tile__cat {
  align-self: flex-start;
  margin-bottom: .75rem;
  padding: .25rem .7rem;
  border-radius: 99px;
  background: var(--af-blue);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.post-tile__title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin-bottom: .6rem;
}
.post-tile__title a { color: inherit; text-decoration: none; }
.post-tile__title a:hover { color: var(--af-blue); }

.post-tile__body p {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--af-ink-soft);
  margin-bottom: 1rem;
}

.post-tile__meta {
  margin-top: auto;          /* sits on the tile floor regardless of copy length */
  font-size: .8rem;
  color: var(--af-ink-soft);
}

@media (max-width: 575.98px) {
  .post-section__head { flex-direction: column; align-items: flex-start; gap: .5rem; }
}