/*
 * MHP Journal — card styling only.
 *
 * The grid, breakpoints, column spacing and image crop all come from Flatsome.
 * This file styles the text block under each image and nothing else, so the
 * section stays in step with the rest of the site if theme settings change.
 */

.mhp-journal .mhp-journal__link {
  display: block;
  color: inherit;
}

/* ---- image ----
   Substack images are a mix of full-bleed photographs and objects shot on
   white. Without an edge the white-background ones read as floating on the
   page rather than sitting in a card, so every image gets a hairline. */
.mhp-journal .mhp-journal__box .box-image {
  border: 1px solid rgba(0, 0, 0, 0.12);
}

/* ---- lining the cards up ----
   Titles wrap to one or two lines depending on length, which would otherwise
   leave each card's divider and excerpt at a different height. Reserving two
   lines for the title and two for the excerpt levels the divider and both ends
   of the excerpt across the row.
   Done with min-height rather than by stretching the cards and pushing the text
   to the bottom: bottom-pinning aligns the excerpts but leaves the divider
   floating at a different height on each card, which reads worse. min-height
   also keeps the cards in normal block flow — making the card a flex or grid
   container collapses the image, because Flatsome sizes .image-cover by
   padding-top and its only child is absolutely positioned, so the box has no
   intrinsic width to stretch from. A longer title simply grows its own card. */

/* Flatsome's .box-text carries centred padding by default; the new cards read
   as a column of text under the image, so pull it back to the image edge. */
.mhp-journal .mhp-journal__box .box-text {
  padding: 0.9em 0 0;
}

.mhp-journal .mhp-journal__label {
  margin: 0 0 0.35em;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.6;
}

.mhp-journal .mhp-journal__title {
  margin: 0 0 0.7em;
  line-height: 1.25;
  /* Two lines at the line-height above. */
  min-height: 2.5em;
  transition: color 0.2s ease-out;
}

.mhp-journal .mhp-journal__link:hover .mhp-journal__title {
  color: var(--primary-color, #446084);
}

.mhp-journal .mhp-journal__date {
  margin-top: 0.35em;
}

/* Flatsome's divider is a centred rule under centred text; here it's a short
   left-aligned mark separating title from excerpt. */
.mhp-journal .mhp-journal__box .is-divider {
  margin: 0 0 0.7em;
  max-width: 2.5em;
  height: 2px;
  opacity: 0.35;
}

/* Matches the item names in the Glass, Ceramics & More carousel below, so the
   two sections read as the same weight of text rather than one looking faded. */
.mhp-journal .mhp-journal__excerpt {
  margin: 0;
  /* rem, not em, to match .mhp-card-title in the carousel below exactly: the
     same 0.95 against the 16px root. Relative to this parent (14.4px) it would
     land at 13.7px and read noticeably smaller than that section. */
  font-size: 0.95rem;
  line-height: 1.55;
  /* Two lines, so a one-line subtitle doesn't leave its card short. */
  min-height: 3.1em;
  color: #333;
}

/* Cards with no image in the feed still hold their place in the row. */
.mhp-journal .mhp-journal__placeholder {
  position: absolute;
  inset: 0;
  display: block;
  background: rgba(0, 0, 0, 0.06);
}

/* Flatsome rows sit tight together; the button needs clear air under the cards
   or it reads as part of the last one. */
.mhp-journal__cta-row {
  margin-top: 2em;
}

.mhp-journal__cta {
  margin-bottom: 0;
}

/* Covers both stacked breakpoints: the section is set to one column on tablet
   (columns__md) as well as mobile, and both need the gutter. */
@media screen and (max-width: 849px) {
  /* The homepage uses Flatsome's blank page template, which renders content
     without a .container — so there is no page gutter, and col_spacing="xsmall"
     pads the columns by only 2px. Stacked to one column that leaves the card
     hard against both screen edges, so the gutter is supplied here. */
  .mhp-journal .mhp-journal__item {
    /* Side padding is deliberately left alone: the column's own 2px from
       col_spacing="xsmall" puts the images at the same width as the near
       full-bleed portfolio row above. Only the text gets inset, below.
       The bottom gap is needed because that same xsmall spacing collapses the
       column's bottom padding — fine side by side, but it leaves stacked cards
       touching, with one card's subtitle running into the next card's image. */
    padding-bottom: 30px;
  }

  /* The last card already has that 30px below it, so the button doesn't need
     its full desktop gap on top as well. */
  .mhp-journal__cta-row {
    margin-top: 0.5em;
  }

  /* One card per row, so text centred under the full-width image reads better
     than the left alignment the three-column grid needs. */
  .mhp-journal .mhp-journal__box .box-text {
    padding-top: 0.7em;
    /* 13px on top of the column's 2px gives the text a 15px gutter while the
       image stays edge-aligned with the portfolio row. */
    padding-left: 13px;
    padding-right: 13px;
    text-align: center;
  }

  .mhp-journal .mhp-journal__box .is-divider {
    margin-left: auto;
    margin-right: auto;
  }

  /* The reserved heights exist to line cards up beside each other; stacked,
     they only add dead space. */
  .mhp-journal .mhp-journal__title,
  .mhp-journal .mhp-journal__excerpt {
    min-height: 0;
  }
}