/* ==============================================================
 * HC JOYN MAINPAGE - Menu Section
 *
 * Mobile  : icon grid (3/4/5 cols) in optional rounded card wrapper.
 *           Variants: card_padding, icon_size, label_lines.
 * Desktop : feature card grid (3/4/6 cols) with optional section title.
 *           Variants: background, hover_effect, corner_accent, description.
 * ============================================================== */

/* ==============================================================
 * MOBILE
 * ============================================================== */
.hcjm-menu{
  margin-top:18px;
}

/* Card wrapper variant (default) */
.hcjm-menu.has-card-wrapper{
  border-radius:var(--hcjm-radius-xl);
  background:rgba(255,255,255,.96);
  box-shadow:var(--hcjm-shadow-md);
  border:1px solid rgba(69,65,255,.06);
}

/* Card padding variants */
.hcjm-menu.has-card-wrapper.is-padding-small  { padding:14px 8px 12px; }
.hcjm-menu.has-card-wrapper.is-padding-medium { padding:22px 12px 20px; }
.hcjm-menu.has-card-wrapper.is-padding-large  { padding:28px 16px 26px; }

.hcjm-menu:not(.has-card-wrapper).is-padding-small  { padding:6px 0; }
.hcjm-menu:not(.has-card-wrapper).is-padding-medium { padding:10px 0; }
.hcjm-menu:not(.has-card-wrapper).is-padding-large  { padding:18px 0; }

/* Grid */
.hcjm-menu-grid{
  display:grid;
  gap:20px 6px;
}
.hcjm-menu.is-cols-3 .hcjm-menu-grid{grid-template-columns:repeat(3,1fr); gap:22px 8px;}
.hcjm-menu.is-cols-4 .hcjm-menu-grid{grid-template-columns:repeat(4,1fr);}
.hcjm-menu.is-cols-5 .hcjm-menu-grid{grid-template-columns:repeat(5,1fr); gap:18px 4px;}

/* Item */
.hcjm-menu-item{
  position:relative;
  text-align:center;
  text-decoration:none;
  color:var(--hcjm-text);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:-0.3px;
  cursor:pointer;
  transition:transform var(--hcjm-dur-fast) ease;
}
.hcjm-menu-item:active{transform:scale(.92);}

/* Icon container */
.hcjm-menu-icon{
  position:relative;
  margin:0 auto 8px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--hcjm-primary-soft);
  transition:background var(--hcjm-dur) ease;
}
.hcjm-menu-item:active .hcjm-menu-icon{
  background:#DDDCFF;
}
.hcjm-menu-icon i{
  color:var(--hcjm-primary);
}

/* Icon size variants */
.hcjm-menu.is-icon-small  .hcjm-menu-icon{width:40px; height:40px;}
.hcjm-menu.is-icon-small  .hcjm-menu-icon i{font-size:20px;}
.hcjm-menu.is-icon-medium .hcjm-menu-icon{width:46px; height:46px;}
.hcjm-menu.is-icon-medium .hcjm-menu-icon i{font-size:24px;}
.hcjm-menu.is-icon-large  .hcjm-menu-icon{width:54px; height:54px;}
.hcjm-menu.is-icon-large  .hcjm-menu-icon i{font-size:28px;}

/* Item badge (NEW etc) */
.hcjm-menu-item-badge{
  position:absolute;
  right:-2px; top:-2px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:9px;
  background:var(--hcjm-live);
  color:#fff;
  font-size:9px;
  font-weight:900;
  display:grid;
  place-items:center;
  border:2px solid #fff;
  letter-spacing:.2px;
  line-height:1;
}

