/* =========================================================
   CandyCloud — ARTICLE PAGE (CBD Benefits)
   Uses the same "article" system as choose-vapor.css
========================================================= */

:root{
    --cc-max: 1200px;
    --cc-radius: 24px;
    --cc-radius-sm: 16px;
    --cc-radius-lg: 32px;
    --cc-border: rgba(242, 244, 255, 0.15);
    --cc-glass: rgba(19, 18, 26, 0.4);
    --cc-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    --cc-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.4);
  
    --cc-primary: #FF2F92;
    --cc-primary-dark: #C77DFF;
    --cc-text: #C6C9E3;
    --cc-text-light: #8B90B6;
    --cc-text-heading: #F2F4FF;
    --cc-bg: #0B0B10;
    --cc-gunmetal: #191A23;
    --cc-gunmetal-light: #1E1F2A;
    --cc-gunmetal-dark: #12121A;
    --cc-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* =========================================================
     BASE + CONTAINER
  ========================================================= */
  
  .cc-articlePage{
    background: var(--cc-bg);
    color: var(--cc-text);
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }
  
  .cc-container{
    max-width: var(--cc-max);
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    box-sizing: border-box;
  }
  
  .cc-articlePage *{ box-sizing: border-box; }
  
  /* =========================================================
     HERO
  ========================================================= */
  
  .cc-articleHero{
    position: relative;
    background: var(--cc-gunmetal-dark);
    overflow: hidden;
  }
  
  .cc-articleHero__media{
    margin: 0;
    position: relative;
  }
  
  .cc-articleHero__media::after{
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(11, 11, 16, 0.10) 0%, rgba(11, 11, 16, 0.26) 45%, rgba(11, 11, 16, 0.62) 100%),
      radial-gradient(circle at 18% 18%, rgba(255, 47, 146, 0.14) 0%, transparent 55%);
    pointer-events: none;
  }
  
  .cc-articleHero__media img{
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  
  .cc-articleHero__overlay{ display: none; }
  
  .cc-articleHero__content{
    position: relative;
    padding: 26px 24px 34px;
    z-index: 1;
  }
  
  .cc-articleHero__kicker{
    display: inline-block;
    margin: 0 0 14px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 47, 146, 0.22);
    background: rgba(255, 47, 146, 0.10);
    color: var(--cc-primary);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 12px;
  }
  
  .cc-articleHero__title{
    margin: 0 0 12px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-size: clamp(34px, 4.6vw, 62px);
    font-weight: 900;
    color: var(--cc-text-heading);
  }
  
  .cc-articleHero__excerpt{
    margin: 0;
    max-width: 860px;
    line-height: 1.8;
    font-size: clamp(15px, 2vw, 18px);
    color: var(--cc-text);
  }
  
  /* =========================================================
     BODY + TYPOGRAPHY
  ========================================================= */
  
  .cc-articleBody{
    padding: 70px 0 96px;
  }
  
  .cc-articleSection{
    margin: 0 0 46px;
  }
  
  .cc-articleSection:last-child{
    margin-bottom: 0;
  }
  
  .cc-articleH2{
    margin: 0 0 14px;
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--cc-text-heading);
  }
  
  .cc-articleH3{
    margin: 22px 0 10px;
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 850;
    letter-spacing: -0.01em;
    color: var(--cc-text-heading);
  }
  
  .cc-articleSection p{
    margin: 0 0 14px;
    line-height: 1.9;
    font-size: 16px;
    color: var(--cc-text);
  }
  
  .cc-articleSection p:last-child{
    margin-bottom: 0;
  }
  
  /* =========================================================
     MEDIA
  ========================================================= */
  
  .cc-articleMedia{
    margin: 18px 0 0;
    border-radius: var(--cc-radius-lg);
    overflow: hidden;
    border: 1px solid var(--cc-border);
    box-shadow: var(--cc-shadow-soft);
    background: var(--cc-gunmetal-dark);
  }
  
  .cc-articleMedia img{
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* =========================================================
     LISTS (check-style)
  ========================================================= */
  
  .cc-articleList{
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: grid;
    gap: 12px;
  }
  
  .cc-articleList li{
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px 16px;
    border-radius: var(--cc-radius-sm);
    border: 1px solid var(--cc-border);
    background: rgba(25, 26, 35, 0.66);
  }
  
  .cc-articleCheck{
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(255, 47, 146, 0.12);
    border: 1px solid rgba(255, 47, 146, 0.22);
  }
  
  .cc-articleCheck svg{
    width: 18px;
    height: 18px;
    fill: var(--cc-primary);
  }
  
  /* =========================================================
     CARDS (benefits)
  ========================================================= */
  
  .cc-articleCards{
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
  }
  
  .cc-articleCard{
    grid-column: span 12;
    padding: 20px 18px;
    border-radius: var(--cc-radius);
    border: 1px solid var(--cc-border);
    background: rgba(25, 26, 35, 0.66);
    box-shadow: var(--cc-shadow-soft);
    transition: var(--cc-transition);
  }
  
  .cc-articleCard:hover{
    transform: translateY(-2px);
    border-color: rgba(255, 47, 146, 0.26);
  }
  
  .cc-benefitCard__icon{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    background: rgba(255, 47, 146, 0.10);
    border: 1px solid rgba(255, 47, 146, 0.22);
  }
  
  .cc-benefitCard__icon svg{
    width: 22px;
    height: 22px;
    fill: var(--cc-primary);
  }
  
  .cc-articleCard .cc-articleH3{
    margin-top: 8px;
  }
  
  /* =========================================================
     FAQ
  ========================================================= */
  
  .cc-faq{
    display: grid;
    gap: 14px;
    margin-top: 14px;
  }
  
  .cc-faqItem{
    padding: 18px 18px;
    border-radius: var(--cc-radius);
    border: 1px solid var(--cc-border);
    background: rgba(25, 26, 35, 0.66);
    box-shadow: var(--cc-shadow-soft);
  }
  
  .cc-faqItem .cc-articleH3{
    margin: 0 0 10px;
  }
  
  .cc-faqItem p{
    margin: 0;
    color: var(--cc-text);
  }
  
  /* =========================================================
     RESPONSIVE
  ========================================================= */
  
  @media (min-width: 740px){
    .cc-articleHero__content{
      padding: 34px 24px 46px;
    }
  
    .cc-articleBody{
      padding: 80px 0 110px;
    }
  
    .cc-articleCard{
      padding: 22px 22px;
    }
  
    .cc-articleCards--benefits .cc-articleCard{
      grid-column: span 4;
    }
  
    .cc-articleList{
      grid-template-columns: 1fr 1fr;
    }
  }
  
  @media (max-width: 520px){
    .cc-container{ padding: 0 16px; }
    .cc-articleBody{ padding: 56px 0 80px; }
    .cc-articleSection{ margin-bottom: 38px; }
    .cc-articleList li{ padding: 12px 12px; }
  }