/* Táo 247 - real store photos. Bento grid on desktop, swipe rail on phone. */

.t247-photos{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:186px;
  gap:10px;
}

.t247-photos figure{
  margin:0;
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:var(--t-accent-soft);
  box-shadow:0 1px 3px rgba(30,41,59,.08);
  isolation:isolate;
}

.t247-photos img{
  width:100%!important;
  height:100%!important;
  display:block;
  object-fit:cover;
  object-position:center 42%;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
  opacity:1!important;
  visibility:visible!important;
}

.t247-photos figure::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to top,rgba(15,23,42,.80) 0%,rgba(15,23,42,.30) 34%,rgba(15,23,42,0) 64%);
  transition:opacity .35s ease;
}

.t247-photos figure:hover img{transform:scale(1.05)}

.t247-photos figcaption{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:2;
  padding:14px 15px 13px;
  font-size:12.5px;
  font-weight:600;
  color:#fff;
  line-height:1.35;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}

/* Bento: 4 columns x 3 rows = 12 cells, filled exactly by 6 photos */
.t247-photos figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.t247-photos figure:nth-child(2){grid-column:span 2}
.t247-photos figure:nth-child(3){grid-column:span 1}
.t247-photos figure:nth-child(4){grid-column:span 1}
.t247-photos figure:nth-child(5){grid-column:span 2}
.t247-photos figure:nth-child(6){grid-column:span 2}

.t247-photos figure:nth-child(1) figcaption{
  font-size:15.5px;
  font-weight:700;
  padding:18px 20px 17px;
}

/* Tablet: 2 columns, keep one hero */
@media (max-width:1000px){
  .t247-photos{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:168px}
  .t247-photos figure:nth-child(1){grid-column:span 2;grid-row:span 1}
  .t247-photos figure:nth-child(2),
  .t247-photos figure:nth-child(5),
  .t247-photos figure:nth-child(6){grid-column:span 1}
  .t247-photos figure:nth-child(1) figcaption{font-size:14.5px}
}

/* Phone: horizontal swipe rail with snap - reads like a story, saves height */
@media (max-width:680px){
  .t247-photos{
    display:flex;
    grid-template-columns:none;
    gap:10px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:2px 16px 12px;
    margin:0 -16px;
  }
  .t247-photos::-webkit-scrollbar{display:none}
  .t247-photos figure{
    flex:0 0 78%;
    max-width:320px;
    height:210px;
    scroll-snap-align:center;
    grid-column:auto!important;
    grid-row:auto!important;
  }
  .t247-photos figure:first-child{flex-basis:84%}
  .t247-photos figcaption{font-size:12.5px;padding:14px 14px 13px}
  .t247-photos figure:nth-child(1) figcaption{font-size:13.5px;padding:14px 14px 13px}
}

/* Hint that the rail scrolls */
.t247-photos-hint{
  display:none;
  margin:8px 0 0;
  font-size:12px;
  color:var(--t-muted);
}
@media (max-width:680px){
  .t247-photos-hint{display:block}
}

@media (prefers-reduced-motion:reduce){
  .t247-photos img{transition:none}
  .t247-photos figure:hover img{transform:none}
}