/* ==========================================================================
   Habitus Concept, project bento

   Thirteen project photographs as a bento wall on the navy ground. Following
   the Break Maiden board in Website Styles & Motions/Styles: hard edges, zero
   radius, zero elevation, and hierarchy carried by scale rather than by a
   raised surface. That board's grid is "three-column irregular, columns are
   not equal height", which is what the tiling below is.

   THE TIERS
     hero     3 x 3   Alam Sutera, SHS and Associates
     feature  2 x 2   D+N House, St. Regis Residence, Masjid At-Thohir
     rest     1 x 1   the remaining nine

   THE TILING, so it can be re-derived rather than guessed at:

     5 columns by 6 rows is 30 cell units. One 3x3 is 9, three 2x2 are 12, nine
     1x1 are 9:  9 + 12 + 9 = 30. Thirteen tiles, thirty units, nothing left
     over. Only 1x1, 2x2 and 3x3 blocks are used, never 1x2 or 2x3, because a
     non-square block stops matching the photographs' portrait shape and would
     have to matte or crop.

         c1 c2 c3 c4 c5
     r1   A  A  A  B  B
     r2   A  A  A  B  B
     r3   A  A  A  d  e
     r4   F  F  g  H  H
     r5   F  F  i  H  H
     r6   j  k  l  m  n

   CELL SHAPE
     The photographs are 900 x 1164, a ratio of 0.773. Ignoring gaps, a grid
     C columns wide and R rows tall whose cells sit at ratio q has its own
     aspect ratio C / (R / q). Here that is 5 / (6 / 0.772) = 5 / 7.772, which
     is what aspect-ratio on the grid is set to. Every block, 1x1 through 3x3,
     then lands on the photographs' own shape and object-fit: contain has
     almost nothing left to pad. The earlier 5 x 5 grid could use a bare 0.772
     because equal row and column counts cancelled the gaps; 5 x 6 does not,
     so the ratio above is the gap-free solve and the residual is under one
     percent, roughly two pixels of matting on a supporting tile.

   Captions are on all the time rather than on hover. On a portfolio the credit
   is the content, and a hover-only credit is invisible to touch and to anyone
   scanning the page. Only the photograph moves on hover.
   ========================================================================== */

.bento {
  background: var(--navy);
  color: #fff;
  padding-block: clamp(56px, 7vw, 104px) clamp(64px, 8vw, 120px);
}

/* --- section head -------------------------------------------------------- */

.bento-head { margin-bottom: clamp(28px, 3.4vw, 52px); }

.bento-h {
  display: flex;
  flex-direction: column;
  gap: 0.18em;
  font-size: clamp(1.35rem, 2.5vw, 2.35rem);
  line-height: 1.18;
  letter-spacing: -0.014em;
  max-width: 30ch;
  margin: 0;
}
.bento-h-set { color: #fff; }
.bento-h-pay { color: rgba(255, 255, 255, 0.55); }

/* --- the wall ------------------------------------------------------------ */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: clamp(8px, 0.9vw, 16px);
  aspect-ratio: 5 / 7.772;      /* solves every block to the photographs' 0.772 */
}

/* the tiling above, spelled out; DOM order is reading order */
.bento-tile:nth-child(1)  { grid-area: 1 / 1 / span 3 / span 3; }   /* hero    */
.bento-tile:nth-child(2)  { grid-area: 1 / 4 / span 2 / span 2; }   /* feature */
.bento-tile:nth-child(3)  { grid-area: 3 / 4; }
.bento-tile:nth-child(4)  { grid-area: 3 / 5; }
.bento-tile:nth-child(5)  { grid-area: 4 / 1 / span 2 / span 2; }   /* feature */
.bento-tile:nth-child(6)  { grid-area: 4 / 3; }
.bento-tile:nth-child(7)  { grid-area: 4 / 4 / span 2 / span 2; }   /* feature */
.bento-tile:nth-child(8)  { grid-area: 5 / 3; }
.bento-tile:nth-child(9)  { grid-area: 6 / 1; }
.bento-tile:nth-child(10) { grid-area: 6 / 2; }
.bento-tile:nth-child(11) { grid-area: 6 / 3; }
.bento-tile:nth-child(12) { grid-area: 6 / 4; }
.bento-tile:nth-child(13) { grid-area: 6 / 5; }

.bento-tile {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 0;                 /* hard edged, per the reference board */
  border: 1px solid rgba(159, 185, 199, 0.24);
  background: #04151F;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.35s linear;
}
.bento-tile:hover { border-color: rgba(159, 185, 199, 0.5); }
.bento-tile:focus-visible {
  outline: none;               /* an outline on a clipped tile can get cut off */
  box-shadow: inset 0 0 0 3px var(--blue);
}

.bento-plate { position: absolute; inset: 0; }
.bento-plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;          /* the whole photograph, never cropped */
  background: #04151F;
  opacity: 0.94;
  transition: transform 0.7s var(--ease-io), opacity 0.4s linear;
}
.bento-tile:hover .bento-plate img,
.bento-tile:focus-visible .bento-plate img { transform: scale(1.04); opacity: 1; }

