/* =============================================================
 * homepage-mobile.css
 * Mobile + Tablet polish for index.php (< 1024px).
 *
 * Loads AFTER homepage-desktop.css. Scoped to `body.index-page`.
 * Desktop (>=1024px) is handled by homepage-desktop.css.
 *
 * TABLE OF CONTENTS
 *   [0] GLOBAL          — container, section rhythm, kill legacy fixed widths
 *   [1] BANNER / HERO   — banner.php (#hero)
 *   [2] SLIDE SHOW      — slide_show.php (#about.section_slide)
 *   [3] INFORMATION     — information.php (.info-kenapa-row)
 *   [4] CALL CENTER     — call_center.php (#call-to-action)
 *   [5] PRODUCT GRID    — product.php (#services)
 *   [6] FAQ             — faq.php (#faq)
 *   [7] RATING          — rating.php (#rating)
 *   [8] FOOTER          — footer.php (#footer)
 *
 * BREAKPOINTS USED
 *   <1024px  — main mobile + tablet styles (everything in this file)
 *   <600px   — tighter phone-only adjustments (where noted)
 *   <400px   — extra-small phone overrides (rare)
 *
 * HOW TO READ THIS FILE
 *   Same convention as homepage-desktop.css: Ctrl+F "ADJUST" to
 *   jump between adjustable knobs. Each section has ── markers.
 *
 *   See HOMEPAGE-MOBILE-GUIDE.md (same folder) for a friendly
 *   visual guide.
 * ============================================================= */


/* =============================================================
   MOBILE + TABLET (< 1024px)
   ============================================================= */
