/* =====================================================================
   Blog: the /blog listing and the six post pages.

   Everything here sits on top of site.css and is only loaded by those
   seven pages. Order of the file:
     1. the listing (title strip, post cards)
     2. a post page (banner, body copy, older/newer links)
     3. the blocks every post ends with (call to action, more posts)

   Written phone first, like site.css. The live site switches from its
   phone styling to its wide styling at 768 pixels, so that is the one
   breakpoint used below.
   ===================================================================== */

/* ------------------------------------------------------ 1. the listing */

.blog-head { padding: 64px 0 20px; text-align: center; }
.blog-head__title { color: var(--blue); font-size: 48px; line-height: 1.2; }

/* --- the search pill under the title --------------------------------- */

.blog-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 420px;
  max-width: 100%;
  height: 50px;
  margin: 18px auto 0;
  padding: 0 44px 0 20px;
  border: 1px solid #d5d5d5;
  border-radius: 25px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
  background: var(--white);
  text-align: left;
}
.blog-search__field {
  width: 100%;
  border: 0;
  background: none;
  color: var(--ink);
  font: 400 15px/1.5 var(--font-body);
}
.blog-search__field::placeholder { color: #8a8a8a; opacity: 1; }
.blog-search__field:focus { outline: none; }
.blog-search:focus-within { border-color: var(--blue); }
.blog-search__icon {
  position: absolute;
  right: 18px;
  width: 17px;
  height: 17px;
  fill: #333;
  pointer-events: none;
}
.blog-search__empty { margin: 24px 0 0; font-size: 16px; }

/* On a phone the pill is the full column, so the placeholder gets a smaller
   face and a little less padding to keep the whole sentence visible. */
@media (max-width: 767px) {
  .blog-search { padding: 0 40px 0 16px; }
  .blog-search__field { font-size: 13px; }
}

.blog-list { padding: 30px 0 70px; }
/* the listing lines up on its own column: a single 313 pixel card on a
   phone, 960 pixels of cards inside a 30 pixel gutter from tablet up */
.blog-list__container { max-width: 343px; padding-inline: 15px; }

/* --- post cards ------------------------------------------------------ */

/* Both card sets (the listing, and the "more posts" row at the foot of a
   post) share this. `.post-grid--flat` is the bare listing card,
   `.post-grid--cards` is the white card with a shadow. */
.post-grid--flat,
.post-grid--cards { gap: 20px; }

.post-card { display: flex; flex-direction: column; }
.post-card__thumb { display: block; height: 190px; overflow: hidden; }
.post-card__thumb img {
  width: 100%; height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  transition: transform .2s ease-out;
}
/* the six per cent zoom the live listing gives a card you point at */
.post-card__thumb:hover img,
.post-card__thumb:focus-visible img { transform: scale(1.06); }
.post-card__body { flex: 1 1 auto; }
.post-card__title { margin: 0 0 15px; font: 700 18px/1.5 var(--font-head); }
.post-card__meta { margin: 0 0 15px; font: 13px/normal var(--font-body); color: #939393; }
.post-card__excerpt {
  font-size: 14px;
  line-height: 1.4;
  color: #747474;
  overflow: hidden;
}
/* the two-class selector keeps the site-wide "last paragraph carries no
   margin" rule from closing the gap under the excerpt */
.post-card__body .post-card__excerpt { margin: 0 0 15px; }
.post-card__more { margin: 0; font: 14px/normal var(--font-body); }
.post-card__more a { color: rgba(0, 0, 0, .8); }

/* listing card: no card chrome, text flush with the picture, blue title,
   three lines of the excerpt */
.post-grid--flat .post-card__body { padding: 15px 0; }
.post-grid--flat .post-card__title a { color: var(--blue); }
.post-grid--flat .post-card__excerpt { max-height: 4.1em; }

/* "more posts" card: white, rounded, dropped shadow, black title, four
   lines of the excerpt and no "read more" */
.post-grid--cards .post-card {
  background: var(--white);
  border-radius: 4px;
  box-shadow: 0 3px 11px 0 rgba(0, 0, 0, .25);
  overflow: hidden;
}
.post-grid--cards .post-card__body { padding: 15px; }
.post-grid--cards .post-card__title a { color: var(--ink-strong); }
.post-grid--cards .post-card__excerpt { max-height: 5.5em; }

/* ----------------------------------------------------- 2. a post page */

/* the column the banner, the copy and the card row all line up on */
.post-shell {
  width: 100%;
  max-width: 964px;
  margin-inline: auto;
  padding-inline: 18px;
}

/* --- banner: the post picture with the title over it ----------------- */

.post-hero {
  position: relative;
  padding-block: 60px;
  color: var(--white);
  background: #4a4a4a center / cover no-repeat;
  text-align: center;
  isolation: isolate;
}
/* The live band holds its picture still while the page scrolls past it.
   Phones scroll it normally, which is what the live mobile pages do. */
@media (min-width: 768px) {
  .post-hero { background-attachment: fixed; }
}
.post-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(0, 0, 0, .22);
}
.post-hero__title {
  max-width: 328px;
  margin: 10px auto 0;
  color: var(--white);
  font-size: 16px;
  line-height: 1;
}
.post-hero__date {
  max-width: 328px;
  margin: 12px auto 0;
  font-size: 15px;
  line-height: 1.5;
}

.post-hero--flip-first-house      { background-image: url("/assets/img/blog/post-flip-first-house.jpg"); }
.post-hero--off-market-deals      { background-image: url("/assets/img/blog/post-off-market-deals.jpg"); }
.post-hero--local-coaches         { background-image: url("/assets/img/blog/post-local-coaches.jpg"); }
.post-hero--hit-the-ground-running { background-image: url("/assets/img/blog/post-hit-the-ground-running.jpg"); }
.post-hero--mentor-best-asset     { background-image: url("/assets/img/blog/post-mentor-best-asset.jpg"); }
.post-hero--why-a-mentor          { background-image: url("/assets/img/blog/post-why-a-mentor.jpg"); }

/* --- the body copy --------------------------------------------------- */

.post-main { padding: 93px 0 112px; }

/* The posts were written in a page builder that spaced paragraphs with
   blank lines rather than margins, so the paragraphs here carry no margin
   and the blank lines are kept as empty paragraphs. That is what makes the
   rhythm of the copy match the live page line for line. */
.post-body { font-size: 15px; }
.post-body p, .post-body li { margin: 0; line-height: 1.38; }
.post-body ul, .post-body ol { margin: 0; padding-left: 32px; }
.post-body a { color: var(--blue-link); }

/* two posts were typed with looser leading than the rest */
.post-body--relaxed p, .post-body--relaxed li { line-height: 1.5; }

.post-head {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink-strong);
  line-height: 1.38;
  margin: 0;
}
/* On five of the six posts each heading is its own block on the live
   page, which leaves air above and below it. */
