/* public_html/assets/css/home_packages.css */

.home-packages{
  padding: 18px 0 30px;

  /* Use site tokens if present; otherwise safe dark-glass defaults (readable on mobile) */
  --hp-surface: var(--nf-surface, rgba(255,255,255,.06));
  --hp-surface-2: var(--nf-surface-2, rgba(255,255,255,.035));
  --hp-border: var(--nf-border, rgba(255,255,255,.12));
  --hp-text: var(--nf-text, rgba(238,243,255,.92));
  --hp-muted: var(--nf-muted, rgba(238,243,255,.68));
  --hp-primary: var(--nf-primary, #7c5cff);
  --hp-shadow: var(--nf-shadow-soft, 0 14px 40px rgba(0,0,0,.26));

  color: var(--hp-text);
}

.home-packages .hp-container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 14px;
}

.home-packages .hp-head{
  display:flex;
  align-items:flex-end; /* mobile-safe vs align-items:end */
  justify-content:space-between;
  gap: 12px;
  margin: 10px 0 12px;
}

.home-packages .hp-title{
  margin:0;
  font-size: 18px;
  line-height: 1.2;
  color: var(--hp-text);
}

.home-packages .hp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: var(--nf-radius-lg, 14px);
  border: 1px solid var(--hp-border);
  background: var(--hp-surface);
  color: var(--hp-text);
  text-decoration:none;
  font-size: 12px;
  line-height:1;
  white-space:nowrap;
  box-shadow: var(--hp-shadow);
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.home-packages .hp-empty{
  padding: 14px;
  border-radius: var(--nf-radius-xl, 18px);
  border: 1px solid var(--hp-border);
  background: var(--hp-surface);
  color: var(--hp-muted);
  font-size: 13px;
}

.home-packages .hp-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* fixed 3 columns on all sizes (as requested) */
  gap: 10px;
}

/* Card */
.home-packages .hp-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  border-radius: var(--nf-radius-xl, 18px);
  overflow:hidden;
  border: 1px solid var(--hp-border);
  background: var(--hp-surface);
  box-shadow: var(--hp-shadow);
  min-width:0;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.home-packages .hp-media{
  position:relative;
  width:100%;
  aspect-ratio: 5 / 4;           /* less tall than square, still not “too small” */
  background: var(--hp-surface-2);
  overflow:hidden;
}

.home-packages .hp-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.home-packages .hp-img--ph{
  background:
    radial-gradient(120px 120px at 30% 30%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(140px 140px at 70% 60%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent);
}

.home-packages .hp-badge{
  position:absolute;
  top:8px;
  inset-inline-start:8px;
  padding:6px 8px;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(124,92,255,.96), rgba(79,140,255,.88));
  color:#fff;
  font-size:11px;
  line-height:1;
  z-index:2;
  box-shadow: 0 10px 22px rgba(124,92,255,.18);
}

.home-packages .hp-body{
  padding: 10px 10px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.home-packages .hp-name{
  font-size: 12px;
  line-height: 1.35;
  color: var(--hp-text);
  font-weight: 900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.home-packages .hp-desc{
  font-size: 11px;
  line-height: 1.35;
  color: var(--hp-muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height: 30px;
}

.home-packages .hp-price{
  margin-top:2px;
  display:flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
}

.home-packages .hp-price-base{
  font-size: 10px;
  color: var(--hp-muted);
  text-decoration: line-through;
  opacity: .95;
  white-space:nowrap;
}

.home-packages .hp-price-final{
  font-size: 12px;
  color: var(--hp-text);
  font-weight: 900;
  white-space:nowrap;
}

/* Hover effects ONLY on devices that truly hover (prevents mobile “jumping”) */
@media (hover:hover) and (pointer:fine){
  .home-packages .hp-btn:hover{
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.20);
    box-shadow: 0 18px 52px rgba(0,0,0,.28);
  }
  .home-packages .hp-card:hover{
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.20);
    box-shadow: 0 18px 52px rgba(0,0,0,.30);
  }
}

/* Mobile safety (still 3 columns, but tighter + readable) */
@media (max-width: 420px){
  .home-packages .hp-grid{ gap: 8px; }
  .home-packages .hp-body{ padding: 8px 8px 10px; }
  .home-packages .hp-name{ font-size: 11px; }
  .home-packages .hp-desc{ font-size: 10.5px; min-height: 28px; }
  .home-packages .hp-price-final{ font-size: 11px; }
}

/* If user is on light OS theme, keep contrast (avoid “white on white”) */
@media (prefers-color-scheme: light){
  .home-packages{
    --hp-surface: rgba(255,255,255,.92);
    --hp-surface-2: rgba(248,250,252,.98);
    --hp-border: rgba(15,23,42,.12);
    --hp-text: #0f172a;
    --hp-muted: #334155;
    --hp-shadow: 0 10px 30px rgba(0,0,0,.08);
  }
  .home-packages .hp-btn{
    background: rgba(255,255,255,.96);
  }
}