/* Mobile-only overrides for all main hero photos
   Edit object-position values here to tweak MOBILE crop only.
   Desktop is unaffected because this file loads with media="(max-width:768px)". */

/* Contact/Kanike hero banner */
.contact-hero-photo { height: 72vh; padding: 0 !important; position: relative; overflow: hidden; }
.contact-hero-photo .container { padding: 0; max-width: none; height: 100%; position: relative; overflow: visible; }
.contact-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; border-radius: 0; box-shadow: none;z-index: 1; }
/* Kanike (Donation) hero only: match Contact-Us framing on mobile */
.kanike-hero .contact-hero-image { object-position: center center; }
.contact-hero-photo .down-arrow { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); margin-top: 0; z-index: 20; }
/* Reduce gap after banner so white space doesn’t show under photo */
.contact-cards { padding-top: 8px; }

/* Home slideshow */
.hero-slideshow { height: 66vh; }
/* Home slideshow: tune each slide independently for mobile */
.slide-image { object-fit: cover; transform: scale(1.05); }
.slideshow-container .slide:nth-child(1) .slide-image { object-position: center 6%; }
.slideshow-container .slide:nth-child(2) .slide-image { object-position: 55% 6%; }
.slideshow-container .slide:nth-child(3) .slide-image { object-position: 45% 35%; }
.slideshow-container .slide:nth-child(4) .slide-image { object-position: center 37%; }
.slideshow-container .slide:nth-child(5) .slide-image { object-position: center 6%; }

/* History page hero */
.history-hero img { object-position: 50% center; }

/* Mobile navigation - move burger icon to the right */
.nav-toggle { 
    margin-right: -15px !important; 
}

/* Reduce gap between header and gallery heading on mobile only */
.gallery-section {
    padding-top: 10px !important;
}

/* Mobile gallery alignment fixes */
.gallery-grid {
    align-items: start !important;
}

.gallery-item {
    height: 200px !important; /* Consistent height on mobile */
    align-self: start !important;
}

.gallery-image {
    height: 200px !important;
    object-position: center center !important;
    vertical-align: top !important;
    line-height: 0 !important;
}

/* Mobile fixes specifically for Old Photos section */
#yold + .gallery-grid {
    align-items: start !important;
}

#yold + .gallery-grid .gallery-item {
    height: 200px !important;
    align-self: start !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#yold + .gallery-grid .gallery-image {
    height: 200px !important;
    object-fit: cover !important;
    object-position: center center !important;
    vertical-align: top !important;
    line-height: 0 !important;
    display: block !important;
}

/* Mobile fixes for History Page Gallery */
.history-gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 12px !important;
}

.history-gallery-item {
    height: 180px !important;
}

.history-gallery-image {
    object-fit: cover !important;
    object-position: center center !important;
}

/* Live Stream Mobile Styles */
.live-stream-section {
    padding: 40px 0;
    min-height: 70vh;
}

.live-stream-header h1 {
    font-size: 2rem;
}

.live-stream-header p {
    font-size: 1rem;
    padding: 0 20px;
}

.live-stream-wrapper {
    padding: 0 15px;
}

.live-video-embed {
    height: 400px;
    border-radius: 12px;
}

.live-video-embed iframe {
    border-radius: 12px;
}

/* Mobile Live Stream Info Cards */
.live-stream-info {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-top: 30px !important;
    padding: 0 15px !important;
}

.live-info-card {
    padding: 20px !important;
}

.live-info-card h3 {
    font-size: 1.2rem !important;
}

.social-links-live {
    justify-content: center !important;
}

.social-btn {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
}

/* Small phones */
@media (max-width: 480px) {
    .live-stream-header h1 {
        font-size: 1.8rem;
    }
    
    .live-video-embed {
        margin: 0 15px;
        height: 350px;
        width: 300px;
    }
    
    .live-info-card {
        padding: 15px !important;
    }
    
    .social-btn {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
    }
}