/* ================================================================
   GKI KB — Mobile-First Overrides
   File ini di-load SETELAH app.css dan meng-override style desktop
   dengan min-width queries (mobile-first approach).
   ================================================================ */

/* ---- Base Typography (mobile) ---- */
body { font-size: 15px; line-height: 1.6; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }
h5 { font-size: 1rem; }
.section-padding { padding: 40px 0; }

/* ---- Hero Section Mobile ---- */
.hero-section { min-height: 50vh; }
.hero-section .carousel-image { object-fit: cover; height: 50vh; }
.hero-section .carousel-caption { padding: 0 15px; bottom: 20%; }
.hero-section .carousel-caption h1 { font-size: 1.3rem; font-weight: 700; }
.hero-section .carousel-caption p { font-size: .85rem; }
.gki-carousel-indicators { bottom: 10px; }
.gki-carousel-indicators button { width: 10px; height: 10px; border-radius: 50%; }

/* ---- Navbar Mobile ---- */
.site-topbar .navbar { padding: .5rem .75rem; }
.site-header .container { padding: 0 12px; }
.site-header p { font-size: 11px; margin-bottom: 2px; }
.social-icon { gap: 4px; }
.social-icon-link { font-size: 14px; }
.navbar-brand img { max-height: 36px; }
.navbar-nav .nav-link { font-size: 14px; padding: 6px 0; }

/* ---- Site Header / Topbar Mobile ---- */
@media (max-width: 991.98px) {
    .site-header { padding: 6px 0; }
    .site-header p { font-size: 11px; margin-bottom: 2px; }
    .site-header .d-flex { gap: 4px; align-items: center; }
}

/* Mobile dropdown full-width */
@media (max-width: 991.98px) {
    .navbar-collapse { padding: 10px 0; }
    .dropdown-menu { border: none; box-shadow: none; padding: 0 16px; }
    .dropdown-menu .dropdown-col { padding: 4px 0; }
    .dropdown-header { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
    .dropdown-item { font-size: 14px; padding: 6px 0; }
}

/* ---- Pengumuman Section Mobile ---- */
.gki-pengumuman-section { padding: 30px 0; }
.gki-pengumuman-heading { font-size: 1.2rem; }
.gki-pengumuman-item { font-size: 13px; padding: 8px 10px; }
.gki-pengumuman-num { width: 22px; height: 22px; font-size: 11px; }

/* ---- Statistik Section Mobile ---- */
.gki-stat-card { padding: 20px 10px; }
.gki-stat-icon-wrap { width: 48px; height: 48px; font-size: 20px; }
.counter-number { font-size: 1.5rem; }
.counter-text { font-size: .8rem; }

/* ---- Jadwal Accordion Mobile ---- */
.gki-accordion .accordion-button { font-size: 14px; padding: 12px 14px; }
.gki-accordion .accordion-body { padding: 10px; }
.gki-accordion table { font-size: 12px; }
.gki-accordion th, .gki-accordion td { padding: 6px 8px; }

/* ---- Renungan Section Mobile ---- */
.gki-renungan-home-card { flex-direction: column; text-align: center; padding: 16px; }
.gki-renungan-home-date { margin-bottom: 8px; }
.gki-renungan-home-body { text-align: left; }
.gki-renungan-home-title { font-size: .95rem; }
.gki-renungan-home-verse { font-size: .8rem; }

/* ---- Artikel Cards Mobile ---- */
.news-block { margin-bottom: 20px; }
.news-body { padding: 14px; }
.news-title { font-size: 1rem; }
.news-text { font-size: .85rem; }

/* ---- Footer Mobile ---- */
.site-footer { padding: 30px 0 15px; }
.site-footer-title { font-size: 1rem; }
.footer-menu-link { font-size: 13px; }
.copyright-text { font-size: 11px; text-align: center; }
.site-footer-bottom .social-icon { justify-content: center; }

/* ---- Warta Pages Mobile ---- */
.gki-inner-card { padding: 16px; border-radius: 12px; margin-bottom: 16px; }
.warta-card { flex-direction: column; }
.warta-card-body { padding: 12px; }

/* ---- Artikel Page Mobile ---- */
.news-detail-header-section { min-height: 200px; }
.news-detail-header-section h2 { font-size: 1.3rem; }

/* ---- Responsive Grid Overrides ---- */
@media (max-width: 575.98px) {
    .col-6 { flex: 0 0 50%; max-width: 50%; }
    .gki-pengumuman-section .col-lg-4 { margin-bottom: 20px; }
}

/* ================================================================
   Tablet (≥768px)
   ================================================================ */
@media (min-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
    .hero-section { min-height: 60vh; }
    .hero-section .carousel-image { height: 60vh; }
    .hero-section .carousel-caption h1 { font-size: 1.8rem; }
    .gki-pengumuman-item { font-size: 14px; padding: 10px 14px; }
    .counter-number { font-size: 2rem; }
    .gki-renungan-home-card { flex-direction: row; text-align: left; }
    .gki-renungan-home-date { margin-bottom: 0; margin-right: 16px; }
}

/* ================================================================
   Desktop (≥992px)
   ================================================================ */
@media (min-width: 992px) {
    .hero-section { min-height: 70vh; }
    .hero-section .carousel-image { height: 70vh; }
    .hero-section .carousel-caption h1 { font-size: 2.2rem; }
    .section-padding { padding: 60px 0; }
    .gki-pengumuman-section { padding: 60px 0; }
    .gki-stat-card { padding: 30px 20px; }
}

/* ================================================================
   Large Desktop (≥1200px)
   ================================================================ */
@media (min-width: 1200px) {
    .hero-section .carousel-caption h1 { font-size: 2.8rem; }
    .section-padding { padding: 70px 0; }
}

/* ---- Utility: tap highlight removal for mobile ---- */
a, button { -webkit-tap-highlight-color: transparent; }

/* ---- Smooth scroll ---- */
html { scroll-behavior: smooth; }

/* ---- Loading skeleton (for future use) ---- */
.gki-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: gki-skeleton-loading 1.5s infinite;
    border-radius: 6px;
}
@keyframes gki-skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- Live streaming pulse ---- */
@keyframes gki-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}

/* ---- Live section mobile ---- */
@media (max-width: 575.98px) {
    .gki-live-section { padding: 16px 0 !important; }
    .gki-live-section .row { gap: 10px; justify-content: center !important; }
}

/* ---- Quick actions mobile ---- */
.gki-quick-actions .col-6 { flex: 0 0 33.333%; max-width: 33.333%; }
@media (min-width: 768px) {
    .gki-quick-actions .col-6 { flex: 0 0 25%; max-width: 25%; }
}

/* ---- Kabar Jemaat cards mobile ---- */
@media (max-width: 575.98px) {
    #section_kabar .col-lg-4 { flex: 0 0 100%; max-width: 100%; }
}