/* CSS for Turnshot Component */
.turnshot-container { display: grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; padding: 0 2rem 3rem; max-width: 1200px; margin: 0 auto; }
.turnshot-container a, .turnshot-detail a {text-decoration: none; color: #000;}
.turnshot-container a:visited, .turnshot-detail a:visited {color: #000;}   
.turnshot-tile { position:relative; overflow:hidden; border-radius:var(--radius-lg); cursor:pointer; transition:transform var(--transition-speed),box-shadow var(--transition-speed); box-shadow:0 4px 14px rgba(0,0,0,0.1); }
.turnshot-overlay { position:absolute; inset:0; background: rgba(51,51,51,0.7); opacity:0; display:flex; align-items:center; justify-content:center; color:var(--text-light); text-align:center; padding:1rem; transition:opacity var(--transition-speed); }
.turnshot-overlay p { font-size:1rem; color: #fff; }      
.turnshot-tile img {width: 100%; height: 350px; object-fit: cover;transition:transform var(--transition-speed);}
.turnshot-tile:hover img { transform:scale(1.2); }
.turnshot-tile:hover .turnshot-club {transform:scale(1); transform: translateX(-55px);}
.turnshot-tile:hover .turnshot-overlay { opacity:1; }   
.turnshot-tile h2 {font-size: 16px; margin: 10px; color: #555;}
.turnshot-detail {padding: 5px 0;}
.turnshot-tile .turnshot-lock {color:var(--cream); background-color:var(--primary01); font-size: 2em; position: absolute; top: 80%; left: 50%; height:50px; transform: translateX(-50%); text-align: center; width: 50px;border-radius: 50%;}
.turnshot-club {box-shadow: 0px 0px 20px 1px #000; background-color: #fff; padding: 5px; position: absolute; top: 5%; left: 80%; transform: translateX(-50%); width: 100px !important; height: 100px !important; object-fit: cover; border-radius: 50%;}
@media (max-width: 768px) {
  .turnshot-container {grid-template-columns: 1fr; padding: 0 1rem 2rem; }
  .turnshot-tile img {height: 220px;}
  .turnshot-overlay {font-size: 0.9rem;padding: 0.5rem;}
  .turnshot-club {width: 60px !important;height: 60px !important;top: 10px; left: auto; right: 3px;}
  .turnshot-tile .turnshot-lock {font-size: 1.5em;height: 40px;width: 40px;top: auto;bottom: 10px; }
}