/* The facts grid (S-064): four tiles of different weight, each its own surface
   tone, each with one cut corner at the top end. The privacy tile is the large
   one. Tiles answer hover with a small lift and their picture moving; nothing
   depends on the hover, it only adds to what is already shown. */
.s-bento { background: var(--color-surface-0); }
.bento {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.bento-tile {
  --cut: var(--space-7);
  --tile-bg: var(--color-surface-2);
  --tile-ink: var(--color-ink);
  position: relative;
  display: grid;
  align-content: end;
  gap: var(--space-3);
  min-height: calc(var(--space-10) * 2.6);
  padding: var(--space-6);
  background: var(--tile-bg);
  color: var(--tile-ink);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  transition: transform var(--duration-base) var(--ease-out);
}
[dir="rtl"] .bento-tile { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); }
.bento-tile h3 { font-size: var(--fs-h3); font-weight: var(--font-weight-bold); max-width: 18ch; }
.bento-tile p { margin: 0; max-width: 34ch; }
.bento-privacy { --tile-bg: var(--color-ink); --tile-ink: var(--color-paper); }
.bento-orig { --tile-bg: var(--color-accent); --tile-ink: var(--color-accent-ink); }
.bento-fit { --tile-bg: var(--color-surface-2); }
.bento-lang { --tile-bg: var(--color-accent-soft); }

.bento-privacy h3 { font-size: var(--fs-h2); max-width: 12ch; }
.bento-kicker { color: var(--color-accent); font-weight: var(--font-weight-semibold); }
.bento-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--target-min) + var(--space-2));
  margin-block-start: var(--space-2);
  padding-inline: var(--space-4);
  border: var(--border-default) solid var(--color-paper);
  color: var(--color-paper);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}
.bento-link:hover, .bento-link:focus-visible { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.bento-privacy :focus-visible { outline-color: var(--color-accent); }

/* Privacy: a padlock inside a hexagon, set in the free corner. */
.bento-lock {
  position: absolute;
  inset-block-start: var(--space-7);
  inset-inline-end: var(--space-7);
  width: calc(var(--space-10) * 1.4);
  height: auto;
}
.bento-lock .bl-hex { fill: none; stroke: var(--color-accent); stroke-width: 5; stroke-linejoin: miter; }
.bento-lock .bl-body, .bento-lock .bl-loop { fill: var(--color-accent); }
.bento-lock .bl-key { fill: var(--color-ink); }
.bento-lock .bl-loop { transition: translate var(--duration-base) var(--ease-out); }

/* Original: two files side by side, the new one slides in from the end. */
.bento-files { display: flex; gap: var(--space-3); margin-block-end: auto; }
.bf {
  display: grid;
  align-content: center;
  justify-items: center;
  width: calc(var(--space-10) * 0.95);
  aspect-ratio: 4 / 5;
  background: var(--color-paper);
  color: var(--color-ink);
  clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%);
}
[dir="rtl"] .bf { clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%, 0 22%); }
.bf b { font-size: var(--fs-h3); line-height: 1.1; direction: ltr; }
.bf small { font-size: var(--type-small); }
.bf-new { background: var(--color-ink); color: var(--color-paper); transition: translate var(--duration-slow) var(--ease-out); }

/* Fit: seven cells, three of them lit. */
.bento-hive {
  --w: var(--space-8);
  --h: calc(var(--w) * 1.1547);
  position: relative;
  width: calc(var(--w) * 3.2);
  height: calc(var(--h) * 2.6);
  margin-block-end: auto;
}
.bento-hive i {
  position: absolute;
  inset-inline-start: calc(50% - var(--w) / 2);
  inset-block-start: calc(50% - var(--h) / 2);
  width: var(--w);
  height: var(--h);
  background: var(--color-surface-0);
  clip-path: var(--hexagon);
  translate: calc((var(--q) + var(--r) / 2) * var(--w) * 1.06 * var(--dir)) calc(var(--r) * var(--h) * 0.8);
  transition: background-color var(--duration-base) var(--ease-out);
}
.bento-hive i.on { background: var(--color-ink); }
.bento-hive i:first-child { background: var(--color-accent); }

/* Languages: the two scripts in two cells. */
.bento-glyphs { display: flex; gap: var(--space-2); margin-block-end: auto; }
.bento-glyphs span {
  display: grid;
  place-items: center;
  width: var(--space-9);
  height: calc(var(--space-9) * 1.1547);
  background: var(--color-ink);
  color: var(--color-paper);
  clip-path: var(--hexagon);
  font-size: var(--fs-h2);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  transition: translate var(--duration-base) var(--ease-out);
}
.bento-glyphs span + span { background: var(--color-accent); color: var(--color-accent-ink); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bento-tile:hover { transform: translateY(calc(var(--space-2) * -1)); }
  .bento-privacy:hover .bl-loop { translate: 0 calc(var(--space-2) * -1); }
  .bento-orig:hover .bf-new { translate: calc(var(--space-4) * var(--dir)) 0; }
  .bento-fit:hover .bento-hive i:not(.on):not(:first-child) { background: var(--color-ink); }
  .bento-lang:hover .bento-glyphs span:first-child { translate: 0 calc(var(--space-3) * -1); }
  .bento-lang:hover .bento-glyphs span + span { translate: 0 var(--space-3); }
}

@media (min-width: 720px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-privacy { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(calc(var(--space-10) * 2.6), auto); }
  .bento-privacy { grid-column: span 2; grid-row: span 2; }
  .bento-orig { grid-column: span 2; }
}
@media (max-width: 719px) {
  .bento-tile { --cut: var(--space-6); min-height: 0; padding: var(--space-5); }
  .bento-lock { position: static; width: var(--space-9); margin-block-end: var(--space-4); }
}