/* Feature Grid -- image-led capability cards: photo across the top, copy beneath.
 *
 * Third pass on this block, and the history is the point:
 *
 *   Original    full-bleed grid of column-width 3:2 photos, copy underneath,
 *               cards divided by a 1px gutter. At 1920 each photo was ~640
 *               wide and ~427 tall.
 *   2026-08-31  Jon: the photos "feel overpowering and too large", cut to
 *               "more of a small icon, maybe around one-eighth the current
 *               size, with the text sitting next to it". Became a 72px
 *               thumbnail on the leading edge.
 *   2026-09-07  Jon asked to double the thumbnail. Measured, 144px takes the
 *               copy column from 352 to 280, wraps every title onto two lines,
 *               and a photo still does not read at that size. Put back to him
 *               as icons-at-72 or a rebuild.
 *   2026-09-08  Jon: "Let's do image led block. I want another space to show
 *               images but they don't need to be huge like the first time I
 *               asked for it and I still like the round corners."
 *   2026-09-08  A copy-only card was allowed to span a 2-up row, for a section
 *               whose last point qualifies the cards above it rather than
 *               standing beside them. See the rule near .featuregrid-body.
 *   2026-09-09  Jon: "an option on some of these cards that show the whole
 *               image and not just crop it". Per-card "Show Whole Image"
 *               toggle -- taller box, `contain`, blurred copy of the image
 *               behind it. See the block near .featuregrid-card--full.
 *
 * So: photo on top, copy beneath, and the height is capped so it lands between
 * the two versions he has already rejected rather than back on the first one.
 * 16/9 with a 200px ceiling puts the photo at 200px tall on every desktop card
 * -- under half the original 427 -- while the ratio takes over on phones,
 * where the card is narrow enough that 16/9 is already short (201px at 390).
 *
 * The card clips the photo to its own radius rather than insetting it, which
 * is how every other image card on this site is built (`.projcard` in
 * projects.css, the blog cards). That is the "keeping it the same to match the
 * site" half of the note.
 */

.featuregrid-block {
  background: var(--bellco-bg-alt);
  border-top: 1px solid var(--bellco-divider);
  padding: 128px 0;
}

/* The grid used to be full-bleed, running to the screen edge. Rounded cards
   flush against the viewport read as clipped, so it is inside the container
   with the section head now. */
.featuregrid-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bellco-gap);
}

.featuregrid-block--cols2 .featuregrid-grid { grid-template-columns: repeat(2, 1fr); }
.featuregrid-block--cols4 .featuregrid-grid { grid-template-columns: repeat(4, 1fr); }

/* `overflow: hidden` is what rounds the photo's top corners -- same mechanism
   as .projcard. It also contains the hover scale on the image. */
.featuregrid-card {
  display: flex;
  flex-direction: column;
  background: var(--bellco-bg-card);
  border: 1px solid var(--bellco-hairline);
  border-radius: var(--bellco-radius);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.featuregrid-card:hover {
  border-color: rgba(139, 217, 186, 0.45);
  transform: translateY(-4px);
}

/* `aspect-ratio` with a `max-height` ceiling: the ratio governs where the card
   is narrow (phones), the ceiling governs everywhere else. flex-shrink is
   pinned off so a long copy block in a sibling card cannot squeeze it. */
.featuregrid-media {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 260px;
  overflow: hidden;
  background: var(--bellco-bg);
}

/* The library is mixed-orientation: 4:3 shop photos alongside portrait phone
   shots of tall machines. Biasing the crop up keeps the machine's working end,
   which is always in the top half of the frame. `object-position` distributes
   the *overflow*, so this is self-scaling -- a 4:3 source barely moves, a
   portrait moves a lot, which is where it is needed. */
.featuregrid-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  transition: transform 0.5s ease;
}

.featuregrid-card:hover .featuregrid-img {
  transform: scale(1.06);
}

/* ---------------------------------------------------------------------------
 * Whole-image cards -- the per-card "Show Whole Image" toggle.
 *
 * 2026-09-09, Jon: the five Bellco Flex platform cards carry spec sheets, not
 * photos. `cover` in a 200px band turns a 502x282 card into a 502x200 box, a
 * 2.5:1 crop of a 1.73:1 image, and `object-position: 50% 35%` then bites the
 * bottom row -- "Overall Dimensions" was cut in half on all five. Anything
 * with text in it has to be shown whole or not at all.
 *
 * So the flagged card switches to `contain` in a taller box, and the leftover
 * area is filled with a blurred, scaled copy of the same image rather than a
 * flat panel. That is the standard treatment for this and it survives a source
 * of any shape -- a portrait phone shot pillarboxes on the sides, a wide spec
 * sheet letterboxes top and bottom, both against their own colours.
 *
 * The taller box goes on EVERY card in a grid that contains at least one
 * flagged card, not only the flagged ones. Cards share a row: if just the
 * flagged one grew, its neighbours' titles would sit at a different height and
 * the row would read as broken. Unflagged neighbours stay on `cover` -- they
 * simply crop less in the taller box. This is why the field instruction says
 * turning it on for one card retunes the whole block.
 *
 * 4/3 with a 320px ceiling, same shape of rule as the 16/9 + 200px above: the
 * ratio governs on phones, the ceiling everywhere else. 320 keeps the media
 * band under the 427px height Jon called "overpowering" back on 2026-08-31,
 * while giving a 1.73:1 spec sheet its full width and ~30px of blur to sit in.
 */
