/**
 * responsive.css — breakpoint overrides.
 *
 * Single responsibility: media queries that adapt the layout across
 * breakpoints. Loads LAST in the cascade so it can override any prior rule.
 *
 * Breakpoints (max-width unless noted):
 *   1366+   Desktop
 *   1200    Laptop
 *   1024    Tablet (landscape)
 *   768     Tablet (portrait)
 *   576     Mobile
 *   375     Small mobile
 *
 * @package ICE_GeneratePress_Child
 * @since   1.0.0
 */

/* ======================================================================
   Large desktop: 1366px+
   ====================================================================== */
@media (min-width: 1366px) {
        .ice-container {
                max-width: var(--ice-container);
        }

        .ice-section {
                padding-top: var(--ice-spacing-3xl);
                padding-bottom: var(--ice-spacing-3xl);
        }
}

/* ======================================================================
   Desktop: up to 1200px
   ====================================================================== */
@media (max-width: 1200px) {
        :root {
                --ice-header-height: 76px;
        }

        .ice-section {
                padding-top: var(--ice-spacing-2xl);
                padding-bottom: var(--ice-spacing-2xl);
        }

        .ice-hero {
                padding-top: var(--ice-spacing-2xl);
                padding-bottom: var(--ice-spacing-2xl);
        }

        .ice-footer__top {
                padding-top: var(--ice-spacing-2xl);
                padding-bottom: var(--ice-spacing-xl);
        }

        .ice-about__stats {
                gap: var(--ice-spacing-sm);
        }
}

/* ======================================================================
   Tablet landscape: up to 1024px
   ====================================================================== */
@media (max-width: 1024px) {
        .ice-container--page,
        .ice-container--single,
        .ice-container--archive,
        .ice-container--search,
        .ice-container--index,
        .ice-container--404 {
                padding-top: var(--ice-spacing-xl);
                padding-bottom: var(--ice-spacing-xl);
        }

        .ice-section__header--row {
                flex-direction: column;
                align-items: flex-start;
        }

        .ice-cta-band {
                padding-top: var(--ice-spacing-2xl);
                padding-bottom: var(--ice-spacing-2xl);
        }

        .ice-cta-band__inner {
                flex-direction: column;
                align-items: flex-start;
                text-align: left;
        }
}

/* ======================================================================
   Tablet portrait: up to 768px
   ====================================================================== */
