/* Odisal Project Tiles: centred heading, three photo tiles to a row (title and place on a dark fade), a line button.
   Phones: the first tile full width, the rest two to a row. */
/* two classes: project.css (project page template) also has a .osx-project-tiles grid */
.osx.osx-project-tiles { display: block; margin-top: 0; text-align: center; }
.osx-project-tiles .osx-ptl-h2 { font: 600 30px/1.2 var(--osx-head); color: var(--osx-text); }
.osx-project-tiles .osx-ptl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 26px; text-align: left; }
.osx-project-tiles .osx-ptl-tile { position: relative; display: block; height: 260px; border-radius: 22px; overflow: hidden; background: var(--osx-card); box-shadow: 0 0 10px rgba(0,0,0,.5); text-decoration: none; transition: box-shadow 300ms ease, opacity 800ms var(--osx-ease-out) var(--osx-d, 0ms), transform 800ms var(--osx-ease-out) var(--osx-d, 0ms); }
.osx-project-tiles .osx-ptl-tile img, .osx-project-tiles .osx-ptl-noimg { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 700ms var(--osx-ease-out); }
.osx-project-tiles .osx-ptl-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.75)); pointer-events: none; }
.osx-project-tiles .osx-ptl-cap { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 1; }
.osx-project-tiles .osx-ptl-cap b { display: block; font: 400 21px/1.2 var(--osx-head); color: #fff; }
.osx-project-tiles .osx-ptl-cap span { font: 400 13px/1.4 var(--osx-body); color: var(--osx-accent); }
.osx-project-tiles .osx-ptl-foot { margin-top: 30px; }
.osx-project-tiles .osx-ptl-empty { padding: 30px; border-radius: 18px; border: 1px dashed rgba(255,255,255,.3); color: var(--osx-muted); }
@media (hover: hover) and (pointer: fine) {
  .osx-project-tiles .osx-ptl-tile:hover img { transform: scale(1.06); }
  .osx-project-tiles .osx-ptl-tile:hover { box-shadow: 0 10px 30px rgba(0,0,0,.45); }
}
@media (max-width: 760px) {
  .osx-project-tiles .osx-ptl-h2 { font-size: 26px; }
  .osx-project-tiles .osx-ptl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .osx-project-tiles .osx-ptl-tile { height: 200px; }
  .osx-project-tiles .osx-ptl-tile:first-child { grid-column: span 2; height: 220px; }
  .osx-project-tiles .osx-ptl-cap { left: 14px; right: 14px; bottom: 12px; }
  .osx-project-tiles .osx-ptl-cap b { font-size: 16px; }
  .osx-project-tiles .osx-ptl-cap span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; }
}
@media (prefers-reduced-motion: reduce) { .osx-project-tiles .osx-ptl-tile img { transition: none; } }