/* activity.css - White + Orange Theme */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* PAGE HERO - Light */
.page-hero{position:relative;background:var(--off-white);padding:80px 0 60px;overflow:hidden;border-bottom:1px solid var(--gray-200)}
.page-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 50% 80% at 90% 50%,rgba(255,114,16,.06) 0%,transparent 70%),linear-gradient(135deg,#fafaf9 0%,#fff7ed 100%)}
.page-hero-bg::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.02) 1px,transparent 1px);background-size:60px 60px}
.page-hero-content{position:relative;z-index:1}
.page-hero-title{font-family:var(--font-serif);font-size:36px;font-weight:900;color:var(--text);line-height:1.3;margin:12px 0 16px;word-break:keep-all}
.page-hero-title .accent{color:var(--orange)}
.page-hero-desc{font-size:15px;color:var(--gray-600);line-height:1.8;word-break:keep-all}

/* FILTER */
.activity-section{padding:60px 0 80px;background:var(--white)}
.filter-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.filter-btn{padding:8px 18px;border-radius:30px;font-size:13px;font-weight:600;color:var(--gray-600);background:var(--off-white);border:2px solid transparent;transition:all var(--transition);cursor:pointer;font-family:var(--font-sans)}
.filter-btn:hover{color:var(--text);background:var(--gray-100)}
.filter-btn.active{background:var(--orange);color:var(--white);border-color:var(--orange)}

/* GALLERY */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px}
.gallery-item{border-radius:var(--radius-md);overflow:hidden;cursor:pointer;transition:all var(--transition)}
.gallery-item.hidden{display:none}
.gallery-img{position:relative;background:var(--gray-200);overflow:hidden;aspect-ratio:1/1}
.gallery-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.gallery-img.img-ph{background:linear-gradient(135deg,var(--gray-200),var(--gray-100));display:flex;align-items:center;justify-content:center}
.gallery-overlay{position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.75) 100%);opacity:0;transition:opacity var(--transition)}
.gallery-item:hover .gallery-overlay{opacity:1}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-info{position:absolute;bottom:0;left:0;right:0;padding:16px 14px 12px}
.gallery-tag{display:inline-block;font-size:11px;font-weight:700;background:var(--orange);color:var(--white);padding:2px 8px;border-radius:10px;margin-bottom:6px}
.gallery-info p{color:var(--white);font-size:13px;font-weight:600;margin-bottom:4px;word-break:keep-all}
.gallery-info small{color:rgba(255,255,255,.65);font-size:11px}

.load-more-wrap{text-align:center;margin-top:20px}
.btn-load-more{background:var(--off-white);color:var(--text);font-size:15px;font-weight:600;padding:14px 36px;border-radius:var(--radius-full);border:2px solid var(--gray-200);transition:all var(--transition);font-family:var(--font-sans);cursor:pointer}
.btn-load-more:hover{background:var(--orange);color:var(--white);border-color:var(--orange)}
.load-more-desc{font-size:13px;color:var(--gray-400);margin-top:10px}

/* VIDEO */
.video-section{padding:72px 0;background:var(--off-white)}
.video-grid{display:grid;grid-template-columns:1fr;gap:20px}
.video-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--gray-100);transition:all var(--transition)}
.video-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.video-thumb{aspect-ratio:16/9;background:var(--gray-200)}
.video-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--gray-500);font-size:14px;min-height:180px}
.play-btn{width:56px;height:56px;border-radius:50%;background:var(--orange);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;padding-left:4px}
.video-info{padding:16px 20px 20px}
.video-info h4{font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px;word-break:keep-all}
.video-info small{font-size:12px;color:var(--gray-400)}

.section-cta{text-align:center}

@media(min-width:768px){
  .page-hero-title{font-size:52px}
  .gallery-grid{gap:20px}
  .video-grid{grid-template-columns:repeat(3,1fr)}
}