/* =========================================================
   DRE READING TEXT
   Reusable reading artefact component
========================================================= */

.dre-reading-text{
  --dre-blue:#18a5dd;
  --dre-pink:#ed4db4;
  --dre-grey-dark:#4F535D;
  --dre-border:#dbe4ea;
  --dre-bg:#fbfdff;

  width:100%;
  max-width:none;
  margin:0;
  padding:16px;

  font-family:Nunito, Arial, sans-serif;
  box-sizing:border-box;
}

.dre-reading-text *{
  box-sizing:border-box;
}

/* =========================================================
   CARD
========================================================= */


.dre-reading-text-card{
  background:#ffffff;
  border:1.5px solid var(--dre-pink);
  border-radius:14px;
  padding:24px;
}

/* =========================================================
   CONTENT
========================================================= */

.dre-reading-text-content{
  color:var(--dre-grey-dark);
  font-size:1.08rem;
  line-height:1.85;
  font-weight:400;
  text-align:left;
}

.dre-reading-text-content p{
  margin:0 0 22px 0;
}

.dre-reading-text-content p:last-child{
  margin-bottom:0;
}

/* =========================================================
   OPTIONAL INLINE FORMATTING
========================================================= */

.dre-reading-text-content strong{
  font-weight:700;
  color:var(--dre-grey-dark);
}

.dre-reading-text-content em{
  font-style:italic;
}

.dre-reading-text-content a{
  color:var(--dre-blue);
  text-decoration:underline;
}

.dre-reading-text-content ul,
.dre-reading-text-content ol{
  margin:0 0 22px 24px;
  padding:0;
}

.dre-reading-text-content li{
  margin-bottom:8px;
}

/* =========================================================
   VARIANT HELPERS (optional future use)
========================================================= */

/* smaller text */
.dre-reading-text.is-compact .dre-reading-text-content{
  font-size:1rem;
  line-height:1.75;
}

/* document feel */
.dre-reading-text.is-document .dre-reading-text-card{
  background:#ffffff;
  border-color:#e4e4e4;
}

/* highlighted artefact */
.dre-reading-text.is-highlight .dre-reading-text-card{
  background:#f6fbfe;
  border-color:#d7edf8;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:640px){

  .dre-reading-text{
    padding-left:0;
    padding-right:0;
    max-width:none;
  }

  .dre-reading-text-card{
    padding:18px;
    border-radius:14px;
  }

  .dre-reading-text-content{
    font-size:1rem;
    line-height:1.75;
  }

  .dre-reading-text-content p{
    margin-bottom:18px;
  }

  .dre-reading-text-content ul,
  .dre-reading-text-content ol{
    margin-left:20px;
    margin-bottom:18px;
  }
}