/* ===== Namespaced page styles (challenges-*) ===== */

:root{
    --stroke: var(--stroke, rgba(155,140,243,.23));
    --text: var(--text, #e9e6ff);
    --muted: var(--muted, #b8b2d6);
    --shadow: var(--shadow, 0 22px 60px rgba(0,0,0,.45));
    --accent: var(--accent, #a176ff);
    --accent-2: var(--accent-2, #6c3cff);
    --green-1:#5ef3b7; --green-2:#44d69a;
  }
  
  /* Event wrapper */
  .challenges-event{
    overflow:hidden; border-radius:16px; border:1px solid var(--stroke);
    background: linear-gradient(180deg, #ffffff20, #ffffff0c);
    box-shadow: var(--shadow); backdrop-filter: blur(12px) saturate(120%);
    padding:0; margin-bottom:14px;
  }
  
  /* Banner */
  .challenges-banner{ position:relative; background:#12092a; }
  .challenges-ratio-3x1{ aspect-ratio:3 / 1 }
  .challenges-banner::before{
    content:""; position:absolute; inset:0; background:center/cover no-repeat var(--img);
    filter:saturate(1.02) contrast(1.02);
  }
  /* Multi-stop mask → keeps content readable even on bright covers */
  .challenges-banner-mask{
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(10,5,26,.38), rgba(10,5,26,.55) 45%, rgba(10,5,26,.82) 70%, rgba(10,5,26,.92)),
      linear-gradient(90deg, rgba(10,5,26,.45), rgba(10,5,26,.15) 30%, rgba(10,5,26,.45));
    pointer-events:none;
  }
  
  /* Partner ribbon (top-left) */
  .challenges-ribbon{
    position:absolute; top:12px; left:-12px; z-index:5;
    padding:.35rem .75rem .35rem 1.2rem; color:#0a051a; font-weight:800; font-size:.72rem; letter-spacing:.02em;
    background: linear-gradient(135deg, #6be2ff, #a176ff);
    border-top-right-radius:10px; border-bottom-right-radius:10px;
    box-shadow:0 8px 18px rgba(0,0,0,.25);
  }
  .challenges-ribbon::before, .challenges-ribbon::after{
    content:""; position:absolute; top:100%; left:14px; width:0; height:0; border-style:solid;
  }
  .challenges-ribbon::before{ border-width:6px 6px 0 0; border-color:#4aaed4 transparent transparent transparent; opacity:.7 }
  .challenges-ribbon::after{ left:26px; border-width:6px 6px 0 0; border-color:#6e56d6 transparent transparent transparent; opacity:.7 }
  .challenges-ribbon span{white-space:nowrap}
  
  /* Love toggle pill (top-right) */
  .challenges-love-toggle{
    position:absolute; right:12px; top:12px; z-index:6;
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.4rem .65rem; border-radius:999px; font-weight:700; font-size:.95rem;
    border:1px solid var(--stroke);
    background:linear-gradient(180deg,#fffffff0,#ffffffcf); color:#ff3b8d;
    text-shadow: none;
    cursor:pointer; /* hand cursor */
  }
  .challenges-love-toggle .heart-filled{ display:none }
  .challenges-love-toggle[aria-pressed="true"]{
    color:#fff; background:linear-gradient(135deg,#ff7fb0,#ff3b8d); border-color:transparent; box-shadow:0 8px 18px rgba(255,59,141,.26)
  }
  .challenges-love-toggle[aria-pressed="true"] .heart-outline{ display:none }
  .challenges-love-toggle[aria-pressed="true"] .heart-filled{ display:block }
  /* micro tooltip */
  .challenges-love-toggle::after{
    content:attr(data-tip); position:absolute; right:0; top:calc(100% + 8px);
    transform: translateY(-4px) scale(.96); transform-origin:100% 0%;
    background: linear-gradient(180deg, #ffffffee, #ffffffde); color:#0a051a;
    border:1px solid rgba(162,118,255,.25);
    padding:.25rem .5rem; border-radius:8px; box-shadow:0 10px 24px rgba(0,0,0,.22);
    font:600 .82rem/1.2 Inter, ui-sans-serif; white-space:nowrap;
    opacity:0; pointer-events:none; transition: opacity .18s ease, transform .18s ease;
  }
  .challenges-love-toggle:hover::after, .challenges-love-toggle:focus-visible::after{ opacity:1; transform: translateY(0) scale(1) }
  
  /* Banner bottom info */
  .challenges-banner-bottom{
    position:absolute; left:0; right:0; bottom:0; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
    padding:12px 14px;
  }
  .challenges-ev-title h1{ margin:.2rem 0 .15rem }
  .challenges-sub{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center }
  .challenges-chip{
    display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .55rem; border-radius:999px;
    background:linear-gradient(180deg,#ffffff20,#ffffff0e); border:1px solid var(--stroke); color:#fff;
  }
  .challenges-ev-cta{ display:flex; gap:.6rem }
  /* make the soft button style here to avoid clashing with site */
  .challenges-btn-soft{
    background:linear-gradient(180deg,#ffffff22,#ffffff12) !important;
    border-color:var(--stroke) !important;
  }
  
  /* Hide event logo on this page */
  .challenges-ev-logo{ display:none }
  
  /* Description styles (markdown rendered to HTML) */
  .challenges-ev-desc{ padding:12px 14px 14px }
  .challenges-prose :where(p,ul,ol,blockquote,pre){ margin:.6rem 0 }
  .challenges-prose p{ color:var(--text) }
  .challenges-prose a{ color:#8ecaff; text-decoration:underline }
  .challenges-prose strong{ font-weight:800 }
  .challenges-prose em{ opacity:.95 }
  .challenges-prose code{ font-family:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; background:#ffffff18; padding:.08rem .36rem; border-radius:6px; border:1px solid var(--stroke) }
  .challenges-prose blockquote{ padding:.6rem .8rem; border-left:3px solid #a176ff; background:#ffffff10; border-radius:8px }
  .challenges-prose ul{ padding-left:1.1rem }
  .challenges-prose li{ margin:.25rem 0 }
  
  /* Ad slot */
  .challenges-ad-slot{
    margin:14px 0; padding:8px 10px;
    overflow:hidden;
  }
  .challenges-ad-inner{ display:block; width:100%; text-align:center }
  .challenges-ad-inner img, .challenges-ad-inner iframe, .challenges-ad-inner ins{ display:block; margin:0 auto; max-width:100%; height:auto }
  
  /* Groups */
  .challenges-groups{ display:grid; gap:14px }
  
  /* Group head */
  .challenges-group{
    border:1px solid var(--stroke); border-radius:16px; overflow:hidden;
    background: linear-gradient(180deg,#ffffff1f,#ffffff0a); box-shadow: var(--shadow);
  }
  .challenges-group-head{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:10px 12px; border-bottom:1px solid var(--stroke);
  }
  .challenges-group-head h2{ margin:0 }
  .challenges-group-empty{ color:var(--muted); padding:12px }
  
  /* Card grid */
  .challenges-group-grid{
    display:grid; gap:12px; grid-template-columns: repeat(3, 1fr);
    padding:12px;
  }
  @media (max-width: 980px){ .challenges-group-grid{ grid-template-columns: repeat(2, 1fr) } }
  @media (max-width: 560px){ .challenges-group-grid{ grid-template-columns: 1fr } }
  
  /* Challenge card */
  .challenges-challenge-card{
    position:relative;
    display:flex; flex-direction:column; gap:.6rem;
    padding:12px; border-radius:14px; border:1px solid var(--stroke);
    background:linear-gradient(180deg,#ffffff1f,#ffffff0b); text-decoration:none; color:inherit;
    transition:.22s transform, .22s filter;
  }
  .challenges-challenge-card:hover{ transform: translateY(-2px); filter:brightness(1.03) }
  .challenges-cc-title{ font-weight:700 }
  .challenges-cc-meta{ display:flex; gap:.45rem; align-items:center; flex-wrap:wrap }
  .challenges-cc-badge{
    display:inline-flex; align-items:center; gap:.3rem; padding:.22rem .5rem; border-radius:999px; font-weight:700;
    background:linear-gradient(180deg,#ffffff22,#ffffff10); border:1px solid var(--stroke);
  }
  .challenges-cc-badge.challenges-loves{ color:#ff7fb0 }
  .challenges-cc-badge.challenges-writeups{ color:#d7caff }
  
  /* Solved variant */
  .challenges-challenge-card.challenges-solved{
    background:linear-gradient(180deg, #1e3a2a66, #10251c80), linear-gradient(180deg,#ffffff1f,#ffffff0b);
    border-color:#2bb88355;
    box-shadow: 0 14px 30px rgba(46,210,150,.18);
  }
  .challenges-solved-badge{
    position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; gap:.35rem;
    padding:.22rem .5rem; border-radius:999px; font-weight:800; font-size:.82rem;
    color:#052115; background:linear-gradient(135deg,#5ef3b7,#44d69a); border:1px solid #2bb88355;
  }
  
  /* Empty state */
  .challenges-empty{display:grid; place-items:center; padding:26px 0}
  .challenges-empty-inner{
    padding:18px; border-radius:16px; text-align:center;
    background: linear-gradient(180deg, #ffffff20, #ffffff0c); border:1px solid var(--stroke);
  }