.featuregrid-grid:has(.featuregrid-card--full) .featuregrid-media {
  aspect-ratio: 4 / 3;
  max-height: 320px;
}

.featuregrid-card--full .featuregrid-img {
  position: relative;
  z-index: 1;
  object-fit: contain;
  object-position: 50% 50%;
}

/* scale(1.1) pushes the blur's soft edge past the box. Without it the blur
   samples off the end of the image and feathers to transparent at the frame,
   which reads as a grubby halo instead of a fill. brightness keeps the
   backdrop from competing with the copy underneath. */
.featuregrid-card--full .featuregrid-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.1);
  filter: blur(24px) brightness(0.55) saturate(1.15);
}

/* No hover zoom on a contained image. Scaling it up pushes it past the box the
   card clips to, which is exactly the crop this option exists to avoid. The
   card's own lift still fires. */
.featuregrid-card--full:hover .featuregrid-img {
  transform: none;
}

.featuregrid-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 26px 28px 30px;
}

/* A card with no photo still has to sit level with its neighbours, so it keeps
   the same top inset the media band would have given it. */
.featuregrid-card:not(:has(.featuregrid-media)) .featuregrid-body {
  padding-top: 28px;
}

/* In a 2-up, a copy-only card would otherwise strand in a half-width orphan
   with a painted empty cell beside it. Span the row instead: a card carrying
   no photo is a closing note on the photo cards above it, not a third peer.
   Harmless in the 1-col phone grid, where 1 / -1 is already the full width. */
.featuregrid-block--cols2 .featuregrid-card:not(:has(.featuregrid-media)) {
  grid-column: 1 / -1;
}

.featuregrid-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 10px;
}

.featuregrid-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--bellco-muted);
  margin: 0;
}

@media (max-width: 1199px) {
  .featuregrid-block {
    padding: 88px 0;
  }

  .featuregrid-grid,
  .featuregrid-block--cols2 .featuregrid-grid,
  .featuregrid-block--cols4 .featuregrid-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .featuregrid-block {
    padding: 64px 0;
  }

  .featuregrid-grid,
  .featuregrid-block--cols2 .featuregrid-grid,
  .featuregrid-block--cols4 .featuregrid-grid {
    grid-template-columns: 1fr;
  }

  /* One card per row, so the card is as wide as the container and a 200px
     ceiling would letterbox it. Lifted to 240; below ~430 the 16/9 ratio is
     already under that and takes over. */
  .featuregrid-media {
    max-height: 300px;
  }

  /* Has to repeat the `:has()` selector, not just `.featuregrid-media` -- the
     desktop whole-image rule is the more specific of the two, so a plain
     max-height here would lose to it regardless of source order. Lifted to 340
     for the same reason as the 240 above: one card per row, so the box is
     container-wide and a shorter ceiling would letterbox a spec sheet down to
     unreadable. */
  .featuregrid-grid:has(.featuregrid-card--full) .featuregrid-media {
    max-height: 340px;
  }

  .featuregrid-body {
    padding: 22px 22px 26px;
  }
}

/* Optional per-card link. Same affordance as the product grid's card CTA so a
   card that leads somewhere reads the same wherever it appears on the site.
   margin-top:auto pins it to the bottom of the card, which keeps the row of
   links level when the copy above them differs in length. */
.featuregrid-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bellco-mint, #8BD9BA);
  text-decoration: none;
}

.featuregrid-more svg {
  transition: transform 0.25s ease;
}

.featuregrid-more:hover svg,
.featuregrid-card:hover .featuregrid-more svg {
  transform: translateX(4px);
}

/* The body is the flex child that grows, so the link can only be pushed to the
   bottom if the body itself is a column. */
.featuregrid-body {
  display: flex;
  flex-direction: column;
}

/* A card can carry more than one paragraph, so they need a gap between them --
   the base rule zeroes the margin because most cards are a single paragraph. */
.featuregrid-desc + .featuregrid-desc {
  margin-top: 0.9em;
}

.featuregrid-desc:last-of-type {
  margin-bottom: 0;
}