/* ==========================================================================
   Article layout + panel — The Sri COM
   --------------------------------------------------------------------------
   Replaces the CSS that was in Ghost -> Settings -> Code injection. You can
   delete this from there:

       article.gh-article, .article { display: flex !important; ... }
       .gh-article-image, .article-image { order: 1 !important; }

   Running order (image, like, then title + body) is now the real order of the
   markup in post.hbs — no flex tricks, no !important. That also avoids a side
   effect of the injected version: the like bar had no `order`, so it defaulted
   to 0 and rendered above the image.

   Layout:
       featured image      full width, no panel
       like button         top of the post
       ONE panel           4px brand-blue top edge, 32px rounded top corners,
                           holding the title AND the body together
   ========================================================================== */

/* --- Featured image leads, outside the panel ------------------------------ */

.article-image {
  margin-top: 0;
}

/* --- Like button, at the top ---------------------------------------------- */

.like-bar {
  margin-top: 26px;
  margin-bottom: 0;
}

/* --- The single panel ----------------------------------------------------- */

.article-panel {
  margin-top: 26px;
  padding: 32px 30px 4px;
  border-top: 4px solid #2475e8;
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
}

/* The children carried the edge before; it now belongs to the wrapper. */
.article-panel .article-header,
.article-panel .gh-content {
  border-top: 0;
  border-radius: 0;
  padding-top: 0;
  padding-inline: 0;
  margin-top: 0;
}

.article-panel .gh-content {
  margin-top: 26px;
}

/* Full-bleed cards inside the body still escape the panel padding. */
.article-panel .gh-content .kg-width-full {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 620px) {
  .article-panel {
    margin-top: 20px;
    padding: 24px 18px 4px;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }

  .like-bar { margin-top: 20px; }

  .article-panel .gh-content { margin-top: 20px; }
}