/* Obsidian Work — project tile grid (from "Obsidian Work.dc.html") */
.work { padding: 0 var(--gutter) clamp(96px, 11vw, 160px); }
.tile-wrap { container-type: inline-size; }

/* Wide screens: two large tiles, one banner, four small tiles */
.tile-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: min(280px, calc((100cqw - 48px) * .268));
}
.t-1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.t-2 { grid-column: 3 / span 2; grid-row: 1 / span 2; }
.t-3 { grid-column: 1 / span 4; grid-row: 3; }
.t-4 { grid-column: 1; grid-row: 4; }
.t-5 { grid-column: 2; grid-row: 4; }
.t-6 { grid-column: 3; grid-row: 4; }
.t-7 { grid-column: 4; grid-row: 4; }

@media (max-width: 899px) {
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .t-1 { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 5; }
  .t-2 { grid-column: 2; grid-row: 1; aspect-ratio: 4 / 5; }
  .t-3 { grid-column: 1 / span 2; grid-row: 2; aspect-ratio: 12 / 7; } /* shaped for the phone version of the chart */
  .t-3 img { object-position: center !important; }
  .t-4 { grid-column: 1; grid-row: 3; }
  .t-5 { grid-column: 2; grid-row: 3; }
  .t-6 { grid-column: 1; grid-row: 4; }
  .t-7 { grid-column: 2; grid-row: 4; }
  .t-4, .t-5, .t-6, .t-7 { aspect-ratio: 3 / 2; }
}
@media (max-width: 599px) {
  .tile-grid { grid-template-columns: minmax(0, 1fr); }
  .t-1, .t-2 { grid-column: 1; aspect-ratio: 17 / 20; }
  .t-1 { grid-row: 1; }
  .t-2 { grid-row: 2; }
  .t-3 { grid-column: 1; grid-row: 3; aspect-ratio: 9 / 5; }
  .t-4, .t-5, .t-6, .t-7 { grid-column: 1; aspect-ratio: 11 / 5; }
  .t-4 { grid-row: 4; } .t-5 { grid-row: 5; } .t-6 { grid-row: 6; } .t-7 { grid-row: 7; }
  .t-7 img { object-position: center bottom !important; }
}

/* Tile */
.tile { display: block; min-width: 0; color: inherit; }
.tile.is-disabled { cursor: default; }
.tile-card {
  --shade: rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.16) 57%, rgba(0,0,0,.42) 68%, rgba(0,0,0,.7) 79%, rgba(0,0,0,.88) 90%, rgba(0,0,0,.94) 100%;
  position: relative; display: block; width: 100%; height: 100%;
  border-radius: 20px; overflow: hidden; background: #000; color: #fff;
  outline: 2px solid transparent; outline-offset: -2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
  transition: outline-color .45s var(--ease-out);
}
.tile-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: var(--fit, cover); object-position: var(--pos, center); background: var(--img-bg, #000);
  transition: transform .8s var(--ease-out);
}
.tile-tint {
  position: absolute; inset: 0; background: rgba(26, 73, 183, .15);
  opacity: 0; pointer-events: none; transition: opacity .45s var(--ease-out);
}
.tile-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--shade)); }
.tile-text {
  position: relative; height: 100%; padding: 20px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px;
}
.tile-title { font-size: 16px; font-weight: 500; line-height: 1.3; text-shadow: 1px 2px 3px rgba(0, 0, 0, .6); }
.tile-arrow {
  display: inline-flex; vertical-align: middle; margin-left: 8px;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.tile-cat { font-size: 14px; font-weight: 500; color: var(--ml-medium-grey); }

/* Hover / focus on live tiles only */
a.tile:hover .tile-card, a.tile:focus-visible .tile-card { outline-color: var(--ml-blue); }
a.tile:hover .tile-tint, a.tile:focus-visible .tile-tint { opacity: 1; }
a.tile:hover .tile-card img, a.tile:focus-visible .tile-card img { transform: scale(1.04); }
a.tile:hover .tile-arrow, a.tile:focus-visible .tile-arrow { opacity: 1; transform: translateX(0); }
a.tile:hover { color: inherit; }
a.tile:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  a.tile:hover .tile-card img, a.tile:focus-visible .tile-card img { transform: none; }
}