/* ==========================================================================
   Page styles: vocation/aspirancy.html
   Global/shared styles live in assets/css/style.css (and tailwind.css).
   ========================================================================== */

@keyframes marquee-left  { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes marquee-right { from { transform: translateX(-50%) } to { transform: translateX(0) } }
.marquee-track-left  { display: flex; width: max-content; animation: marquee-left  40s linear infinite; }
.marquee-track-right { display: flex; width: max-content; animation: marquee-right 44s linear infinite; }
.gallery-section:hover .marquee-track-left,
.gallery-section:hover .marquee-track-right { animation-play-state: paused; }
.gallery-card { position: relative; flex-shrink: 0; width: 340px; height: 240px; border-radius: 20px; overflow: hidden; margin-right: 16px; cursor: pointer; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.5s ease; filter: grayscale(20%); }
.gallery-card:hover img { transform: scale(1.10); filter: grayscale(0%); }
.gallery-card .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.10) 50%, transparent 100%); opacity: 0; transition: opacity 0.4s ease; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; }
.gallery-card:hover .overlay { opacity: 1; }
.gallery-card .overlay-tag { font-size: 9px; font-weight: 900; letter-spacing: 0.25em; text-transform: uppercase; color: #ef4444; background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); padding: 4px 10px; border-radius: 100px; display: inline-block; margin-bottom: 8px; width: fit-content; }
.gallery-card .overlay-label { font-size: 15px; font-weight: 900; color: #fff; line-height: 1.3; letter-spacing: -0.02em; }
/* Wider cards for row 2 */
.gallery-card.wide { width: 420px; height: 240px; }