/* public/assets/css/landing-grid.css
   Animated 5-tile banner grid (inspired by sosumv.dk) */
:root{
  --tile-radius: 18px;
  --overlay: rgba(0,10,30,.38);
  --overlay-hover: rgba(0,10,30,.55);
  --shine: linear-gradient(120deg, transparent, rgba(255,255,255,.25), transparent);
}
.landing-wrap{ margin: 24px auto; max-width: 1200px; }
.landing-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 220px;
  gap: 18px;
}
/* Desktop layout (≥1000px): อยากได้แถวบน 2 รูป + ขวาสูง, แถวล่าง 2 รูป + ขวาสูงต่อ */
.landing-grid .tile:nth-child(1){ grid-column: 1; grid-row: 1; }
.landing-grid .tile:nth-child(2){ grid-column: 2; grid-row: 1; }
.landing-grid .tile:nth-child(3){ grid-column: 3; grid-row: 1 / span 2; } /* ขวาสูง */
.landing-grid .tile:nth-child(4){ grid-column: 1; grid-row: 2; }         /* แทนที่เดิมที่กิน 2 คอลัมน์ */
.landing-grid .tile:nth-child(5){ grid-column: 2; grid-row: 2; }         /* ย้ายมาอยู่ข้างๆ tile 4 */

@media (max-width: 1000px){
  .landing-grid{ grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; }
  .landing-grid .tile:nth-child(3){ grid-column: 2; grid-row: 1 / span 2; }
  .landing-grid .tile:nth-child(4){ grid-column: 1; grid-row: 2; }
  .landing-grid .tile:nth-child(5){ grid-column: 1 / span 2; grid-row: 3; }
}
@media (max-width: 680px){
  .landing-grid{ grid-template-columns: 1fr; grid-auto-rows: 210px; }
  .landing-grid .tile{ grid-column: 1 !important; grid-row: auto !important; }
}
.tile{
  position:relative; overflow:hidden; border-radius: var(--tile-radius);
  background:#0b1220; cursor:pointer; isolation:isolate;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  transform: translateZ(0);
}
.tile .img{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform: scale(1.02) translateZ(0);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.tile::after{
  content:''; position:absolute; inset:0; background: var(--overlay);
  transition: background .3s ease;
}
.tile .shine{
  content:''; position:absolute; inset:-100% -50% -100% -50%;
  background: var(--shine); transform: translateX(-120%);
  opacity:.0; pointer-events:none; mix-blend-mode: screen;
}
.tile:hover .shine{ animation: sweep 1.5s ease forwards; }
@keyframes sweep{ to{ transform: translateX(120%); opacity:.45 } }
.tile:hover .img{ transform: scale(1.08) translateZ(0); }
.tile:hover::after{ background: var(--overlay-hover); }
.tile .copy{
  position:absolute; left:18px; right:18px; bottom:18px; color:#fff; z-index:2;
}
.tile .hd{
  font-weight:800; font-size:1.35rem; line-height:1.2;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
  transform-origin: left bottom;
  transition: transform .25s ease, letter-spacing .25s ease;
}
.tile:hover .hd{ transform: scale(1.05); letter-spacing:.2px; }
.tile .desc{
  margin-top:8px; font-size:.95rem; line-height:1.45; opacity:0; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.tile:hover .desc{ opacity:1; transform: translateY(0); }
.banner-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px }
.banner-actions .btn{
  background: linear-gradient(180deg, #1d77ff, #165fcb); color:#fff; border:0; border-radius:12px;
  padding:10px 16px; text-decoration:none; box-shadow: 0 8px 18px rgba(29,119,255,.25);
}
.banner-actions .btn.secondary{
  background: linear-gradient(180deg, #00b8b0, #05a39c); box-shadow: 0 8px 16px rgba(0,184,176,.22);
}