/* ============ TILES (oferta + kierunki) ============ */
.tiles{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.tile{
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 1/1; display: block;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.tile:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px rgba(23,19,53,.18); }
.tile img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tile:hover img{ transform: scale(1.06); }
.tile--coach img{ object-position: 84% 50%; } /* kafelek autokaru: cały przód zielonego Irizara w kwadracie */
.tile__scrim{ position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,12,36,.82) 0%, rgba(15,12,36,.15) 55%, rgba(15,12,36,0) 75%); }
.tile__body{ position: absolute; left: 18px; right: 56px; bottom: 16px; color: #fff; }
.tile__body h3{ font-size: 17px; }
.tile__body span{ font-size: 12.5px; color: rgba(255,255,255,.8); display: block; margin-top: 4px; }
/* Opisy typów wyjazdu są długie: max 3 linie, a w 2 kolumnach na telefonie tylko tytuł (inaczej tekst wchodzi na tytuł i numer). */
.tiles .tile__body span{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 639px){ .tiles .tile__body span{ display: none; } }
.tile__num{ position: absolute; top: 14px; left: 16px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.85); background: rgba(15,12,36,.32); backdrop-filter: blur(4px); padding: 4px 9px; border-radius: var(--radius-sm); }
.tile::before{
  content: ""; position: absolute; top: 0; left: 0; width: 26px; height: 26px;
  border-top: 2px solid var(--indigo); border-left: 2px solid var(--indigo);
  border-radius: var(--radius) 0 0 0; opacity: 0; transition: opacity .25s ease;
  z-index: 1;
}
.tile:hover::before{ opacity: 1; }
.tile__arrow{
  position: absolute; right: 14px; bottom: 14px; width: 34px; height: 34px;
  background: var(--indigo); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  transform: scale(.5); opacity: 0; transition: transform .25s cubic-bezier(.2,.7,.3,1), opacity .25s ease;
}
.tile:hover .tile__arrow{ transform: scale(1); opacity: 1; }
.tile__arrow svg{ width: 15px; height: 15px; stroke: #fff; }
@media (min-width: 640px){ .tiles{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

.dest-tiles{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.dest-tiles .tile{ aspect-ratio: 4/3; }
@media (min-width: 640px){ .dest-tiles{ grid-template-columns: repeat(4, minmax(0,1fr)); } }