/* the scrims: a top wash so the number reads, a bottom one for the credit */
.bento-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(4, 21, 31, 0.52) 0%, rgba(4, 21, 31, 0) 18%),
    linear-gradient(to top,    rgba(4, 21, 31, 0.94) 0%, rgba(4, 21, 31, 0.74) 20%,
                               rgba(4, 21, 31, 0) 46%);
}

.bento-num {
  position: absolute;
  top: clamp(8px, 0.8vw, 14px);
  left: clamp(10px, 1vw, 16px);
  z-index: 1;
  font-family: var(--ui);
  font-size: clamp(0.66rem, 0.72vw, 0.8rem);
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.74);
}

.bento-cap {
  position: absolute;
  z-index: 1;
  left: clamp(10px, 1vw, 18px);
  right: clamp(10px, 1vw, 18px);
  bottom: clamp(10px, 1vw, 16px);
  display: block;
}
.bento-name {
  display: block;
  font-size: clamp(0.82rem, 0.95vw, 1.08rem);
  line-height: 1.24;
  color: #fff;
}
.bento-rule {
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, 0.24);
  margin: 0.5em 0 0.45em;
}
.bento-sub {
  display: block;
  font-family: var(--ui);
  font-size: clamp(0.62rem, 0.66vw, 0.74rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--blue-soft);
}
.bento-sub--dim { color: rgba(201, 220, 230, 0.62); }

/* Three tiers of credit, matching the three tiers of tile. This is the whole
   hierarchy: no tile is styled differently, they are only sized differently,
   and the caption follows the tile it sits in. */
.bento-tile--feature .bento-name { font-size: clamp(1rem, 1.3vw, 1.45rem); }
.bento-tile--feature .bento-sub  { font-size: clamp(0.68rem, 0.76vw, 0.82rem); }
.bento-tile--feature .bento-num  { font-size: clamp(0.72rem, 0.82vw, 0.9rem); }

.bento-tile--hero .bento-cap  { left: clamp(14px, 1.6vw, 28px); right: clamp(14px, 1.6vw, 28px); bottom: clamp(14px, 1.6vw, 26px); }
.bento-tile--hero .bento-num  { top: clamp(12px, 1.3vw, 22px); left: clamp(14px, 1.6vw, 28px); font-size: clamp(0.78rem, 0.95vw, 1.05rem); }
.bento-tile--hero .bento-name { font-size: clamp(1.3rem, 2.1vw, 2.35rem); letter-spacing: -0.012em; }
.bento-tile--hero .bento-sub  { font-size: clamp(0.74rem, 0.86vw, 0.95rem); }
.bento-tile--hero .bento-rule { margin: 0.6em 0 0.5em; }

/* ---- narrow layout: five columns of portrait tiles cannot read on a phone,
   so the wall drops to a plain two column grid. The features lose their
   2 x 2 block rather than spanning two columns, because a two-wide tile at
   this width would either have to crop the photograph or run half a screen
   tall. Every tile keeps the photographs' own shape and their credits. ---- */
@media (max-width: 900px) {
  .bento-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    aspect-ratio: auto;
    gap: 12px;
  }
  .bento-tile { grid-area: auto !important; aspect-ratio: 0.772; }
  /* the hero keeps its lead by spanning two columns; the features drop to a
     single cell, because at this width a 2 x 2 would run half a screen tall */
  .bento-tile--hero { grid-column: span 2 !important; }
  .bento-tile--hero .bento-name { font-size: clamp(1.05rem, 3.2vw, 1.6rem); }
  .bento-tile--hero .bento-sub  { font-size: clamp(0.66rem, 1.9vw, 0.82rem); }
  .bento-tile--feature .bento-name { font-size: clamp(0.82rem, 2.4vw, 1.08rem); }
  .bento-tile--feature .bento-sub  { font-size: clamp(0.62rem, 1.7vw, 0.74rem); }
  .bento-tile--feature .bento-num  { font-size: clamp(0.66rem, 1.8vw, 0.8rem); }
}

/* Column count is chosen to keep the wall's own height in hand: thirteen
   portrait tiles one column wide runs past nine thousand pixels on a phone,
   which is not a section any more, it is a scroll. Three columns down to
   620px, two below that, never one. */
/* Two columns only once three genuinely will not fit. Held at 620px the
   two column band ran the wall to nearly three thousand pixels, because
   dropping a column makes every remaining tile taller, not just narrower. */
@media (max-width: 540px) {
  .bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .bento-grid { gap: 8px; }
  .bento-cap { left: 8px; right: 8px; bottom: 8px; }
  .bento-name { font-size: 0.8rem; }
  .bento-sub { font-size: 0.6rem; letter-spacing: 0.06em; }
  .bento-rule { margin: 0.4em 0 0.35em; }
}

/* same reason as the marquee cards: on the dark ground the tile plate and the
   section ground converge, so the plate lifts a shade to keep the wall legible */
:root[data-theme="dark"] .bento-tile { background: #0C2532; border-color: rgba(159, 185, 199, 0.2); }
:root[data-theme="dark"] .bento-plate img { background: #0C2532; }

@media (prefers-reduced-motion: reduce) {
  .bento-plate img { transition: none !important; }
  .bento-tile:hover .bento-plate img { transform: none; }
}