@media (max-width: 768px) {
        :root {
                --ice-header-height: 64px;
                --ice-header-height-sticky: 56px;
        }

        body {
                font-size: var(--ice-fs-base);
        }

        /* CRITICAL: prevent horizontal scroll on mobile.
         * Force all containers and grid items to respect viewport width
         * and never overflow. This is the #1 fix for "geser2 lebar" bug. */
        .ice-site,
        .ice-container,
        .ice-container--single,
        .ice-container--archive,
        .ice-container--index,
        .ice-container--page,
        .ice-container--search,
        .ice-container--404,
        .ice-content-area,
        .ice-article,
        .ice-entry-content,
        .ice-sidebar,
        .ice-main,
        #primary {
                max-width: 100% !important;
                width: 100% !important;
                min-width: 0 !important;
                overflow-x: hidden !important;
                box-sizing: border-box !important;
        }

        /* Grid must stay single column on mobile (sidebar below content) */
        .ice-container--single,
        .ice-container--archive,
        .ice-container--index {
                display: block !important;
                grid-template-columns: none !important;
        }

        .ice-container--single .ice-content-area,
        .ice-container--archive .ice-content-area,
        .ice-container--index .ice-content-area,
        .ice-container--single .ice-sidebar,
        .ice-container--archive .ice-sidebar,
        .ice-container--index .ice-sidebar {
                grid-column: auto !important;
                width: 100% !important;
        }

        /* Entry content: prevent images/iframes from overflowing */
        .ice-entry-content img,
        .ice-entry-content iframe,
        .ice-entry-content video,
        .ice-entry-content embed,
        .ice-entry-content table {
                max-width: 100% !important;
                height: auto !important;
        }

        /* Entry content: prevent <pre> and code from causing overflow */
        .ice-entry-content pre,
        .ice-entry-content code {
                white-space: pre-wrap !important;
                word-wrap: break-word !important;
                overflow-wrap: break-word !important;
        }

        .ice-container {
                padding-left: var(--ice-spacing-md);
                padding-right: var(--ice-spacing-md);
        }

        .ice-section {
                padding-top: var(--ice-spacing-xl);
                padding-bottom: var(--ice-spacing-xl);
        }

        .ice-section__title {
                font-size: clamp(var(--ice-fs-xl), 5vw, var(--ice-fs-3xl));
        }

        .ice-hero {
                padding-top: var(--ice-spacing-xl);
                padding-bottom: var(--ice-spacing-xl);
        }

        .ice-hero__title {
                font-size: clamp(var(--ice-fs-3xl), 8vw, var(--ice-fs-5xl));
        }

        .ice-hero__actions {
                flex-direction: column;
                align-items: stretch;
        }

        .ice-hero__actions .ice-btn {
                width: 100%;
                justify-content: center;
        }

        .ice-hero__stats {
                flex-direction: column;
                align-items: flex-start;
                gap: var(--ice-spacing-xs);
        }

        /* Footer grid handled directly in footer.css via dedicated breakpoints. */
        .ice-footer__grid {
                /* 2 columns on tablet portrait */
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: var(--ice-spacing-lg);
        }

        .ice-footer__col--brand {
                grid-column: 1 / -1;
        }

        .ice-footer__bottom-inner {
                flex-direction: column;
                align-items: flex-start;
                text-align: left;
                gap: var(--ice-spacing-sm);
        }

        .ice-footer__legal ul {
                justify-content: flex-start;
        }

        /* Post grid: 1 column on tablet portrait */
        .ice-posts-grid {
                grid-template-columns: 1fr;
                gap: var(--ice-spacing-md);
        }

        /* Programs: 2 columns */
        .ice-programs__grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        /* About section: hide media on small tablet */
        .ice-about__media {
                display: none;
        }

        .ice-about__inner {
                grid-template-columns: 1fr;
        }

        .ice-about__stats {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        /* CTA band */
        .ice-cta-band__actions {
                width: 100%;
        }

        .ice-cta-band__actions .ice-btn {
                flex: 1 1 auto;
                justify-content: center;
        }

        /* Logo: shrink slightly */
        .ice-logo__text {
                font-size: var(--ice-fs-md);
        }

        .ice-logo__mark {
                width: 36px;
                height: 36px;
                font-size: var(--ice-fs-xs);
        }

        .ice-header__actions .ice-btn--cta {
                padding: 8px 16px;
                font-size: var(--ice-fs-sm);
        }

        /* Hide CTA on mobile (tablet portrait + below). */
        .ice-header__actions .ice-btn--cta {
                display: none;
        }

        /* Page header */
        .ice-page-header {
                padding: var(--ice-spacing-lg) 0;
        }

        /* Comments form */
        .ice-comments__list .comment-body {
                flex-direction: column;
                gap: var(--ice-spacing-sm);
        }

        .ice-comments__list .children {
                padding-left: var(--ice-spacing-sm);
        }

        /* Breadcrumb wraps */
        .ice-breadcrumb ol {
                flex-wrap: wrap;
        }

        /* Pagination */
        .ice-pagination__item a,
        .ice-pagination__item span {
                min-width: 36px;
                height: 36px;
                font-size: var(--ice-fs-xs);
        }

        /* 404 actions */
        .ice-404__actions {
                flex-direction: column;
                align-items: stretch;
        }

        .ice-404__actions .ice-btn {
                width: 100%;
                justify-content: center;
        }

        /* Container overrides */
        .ice-container--page,
        .ice-container--single,
        .ice-container--archive,
        .ice-container--index,
        .ice-container--search,
        .ice-container--404 {
                grid-template-columns: 1fr !important;
        }

        .ice-container--single .ice-sidebar,
        .ice-container--archive .ice-sidebar,
        .ice-container--index .ice-sidebar {
                grid-column: 1 / -1 !important;
        }
}

/* ======================================================================
   Mobile: up to 576px
   ====================================================================== */
