/* fx.css · layout/bento-live, a bento grid whose tiles each carry a small live moment · owner: Lizzy East · all rights reserved */

/* Four columns (two on phones), tiles spanning by data-fx-size. Each tile is its own
   block, so the core fades them up one after another; a number counts up once, a
   clock tile keeps the time (fx.js), a photo tile drifts closer on hover or focus.
   Without script the numbers are final, the clock shows its own words, and every
   tile simply sits there. */
[data-fx-bento] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(var(--fx-bento-row, 14rem), auto);
  grid-auto-flow: dense;
  gap: var(--fx-bento-gap, clamp(0.75rem, 1.6vw, 1.25rem));
}
[data-fx-bento] > * { min-width: 0; grid-template-columns: minmax(0, 1fr); align-content: space-between; }
[data-fx-bento] > [data-fx-size~="wide"] { grid-column: span 2; }
[data-fx-bento] > [data-fx-size~="tall"] { grid-row: span 2; }
@media (max-width: 760px) {
  [data-fx-bento] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(var(--fx-bento-row-sm, 13rem), auto); }
}

/* The live numbers: a count and a clock, set large and on even figures so they never
   jostle what sits beside them while they change. */
[data-fx~="layout/bento-live"] :is([data-fx-count], [data-fx-clock]) {
  display: block;
  color: inherit;
  font-size: var(--fx-bento-num, clamp(2.1rem, 5vw, 4.5rem));
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
[data-fx~="layout/bento-live"] [data-fx-clock] { font-size: calc(var(--fx-bento-num, clamp(2.1rem, 5vw, 4.5rem)) * 0.7); }

/* The photo tile: the picture fills it, its label sits on a paper chip. */
[data-fx~="layout/bento-live"][data-fx-photo] {
  position: relative;
  display: block;
  min-height: 16rem;
  overflow: clip;
  border-radius: 2px;
  color: var(--fx-bento-chip-ink, #111117);
  text-decoration: none;
}
[data-fx~="layout/bento-live"][data-fx-photo] img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-fx~="layout/bento-live"][data-fx-photo] > :not(img) {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  max-width: calc(100% - 1.8rem);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--fx-bento-chip, #f4f5f7);
  font-size: 0.85rem;
  line-height: 1.3;
}
@media (prefers-reduced-motion: no-preference) {
  [data-fx~="layout/bento-live"][data-fx-photo] img { transition: scale var(--fx-bento-zoom-dur, 900ms) var(--fx-ease); }
}
@media (hover: hover) and (pointer: fine) {
  [data-fx~="layout/bento-live"][data-fx-photo]:hover img { scale: var(--fx-bento-zoom, 1.06); }
}
[data-fx~="layout/bento-live"][data-fx-photo]:focus-visible img { scale: var(--fx-bento-zoom, 1.06); }

/* Tiles still to come rise a little and fade in, one after another. */
html.fx-armed [data-fx~="layout/bento-live"].is-pending {
  opacity: 0;
  translate: 0 var(--fx-distance);
}
html.fx-armed [data-fx~="layout/bento-live"].is-in {
  transition: opacity var(--fx-dur) var(--fx-ease), translate var(--fx-dur) var(--fx-ease);
  transition-delay: calc(var(--fx-delay, 0ms) + var(--fx-i, 0) * var(--fx-stagger));
}