/* Label */
.hcjm-menu-label{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.hcjm-menu.is-label-lines-1 .hcjm-menu-label{-webkit-line-clamp:1;}
.hcjm-menu.is-label-lines-2 .hcjm-menu-label{-webkit-line-clamp:2;}

/* Very small phones: tighten */
@media (max-width:360px){
  .hcjm-menu.is-cols-4 .hcjm-menu-grid,
  .hcjm-menu.is-cols-5 .hcjm-menu-grid{
    gap:18px 4px;
  }
  .hcjm-menu-item{font-size:12px;}
}

/* ==============================================================
 * DESKTOP
 * ============================================================== */
.hcjm-menu-desktop{
  display:none;
}

@media (min-width:1024px){
  .hcjm-menu-desktop{
    display:block;
    padding:64px 0;
  }

  /* Background variants */
  .hcjm-menu-desktop.is-bg-white { background:#fff; }
  .hcjm-menu-desktop.is-bg-bg    { background:var(--hcjm-bg); }
  .hcjm-menu-desktop.is-bg-none  { background:none; }

  /* Section title */
  .hcjm-menu-desktop-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:32px;
  }
  .hcjm-menu-desktop-head h2{
    margin:0;
    font-size:34px;
    font-weight:900;
    letter-spacing:-1.5px;
    color:var(--hcjm-text);
  }
  .hcjm-menu-desktop-head h2 em{
    font-style:normal;
    color:var(--hcjm-primary);
  }
  .hcjm-menu-desktop-head p{
    margin:8px 0 0;
    color:var(--hcjm-muted);
    font-size:15px;
    font-weight:500;
  }

  /* Grid */
  .hcjm-menu-desktop-grid{
    display:grid;
    gap:16px;
  }
  .hcjm-menu-desktop.is-cols-3 .hcjm-menu-desktop-grid{grid-template-columns:repeat(3,1fr); gap:20px;}
  .hcjm-menu-desktop.is-cols-4 .hcjm-menu-desktop-grid{grid-template-columns:repeat(4,1fr);}
  .hcjm-menu-desktop.is-cols-6 .hcjm-menu-desktop-grid{grid-template-columns:repeat(6,1fr); gap:12px;}

  /* Card */
  .hcjm-menu-card{
    position:relative;
    padding:24px;
    background:#fff;
    border:1px solid var(--hcjm-border);
    border-radius:16px;
    text-decoration:none;
    color:var(--hcjm-text);
    transition:all var(--hcjm-dur) ease;
    display:block;
    overflow:hidden;
  }

  /* Hover effect variants */
  .hcjm-menu-desktop.is-hover-lift .hcjm-menu-card:hover{
    transform:translateY(-4px);
    border-color:var(--hcjm-primary);
    box-shadow:var(--hcjm-shadow-lg);
  }
  .hcjm-menu-desktop.is-hover-glow .hcjm-menu-card:hover{
    border-color:var(--hcjm-primary);
    box-shadow:0 0 0 3px rgba(69,65,255,.12);
  }
  .hcjm-menu-desktop.is-hover-none .hcjm-menu-card:hover{
    border-color:var(--hcjm-primary-light);
  }

  /* Card icon */
  .hcjm-menu-card-icon{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:var(--hcjm-primary-soft);
    margin-bottom:18px;
    transition:all var(--hcjm-dur) ease;
  }
  .hcjm-menu-card:hover .hcjm-menu-card-icon{
    background:var(--hcjm-primary);
  }
  .hcjm-menu-card-icon i{
    font-size:26px;
    color:var(--hcjm-primary);
    transition:color var(--hcjm-dur) ease;
  }
  .hcjm-menu-card:hover .hcjm-menu-card-icon i{color:#fff;}

  /* Card text */
  .hcjm-menu-card h4{
    margin:0 0 6px;
    font-size:16px;
    font-weight:800;
    letter-spacing:-0.4px;
  }
  .hcjm-menu-card p{
    margin:0;
    font-size:13px;
    color:var(--hcjm-muted);
    line-height:1.5;
    font-weight:500;
  }

  /* No description variant: tighter cards */
  .hcjm-menu-desktop.no-description .hcjm-menu-card{
    padding:20px;
    text-align:center;
  }
  .hcjm-menu-desktop.no-description .hcjm-menu-card-icon{
    margin:0 auto 12px;
  }

  /* Card badge */
  .hcjm-menu-card-badge{
    position:absolute;
    top:16px;
    right:16px;
    padding:3px 8px;
    background:var(--hcjm-live);
    color:#fff;
    border-radius:6px;
    font-size:10px;
    font-weight:800;
    letter-spacing:.3px;
    line-height:1.4;
    z-index:2;
  }

  /* Corner accent */
  .hcjm-menu-desktop.has-corner-accent .hcjm-menu-card::before{
    content:"";
    position:absolute;
    top:-30px; right:-30px;
    width:80px; height:80px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(69,65,255,.08), transparent 60%);
    transition:transform var(--hcjm-dur) ease;
    pointer-events:none;
  }
  .hcjm-menu-desktop.has-corner-accent .hcjm-menu-card:hover::before{
    transform:scale(1.4);
  }

  /* Narrower desktop adjustments */
  @media (max-width:1199px){
    .hcjm-menu-desktop{padding:48px 0;}
    .hcjm-menu-desktop-head h2{font-size:28px;}
    .hcjm-menu-desktop.is-cols-6 .hcjm-menu-desktop-grid{
      grid-template-columns:repeat(4,1fr);
    }
    .hcjm-menu-card{padding:20px;}
  }
}