@media (max-width: 576px) {
        :root {
                --ice-fs-base: 15px;
        }

        .ice-container {
                padding-left: var(--ice-spacing-sm);
                padding-right: var(--ice-spacing-sm);
        }

        .ice-section {
                padding-top: var(--ice-spacing-lg);
                padding-bottom: var(--ice-spacing-lg);
        }

        .ice-section__eyebrow {
                font-size: 11px;
        }

        .ice-hero {
                padding-top: var(--ice-spacing-lg);
                padding-bottom: var(--ice-spacing-lg);
                text-align: left;
        }

        .ice-hero__eyebrow {
                font-size: 10px;
                padding: 4px 10px;
        }

        .ice-hero__lead {
                font-size: var(--ice-fs-base);
        }

        .ice-hero__stats-lead strong {
                font-size: var(--ice-fs-lg);
        }

        /* Footer: 1 column */
        .ice-footer__grid {
                grid-template-columns: 1fr;
                gap: var(--ice-spacing-lg);
        }

        .ice-footer__col--brand {
                grid-column: 1 / -1;
        }

        .ice-footer__top {
                padding-top: var(--ice-spacing-xl);
                padding-bottom: var(--ice-spacing-lg);
        }

        /* Programs: 1 column */
        .ice-programs__grid {
                grid-template-columns: 1fr;
        }

        /* About stats: 2 columns small */
        .ice-about__stats {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: var(--ice-spacing-sm);
        }

        .ice-about__stat-num {
                font-size: var(--ice-fs-2xl);
        }

        .ice-about__stat-label {
                font-size: var(--ice-fs-xs);
        }

        /* CTA band: stacked */
        .ice-cta-band {
                padding-top: var(--ice-spacing-xl);
                padding-bottom: var(--ice-spacing-xl);
        }

        .ice-cta-band__title {
                font-size: var(--ice-fs-xl);
        }

        .ice-cta-band__actions {
                flex-direction: column;
                width: 100%;
        }

        .ice-cta-band__actions .ice-btn {
                width: 100%;
                justify-content: center;
        }

        /* Card */
        .ice-card__body {
                padding: var(--ice-spacing-sm);
        }

        .ice-card__title {
                font-size: var(--ice-fs-md);
        }

        /* Entry content */
        .ice-entry-content {
                font-size: var(--ice-fs-base);
        }

        .ice-entry-title {
                font-size: clamp(var(--ice-fs-2xl), 6vw, var(--ice-fs-3xl));
        }

        .ice-entry-content h2 { font-size: var(--ice-fs-xl); }
        .ice-entry-content h3 { font-size: var(--ice-fs-lg); }

        /* Page header */
        .ice-page-header__title {
                font-size: clamp(var(--ice-fs-xl), 6vw, var(--ice-fs-3xl));
        }

        /* 404 */
        .ice-404 {
                padding: var(--ice-spacing-lg) 0;
        }

        .ice-404__title {
                font-size: clamp(var(--ice-fs-4xl), 18vw, var(--ice-fs-6xl));
        }

        /* Buttons */
        .ice-btn {
                font-size: var(--ice-fs-sm);
        }

        .ice-btn--lg {
                font-size: var(--ice-fs-base);
                padding: 14px 24px;
        }

        /* Topbar STAYS VISIBLE on mobile (v1.1.4 — matches ICE reference).
         * Working hours are hidden; only WhatsApp number (left) + social
         * icons (right) remain. */
        .ice-topbar { display: flex !important; }

        /* Hide working hours on mobile — topbar is too narrow for both
         * WhatsApp number + hours. Hours are still visible on desktop. */
        .ice-topbar__item--hours { display: none !important; }

        /* Compact topbar on mobile: smaller height, tighter spacing */
        .ice-topbar {
                height: 30px;
                font-size: 11px;
        }
        .ice-topbar__inner {
                gap: var(--ice-spacing-xs);
                padding: 0 var(--ice-spacing-xs);
        }
        .ice-topbar__left,
        .ice-topbar__right {
                gap: var(--ice-spacing-xs);
        }
        .ice-topbar__label {
                display: none; /* hide "Hotline:" / "WhatsApp:" label on mobile */
        }
        .ice-topbar__item svg {
                width: 11px;
                height: 11px;
        }
        .ice-topbar__right .ice-socials__link {
                width: 22px;
                height: 22px;
        }
        .ice-topbar__right .ice-socials__link svg {
                width: 11px;
                height: 11px;
        }

        /* Hamburger visible */
        .ice-hamburger { display: inline-flex !important; }

        /* Pagination */
        .ice-pagination__item a,
        .ice-pagination__item span {
                min-width: 32px;
                height: 32px;
                font-size: 11px;
                padding: 0 4px;
        }

        /* Offcanvas full-width on very small screens */
        .ice-offcanvas__panel {
                width: 100vw;
                max-width: 100vw;
        }

        /* Breadcrumb: hide on mobile to save space */
        .ice-breadcrumb {
                display: none;
        }
}

