/* hol-tiles.css — "What you'll find" as large photo tiles with serif captions (tile- classes). */

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 30px); }
.tiles-n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; margin: 0 auto; }
.tiles-n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 660px; margin: 0 auto; }
.tiles-n-1 { grid-template-columns: minmax(0, 340px); justify-content: center; }
.tile { display: block; text-decoration: none; color: var(--ink); }
.tile-photo { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--kraft); box-shadow: var(--shadow); }
/* a fine brass line just inside the photo, like a framed print */
.tile-photo::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(207, 169, 94, .55); border-radius: 9px; pointer-events: none; }
.tile-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
a.tile:hover { color: var(--ink); }
a.tile:hover .tile-photo img { transform: scale(1.04); }
.tile h3 { font-size: clamp(20px, 2vw, 25px); margin: 16px 0 4px; }
.tile p { margin: 0; color: var(--muted); font-size: 15px; }
.tile .arrow-link { margin-top: 8px; font-size: 15px; }

@media (max-width: 860px) {
  .tiles, .tiles-n-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .tile-photo { border-radius: 14px; }
  .tile h3 { margin-top: 12px; font-size: 19px; }
  .tile p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .tile-photo img { transition: none; } }