/* pages/front-page.css
   Front-page specific layout & spacing for pricing groups
*/

/* Grouping: layanan title pill + spacing between pill and cards (homepage only) */
.pricing .pricing-groups{display:block}
.pricing .pricing-service-group{margin:48px 0;border-radius:14px;padding:0}
.pricing .pricing-service-group .pricing-group-heading{display:block;margin:0 0 12px;padding:0}
.pricing .pricing-group-heading .service-name.service-title--pill{display:block;width:100%;box-sizing:border-box;padding:12px 18px;border-radius:12px;background:linear-gradient(90deg, rgba(98,211,255,0.12) 0%, rgba(59,130,246,0.08) 50%, rgba(255,211,77,0.05) 100%);color:var(--text);font-weight:800;text-align:left;box-shadow:0 10px 30px rgba(2,6,23,0.18);border:1px solid rgba(255,255,255,0.03);letter-spacing:0.01em}
@media (max-width:980px){ .pricing .pricing-group-heading .service-name.service-title--pill{padding:10px 14px;font-size:1rem} }
.pricing .pricing-service-group .price-grid{margin-top:36px;gap:22px}

/* Force desktop layout: 4 columns on wide screens, keep 3/2/1 for narrower breakpoints */
@media (min-width:1200px){ .pricing .price-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:22px; } }
@media (min-width:981px) and (max-width:1199px){ .pricing .price-grid{grid-template-columns:repeat(3,1fr); gap:20px; } }
@media (min-width:481px) and (max-width:980px){ .pricing .price-grid{grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (max-width:480px){ .pricing .price-grid{grid-template-columns:1fr; gap:14px; } }

@media (max-width:900px){ .pricing .pricing-service-group .price-grid{margin-top:20px} }

/* ensure homepage service cards establish a positioning context for badges */
.services .price-card{position:relative}

/* excerpt + layanan features separator visible on homepage services */
.services .price-card .price-excerpt{margin-bottom:12px;padding-bottom:8px;color:rgba(255,255,255,0.9)}

/* Service cards: make the title `pill` inherit the side-accent color (var(--svc-color)).
   This keeps the left stripe and title pill visually consistent per layanan. */
.services .price-card .price-head.service-title--pill{
  /* use svc color as base and keep subtle highlight for legibility */
  background: linear-gradient(90deg, var(--svc-color) 0%, rgba(255,255,255,0.08) 120%);
  color: #041124; /* dark text for contrast against light svc colors */
  box-shadow:0 10px 30px rgba(2,6,23,0.10);
  border:1px solid rgba(255,255,255,0.02);
}

/* ensure the pill/badge is always shown on homepage service cards */
.services .price-card .lp-badge { opacity:1; pointer-events:auto; transition:opacity .28s ease; }


/* If a service uses a darker svc color, slightly invert text color for contrast */
.services .price-card[style*="--svc-color:#"] .price-head.service-title--pill{ color: #041124; }
.services .price-card[style*="--svc-color:rgb"] .price-head.service-title--pill{ color: #041124; }
.services .price-card .price-excerpt + .layanan-card__features::before{content:"";display:block;height:8px;width:100%;border-radius:999px;background:linear-gradient(90deg,rgba(98,211,255,0.12),rgba(59,130,246,0.06),rgba(255,211,77,0.06));margin:10px 0 14px}

/* Ensure front-page only tweaks for CTA alignment */
.pricing .price-card .svc-cta{margin-top:auto;display:inline-flex;align-items:center;gap:10px}

/* Mobile: show only a single layanan card on the Home > Layanan Lengkap section */
@media (max-width:600px){
  /* hide all layanan cards by default on small screens; show those NOT collapsed so Load More works */
  .services .services-grid .svc { display: none !important; }
  .services .services-grid .svc:not(.jz-collapsed) { display: block !important; width: 100%; box-sizing: border-box; }

  /* ensure visible cards stretch and have comfortable padding */
  .services .services-grid .svc:not(.jz-collapsed) .price-body { padding: 14px !important; }
  .services .services-grid { display: block !important; }

  /* keep CTAs full-width on visible cards */
  .services .services-grid .svc:not(.jz-collapsed) .svc-cta .btn { width:100%; max-width:none; }
}

/* helper class applied by JS when a collapsed card is revealed */
.jz-revealed { display: block !important; animation: jz-fade-in .24s ease forwards; }
@keyframes jz-fade-in { from { opacity: 0; } to { opacity: 1; } }