/* =========================================================================
   MAKTONIC — Blog article
   Loaded after main.css and blog.css — the related rail reuses the listing's
   card styles, so only the article itself is defined here.
   ========================================================================= */

.article{padding-top:var(--s-140);padding-bottom:var(--s-120);position:relative}

/* how far through the piece the reader is */
.article-progress{
  position:fixed;left:0;top:0;z-index:60;
  width:100%;height:3px;background-color:transparent;pointer-events:none;
}
.article-progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--green-500),var(--green-300));
  transform-origin:0 50%;
}

/* ================================================================ LAYOUT */
.article-container{
  display:grid;grid-template-columns:15rem minmax(0,1fr);
  gap:var(--s-64);align-items:start;
}

/* ------------------------------------------------------ sticky sidebar */
.article-nav_sticky{
  position:sticky;top:7rem;
  display:flex;flex-direction:column;gap:var(--s-32);
}
.link-button{
  display:inline-flex;align-items:center;gap:var(--s-8);
  color:var(--gray-600);text-decoration:none;
  font-size:.875rem;letter-spacing:var(--ls-2);
  transition:color .25s var(--ease);
}
.link-button svg{width:1rem;height:1rem;transition:transform .25s var(--ease)}
.link-button:hover{color:var(--coral-500)}
.link-button:hover svg{transform:translateX(-3px)}

.article-toc{display:flex;flex-direction:column;gap:var(--s-16)}
.article-toc > .title--xs{margin:0;color:var(--black)}
.article-toc_table{display:flex;flex-direction:column;gap:var(--s-4)}
/* a hairline rail runs down the list; the active item lights its segment */
.article-toc_link{
  position:relative;display:block;
  padding:var(--s-6) 0 var(--s-6) var(--s-16);
  border-left:2px solid var(--gray-100);
  color:var(--gray-500);text-decoration:none;
  font-size:.8125rem;line-height:var(--lh-140);letter-spacing:var(--ls-1);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.article-toc_link.is--sub{padding-left:var(--s-24);font-size:.78125rem}
.article-toc_link:hover{color:var(--gray-800)}
.article-toc_link.is--active{color:var(--green-500);border-left-color:var(--green-500)}

/* ================================================== the article itself */
.article-wrapp{display:flex;flex-direction:column;gap:var(--s-32);min-width:0}

.article-title{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-16)}
.article-title h1{margin:0}
.article-standfirst{
  margin:0;color:var(--gray-600);
  font-size:var(--f-text-l);line-height:var(--lh-140);max-width:44rem;
}

.article-data_wrapp{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--s-16);width:100%;
  padding-top:var(--s-16);margin-top:var(--s-8);
  border-top:1px solid var(--gray-100);
}
.article-data{display:flex;align-items:center;gap:var(--s-16);flex-wrap:wrap}
.article-author{
  display:inline-flex;align-items:center;gap:var(--s-10);
  font-size:.9375rem;font-weight:500;letter-spacing:var(--ls-3);
}
.article-author img{width:2rem;height:2rem;border-radius:50%;display:block}
.article-date,.article-read{
  font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-500);
}

/* ------------------------------------------------------------- sharing */
.share-list{position:relative;display:flex;align-items:center;gap:var(--s-6)}
.share-button{
  display:grid;place-items:center;
  width:2.25rem;height:2.25rem;padding:0;
  border:1px solid var(--gray-100);border-radius:50%;
  background-color:var(--white);color:var(--gray-600);
  cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease),
             background-color .25s var(--ease),transform .25s var(--ease);
}
.share-button svg{width:1.125rem;height:1.125rem}
.share-button:hover{
  color:var(--white);background-color:var(--green-500);
  border-color:var(--green-500);transform:translateY(-2px);
}
.share-button:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}
.share-tooltip{
  position:absolute;right:0;top:-2.25rem;
  padding:.15rem .75rem;border-radius:4px;
  background-color:var(--gray-800);color:var(--white);
  font-size:.75rem;font-weight:500;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .25s ease-in-out;
}
.share-tooltip.is--on{opacity:1}

.article-cover{
  width:100%;height:auto;display:block;
  border-radius:1.25rem;aspect-ratio:16/9;object-fit:cover;
}

/* ====================================================== the rich text */
.article-rich{max-width:44rem;color:var(--gray-800)}
.article-rich > *:first-child{margin-top:0}

