/* ===========================
   ARTICLE PAGE – Premium Editorial Design
   =========================== */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* Using global variables from style.css */

/* ---- Global Article Defaults ---- */
body {
  font-family: 'Newsreader', serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

/* ---- Reading Progress Bar ---- */
.reading-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: transparent;
  z-index: 2000;
}

.reading-progress-bar {
  height: 100%;
  background: var(--primary);
  width: 0%;
  transition: width 0.1s ease;
}

.article-main {
  max-width: 80rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

/* ---- Layout Grid ---- */
.article-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3rem;
}

@media (min-width: 1024px) {
  .article-grid {
    grid-template-areas:
      ". header header header header header header header header header header ."
      ". figure figure figure figure figure figure figure figure figure figure ."
      ". takeaways takeaways takeaways takeaways takeaways takeaways takeaways takeaways . . ."
      ". body body body body body body body sidebar sidebar sidebar ."
      ". body body body body body body body sidebar sidebar sidebar ."
      ". sharebar sharebar sharebar sharebar sharebar sharebar sharebar sidebar sidebar sidebar ."
      ". footer footer footer footer footer footer footer sidebar sidebar sidebar ."
      ". author author author author author author author sidebar sidebar sidebar ."
      ". newsletter newsletter newsletter newsletter newsletter newsletter newsletter . . . .";
    grid-template-columns: repeat(12, 1fr);
    gap: 3rem 2.5rem;
  }

  .article-content {
    display: contents;
  }

  .article-header {
    grid-area: header;
    text-align: center;
  }

  .article-figure {
    grid-area: figure;
  }

  .key-takeaways {
    grid-area: takeaways;
  }

  .article-body {
    grid-area: body;
  }

  .article-share-bar {
    grid-area: sharebar;
  }

  .article-footer {
    grid-area: footer;
  }

  .author-box {
    grid-area: author;
  }

  .article-newsletter {
    grid-area: newsletter;
  }

  .article-sidebar {
    grid-area: sidebar;
    position: sticky;
    top: 6rem;
    height: fit-content;
  }
}

.article-header {
  text-align: center;
  margin-bottom: 1rem;
}

.article-header .article-kicker {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: rgba(236, 19, 55, 0.1);
  /* bg-primary/10 */
  color: var(--primary);
  font-size: 0.75rem;
  /* text-xs */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border-radius: 0.25rem;
  margin-bottom: 1.5rem;
}

.article-header h1 {
  font-size: 3rem;
  /* text-5xl */
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1rem;
  color: var(--text);
}

@media (min-width: 768px) {
  .article-header h1 {
    font-size: 4.5rem;
    /* md:text-7xl */
  }
}

.article-deck {
  font-size: 1.25rem;
  /* text-xl */
  color: var(--muted);
  font-style: italic;
  font-weight: 300;
  /* font-light */
  max-width: 48rem;
  /* max-w-3xl */
  margin: 0 auto 1rem auto;
}

@media (min-width: 768px) {
  .article-deck {
    font-size: 1.5rem;
    /* md:text-2xl */
  }
}

.article-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.875rem;
  /* text-sm */
  font-weight: 500;
  color: var(--muted);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 0;
  max-width: 32rem;
  /* max-w-lg */
  margin: 1rem auto 0;
}

.article-meta .sep {
  width: 4px;
  height: 4px;
  background: var(--border);
  border-radius: 50%;
  display: inline-block;
  margin: 0 0.5rem;
}

.article-meta .share-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 6px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
  margin-left: 0.5rem;
}

.article-meta .share-trigger:hover {
  background: #c9102e;
  color: #fff;
  border-color: #c9102e;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(236, 19, 55, 0.3);
}

.article-meta .share-trigger svg {
  color: inherit;
}

.article-share-bar {
  margin: 0.5rem 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;
}

.article-share-bar .share-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.5rem;
  background: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 8px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.article-share-bar .share-trigger:hover {
  background: #c9102e;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(236, 19, 55, 0.3);
}

.article-share-bar .share-trigger svg {
  color: inherit;
}