@media (max-width: 1023px) {

  /* ── SECTION 0. GLOBAL ───────────────────────────────────────
     Kill horizontal scroll caused by legacy fixed-pixel widths,
     normalize container, set section vertical rhythm.
     ─────────────────────────────────────────────────────────── */

  body.index-page {
    overflow-x: hidden;
  }

  body.index-page .container,
  body.index-page .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;     /* ADJUST: container side padding */
    padding-right: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.index-page main > section {
    padding-top: 32px !important;      /* ADJUST: section vertical rhythm */
    padding-bottom: 32px !important;
  }

  /* Defeat hard-coded legacy widths on common containers */
  body.index-page .kotak_icon,
  body.index-page .box2,
  body.index-page .box_kecil,
  body.index-page .info,
  body.index-page .informasi,
  body.index-page .rangka-info,
  body.index-page .rangka-info-sub2 {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /* ── SECTION 1. BANNER / HERO ────────────────────────────────
     File: banner.php  •  CSS hook: #hero.hero

     Mobile layout (Bootstrap order classes already in PHP):
       ┌──────────────────────┐
       │  VIDEO (order-1)     │ ← shows first on mobile
       ├──────────────────────┤
       │  TEXT (order-2)      │ ← H1 + paragraph + rotating H2
       └──────────────────────┘

     Knobs:
       • H1 size                → "ADJUST: mobile hero h1"
       • Paragraph size         → "ADJUST: mobile hero paragraph"
       • Slider h2 size         → "ADJUST: mobile hero slider h2"
       • Video aspect-ratio     → "ADJUST: mobile hero video ratio"
       • Vertical padding       → "ADJUST: mobile hero padding"
     ─────────────────────────────────────────────────────────── */

  body.index-page .hero {
    min-height: auto !important;
    padding: 24px 0 !important;       /* ADJUST: mobile hero padding */
    display: block !important;
    overflow: hidden;
  }

  body.index-page .hero > .container {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.index-page .hero .container > .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 20px;
    margin: 0 !important;
    align-items: stretch;
  }

  body.index-page .hero .col-lg-7,
  body.index-page .hero .col-lg-5 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.index-page .hero h1 {
    font-size: 26px !important;       /* ADJUST: mobile hero h1 */
    line-height: 1.25 !important;
    font-weight: 800;
    color: #1e333e;
    margin: 0 0 12px 0 !important;
    text-align: left;
  }

  body.index-page .hero p {
    font-size: 15px !important;       /* ADJUST: mobile hero paragraph */
    line-height: 1.55 !important;
    color: #4a5662;
    margin: 0 0 16px 0 !important;
  }

  body.index-page .hero #slider {
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
    min-height: 60px;
    width: 100%;
  }

  body.index-page .hero #slider li,
  body.index-page .hero ul li {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    list-style: none;
  }

  body.index-page .hero #slider li h2,
  body.index-page .hero h2 {
    font-size: 22px !important;       /* ADJUST: mobile hero slider h2 */
    font-weight: 800;
    line-height: 1.25;
    color: #35a1ec;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
  }

  /* Pager dots */
  body.index-page .hero .callbacks_tabs {
    position: absolute;
    bottom: -22px;
    left: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 6px;
  }

  body.index-page .hero .callbacks_tabs li {
    width: auto !important;
    height: auto !important;
  }

  body.index-page .hero .callbacks_tabs a {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cfd8df;
    text-indent: -9999px;
    overflow: hidden;
  }

  body.index-page .hero .callbacks_tabs .callbacks_here a {
    background: #35a1ec;
  }

  /* Video block — full width, no bleed */
  body.index-page .hero-img {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.index-page .hero #slider_ {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 16 / 10;             /* ADJUST: mobile hero video ratio */
  }

  body.index-page .hero #slider_ li {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.index-page .hero #slider_ video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    border-radius: 14px;
  }

  body.index-page .hero #slider_ ~ .callbacks_nav,
  body.index-page .hero .hero-img .callbacks_nav {
    display: none !important;
  }


  /* ── SECTION 2. SLIDE SHOW ───────────────────────────────────
     File: slide_show.php  •  CSS hook: #about.section_slide

     Knobs:
       • Section padding   → "ADJUST: mobile slide padding"
       • Slide height      → "ADJUST: mobile slide height"
       • Border radius     → "ADJUST: mobile slide radius"
     ─────────────────────────────────────────────────────────── */

  body.index-page #about.section_slide {
    height: auto !important;
    border: 0 !important;
    padding: 12px 0 24px 0 !important; /* ADJUST: mobile slide padding (top right bottom left) */
    background-color: transparent !important;
  }

  body.index-page #about .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Slide container shows the WHOLE image at natural aspect ratio.
     No max-height + no object-fit crop.
     height: auto !important overrides slide_show.php inline style
     which hard-codes height: 180px on .slider for <=428px phones. */
  body.index-page #about .slider {
    position: relative !important;
    width: 100% !important;
    height: auto !important;          /* kill inline height: 180px/165px */
    max-height: none !important;
    overflow: hidden;
    border-radius: 12px;              /* ADJUST: mobile slide radius */
    box-shadow: 0 6px 18px rgba(13, 63, 113, 0.08);
  }

  body.index-page #about .rslides {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  body.index-page #about .rslides li {
    width: 100%;
  }

  /* Show full image, no crop. Height follows image's natural aspect.
     float: none overrides slide_show.php inline `.rslides img { float: left }`. */
  body.index-page #about .rslides img {
    float: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    border-radius: 12px;
  }

  body.index-page #about .rslides li {
    text-align: center;
  }

  body.index-page #about .callbacks_nav {
    display: none !important;
  }

  body.index-page #about .callbacks_tabs {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 6px;
    z-index: 3;
  }

  body.index-page #about .callbacks_tabs li {
    width: auto !important;
    height: auto !important;
  }

  body.index-page #about .callbacks_tabs a {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    text-indent: -9999px;
    overflow: hidden;
  }

  body.index-page #about .callbacks_tabs .callbacks_here a {
    background: #ffffff;
  }


  /* ── SECTION 3. INFORMATION (Kenapa Memilih Kami) ────────────
     File: information.php  •  CSS hook: .info-kenapa-row

     Mobile layout: stack everything vertically.
       ┌──────────────────────┐
       │  H3 heading          │
       │  Illustration image  │
       ├──────────────────────┤
       │  4 cards (2x2 grid)  │
       └──────────────────────┘

     Knobs:
       • Heading size       → "ADJUST: mobile info heading"
       • Image max-width    → "ADJUST: mobile info image"
       • Card min-height    → "ADJUST: mobile info card height"
       • Card icon size     → "ADJUST: mobile info card icon"
     ─────────────────────────────────────────────────────────── */

  body.index-page .info-kenapa-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px;
    width: 100%;
    align-items: stretch;
  }

  body.index-page .info-kenapa-image {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  body.index-page .info-kenapa-image h3 {
    font-size: 24px !important;       /* ADJUST: mobile info heading */
    font-weight: 800;
    line-height: 1.25;
    color: #1e333e;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    width: 100% !important;
    text-align: center;
  }

  body.index-page .info-kenapa-image img {
    width: 100% !important;
    max-width: 320px !important;      /* ADJUST: mobile info image */
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block;
  }

  body.index-page .info-kenapa-boxes {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Horizontal swipe strip — all 4 cards in one scrollable row.
     Two cards peek at once (~48% each); user swipes to reveal more. */
  body.index-page .info-kenapa-boxes .box2 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px !important;
    padding: 4px 0 14px 0 !important;   /* bottom pad for thin scrollbar */
    width: 100% !important;
    float: none !important;
    max-height: none !important;
    scrollbar-width: thin;              /* Firefox thin scrollbar */
    scrollbar-color: #35a1ec transparent;
  }

  body.index-page .info-kenapa-boxes .box2::-webkit-scrollbar {
    height: 4px;
  }

  body.index-page .info-kenapa-boxes .box2::-webkit-scrollbar-thumb {
    background: #35a1ec;
    border-radius: 2px;
  }

  body.index-page .info-kenapa-boxes .box_kecil {
    flex: 0 0 calc(48% - 6px) !important;  /* 2 cards visible at once */
    min-width: 150px !important;
    width: auto !important;
    height: auto !important;
    min-height: 170px;                /* ADJUST: mobile info card height */
    scroll-snap-align: start;
    margin: 0 !important;
    padding: 16px 12px !important;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(13, 63, 113, 0.06);
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  body.index-page .info-kenapa-boxes .xbox_kecil {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
  }

  body.index-page .info-kenapa-boxes .xbox_kecil li {
    display: block !important;
    width: 100% !important;
    position: static !important;
    float: none !important;
    top: auto !important;
    left: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.index-page .info-kenapa-boxes .xbox_kecil img {
    width: 56px !important;           /* ADJUST: mobile info card icon */
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    margin: 0 auto 10px !important;
    padding: 0 !important;
    display: block !important;
    object-fit: contain;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.index-page .info-kenapa-boxes .box_kecil p,
  body.index-page .info-kenapa-boxes .xbox_kecil p {
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 600;
    color: #1e333e;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
  }


  /* ── SECTION 4. CALL CENTER ──────────────────────────────────
     File: call_center.php  •  CSS hook: #call-to-action

     NOTE: call-center.css already has a mobile section that
     stacks the layout to single-column and switches the stepper
     to vertical. We only add global-rhythm tweaks here.
     ─────────────────────────────────────────────────────────── */

  body.index-page #call-to-action {
    padding-top: 32px !important;     /* ADJUST: mobile call-center padding */
    padding-bottom: 32px !important;
  }

  body.index-page #call-to-action .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }


  /* ── SECTION 5. PRODUCT GRID ─────────────────────────────────
     File: product.php  •  CSS hook: #services.services

     Layout:
       Tablet (>=600px): 2 columns
       Phone  (<600px) : 1 column (auto from Bootstrap col-md-6)

     Knobs:
       • Card padding         → "ADJUST: mobile product card padding"
       • Card image height    → "ADJUST: mobile product image height"
       • H3 size              → "ADJUST: mobile product h3"
       • Description size     → "ADJUST: mobile product description"
     ─────────────────────────────────────────────────────────── */

  body.index-page .services {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  body.index-page .services .container > .row {
    --bs-gutter-x: 14px;
    --bs-gutter-y: 14px;
    margin: 0 !important;
  }

  /* Force 2-col grid at >= 600px; 1-col below */
  body.index-page .services .col-xl-3,
  body.index-page .services .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  @media (max-width: 599px) {
    body.index-page .services .col-xl-3,
    body.index-page .services .col-md-6 {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }

  body.index-page .services .service-item {
    width: 100% !important;
    height: 100% !important;
    background-color: #ffffff !important;
    box-shadow: 0 3px 12px rgba(13, 63, 113, 0.06) !important;
    padding: 18px 16px 14px !important;  /* ADJUST: mobile product card padding */
    border-radius: 14px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column;
    text-align: center;
  }

  body.index-page .services .service-item .image-container {
    position: relative;
    width: 100% !important;
    height: 110px !important;         /* ADJUST: mobile product image height */
    margin: 0 auto 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.index-page .services .service-item .icon {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  body.index-page .services .service-item .icon img,
  body.index-page .services .service-item .image-container img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.index-page .services .service-item h3 {
    font-size: 15px !important;       /* ADJUST: mobile product h3 */
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #1e333e !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    min-height: 40px;
  }

  body.index-page .services .service-item p {
    font-size: 12.5px !important;     /* ADJUST: mobile product description */
    line-height: 1.45 !important;
    color: #4a5662 !important;
    margin: 0 0 12px 0 !important;
    flex: 1;
  }

  body.index-page .services .service-item .carousel-insurance-product-cta {
    margin-top: auto;
  }

  body.index-page .services .service-item .carousel-insurance-product-cta .btn-link {
    font-size: 13px !important;
    font-weight: 600;
    color: #35a1ec !important;
    padding: 0 !important;
    text-decoration: none;
  }


  /* ── SECTION 6. FAQ ──────────────────────────────────────────
     File: faq.php  •  CSS hook: #faq.faq

     Knobs:
       • Item padding        → "ADJUST: mobile faq padding"
       • Item radius         → "ADJUST: mobile faq radius"
       • Question size       → "ADJUST: mobile faq question"
     ─────────────────────────────────────────────────────────── */

  body.index-page .faq {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  body.index-page .faq .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.index-page .faq .col-lg-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.index-page .faq .faq-container {
    margin-top: 0;
  }

  body.index-page .faq .faq-container .faq-item {
    padding: 18px 22px 18px 50px !important; /* ADJUST: mobile faq padding */
    margin-bottom: 10px;
    border-radius: 14px;              /* ADJUST: mobile faq radius */
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(13, 63, 113, 0.05);
  }

  body.index-page .faq .faq-container .faq-item h3 {
    font-size: 14.5px !important;     /* ADJUST: mobile faq question */
    font-weight: 600;
    line-height: 1.45;
    margin: 0 !important;
    color: #1e333e;
  }

  body.index-page .faq .faq-container .faq-item .faq-icon {
    top: 20px !important;
    left: 18px !important;
    font-size: 18px !important;
  }

  body.index-page .faq .faq-container .faq-item .faq-toggle {
    top: 20px !important;
    right: 16px !important;
    font-size: 16px !important;
    color: #4a5662;
  }

  body.index-page .faq .faq-container .faq-active {
    background-color: #f5fafd !important;
  }

  /* Same collapse-animation fix as desktop */
  body.index-page .faq .faq-container .faq-item .faq-content {
    overflow: hidden;
  }

  body.index-page .faq .faq-container .faq-item .faq-content > * {
    min-height: 0;
    overflow: hidden;
  }

  body.index-page .faq .faq-container .faq-content p,
  body.index-page .faq .faq-container .faq-active .faq-content {
    font-size: 13.5px;
    line-height: 1.55;
  }


  /* ── SECTION 7. RATING / TESTIMONI ───────────────────────────
     File: rating.php  •  Has its own inline styles already
     with 768px breakpoint — we add tiny overrides for rhythm.
     ─────────────────────────────────────────────────────────── */

  body.index-page #rating {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  body.index-page #rating .rating-page-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.index-page #rating .rating-page-title {
    font-size: 26px !important;       /* ADJUST: mobile rating title */
    margin-bottom: 8px;
  }

  body.index-page #rating .rating-page-subtitle {
    font-size: 14px !important;
    margin-bottom: 24px !important;
  }

  /* Carousel track — layout handled inside rating.php inline style.
     We only override card sizing and typography here. */
  body.index-page #rating .rating-card {
    padding: 20px !important;
    border-radius: 14px !important;
  }

  body.index-page #rating .rating-card-photo,
  body.index-page #rating .rating-card-photo-placeholder {
    width: 52px !important;
    height: 52px !important;
    font-size: 22px;
  }

  body.index-page #rating .rating-card-name {
    font-size: 16px !important;
  }

  body.index-page #rating .rating-card-stars {
    font-size: 14px !important;
  }

  body.index-page #rating .rating-card-comment {
    font-size: 13.5px !important;
    line-height: 1.55;
  }


  /* ── SECTION 8. FOOTER ───────────────────────────────────────
     File: footer.php  •  CSS hook: #footer.footer

     Mobile: columns stack to 2 cols at tablet, 1 col at phone.
     Bootstrap col-lg-4 col-md-6 / col-lg-2 col-md-3 / col-lg-3
     handles the actual grid; we polish spacing & typography.
     ─────────────────────────────────────────────────────────── */

  body.index-page #footer .footer-top {
    padding-top: 36px !important;     /* ADJUST: mobile footer padding */
    padding-bottom: 24px !important;
    background-color: #4d9cd3;
  }

  body.index-page #footer .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.index-page #footer .footer-top .row {
    --bs-gutter-x: 16px;
    --bs-gutter-y: 24px;
  }

  body.index-page #footer h4 {
    font-size: 15px !important;       /* ADJUST: mobile footer heading */
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  body.index-page #footer h4::after {
    width: 24px;
    background: #ffffff;
  }

  body.index-page #footer .footer-about img {
    max-height: 44px;
    margin-bottom: 10px;
  }

  body.index-page #footer .footer-about .sitename {
    font-size: 13px;
    line-height: 1.5;
    display: block;
    margin-bottom: 14px;
  }

  body.index-page #footer .footer-links ul li {
    padding: 5px 0;
  }

  body.index-page #footer .footer-links ul a {
    font-size: 13px !important;       /* ADJUST: mobile footer link */
    color: #ffffff;
    opacity: 0.92;
  }

  body.index-page #footer .footer-contact {
    font-size: 13px;
    line-height: 1.55;
  }

  body.index-page #footer .footer-contact p {
    margin-bottom: 6px;
  }

  body.index-page #footer .social-links {
    margin-top: 12px;
    display: flex;
    gap: 8px;
  }

  body.index-page #footer .social-links a {
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #0d3f71;
    border-radius: 50%;
    font-size: 16px;
    margin: 0;
  }

  body.index-page #footer .copyright {
    padding: 16px 0 !important;
    background-color: #3a82b5;
    color: #ffffff;
    font-size: 12px;
    text-align: center;
  }

  body.index-page #footer .copyright .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}


/* =============================================================
   PHONE-ONLY TIGHTER STYLES (< 600px)
   Most of the work happens in the main <1024px block above.
   This is for very tight phone-only tweaks.
   ============================================================= */
@media (max-width: 599px) {

  body.index-page .hero h1 {
    font-size: 23px !important;
    line-height: 1.25 !important;
  }

  body.index-page .hero #slider li h2,
  body.index-page .hero h2 {
    font-size: 19px !important;
  }

  body.index-page .info-kenapa-image h3 {
    font-size: 22px !important;
  }

  body.index-page #rating .rating-page-title {
    font-size: 22px !important;
  }
}