/* ---------- Theme Variables ---------- */
$radius-card   : 28px;
$radius-module : 20px;
$radius-pill   : 36px;

$dur           : .35s;
$easing        : cubic-bezier(.4, 0, .2, 1);

$clr-slate-50  : #f8fafc;
$clr-slate-700 : #334155;

$shadow-xs     : 0 3px 6px rgba(0,0,0,.05);
$shadow-base   : 0 12px 25px -8px rgba(0,0,0,.12);
$shadow-deep   : 0 18px 38px -12px rgba(0,0,0,.18);

/* ---------- Utility Glow (around main blocks) ---------- */
.bp-glow {
  position: relative;

  &::before {
    content : '';
    position: absolute;
    inset   : -2px;       /* tiny bleed */
    z-index : -1;
    border-radius: inherit;
    background: linear-gradient(135deg,#4f46e5,#ec4899 60%,#f59e0b 100%);
    filter  : blur(28px);
    opacity : .18;
    transition: opacity $dur ease;
  }
  &:hover::before { opacity: .27; }
}

/* ========== Blueprint Card ========== */
.bp-card {
  border-radius: $radius-card;
  background   : #ffffff;
  box-shadow   : $shadow-base;
  padding      : 2rem 1.75rem;
  display      : flex;
  flex-direction: column;
  gap          : 1.75rem;
  transition   : transform $dur $easing, box-shadow $dur $easing;

  &:hover {
    transform : translateY(-6px);
    box-shadow: $shadow-deep;
  }

  &--blue { background: #e8f0ff; }
}

/* ---------- Header inside card ---------- */
.bp-head { display:flex; flex-direction:column; gap:.3rem; }
.bp-title{ font: 800 1.25rem/1.3 'Inter',sans-serif; color:#1e293b; }
.bp-sub  { font-size:.9rem; color:#64748b; }

/* ---------- Grid auto-fill responsive ---------- */
.bp-grid {
  display:grid;
  gap:1.2rem;
  grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
}

/* ========== Module Card (Glass-tilt) ========== */
.module-card {
  position:relative;
  border-radius:$radius-module;
  padding:1.2rem 1rem 1.5rem;
  display:flex; flex-direction:column; gap:.6rem;
  cursor:pointer;
  background:$clr-slate-50;
  box-shadow:$shadow-xs;
  transition:transform $dur $easing,box-shadow $dur $easing,background $dur;

  /* glass overlay */
  &.module-glass {
    background:rgba(255,255,255,.55);
    backdrop-filter:blur(8px) saturate(180%);
  }

  &:hover{
    transform:translateY(-5px) rotateX(4deg) rotateY(-2deg);
    box-shadow:$shadow-base;
    background:#ffffff;
  }
}

.module-emoji { font-size:2rem; }
.module-label { font-size:.9rem; line-height:1.2rem; color:$clr-slate-700; }

/* arrow */
.module-arrow{
  position:absolute; right:1rem; bottom:1rem;
  font-size:1rem; color:#a1a1aa; opacity:0;
  transition:opacity $dur $easing, transform $dur $easing;
}
.module-card:hover .module-arrow{ opacity:1; transform:translateX(4px); }

/* ========== Eco-Pill ========== */
.eco-pill{
  border-radius:$radius-pill;
  background:#ffffff;
  padding:1.7rem 4rem;
  font:600 1.15rem 'Inter',sans-serif;
  color:$clr-slate-700;
  box-shadow:$shadow-base;
  transition:transform $dur $easing, box-shadow $dur $easing;

  &:hover{
    transform:translateY(-6px);
    box-shadow:$shadow-deep;
  }
}

/* ---------- Media tweaks ---------- */
@media (max-width:640px){
  .bp-title{ font-size:1.1rem; }
  .bp-grid { grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); }
  .module-emoji{ font-size:1.6rem; }
  .eco-pill{ font-size:1rem; padding:1.4rem 3rem; }
}

.module-img {
  width : 42px;         /* ปรับตามดีไซน์ */
  height: 42px;
  object-fit: contain;  /* ให้ไม่ยืดผิดสัดส่วน */
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.08));
  transition: transform .35s;

  /* scale เล็กน้อยตอน hover */
  .module-card:hover & { transform: scale(1.08); }
}
