/* ==========================================================================
   Smyle Dental — blog article
   A readable article column beside a sticky rail of the two office cards.
   Body copy comes verbatim from the published WordPress post, so the
   WordPress image classes (.alignleft, 480px) are styled here to match the
   live blog. Prose rules are scoped to .post-main so they never leak into
   the office rail or the buttons that sit inside the article.
   ========================================================================== */

/* Article variant of the hero: same review field and typewriter, sized for a
   long post title and a little shorter than a landing hero. */
.hero.hero--post { min-height: 64vh; }
.hero.hero--post h1 {
  font-size: clamp(30px, 3.8vw, 52px);
  max-width: 26ch;
}
.hero.hero--post .postmeta { margin: 0 0 14px; }

/* -------------------------------------------------------------- layout -- */
/* The rail stays on the right as long as the screen can carry two columns. */
.post-body { padding: 44px 0 72px; }
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 820px) 360px;
  justify-content: center;
  gap: 48px;
  align-items: start;
}

.post-featured { margin: 0 0 34px; }
.post-featured img {
  width: 100%;
  height: auto;
  border-radius: 22px;
  display: block;
}

/* --------------------------------------------------------------- prose -- */
.post-main p {
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--mid);
  margin: 0 0 18px;
}
.post-main strong { color: var(--ink3); }
.post-main a:not(.btn) {
  color: var(--ink3);
  font-weight: 700;
  border-bottom: 2px solid var(--yellow);
  padding-bottom: 1px;
}
.post-main a:not(.btn):hover { border-bottom-color: var(--yellow-deep); }
.post-main h2 {
  clear: both;
  font-size: clamp(24px, 2.6vw, 32px);
  margin: 40px 0 14px;
}
.post-main > h3 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -.015em;
  color: var(--ink3);
  margin: 26px 0 10px;
}
.post-main ul { margin: 0 0 18px; padding-left: 24px; }
.post-main li { font-size: 16px; line-height: 1.7; color: var(--mid); margin: 7px 0; }

/* The live blog's left-aligned body images: 480px, floated, with the same
   breathing room the site's Customizer CSS gives them. */
.post-main figure.alignleft,
.post-main img.alignleft {
  float: left;
  margin: 6px 28px 18px 0;
}
.post-main figure.alignleft { max-width: 480px; }
.post-main figure.alignleft img {
  width: 480px;
  max-width: 100%;
  height: auto;
  border-radius: 18px;
  display: block;
}

/* The article's own FAQ runs on the site's accordion, one answer at a time. */
.post-main .faqlist { clear: both; margin: 0 0 8px; }
.post-main .faqlist p { margin: 0; }

.post-cta { clear: both; display: flex; gap: 12px; flex-wrap: wrap; padding-top: 26px; }

/* ------------------------------------------------------- office sidebar -- */
.post-side {
  position: sticky;
  top: 108px;
  display: grid;
  gap: 18px;
}
.post-side .loc .clinic { height: 140px; }
.post-side .loc .bd { padding: 18px 20px 20px; }
.post-side .loc h3 { font-size: 20px; }
.post-side .loc .meta { font-size: 14px; margin-bottom: 3px; }
.post-side .loc .hrs { font-size: 12px; margin-top: 8px; }
.post-side .gmap {
  width: 100%;
  height: 140px;
  border: 0;
  border-radius: 14px;
  display: block;
  margin: 12px 0 2px;
}
.post-side .loc .acts { margin-top: 14px; }

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 1240px) {
  .post-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; }
}

@media (max-width: 820px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-side {
    position: static;
    grid-template-columns: 1fr 1fr;
    margin-top: 44px;
  }
}

@media (max-width: 700px) {
  .post-main figure.alignleft,
  .post-main img.alignleft {
    float: none;
    margin: 0 0 18px;
  }
  .post-main figure.alignleft { max-width: 100%; }
  .post-main figure.alignleft img { width: 100%; }
}

@media (max-width: 640px) {
  .post-side { grid-template-columns: 1fr; }
}