/* ===================================================
   Mania AI — Article Page
   =================================================== */

@layer components {

  /* ── Breadcrumb ── */
  .m-breadcrumb {
    font-size: var(--m-text-xs);
    color: var(--m-text-tertiary);
    padding-block: var(--m-space-sm);
  }

  .m-breadcrumb ol {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--m-space-xs);
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .m-breadcrumb ol::-webkit-scrollbar {
    display: none;
  }

  .m-breadcrumb li {
    flex-shrink: 0;
  }

  .m-breadcrumb li:not(:last-child)::after {
    content: ">";
    margin-inline-start: var(--m-space-xs);
    color: var(--m-text-disabled);
  }

  .m-breadcrumb a {
    color: var(--m-text-tertiary);
  }

  .m-breadcrumb a:hover {
    color: var(--m-purple);
  }

  .m-breadcrumb [aria-current="page"] {
    color: var(--m-text-secondary);
  }

  /* ── Article ── */
  .m-article {
    padding-block-end: var(--m-space-2xl);
  }

  .m-article__header {
    margin-block-end: var(--m-space-xl);
  }

  .m-article__title {
    font-size: var(--m-text-3xl);
    font-weight: var(--m-font-bold);
    color: var(--m-text-primary);
    line-height: var(--m-leading-tight);
    margin-block-end: var(--m-space-md);
  }

  .m-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m-space-md);
    align-items: center;
  }

  .m-article__date,
  .m-article__updated {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--m-text-xs);
    color: var(--m-text-tertiary);
  }

  .m-article__date svg,
  .m-article__updated svg {
    flex-shrink: 0;
  }

  .m-article__category {
    font-size: var(--m-text-xs);
    font-weight: var(--m-font-bold);
    color: var(--m-text-primary);
    background: var(--m-purple);
    padding: 2px var(--m-space-sm);
    border-radius: var(--m-radius-sm);
  }

  .m-article__eyecatch {
    margin-block-end: var(--m-space-xl);
  }

  .m-article__eyecatch img {
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--m-radius-md);
  }

  /* ── Article Body ── */
  .m-article__body {
    font-size: var(--m-text-base);
    line-height: var(--m-leading-loose);
    color: var(--m-text-secondary);
  }

  .m-article__body > * + * {
    margin-block-start: var(--m-space-lg);
  }

  .m-article__body p {
    line-height: var(--m-leading-loose);
  }

  /* Images */
  .m-article__body figure img,
  .m-article__body .wp-block-image img {
    display: block;
    margin-inline: auto;
    border-radius: var(--m-radius-sm);
    max-inline-size: 100%;
    block-size: auto;
    max-block-size: 60vh;
    object-fit: contain;
  }

  .m-article__body figcaption {
    font-size: var(--m-text-xs);
    color: var(--m-text-tertiary);
    margin-block-start: var(--m-space-xs);
  }

  /* Blog Cards (internal embeds) */
  .m-article__body .m-embed {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m-space-sm);
    padding: var(--m-space-md) var(--m-space-md) calc(var(--m-space-md) / 2);
    margin: var(--m-space-md) 0;
    background: var(--m-bg-elevated);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-md);
    text-decoration: none;
    transition: border-color var(--m-duration) var(--m-ease), background var(--m-duration) var(--m-ease), box-shadow var(--m-duration) var(--m-ease);
  }

  .m-article__body .m-embed:hover {
    border-color: rgba(155, 77, 255, 0.4);
    background: var(--m-bg-overlay);
    box-shadow: 0 0 16px rgba(155, 77, 255, 0.1);
  }

  .m-embed__thumb {
    flex-shrink: 0;
    width: 160px;
    border-radius: var(--m-radius-sm);
    overflow: hidden;
  }

  .m-embed__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms var(--m-ease);
  }

  .m-embed:hover .m-embed__thumb img {
    transform: scale(1.05);
  }

  .m-embed__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
  }

  .m-embed__title {
    font-size: var(--m-text-sm);
    font-weight: var(--m-font-bold);
    color: var(--m-text-primary);
    line-height: var(--m-leading-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--m-duration) var(--m-ease);
  }

  .m-embed:hover .m-embed__title {
    color: var(--m-purple-hover);
  }

  .m-embed__excerpt {
    font-size: var(--m-text-xs);
    color: var(--m-text-tertiary);
    line-height: var(--m-leading-normal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .m-embed__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .m-embed__site {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--m-text-xs);
    color: var(--m-text-disabled);
  }

  .m-embed__site-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
  }

  .m-embed__date {
    font-size: var(--m-text-xs);
    color: var(--m-text-disabled);
  }

  @media (max-width: 639px) {
    .m-embed__thumb {
      width: 120px;
    }
  }

  /* Headings */
  .m-article__body h2 {
    position: relative;
    font-size: var(--m-text-2xl);
    font-weight: 900;
    color: var(--m-text-primary);
    line-height: var(--m-leading-tight);
    letter-spacing: 0.02em;
    padding: var(--m-space-md) var(--m-space-lg);
    margin-block: var(--m-space-2xl) var(--m-space-lg);
    background: linear-gradient(135deg, rgba(155, 77, 255, 0.20) 0%, var(--m-bg-overlay) 50%);
    border-radius: var(--m-radius-md);
    box-shadow: 0 0 24px rgba(155, 77, 255, 0.08);
  }

  .m-article__body h2::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: 2px;
    background: linear-gradient(
      to right,
      var(--m-purple) 0%,
      rgba(155, 77, 255, 0.15) 60%,
      transparent 100%
    );
    border-radius: 0 0 var(--m-radius-md) var(--m-radius-md);
  }

  .m-article__body h3 {
    font-size: var(--m-text-xl);
    font-weight: var(--m-font-bold);
    color: var(--m-text-primary);
    line-height: var(--m-leading-tight);
    position: relative;
    padding-inline-start: var(--m-space-sm);
    padding-block-end: var(--m-space-sm);
    margin-block: var(--m-space-xl) var(--m-space-md);
  }

  .m-article__body h3::after {
    content: "" !important;
    display: block !important;
    margin-block-start: var(--m-space-sm);
    margin-inline-start: calc(var(--m-space-sm) * -1);
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--m-purple), var(--m-bg-raised));
  }

  .m-article__body h4 {
    font-size: var(--m-text-lg);
    font-weight: var(--m-font-bold);
    color: var(--m-text-primary);
    line-height: var(--m-leading-tight);
    border-block-end: 1px solid var(--m-border-strong);
    padding-block-end: var(--m-space-xs);
    margin-block: var(--m-space-xl) var(--m-space-sm);
  }

  /* Blockquote */
  .m-article__body blockquote {
    background: var(--m-bg-elevated);
    border-inline-start: 3px solid var(--m-purple-muted);
    padding: var(--m-space-lg);
    border-radius: 0 var(--m-radius-sm) var(--m-radius-sm) 0;
    color: var(--m-text-secondary);
  }

  .m-article__body blockquote cite {
    display: block;
    margin-block-start: var(--m-space-md);
    font-style: normal;
    font-size: 10.5px;
    color: var(--m-text-tertiary);
  }

  /* Code */
  .m-article__body code {
    font-family: var(--m-font-mono);
    font-size: 0.9em;
    background: var(--m-bg-elevated);
    padding: 2px 6px;
    border-radius: 3px;
  }

  .m-article__body pre + figure,
  .m-article__body pre + .wp-block-image {
    margin-block-start: var(--m-space-lg) !important;
  }

  .m-article__body .wp-block-embed-youtube,
  .m-article__body .wp-block-embed-vimeo,
  .m-article__body .wp-block-video {
    margin-block-start: var(--m-space-lg) !important;
    max-block-size: 60vh;
  }

  .m-article__body .wp-block-video video {
    max-block-size: 60vh;
    object-fit: contain;
  }

  .m-article__body pre {
    position: relative;
    background: #0a0a0a;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-md);
    padding: var(--m-space-lg);
    padding-block-start: calc(var(--m-space-lg) + 2rem);
    overflow-x: auto;
  }

  /* Terminal dots */
  .m-article__body pre::before {
    content: "";
    position: absolute;
    inset-block-start: var(--m-space-md);
    inset-inline-start: var(--m-space-lg);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 95, 87, 0.6);
    box-shadow:
      14px 0 0 rgba(255, 189, 46, 0.6),
      28px 0 0 rgba(40, 200, 64, 0.6);
  }

  /* Copy button */
  .m-code-copy {
    position: absolute;
    inset-block-start: var(--m-space-sm);
    inset-inline-end: var(--m-space-sm);
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    color: var(--m-text-disabled);
    cursor: pointer;
    transition: color var(--m-duration) var(--m-ease), border-color var(--m-duration) var(--m-ease), background var(--m-duration) var(--m-ease);
  }

  .m-code-copy:hover {
    color: var(--m-text-primary);
    border-color: var(--m-border-strong);
    background: var(--m-hover-bg);
  }

  .m-code-copy.is-copied {
    color: var(--m-success);
    border-color: var(--m-success);
  }

  .m-article__body pre code {
    background: none;
    padding: 0;
    font-size: var(--m-text-sm);
    line-height: var(--m-leading-normal);
    color: var(--m-text-primary);
  }

  .m-article__body .wp-block-preformatted {
    font-family: var(--m-font-mono);
    font-size: var(--m-text-sm);
    line-height: var(--m-leading-normal);
    color: var(--m-text-primary);
  }

  /* Table */
  .m-article__body .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-md);
    margin-block: var(--m-space-lg);
  }

  .m-article__body table {
    inline-size: 100%;
    border-collapse: collapse;
    margin: 0;
  }

  .m-article__body :is(th, td) {
    padding: var(--m-space-sm) var(--m-space-lg);
    border: none !important;
    border-block-end: 1px solid var(--m-border) !important;
    text-align: start;
    font-size: var(--m-text-sm);
    background: transparent !important;
    white-space: nowrap;
  }

  .m-article__body tr:last-child :is(th, td) {
    border-block-end: none !important;
  }

  .m-article__body thead {
    border-bottom: 1px solid var(--m-border) !important;
  }

  .m-article__body th,
  .m-article__body thead td {
    background: rgba(155, 77, 255, 0.08) !important;
    font-weight: var(--m-font-bold);
    color: var(--m-text-primary);
    font-size: var(--m-text-sm);
    letter-spacing: 0.02em;
    border-block-end: 1px solid var(--m-border) !important;
  }

  .m-article__body tbody tr {
    transition: background var(--m-duration) var(--m-ease);
  }

  .m-article__body tbody tr:hover td {
    background: var(--m-hover-bg) !important;
  }

  /* Lists */
  .m-article__body ul,
  .m-article__body ol {
    padding-inline-start: 1.5em;
  }

  .m-article__body ul {
    list-style: disc;
  }

  .m-article__body ol {
    list-style: decimal;
  }

  .m-article__body li {
    line-height: var(--m-leading-loose);
  }

  .m-article__body li + li {
    margin-block-start: var(--m-space-xs);
  }

  .m-article__body li::marker {
    color: var(--m-purple);
  }

  /* Button block */
  .m-article__body .wp-block-button__link {
    background: linear-gradient(135deg, var(--m-purple) 0%, hsl(263 60% 35%) 100%);
    color: #fff;
    font-weight: var(--m-font-bold);
    font-size: var(--m-text-sm);
    padding: var(--m-space-sm) var(--m-space-xl);
    border-radius: var(--m-radius-md);
    box-shadow: 0 4px 20px rgba(155, 77, 255, 0.50), 0 2px 6px rgba(155, 77, 255, 0.25);
    transition: all var(--m-duration) var(--m-ease);
    text-decoration: none;
  }

  .m-article__body .wp-block-button__link:hover {
    box-shadow: 0 6px 28px rgba(155, 77, 255, 0.65), 0 4px 10px rgba(155, 77, 255, 0.35);
    transform: translateY(-1px);
    color: #fff;
  }

  /* Details block — same as toggle-box */
  .m-article__body .wp-block-details {
    margin-block: var(--m-space-lg);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-md);
    overflow: hidden;
  }

  .m-article__body .wp-block-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--m-space-md) var(--m-space-lg);
    background: var(--m-bg-overlay);
    cursor: pointer;
    font-weight: var(--m-font-bold);
    color: var(--m-text-primary);
    list-style: none;
    transition: background var(--m-duration) var(--m-ease);
  }

  .m-article__body .wp-block-details summary::-webkit-details-marker { display: none; }

  .m-article__body .wp-block-details summary::after {
    content: '';
    width: 0.6em;
    height: 0.6em;
    border-right: 2px solid var(--m-text-tertiary);
    border-bottom: 2px solid var(--m-text-tertiary);
    transform: rotate(45deg);
    transition: transform var(--m-duration) var(--m-ease);
    flex-shrink: 0;
  }

  .m-article__body .wp-block-details[open] summary::after {
    transform: rotate(-135deg);
  }

  .m-article__body .wp-block-details summary:hover {
    background: var(--m-hover-bg);
  }

  .m-article__body .wp-block-details > :not(summary) {
    padding: var(--m-space-lg);
    color: var(--m-text-secondary);
    line-height: var(--m-leading-normal);
  }

  /* Links in body */
  .m-article__body a {
    color: var(--m-purple-hover);
    text-decoration: none;
    transition: color var(--m-duration) var(--m-ease);
  }

  .m-article__body a:hover {
    color: var(--m-purple);
  }

  /* External link icon (SVG) — paragraph text links only */
  .m-article__body p > a[href^="http"]:not([href*="mania.romptn.com"]):not([href*="localhost"])::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-inline-start: 0.2em;
    vertical-align: -2px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 0.5;
  }

  /* Tags */
  .m-article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m-space-sm);
    margin-block-start: var(--m-space-2xl);
    padding-block-start: var(--m-space-lg);
    border-block-start: 1px solid var(--m-border-subtle);
  }

  .m-article__tag {
    font-size: var(--m-text-xs);
    color: var(--m-text-tertiary);
    padding: var(--m-space-xs) var(--m-space-sm);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-pill);
    transition: color var(--m-duration) var(--m-ease), border-color var(--m-duration) var(--m-ease);
  }

  .m-article__tag:hover {
    color: var(--m-text-primary);
    border-color: var(--m-purple);
  }

  /* ── Supervisor Box ── */
  .m-supervisor {
    display: flex;
    align-items: flex-start;
    gap: var(--m-space-lg);
    padding: var(--m-space-lg);
    background: var(--m-bg-elevated);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-md);
    margin-block-end: var(--m-space-xl);
  }

  .m-supervisor__left {
    display: flex;
    align-items: center;
    gap: var(--m-space-md);
    flex-shrink: 0;
  }

  .m-supervisor__avatar {
    flex-shrink: 0;
  }

  .m-supervisor__avatar img {
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border-radius: 50%;
    object-fit: cover;
  }

  .m-supervisor__profile {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .m-supervisor__label {
    font-size: var(--m-text-xs);
    color: var(--m-text-disabled);
    letter-spacing: 0.04em;
  }

  .m-supervisor__name {
    font-size: var(--m-text-sm);
    font-weight: var(--m-font-bold);
    color: var(--m-text-primary);
    white-space: nowrap;
  }

  .m-supervisor__x {
    display: inline-flex;
    color: var(--m-text-tertiary);
    transition: color var(--m-duration) var(--m-ease);
  }

  .m-supervisor__x:hover {
    color: var(--m-text-primary);
  }

  .m-supervisor__bio {
    font-size: var(--m-text-sm);
    color: var(--m-text-tertiary);
    line-height: var(--m-leading-normal);
    margin: 0;
  }

  @media (max-width: 639px) {
    .m-supervisor {
      flex-direction: column;
      gap: var(--m-space-md);
    }
  }

  /* ── TOC ── */

  /* Inline TOC (in article body): SP only */
  .m-article .m-toc {
    display: none;
  }

  @media (max-width: 1023px) {
    .m-article .m-toc {
      display: block;
    }
  }

  /* Sidebar TOC: PC only, sticky */
  .m-sidebar__toc {
    position: sticky;
    inset-block-start: var(--m-space-xl);
    max-block-size: calc(100dvh - var(--m-space-xl));
    overflow-y: auto;
    scrollbar-width: none;
  }

  .m-sidebar__toc::-webkit-scrollbar {
    display: none;
  }

  @media (max-width: 1023px) {
    .m-sidebar__toc {
      display: none;
    }
  }

  .m-toc {
    background: var(--m-bg-elevated);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-md);
    margin-block-end: var(--m-space-xl);
    overflow: hidden;
  }

  .m-toc__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--m-space-md) var(--m-space-lg);
  }

  .m-toc__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--m-space-xs);
    font-size: var(--m-text-sm);
    font-weight: var(--m-font-bold);
    color: var(--m-text-primary);
  }

  .m-toc__icon {
    color: var(--m-text-tertiary);
    transition: transform var(--m-duration) var(--m-ease);
  }

  .m-toc__toggle[aria-expanded="false"] .m-toc__icon {
    transform: rotate(-90deg);
  }

  /* Depth toggle button */
  .m-toc__depth-toggle {
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    color: var(--m-text-disabled);
    border-radius: var(--m-radius-sm);
    border: 1px solid var(--m-border);
    transition: color var(--m-duration) var(--m-ease), border-color var(--m-duration) var(--m-ease), background var(--m-duration) var(--m-ease);
  }

  .m-toc__depth-toggle:hover {
    color: var(--m-text-secondary);
    border-color: var(--m-border-strong);
  }

  .m-toc__depth-toggle[aria-pressed="true"] {
    color: var(--m-purple);
    border-color: var(--m-purple);
    background: var(--m-hover-bg);
  }

  .m-toc__list {
    padding: 0 var(--m-space-lg) var(--m-space-lg);
    display: flex;
    flex-direction: column;
    gap: 0;
    counter-reset: toc;
  }

  .m-toc__list[hidden] {
    display: none;
  }

  .m-toc__item a {
    display: block;
    font-size: var(--m-text-sm);
    color: var(--m-text-secondary);
    padding: var(--m-space-xs) var(--m-space-sm);
    border-inline-start: 2px solid transparent;
    text-decoration: none;
    transition:
      color var(--m-duration) var(--m-ease),
      border-color var(--m-duration) var(--m-ease);
  }

  .m-toc__item a:hover {
    color: var(--m-text-primary);
  }

  .m-toc__item.is-active > a {
    color: var(--m-text-primary);
    border-inline-start-color: var(--m-purple);
  }

  .m-toc__sublist {
    padding-inline-start: var(--m-space-lg);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    max-block-size: 0;
    opacity: 0;
    transition: max-block-size 300ms var(--m-ease), opacity 300ms var(--m-ease);
  }

  /* Show h3 when depth=all */
  .m-toc[data-depth="all"] .m-toc__sublist {
    max-block-size: 50rem;
    opacity: 1;
  }

  .m-toc__sublist a {
    font-size: var(--m-text-xs);
    color: var(--m-text-tertiary);
  }

  /* ── Share Buttons ── */
  .m-share {
    display: flex;
    gap: var(--m-space-sm);
    margin-block-start: var(--m-space-xl);
  }

  .m-share__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--m-space-xs);
    padding: var(--m-space-xs) var(--m-space-md);
    font-size: var(--m-text-sm);
    font-weight: var(--m-font-medium);
    color: var(--m-text-primary);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-pill);
    transition:
      background var(--m-duration) var(--m-ease),
      border-color var(--m-duration) var(--m-ease);
  }

  .m-share__btn:hover {
    background: var(--m-hover-bg);
    border-color: var(--m-border-strong);
  }

  .m-share__btn--x:hover {
    border-color: #536471;
  }

  .m-share__btn--line:hover {
    border-color: #06C755;
  }

  .m-share__btn--copy:hover {
    border-color: var(--m-purple);
  }

  /* Copied feedback */
  .m-share__btn--copy.is-copied {
    border-color: var(--m-success);
    color: var(--m-success);
  }

  /* ── Related Posts ── */
  .m-related {
    margin-block-start: var(--m-space-2xl);
    padding-block-start: var(--m-space-lg);
    border-block-start: 1px solid var(--m-border-subtle);
  }

  .m-related .m-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-block-end: var(--m-space-sm);
    margin-block-end: var(--m-space-md);
    border-block-end: 1px solid var(--m-border-subtle);
  }

  .m-related .m-section-header__title {
    font-size: var(--m-text-xl);
    font-weight: var(--m-font-bold);
    color: var(--m-text-primary);
    letter-spacing: 0.04em;
  }

  .m-related__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--m-space-md);
  }

  @media (max-width: 639px) {
    .m-related__grid { grid-template-columns: 1fr; }
  }

  /* Related cards reuse .m-card styles from top-page.css.
     If top-page.css isn't loaded on singular, duplicate card base here: */
  .m-related .m-card {
    display: flex;
    flex-direction: column;
    gap: var(--m-space-xs);
  }

  .m-related .m-card__thumb {
    position: relative;
    border-radius: var(--m-radius-md);
    overflow: hidden;
  }

  .m-related .m-card__thumb img {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 500ms var(--m-ease);
  }

  .m-related .m-card:hover .m-card__thumb img {
    transform: scale(1.03);
  }

  .m-related .m-card__hover-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--m-space-sm);
    gap: 2px;
    background: linear-gradient(
      to top,
      rgba(10, 0, 20, 0.85) 0%,
      rgba(10, 0, 20, 0.3) 50%,
      transparent 100%
    );
    opacity: 0;
    transition: opacity 400ms var(--m-ease);
  }

  .m-related .m-card:hover .m-card__hover-overlay {
    opacity: 1;
  }

  .m-related .m-card__category {
    align-self: flex-start;
    font-size: var(--m-text-xs);
    font-weight: var(--m-font-bold);
    color: var(--m-text-primary);
    letter-spacing: 0.04em;
    background: var(--m-purple);
    padding: 2px var(--m-space-sm);
    border-radius: var(--m-radius-sm);
    transform: translateY(8px);
    opacity: 0;
    transition: transform 400ms var(--m-ease) 80ms, opacity 400ms var(--m-ease) 80ms;
  }

  .m-related .m-card:hover .m-card__category {
    transform: translateY(0);
    opacity: 1;
  }

  .m-related .m-card__title {
    font-size: var(--m-text-sm);
    font-weight: var(--m-font-bold);
    color: var(--m-text-primary);
    line-height: var(--m-leading-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transform: translateY(12px);
    opacity: 0;
    transition: transform 400ms var(--m-ease) 150ms, opacity 400ms var(--m-ease) 150ms;
  }

  .m-related .m-card:hover .m-card__title {
    transform: translateY(0);
    opacity: 1;
  }

  /* ── Bottom Sections (popular/latest sliders) ── */
  .m-bottom-section {
    margin-block-start: var(--m-space-xl);
    padding-block-start: var(--m-space-lg);
    border-block-start: 1px solid var(--m-border-subtle);
  }

  .m-bottom-section .m-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-block-end: var(--m-space-sm);
    margin-block-end: var(--m-space-md);
    border-block-end: 1px solid var(--m-border-subtle);
  }

  .m-bottom-section .m-section-header__title {
    font-size: var(--m-text-lg);
    font-weight: var(--m-font-bold);
    color: var(--m-text-primary);
    letter-spacing: 0.04em;
  }

  /* Slider */
  .m-bottom-slider {
    overflow: hidden;
  }

  .m-bottom-slider__track {
    display: flex;
    gap: var(--m-space-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-block-end: var(--m-space-xs);
  }

  .m-bottom-slider__track::-webkit-scrollbar {
    display: none;
  }

  .m-bottom-slider__card {
    flex: 0 0 clamp(10rem, 8rem + 10vw, 14rem);
    scroll-snap-align: start;
    display: block;
  }

  .m-bottom-slider__thumb {
    position: relative;
    border-radius: var(--m-radius-md);
    overflow: hidden;
  }

  .m-bottom-slider__thumb img {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 500ms var(--m-ease);
  }

  .m-bottom-slider__card:hover .m-bottom-slider__thumb img {
    transform: scale(1.03);
  }

  /* Hover overlay */
  .m-bottom-slider__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--m-space-sm);
    gap: 2px;
    background: linear-gradient(
      to top,
      rgba(10, 0, 20, 0.85) 0%,
      rgba(10, 0, 20, 0.3) 50%,
      transparent 100%
    );
    opacity: 0;
    transition: opacity 400ms var(--m-ease);
  }

  .m-bottom-slider__card:hover .m-bottom-slider__overlay {
    opacity: 1;
  }

  .m-bottom-slider__category {
    align-self: flex-start;
    font-size: var(--m-text-xs);
    font-weight: var(--m-font-bold);
    color: var(--m-text-primary);
    letter-spacing: 0.04em;
    background: var(--m-purple);
    padding: 2px var(--m-space-sm);
    border-radius: var(--m-radius-sm);
    transform: translateY(8px);
    opacity: 0;
    transition: transform 400ms var(--m-ease) 80ms, opacity 400ms var(--m-ease) 80ms;
  }

  .m-bottom-slider__card:hover .m-bottom-slider__category {
    transform: translateY(0);
    opacity: 1;
  }

  .m-bottom-slider__title {
    font-size: var(--m-text-xs);
    font-weight: var(--m-font-bold);
    color: var(--m-text-primary);
    line-height: var(--m-leading-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transform: translateY(12px);
    opacity: 0;
    transition: transform 400ms var(--m-ease) 150ms, opacity 400ms var(--m-ease) 150ms;
  }

  .m-bottom-slider__card:hover .m-bottom-slider__title {
    transform: translateY(0);
    opacity: 1;
  }

  /* ══════════════════════════════════════════════════
     Mobile fixes
     ══════════════════════════════════════════════════ */
  @media (max-width: 767px) {

    /* Article padding */
    .m-article {
      padding-block-end: var(--m-space-lg);
    }

    .m-article__title {
      font-size: var(--m-text-2xl);
    }

    /* Body content overflow */
    .m-article__body {
      overflow-x: hidden;
      word-break: break-word;
    }

    /* Tables: prevent column collapse, let .table-wrap scroll */
    .m-article__body table {
      display: table;
      min-inline-size: 600px;
    }

    /* Images */
    .m-article__body img,
    .m-article__body iframe,
    .m-article__body video {
      max-inline-size: 100%;
      block-size: auto;
    }

    /* Headings */
    .m-article__body h2 {
      font-size: var(--m-text-xl);
      margin-block: var(--m-space-xl) var(--m-space-md);
    }

    .m-article__body h3 {
      font-size: var(--m-text-lg);
    }

    .m-article__body h4 {
      font-size: var(--m-text-base);
    }

    /* Supervisor */
    .m-supervisor {
      flex-direction: column;
      gap: var(--m-space-md);
      padding: var(--m-space-md);
    }

    /* Share buttons wrap */
    .m-share {
      flex-wrap: wrap;
    }

    /* Related grid */
    .m-related__grid {
      grid-template-columns: 1fr;
    }

    /* Section headers */
    .m-section-header,
    .m-bottom-section .m-section-header,
    .m-related .m-section-header {
      margin-block-end: var(--m-space-sm);
    }
  }
}