/* ============================================================
   FAMILY FIT — "How Nestify fits into family life"
   Bento-grid section placed directly below the hero carousel.
   ============================================================ */

/* ── Shell ── */
.ffit {
  width: 100%;
  overflow: visible;
  background: var(--page-bg, #f4f2ea);
  padding-top: 5rem;
  padding-bottom: 4rem;
}

/* ── Inner container ── matches device.css dv__wrap exactly ──
   max-width: 77.5rem  (same as other device page sections)
   padding-inline: max(5vw, 32px)  → 72px at 1440px, min 32px  ── */
.ffit__inner {
  max-width: 77.5rem;
  width: 100%;
  margin-inline: auto;
  padding-inline: max(5vw, 32px);
}

/* ── Header ── */
.ffit__header {
  margin-bottom: 2.5rem;
}

.ffit__title {
  font-family: var(--font--primary, "Google Sans", sans-serif);
  font-size: clamp(1.625rem, 3.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--nes-ink, #1a1a1a);
}

.ffit__title .ffit__brand {
  color: var(--nes-blue-2, #1e88e5);
}

/* ── Bento grid ── */
.ffit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.125rem;
}

.ffit__card--tall   { grid-column: 1; grid-row: 1 / 3; }
.ffit__card--voice  { grid-column: 2; grid-row: 1; }
.ffit__card--photos {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.125rem;
}

/* ── Individual card ── */
.ffit__card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  background: var(--nes-cream, #f5f4f0);
  min-height: 15rem;
}

.ffit__card:hover .ffit__card-img {
  transform: scale(1.045);
}

.ffit__card--tall  { min-height: 34rem; }
.ffit__card--voice { min-height: 16rem; }
.ffit__card--sm    { min-height: 14rem; border-radius: 1.5rem; }

/* ── Card image ── */
.ffit__card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.96;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

@media (max-width: 1023px) {
  .ffit__card:hover .ffit__card-img { transform: none; }
}

/* ── Badge ── */
.ffit__badge {
  position: absolute;
  top: 1.125rem;
  left: 1.125rem;
  z-index: 20;
  max-width: calc(100% - 5.5rem);
  padding: 0.5rem 1.25rem;
  border-radius: 1.25rem;
  /* 🔴 FLAT WHITE, AND THE BLUR WENT WITH THE TRANSPARENCY. This was 85%
     --nes-cream over a `backdrop-filter: blur(10px) saturate(1.3)`, plus two
     soft drop shadows — a frosted pill, which is a treatment that only says
     anything while you can see through it. Opaque white has nothing behind it
     to frost, so the filter was left doing no work and still paying for it:
     backdrop-filter forces the badge onto its own composited layer and makes
     the compositor re-read the card underneath every frame the image is
     scaling on hover. Dropped rather than kept "in case", because a rule that
     cannot change a pixel is a rule nobody can test.

     No box-shadow either. The pill is white on photographs and on the pale
     hub graphic, and it reads on both without one. */
  background: #fff;
  pointer-events: none;
}

.ffit__badge-label {
  display: block;
  font-family: var(--font--ui, "Google Sans", sans-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--nes-ink, #1a1a1a);
  /* 🔴 IT WRAPS. This was `white-space: nowrap`, which turns the badge's
     `max-width: calc(100% - 5.5rem)` from a cap into a cliff: the pill stops
     at the cap and the text keeps going, straight out over the picture. It
     only looked safe because the two longest labels happened to fit on a
     desktop card — measured, once the two small cards were given the full
     label size, "Smart reminder" overflowed its pill at every width from
     1023px down, and "Central hub for family information" from 1100px down.
     Wrapping is what the cap was always assumed to do. */
  text-wrap: balance;
}

/* 🔴 THE SMALL CARDS DO NOT GET A SMALL BADGE. They used to — 0.875rem type
   in a 0.375/0.875rem pill set 0.75rem in, against 1.0625rem in a
   0.5/1.25rem pill set 1.125rem in on the big two — on the reasoning that a
   label should be a share of the card it sits on. On a bento that is wrong,
   and the render is the argument: the four badges are read as ONE row of
   labels naming four pictures, not as four cards each with a caption, so two
   of them being 18% smaller reads as a rendering mistake rather than as
   hierarchy. They are all the same label now, at the first one's size.

   The room this needs is real and it is the reason the label above had to
   stop being `nowrap` — see the note there. At 1440 a small card is 303px and
   the badge caps at calc(100% - 5.5rem) = 215px, which "Smart reminder" fits
   on one line; below 1024px it does not, and now wraps to two instead of
   running out over the photograph.

   🔴 AND THE CAP ITSELF IS RELAXED HERE, which fixes something that predates
   the size change. 5.5rem is 88px held back so a badge cannot cover a whole
   card — sensible on a 623px card, absurd on the pair, which at 640px are
   130px wide and were therefore being given an 42px pill. The old 0.8125rem
   label did not fit that either: "reminder" alone sets ~60px, so the label
   was already running out over the photo at that width before any of this
   was touched. A 2.25rem reserve leaves the badge the same 1.125rem margin
   on the right that it has on the left, which is what the inset implies. */
.ffit__card--sm .ffit__badge { max-width: calc(100% - 2.25rem); }

/* ── Scroll-reveal animation ── */
@media (prefers-reduced-motion: no-preference) {
  .ffit.is-animated .ffit__card {
    opacity: 0;
    transform: translateY(1.5rem);
    transition:
      opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1),
      transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .ffit.is-animated .ffit__card.is-visible {
    opacity: 1;
    transform: none;
  }
  .ffit.is-animated .ffit__header {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }
  .ffit.is-animated .ffit__header.is-visible {
    opacity: 1;
    transform: none;
  }
  .ffit__card--tall     { transition-delay: 0.05s; }
  .ffit__card--voice    { transition-delay: 0.12s; }
  .ffit__card--photo    { transition-delay: 0.18s; }
  .ffit__card--reminder { transition-delay: 0.24s; }
}

/* ── Tablet ── */
@media (max-width: 1023px) {
  .ffit { padding-top: 3.5rem; padding-bottom: 3rem; }
  .ffit__card        { border-radius: 1.25rem; }
  .ffit__card--sm    { border-radius: 1rem; min-height: 11rem; }
  .ffit__card--tall  { min-height: 26rem; }
  .ffit__card--voice { min-height: 14rem; }
  .ffit__badge       { padding: 0.375rem 0.875rem; border-radius: 1rem; }
  /* one size for all four here too — see the note by the badge rules */
  .ffit__badge-label { font-size: 0.9375rem; }
  /* the pair is at its tightest through this band — 130px a card at 640 —
     so the pill gives back its side padding rather than the type giving back
     size, which is what keeps all four labels one size */
  .ffit__card--sm .ffit__badge { padding-inline: 0.5rem; }
  .ffit__grid        { gap: 0.875rem; }
  .ffit__card--photos { gap: 0.875rem; }
}

/* ── Mobile: single column ── */
@media (max-width: 639px) {
  .ffit { padding-top: 2.5rem; padding-bottom: 2rem; }
  .ffit__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .ffit__card--tall   { grid-column: 1; grid-row: auto; min-height: 22rem; }
  .ffit__card--voice  { grid-column: 1; grid-row: auto; min-height: 13rem; }
  /* 🔴 THE PAIR STACKS TOO, and this line is the one the breakpoint was
     missing. .ffit__card--photos is a grid in its own right — `1fr 1fr`
     from the bento above — so putting it in a single column only moved the
     PAIR into one column and left the two cards inside it side by side.
     At 390 that is 156px each, and the badges do not survive it: measured,
     "Photo import" wants 93px of label in a 40px box and "Smart reminder"
     111px in 40px. Both overflow, and they are the only text on the page
     that does.

     Stacked they get the full 326px, which is more than either label needs.
     The two are a pair by subject, not by geometry — nothing about them
     requires sharing a row. */
  .ffit__card--photos { grid-column: 1; grid-row: auto; grid-template-columns: 1fr; }
  .ffit__card--sm     { min-height: 11rem; }
}

/* ── Headerless variant — device.html, directly under .intel ──
   🔴 THE TOP PADDING GOES TO ZERO, and the number it replaces is not
   arbitrary. .ffit's own 5rem is the gap a section needs when it opens with a
   headline; on the device page it opens with a card edge, and .intel above it
   already carries its own bottom padding — which was tuned ink-to-ink, see the
   note at the head of intel.css. Stacked, that would be 5rem of nothing
   between two blocks that .ph-blocks (the placeholder these cards replaced)
   held 0 apart. The bottom keeps the placeholder's clamp, so everything below
   the bento sits exactly where it did.

   🔴 AND IT HAS TO BE THE LAST RULE IN THE FILE. `.ffit--flush` and `.ffit`
   are both one class, so specificity cannot break the tie — only source order
   can, and the two media queries above re-set .ffit's padding at 1023px and
   639px. Written up beside .ffit, this variant is correct on desktop and
   silently loses on every phone and tablet.

   Pair it with markup that omits .ffit__header: the class removes the space a
   header would have occupied, it does not hide one. */
.ffit--flush {
  padding-top: 0;
  padding-bottom: clamp(3rem, 6vh, 5rem);
}

/* ── The device page's bento runs wider than the page grid ──
   🔴 WIDTH IS THE ONLY AXIS THAT MAKES THIS BIGGER, and that took a wrong
   turn to establish. The obvious move — leave the container alone and raise
   the card min-heights — does not enlarge the bento, it CROPS it. The cards
   are object-fit: cover over artwork with a fixed shape, so a taller card at
   a fixed column width does not show more, it shows less of the sides:

     info-hub.webp                    1568 × 1530   aspect 1.025
     tall card, 77.5rem, 1.0×        539 × 544     3.3% off each side
     tall card, 77.5rem, 1.1×        539 × 598    12.1% off each side —
                                                   the EMAIL and PHOTO tiles
                                                   leave the picture entirely

   Widening the container moves the column instead, and everything improves at
   once: at 88rem the column is 623px, the tall card comes out 623 × 608, and
   the crop goes to zero. The voice photo drops from 18% to 7%, the two small
   cards from 8.6% to 3.9%.

   The cost is the one thing to keep in mind: .ffit__inner is 77.5rem because
   that is dv__wrap, so this section no longer lines up with .intel's four
   columns above it. That is deliberate — a picture block running wider than
   the text over it — and it is scoped to .ffit--flush, so the landing page's
   copy of the same markup still sits on the page grid.

   88rem = 1408px, which still leaves a 16px gutter at 1440. Below 1408 the
   container is simply the viewport and the padding takes over, as before.

   🔴 AND IT IS BACK ON THE GRID, ON REQUEST — the widening above is history
   now, kept because the reasoning explains what the crop numbers below cost.
   The overhang was measured, not felt: the bento's grid ran 88..1352 against
   the privacy panels' 172..1268, which is 84px past the page on EACH side.
   That is what "the padding does not match" was.

   What the revert costs, measured at 1440 before and after rather than taken
   from the ledger above — those figures predate the aspect-ratio rule below
   and overstate it badly:

     card      column      crop at 88rem        crop at 77.5rem
     tall      623 -> 539  0.0%                 0.0%   (aspect-ratio, below)
     voice     623 -> 539  3.1% each side       see the note that follows
     sm x2     303 -> 262  1.8% top/bottom      "

   The tall card is free either way — it is shaped by its own artwork. The
   other three are the trade, and it is a small one at these numbers. */
/* .ffit--flush .ffit__inner { max-width: 88rem; }  ← reverted, see above */

/* 🔴 THE TALL CARD IS SHAPED BY ITS ARTWORK, NOT BY A NUMBER. A min-height
   tuned to make the crop vanish at 1440 only does so at 1440 — the column is
   a share of the container, so every narrower viewport puts the card back out
   of shape and the sides start going again. aspect-ratio asks the question
   the right way round: whatever this column turns out to be, be info-hub.webp's
   shape. Zero crop at every width, and nothing to retune if the container
   moves again.

   min-height goes to 0 because it would otherwise be a floor fighting the
   ratio at narrow widths. The card still cannot collapse — it is the grid's
   tallest item and the row it spans is sized by the right-hand column. */
.ffit--flush .ffit__card--tall {
  aspect-ratio: 1568 / 1530;
  min-height: 0;
}