/* Fab Journal 2.1.9 — balanced featured-image hero. Scoped to Journal posts only. */
.fab-journal-template .fab-hero.fab-journal-hero-with-image {
  padding: clamp(30px, 3.4vw, 48px) 0 30px;
}
.fab-journal-template .fab-hero.fab-journal-hero-with-image .fab-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-areas: "journal-copy journal-image" "journal-summary journal-summary";
  column-gap: clamp(22px, 3.4vw, 44px);
  row-gap: clamp(20px, 2.5vw, 30px);
  align-items: start;
}
.fab-journal-template .fab-hero.fab-journal-hero-with-image .fab-hero-grid > div:first-child {
  grid-area: journal-copy;
  min-width: 0;
  padding-top: 0;
}
/* Long titles in the article JSON should not overpower the photograph. */
.fab-journal-template .fab-hero.fab-journal-hero-with-image .fab-eyebrow {
  margin-bottom: 9px;
}
.fab-journal-template .fab-hero.fab-journal-hero-with-image h1 {
  font-size: clamp(2.15rem, 2.9vw, 3.15rem);
  line-height: 1.12;
  letter-spacing: -.032em;
  margin-bottom: 16px;
  overflow-wrap: break-word;
}
/* The original copy remains intact and readable, but uses editorial rather than display sizing. */
.fab-journal-template .fab-hero.fab-journal-hero-with-image .fab-lede {
  font-size: clamp(1rem, 1.18vw, 1.095rem);
  line-height: 1.64;
  margin-bottom: 13px;
  max-width: 640px;
}
.fab-journal-template .fab-hero.fab-journal-hero-with-image .fab-actions {
  gap: 10px;
  margin-top: 17px;
}
.fab-journal-template .fab-hero.fab-journal-hero-with-image .fab-meta {
  margin-top: 12px;
  margin-bottom: 0;
}
.fab-journal-template .fab-hero.fab-journal-hero-with-image .fab-journal-featured-frame {
  grid-area: journal-image;
  display: block;
  width: 100%;
  max-width: 100%;
  height: clamp(230px, 26vw, 330px);
  max-height: 330px;
  align-self: start;
  min-width: 0;
  margin: 28px 0 0;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #e8e8e1;
  box-shadow: 0 10px 34px rgb(32 39 35 / 9%);
}
.fab-journal-template .fab-hero.fab-journal-hero-with-image .fab-journal-featured-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 0;
}
/* Preserve the original hero notes, but turn the tall box into a slim summary. */
.fab-journal-template .fab-hero.fab-journal-hero-with-image .fab-hero-note {
  grid-area: journal-summary;
  display: grid;
  grid-template-columns: minmax(130px, .23fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 24px;
  margin: 0;
  padding: 18px 22px;
  border-radius: 15px;
}
.fab-journal-template .fab-hero.fab-journal-hero-with-image .fab-hero-note h3 {
  margin: 0;
  font-size: 1rem;
}
.fab-journal-template .fab-hero.fab-journal-hero-with-image .fab-hero-note ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fab-journal-template .fab-hero.fab-journal-hero-with-image .fab-hero-note li {
  padding: 0 0 0 11px;
  border-left: 2px solid #d8c39e;
  font-size: .83rem;
  line-height: 1.5;
  min-width: 0;
}
/* Themes sometimes leave an empty thumbnail wrapper when its image is filtered. */
body.fab-journal-integrated-featured :is(.post-thumbnail,.featured-image,.entry-thumbnail,.wp-block-post-featured-image):empty {
  display: none !important;
}
@media (max-width: 1100px) {
  .fab-journal-template .fab-hero.fab-journal-hero-with-image .fab-hero-note ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .fab-journal-template .fab-hero.fab-journal-hero-with-image .fab-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "journal-copy" "journal-image" "journal-summary";
    gap: 25px;
  }
  .fab-journal-template .fab-hero.fab-journal-hero-with-image .fab-journal-featured-frame {
    margin-top: 0;
    height: min(60vw, 310px);
    max-height: 310px;
  }
  .fab-journal-template .fab-hero.fab-journal-hero-with-image .fab-hero-note {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
@media (max-width: 560px) {
  .fab-journal-template .fab-hero.fab-journal-hero-with-image {
    padding: 28px 0 32px;
  }
  .fab-journal-template .fab-hero.fab-journal-hero-with-image h1 {
    font-size: clamp(2rem, 8vw, 2.55rem);
  }
  .fab-journal-template .fab-hero.fab-journal-hero-with-image .fab-journal-featured-frame {
    height: min(66vw, 280px);
    border-radius: 14px;
  }
  .fab-journal-template .fab-hero.fab-journal-hero-with-image .fab-hero-note ul {
    grid-template-columns: 1fr;
    gap: 9px;
  }
}