/* ==================================================
   ARTICLE TEMPLATE – FINAL STABLE VERSION
   (Do NOT modify styles.css)
================================================== */


/* ===============================
   FEATURED / HERO IMAGE
================================ */

#featured {
  position: relative;
  width: 100%;
  margin-bottom: 40px;
}

/* Ensure picture & image behave consistently */
#featured picture {
  width: 100%;
  display: block;
}

#featured img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 8px;
}

/* Headline overlay on feature image */
#featured .featureMessage {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65),
    rgba(0, 0, 0, 0)
  );
}

#featured .imageHeadline {
  margin: 0;
  color: var(--text-color);
  line-height: 1.2;
}

.text-figure{
  font-size: var(--font-h3);
    color: var(--pink);
}

/* ===============================
   ARTICLE CONTENT WRAPPER
================================ */

.content.canvas {
  width: 100%;
  margin: 0;
  padding: 0;
}

.content.canvas .contentTitle {
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: var(--font-small);
    /* color: var(--lightgrey); */
}

.content.canvas .contentBody {
  width: 100%;
}


/* ===============================
   TEXT ELEMENTS
================================ */

.content.canvas .contentBody p {
  margin-bottom: 1.6em;
  line-height: 1.7;
}

.content.canvas .contentBody h1,
.content.canvas .contentBody h2,
.content.canvas .contentBody h3,
.content.canvas .contentBody h4,
.content.canvas .contentBody h5,
.content.canvas .contentBody h6 {
     text-align: left;
  color: var(--pink);
  margin-bottom: 1.1em;
}

.content.canvas .contentBody ul,
.content.canvas .contentBody ol {
  padding-left: 1.2em;
  margin-bottom: 1.4em;
}

.content.canvas .contentBody li {
  margin-bottom: 1.4em;
}

.content.canvas .contentBody blockquote {
  margin: clamp(36px, 3vw, 48px) 0;
  padding-left: 16px;
  border-left: 4px solid var(--blue);
  opacity: 0.9;
}


/* ===============================
   INLINE / DECRYPTED IMAGES
================================ */

.content.canvas .contentBody img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 32px 0;
  border-radius: 6px;
}

.content.canvas .contentBody .portrait img {
 width: unset;
}

/* If images are wrapped in <p> */
/* .content.canvas .contentBody p img {
  margin: 32px 0;
} */

/* Figure support */
.content.canvas .contentBody figure {
  margin: clamp(40px, 4vw, 60px) 0;

}

.content.canvas .contentBody figure img {
  margin: 0;
}

.content.canvas .contentBody .portrait img {
  margin: auto !important;
}

.content.canvas .contentBody a {
  color: var(--blue);
}

.content.canvas .contentBody figcaption {
  margin-top: 10px;
  text-align: center;
  line-height: 1.4;
  font-style: italic;
  font-size: var(--font-small);
    color: var(--lightgrey);
}

/* ===============================
   TABLES & MEDIA
================================ */

/* .content.canvas .contentBody table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  overflow-x: auto;
  display: block;
} */

.content.canvas .contentBody iframe,
.content.canvas .contentBody video {
  max-width: 100%;
  aspect-ratio: 16 / 9;
  margin: clamp(40px, 4vw, 60px) 0;
}


/* ===============================
   OVERFLOW PROTECTION
================================ */

.content.canvas .contentBody * {
  max-width: 100%;
  box-sizing: border-box;
}


.content.canvas .contentBody strong,
.content.canvas .contentBody b {
  font-weight: 600;
  padding: 0 4px;
  border-radius: 3px;
}


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

@media (max-width: 768px) {

  #featured {
    margin-bottom: 28px;
  }

  #featured .featureMessage {
    padding: 16px;
  }

  .content.canvas .contentBody img {
    margin: 24px 0;
  }

  .content.canvas .contentTitle {
    flex-direction: column;
    gap: 6px;
  }
}

@media (max-width: 480px) {

  #featured img {
    border-radius: 6px;
  }

  .content.canvas .contentBody img {
    margin: 20px 0;
  }
}