.post-body--spaced-heads .post-head { margin: 11px 0 18px; }
.post-body--airy-heads .post-head { line-height: 2; }

/* Heading size is set separately from heading level: the live pages use
   four sizes and the levels below keep the outline in order. */
.post-head--xl   { margin-bottom: 20px; font-size: 25px; line-height: 1.48; }
.post-head--lg   { font-size: 17px; }
.post-head--step { font-size: 19px; color: var(--blue); }
.post-head--md   { font-size: 16px; }
.post-head--sm   { font-size: 14px; }

/* a blank line the size of a heading, which the live copy uses as a gap */
.post-gap { margin: 0; line-height: 1.4; }
.post-gap--xl   { font-size: 25px; }
.post-gap--lg   { font-size: 17px; }
.post-gap--step { font-size: 19px; }
.post-gap--md   { font-size: 16px; }
.post-gap--sm   { font-size: 14px; }

/* --- older and newer post links -------------------------------------- */

.post-nav { padding-bottom: 45px; }
.post-nav .post-shell { display: flex; gap: 20px; }
.post-nav__link { color: var(--blue-link); text-decoration: none; }
.post-nav__link:hover { text-decoration: underline; }
.post-nav__link--newer { margin-left: auto; }

/* ------------------------------------ 3. the blocks every post ends on */

/* the same band as the rest of the site, but a flat gradient with no
   photograph behind it, so it carries no darkening layer */
.cta-band--post { padding-block: 25px 20px; text-align: center; }
.cta-band--post::before { display: none; }
.cta-band--post .cta-band__title {
  margin: 0 0 13px;
  padding-top: 0;
  font-size: 28px;
  line-height: 1.2;
}
.cta-band__text { margin: 0; }
.cta-band--post .cta-band__btn {
  display: block;
  width: calc(100% - 30px);
  max-width: 360px;
  margin: 11px auto 0;
}

.related { padding: 30px 0; }

/* the page counter under the card row. There is only ever one page of
   posts, so it is a plain marker rather than a control. */
.pager { display: flex; justify-content: center; padding-block: 8px; }
.pager__list { display: flex; gap: 6px; margin: 0; padding: 0; }
.pager__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(1em + 18px);
  height: calc(1em + 18px);
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
}
.pager__item--current { border: 1px solid var(--blue); border-radius: 50%; }
.pager__link--off { color: #c9cacd; }

/* ------------------------------------------------- from tablet width up */

@media (min-width: 768px) {
  .blog-head { padding: 114px 0 40px; }
  .blog-head__title { font-size: 60px; }
  .blog-list { padding: 60px 0 100px; }
  .blog-list__container { max-width: 1020px; padding-inline: 30px; }

  .post-card__excerpt { font-size: 15px; }
  .post-grid--cards .post-card__title { font-size: 16px; }

  .post-shell { padding-inline: 50px; }

  .post-hero { padding-block: 180px; }
  .post-hero__title { max-width: 860px; margin-top: 2px; font-size: 72px; }
  .post-hero__date { max-width: 744px; margin-top: 3px; font-size: 17px; }

  .post-main { padding: 110px 0 141px; }
  .post-body { font-size: 16px; }

  .post-head--xl   { font-size: 35px; }
  .post-head--lg   { font-size: 25px; }
  .post-head--step { font-size: 24px; }
  .post-head--md   { font-size: 18px; }
  .post-head--sm   { font-size: 18px; }

  .post-gap--xl   { font-size: 35px; }
  .post-gap--lg   { font-size: 25px; }
  .post-gap--step { font-size: 24px; }
  .post-gap--md   { font-size: 18px; }
  .post-gap--sm   { font-size: 18px; }

  .cta-band--post { padding-block: 54px; }
  .cta-band--post .cta-band__title { margin: 30px 0 19px; font-size: 50px; }
  .cta-band--post .cta-band__btn { max-width: 278px; margin: 30px auto; }

  .post-nav { padding-bottom: 120px; }
  .related { padding: 40px 0 50px; }
}