.article-rich p{margin:0 0 var(--s-20);line-height:1.75;font-size:1.0625rem}
.article-rich p.lead{font-size:1.1875rem;color:var(--gray-700)}
.article-rich h2{
  margin:var(--s-48) 0 var(--s-16);
  font-size:var(--f-title-m);line-height:var(--lh-120);
  font-weight:500;letter-spacing:var(--ls-3);color:var(--black);
  scroll-margin-top:7rem;
}
.article-rich h3{
  margin:var(--s-40) 0 var(--s-12);
  font-size:1.375rem;line-height:var(--lh-130);
  font-weight:500;letter-spacing:var(--ls-3);color:var(--black);
  scroll-margin-top:7rem;
}
.article-rich a{color:var(--green-500);text-decoration:underline;text-underline-offset:3px}
.article-rich a:hover{color:var(--coral-500)}
.article-rich strong{font-weight:600;color:var(--black)}
.article-rich em{font-style:italic}

.article-rich ul,
.article-rich ol{margin:0 0 var(--s-24);padding-left:var(--s-24);line-height:1.75}
.article-rich li{margin:0 0 var(--s-10);font-size:1.0625rem}
.article-rich ul li::marker{color:var(--green-500);font-size:1.2em}
.article-rich ol li::marker{color:var(--green-500);font-weight:600}

.article-rich blockquote{
  margin:var(--s-32) 0;padding:var(--s-20) var(--s-24);
  border-left:3px solid var(--green-500);border-radius:0 .75rem .75rem 0;
  background-color:var(--green-50);
  font-size:1.0625rem;line-height:1.6;color:var(--green-900);
}

/* tables scroll inside their own box rather than widening the article */
.table-scroll{
  width:100%;overflow-x:auto;margin:var(--s-24) 0 var(--s-32);
  border:1px solid var(--gray-100);border-radius:.75rem;
}
.article-rich table{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.5}
.article-rich th,
.article-rich td{
  padding:var(--s-12) var(--s-14);text-align:left;vertical-align:top;
  border-bottom:1px solid var(--gray-100);
}
.article-rich th{
  font-weight:500;color:var(--black);background-color:var(--gray-50);
  white-space:nowrap;
}
.article-rich tbody tr:last-child td{border-bottom:0}
.article-rich tbody tr{transition:background-color .2s}
.article-rich tbody tr:hover{background-color:var(--gray-50)}

/* --------------------------------------------------------- closing CTA */
.article-cta{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-12);
  max-width:44rem;margin-top:var(--s-24);
  padding:var(--s-32);border-radius:1.125rem;
  background-color:var(--gray-50);border:1px solid var(--gray-100);
}
.article-cta p{margin:0}
.article-cta p:not(.title--s){color:var(--gray-600);line-height:var(--lh-140)}
.article-cta .button{margin-top:var(--s-8)}

/* ============================================================== RELATED */
.article-related{margin-top:var(--s-100);padding-top:var(--s-48);border-top:1px solid var(--gray-100)}
.article-related_head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-16);margin-bottom:var(--s-32);
}
.article-related_head h2{margin:0}
/* one row that scrolls sideways rather than wrapping */
.blog-list_related{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:var(--s-24);
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.blog-list_related::-webkit-scrollbar{display:none}
.blog-list_related > .blog-card{min-width:0}

/* ============================================================= RESPONSIVE */
@media (max-width:1100px){
  .article-container{grid-template-columns:1fr;gap:var(--s-32)}
  /* the sidebar becomes a normal block above the article */
  .article-nav_sticky{position:static;flex-direction:row;flex-wrap:wrap;
    align-items:center;justify-content:space-between;gap:var(--s-16)}
  .article-toc{display:none}
  .article-rich,.article-cta{max-width:none}
}
@media (max-width:991px){
  .article{padding-top:var(--s-120);padding-bottom:var(--s-90)}
  .blog-list_related{grid-auto-columns:minmax(19rem,1fr)}
}
@media (max-width:767px){
  .article{padding-top:var(--s-105)}
  .article-rich p,.article-rich li{font-size:1rem}
  .article-rich p.lead{font-size:1.0625rem}
  .article-data_wrapp{align-items:flex-start;flex-direction:column}
  .article-cover{border-radius:.875rem}
  .article-cta{padding:var(--s-24)}
  .article-related{margin-top:var(--s-64)}
  .blog-list_related{
    grid-auto-columns:minmax(16.5rem,1fr);
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  }
}

/* Anyone who asked for less motion gets the article, not the arrival. */
@media (prefers-reduced-motion: reduce){
  .article-progress{display:none}
}