/**
 * TAHANAN tiles.
 *
 * The navy ground, the white heading and the gold glow are `.dark-band` in
 * pages.css §5, and the gold underline arc is `.u-tahanan` in base.css §4.
 * Neither is repeated here. This file adds only the four-across tile row.
 *
 * Every translucent value resolves to an --on-dark-* token rather than a fresh
 * rgba(). The mock-up's border was white at 0.14; --on-dark-hairline is 0.16,
 * the nearest named step, and the difference is not perceptible on navy.
 *
 * Ported from `_mockups/about.html`, the `.p-tiles` and `.p-tile` rules.
 */

/* The arc in finas_tahanan_arc() strokes with currentColor, and it sits inside
   an <h2> that .dark-band paints white. The mark is gold, so the colour is set
   on the SVG itself – the heading text beside it stays white. */
.tahanan-tiles .u-tahanan > svg { color: var(--gold); }

.tahanan-tiles__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-block-start: var(--s-6);
}
/* No heading above them: the tiles sit against the band's own padding rather
   than pushing themselves down a further --s-6. */
.tahanan-tiles__list:first-child { margin-block-start: 0; }

.tahanan-tiles__item {
  background: var(--on-dark-surface-soft);
  border: 1px solid var(--on-dark-hairline);
  border-radius: var(--r-m);
  padding: var(--s-4);
}
.tahanan-tiles__item b {
  display: block;
  font-family: var(--display);
  color: var(--gold);
  font-size: var(--text-base);
  margin-block-end: 0.35em;
}
.tahanan-tiles__item p { font-size: var(--text-s); }

@media (max-width: 900px) {
  .tahanan-tiles__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .tahanan-tiles__list { grid-template-columns: 1fr; }
}