.article-figure {
  margin-bottom: 2rem;
}

.article-figure img {
  width: 100%;
  border-radius: 0.75rem;
  /* rounded-xl */
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article-figure figcaption {
  text-align: center;
  font-size: 0.875rem;
  /* text-sm */
  color: var(--muted);
  font-style: italic;
  margin-top: 0.75rem;
}


/* ---- CONTENT AREA ---- */
/* Handled by grid-template-areas on desktop */
.article-content {
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {
  .article-content {
    display: contents;
  }
}

/* Adjustments to make the centered header work within the 'Left Column' of the grid */
/* Since the HTML structure couples Header+Body, we can't span the Header across the sidebar 
   without changing HTML. We will make the best of it: styling the header within the content text column. */

.article-body {
  font-size: 1.125rem;
  /* text-lg */
  line-height: 1.75;
  /* relaxed */
  color: var(--text);
  /* neutral-dark/90 */
  margin-bottom: 1rem;
  max-width: 48rem;
  /* ~768px - Restricted for readability */
}

@media (min-width: 768px) {
  .article-body {
    font-size: 1.25rem;
    /* md:text-xl */
  }
}

.article-body p {
  margin-bottom: 1.25rem;
}

/* Drop Cap – ONLY for the very first paragraph of the body */
.article-body>p:first-of-type::first-letter {
  float: left;
  font-size: 5rem;
  line-height: 0.8;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
  color: var(--primary);
  font-weight: 700;
}

.article-body h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 2.5rem 0 1rem;
  line-height: 1.2;
}

/* ---- KEY TAKEAWAYS ---- */
.key-takeaways {
  background: var(--surface-2);
  /* bg-accent-pink/50 */
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}

.key-takeaways h3 {
  font-size: 0.75rem;
  /* text-xs */
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.key-takeaways ul {
  list-style: disc;
  list-style-position: inside;
  color: var(--muted);
}

.key-takeaways li {
  margin-bottom: 0.5rem;
}


/* ---- AUTHOR BOX (Redesigned) ---- */
.author-box {
  margin-top: 2rem;
  padding: 2.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  /* rounded-xl */
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 768px) {
  .author-box {
    flex-direction: row;
    text-align: left;
  }
}

.author-box h3 {
  /* "About the author" label replacement logic if text is present? 
       Actually user HTML has <h3>About the author</h3> separately. 
       We'll style that to match the "ABOUT THE AUTHOR" label. */
  display: none;
  /* Hide default H3, using inner structure if possible, but HTML has:
       <h3>About the author</h3>
       <div class="author-box-inner">...</div>
    */
}

/* Hacking the structure via CSS to look like the design */
/* The HTML is: 
   <section class="author-box">
      <h3>About the author</h3>
      <div class="author-box-inner">
         <div class="avatar">...</div>
         <div class="content">...</div>
      </div>
   </section>
*/

.author-box-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

@media (min-width: 768px) {
  .author-box-inner {
    flex-direction: row;
    text-align: left;
  }
}

/* Avatar */
.author-box-avatar {
  width: 6rem;
  /* size-24 */
  height: 6rem;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 4px solid var(--border);
  overflow: hidden;
}

.author-box-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: var(--surface-2);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Inter, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* Content */
.author-box-content h4 {
  font-size: 1.5rem;
  /* text-2xl */
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.author-role {
  font-size: 0.75rem;
  /* text-xs */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 0.25rem;
  display: block;
  /* Make it look like the label */
  order: -1;
}

/* We need to reorder the elements using flex order if possible, 
   but .author-role is inside .author-box-content alongside h4. 
   If HTML is:
   <h4>Link Name</h4>
   <p role></p>
   
   We want Role (Label) -> Name (H3).
   Flex column allows reordering!
*/

.author-box-content {
  display: flex;
  flex-direction: column;
}

.author-box-content h4 {
  order: 2;
  margin-bottom: 0.75rem;
}

.author-role {
  order: 1;
}

.author-bio {
  order: 3;
  font-size: 1rem;
  /* text-base */
  color: var(--muted);
  margin-top: 0.5rem;
  line-height: 1.6;
}

.author-box-links {
  order: 4;
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.author-profile-link {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s;
}

.author-profile-link:hover {
  color: var(--primary);
  text-decoration: underline;
}


/* ---- TOPICS / FOOTER (Redesigned) ---- */
.article-footer {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.article-tags {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.article-tags>span {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  display: block;
}

.article-tags div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.article-tags a {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  background-color: var(--surface-2);
  color: var(--muted);
  font-family: 'Newsreader', serif;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0.25rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.article-tags a:hover {
  background-color: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}




/* ---- SIDEBAR (Right Column) ---- */
.article-sidebar {
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.sidebar-box {
  position: relative;
  /* Clean container */
}

.sidebar-box h4 {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 2rem;
  color: var(--text);
  border-bottom: 2px solid var(--primary);
  padding-bottom: 0.75rem;
  display: inline-block;
  width: 100%;
}

.sidebar-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-box li {
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.sidebar-box li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.sidebar-box li a {
  text-decoration: none;
  color: var(--text);
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  transition: all 0.2s ease;
}

.sidebar-box li a:hover {
  color: var(--primary);
}

/* Sidebar with Thumbnails */
.sidebar-item-with-thumb {
  display: flex !important;
  gap: 1rem;
  align-items: center;
  /* Better alignment for small thumbs */
}

.sidebar-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.sidebar-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.sidebar-thumb:hover img {
  transform: scale(1.1);
}

.sidebar-link {
  font-size: 1rem !important;
  font-weight: 700;
  line-height: 1.3;
}


/* ---- TRENDING BOX (Top Stories style) ---- */
.article-sidebar .sidebar-box:nth-child(2) {
  background: var(--surface-2);
  padding: 2.5rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  color: var(--text);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.article-sidebar .sidebar-box:nth-child(2) h4 {
  color: var(--primary);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  margin-bottom: 2.5rem;
}

.article-sidebar .sidebar-box:nth-child(2) ul {
  counter-reset: trending;
}

.article-sidebar .sidebar-box:nth-child(2) li {
  display: flex;
  gap: 1.25rem;
  border-bottom-color: rgba(255, 255, 255, 0.05);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

.article-sidebar .sidebar-box:nth-child(2) li::before {
  counter-increment: trending;
  content: counter(trending);
  font-family: 'Newsreader', serif;
  font-size: 2.5rem;
  font-weight: 200;
  font-style: italic;
  color: var(--primary);
  line-height: 1;
  opacity: 0.8;
}

.article-sidebar .sidebar-box:nth-child(2) li a {
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.4;
}

.article-sidebar .sidebar-box:nth-child(2) li a:hover {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-underline-offset: 6px;
}


/* ---- STAY INFORMED (Sidebar Subscribe Card) ---- */
.sidebar-subscribe {
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 2.5rem 1.5rem;
  border-radius: 1.5rem;
  text-align: center;
}

.sidebar-subscribe h4 {
  border: none;
  padding: 0;
  margin-bottom: 1rem;
  color: var(--text);
  font-size: 1.25rem;
  text-transform: none;
  letter-spacing: normal;
  font-family: 'Newsreader', serif;
}

.sidebar-subscribe .subscribe-text {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.sidebar-subscribe .btn {
  background: var(--text);
  color: var(--bg);
  font-weight: 800;
  font-size: 0.9rem;
  padding: 1rem 2rem;
  border-radius: 9999px;
  /* Pill button */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  width: 100%;
  display: block;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sidebar-subscribe .btn:hover {
  background: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(236, 19, 55, 0.3);
}


/* ---- MORE COVERAGE (Bottom Recommendation Grid) ---- */
.more-coverage {
  margin-top: 8rem;
  padding-top: 6rem;
  border-top: 1px solid var(--border);
}

.more-coverage-head {
  margin-bottom: 4rem;
  text-align: center;
}

.more-coverage-head h2 {
  font-family: 'Newsreader', serif;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text);
}

.more-coverage-sub {
  font-size: 1.25rem;
  color: var(--muted);
  font-style: italic;
  opacity: 0.8;
}

.coverage-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 3rem;
}

@media (min-width: 768px) {
  .coverage-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.coverage-card {
  display: flex;
  flex-direction: column;
  padding: 2.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.coverage-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

.coverage-kicker {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--primary);
  margin-bottom: 1.5rem;
}

.coverage-card h3 {
  font-family: 'Newsreader', serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.coverage-card h3 a {
  text-decoration: none;
  color: var(--text);
  transition: color 0.2s;
}

.coverage-card p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 0;
}


/* ---- SHARE POPUP & OVERLAY ---- */
.share-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease;
}

.share-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.share-popup {
  background: var(--surface);
  border-radius: 2rem;
  width: 90%;
  max-width: 420px;
  padding: 2.5rem;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
  transform: translateY(40px) scale(0.95);
  transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.share-popup-overlay.active .share-popup {
  transform: translateY(0) scale(1);
}

.share-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5rem;
}

.share-popup-header h3 {
  font-family: 'Newsreader', serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
}

.share-popup-close {
  width: 44px;
  height: 44px;
  border: none;
  background: var(--surface-2);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
}

.share-popup-close:hover {
  background: var(--primary);
  color: #fff;
  transform: rotate(90deg);
}

.share-popup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.share-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 0.5rem;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  transition: all .2s ease;
}

.share-option:hover {
  background: var(--surface-2);
  border-color: var(--primary);
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.share-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.share-icon.whatsapp {
  background: #25D366;
  color: #fff;
}

.share-icon.x-twitter {
  background: #000;
  color: #fff;
}

.share-icon.linkedin {
  background: #0A66C2;
  color: #fff;
}

.share-icon.facebook {
  background: #1877F2;
  color: #fff;
}

.share-icon.email {
  background: var(--muted);
  color: #fff;
}

.share-icon.copy {
  background: var(--text);
  color: #fff;
}

.share-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.share-option.copied {
  border-color: #22c55e;
  background: var(--surface-2) !important;
}

/* ---- RESPONSIVE FINAL ---- */
@media (max-width: 1023px) {
  .article-grid {
    grid-template-columns: 1fr;
  }

  .article-sidebar {
    order: 2;
    margin-top: 4rem;
  }

  .article-content {
    max-width: 100%;
    margin-right: 0;
  }
}

/* ---- Share Popup Responsive ---- */
@media (max-width: 480px) {
  .share-popup-overlay {
    align-items: flex-end;
  }

  .share-popup {
    width: 100%;
    max-width: 100%;
    padding: 1.5rem 1.25rem 2rem;
    border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.3);
  }

  .share-popup-overlay.active .share-popup {
    transform: translateY(0) scale(1);
  }

  .share-popup-header {
    margin-bottom: 1.25rem;
  }

  .share-popup-header h3 {
    font-size: 1.25rem;
  }

  .share-popup-close {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .share-popup-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }

  .share-option {
    padding: 0.85rem 0.25rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    gap: 0.5rem;
  }

  .share-icon {
    width: 44px;
    height: 44px;
  }

  .share-icon svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 767px) {
  .article-header h1 {
    font-size: 2rem;
    margin-bottom: 0.75rem;
  }

  .article-deck {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
  }

  .article-meta {
    gap: 0.35rem;
    padding: 0.5rem 0;
    font-size: 0.8rem;
  }

  .article-meta .sep {
    margin: 0 0.25rem;
  }
}

/* ---- PRINT STYLES ---- */
@media print {

  .header,
  .footer,
  .article-sidebar,
  .article-share-bar,
  .share-popup-overlay,
  .reading-progress-container,
  .more-coverage,
  .ad-slot,
  .back-to-top {
    display: none !important;
  }

  .article-main {
    padding: 0;
  }

  .article-grid {
    display: block;
  }

  .article-body {
    max-width: 100%;
    font-size: 12pt;
    line-height: 1.5;
  }

  body {
    background: #fff;
    color: #000;
  }
}