/* ======================================================================
   Small mobile: up to 375px
   ====================================================================== */
@media (max-width: 375px) {
        :root {
                --ice-fs-base: 14px;
        }

        body {
                font-size: var(--ice-fs-base);
        }

        .ice-container {
                padding-left: var(--ice-spacing-2xs);
                padding-right: var(--ice-spacing-2xs);
        }

        .ice-logo__text {
                font-size: var(--ice-fs-sm);
        }

        .ice-logo__mark {
                width: 32px;
                height: 32px;
                font-size: 10px;
        }

        /* CTA already hidden at <= 768px (see above). Reinforce on small mobile. */
        .ice-header__actions .ice-btn--cta {
                display: none !important;
        }

        .ice-hamburger {
                width: 44px;
                height: 44px;
        }

        /* Icon 40x40 on small mobile (fills 44x44 button with 2px breathing room). */
        .ice-hamburger__icon svg {
                width: 40px;
                height: 40px;
        }

        .ice-hero__title {
                font-size: clamp(var(--ice-fs-2xl), 9vw, var(--ice-fs-4xl));
        }

        .ice-hero__lead {
                font-size: var(--ice-fs-sm);
        }

        .ice-section__title {
                font-size: var(--ice-fs-xl);
        }

        .ice-section__lead {
                font-size: var(--ice-fs-sm);
        }

        .ice-footer__bottom-inner {
                gap: var(--ice-spacing-xs);
        }

        .ice-footer__copyright {
                font-size: var(--ice-fs-xs);
        }

        .ice-footer__legal a {
                font-size: var(--ice-fs-xs);
        }

        .ice-card__title,
        .ice-program-card__title {
                font-size: var(--ice-fs-md);
        }

        .ice-card__excerpt,
        .ice-program-card__excerpt {
                font-size: var(--ice-fs-xs);
        }

        .ice-about__stats {
                grid-template-columns: 1fr 1fr;
                gap: var(--ice-spacing-xs);
        }

        .ice-about__stat-num {
                font-size: var(--ice-fs-xl);
        }
}

/* ======================================================================
   Print
   ====================================================================== */
@media print {
        .ice-header,
        .ice-footer,
        .ice-offcanvas,
        .ice-hero__actions,
        .ice-cta-band,
        .ice-sidebar,
        .ice-pagination,
        .ice-comments__reply-title,
        .ice-comment-form {
                display: none !important;
        }

        body {
                color: #000;
                background: #fff;
                font-size: 12pt;
                line-height: 1.4;
        }

        .ice-container {
                max-width: 100%;
                padding: 0;
        }

        .ice-entry-content a {
                text-decoration: underline;
        }

        .ice-entry-content a::after {
                content: " (" attr(href) ")";
                font-size: 10pt;
                color: #444;
        }

        .ice-entry-content h1,
        .ice-entry-content h2,
        .ice-entry-content h3 {
                page-break-after: avoid;
        }

        .ice-card,
        .ice-program-card {
                break-inside: avoid;
                page-break-inside: avoid;
        }
}

/* ======================================================================
   Dark mode (experimental — not active by default)
   ====================================================================== */
@media (prefers-color-scheme: dark) {
        /* Intentionally empty. ICE brand is light-mode primary.
         * Dark mode is opt-in by adding .ice-theme-dark to <html> or <body>. */
}

.ice-theme-dark {
        --ice-white:   #0e0e0e;
        --ice-light:   #181818;
        --ice-border:  #2a2a2a;
        --ice-body:    #b6b6b6;
        --ice-title:   #f0f0f0;
        --ice-header-bg: var(--ice-white);
        --ice-shadow:    0 4px 16px rgba(0, 0, 0, 0.4);
        --ice-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}