/* ==========================================================================
   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; }
}

/* ==========================================================================
   Ad slot
   The network decides the banner size, so this only reserves space and keeps
   it from touching the sections either side. min-height stops the page
   jumping when the ad finally loads. Markup: partials/ad-slot.hbs
   ========================================================================== */

.ad-slot {
  display: flex;
  justify-content: center;
  max-width: 980px;
  /* Bottom margin as well now: it sits between the page content and the
     footer on every page, so it needs clearance on both sides. */
  margin: 44px auto 40px;
  padding: 0 20px;
}

/* If the network serves nothing, collapse instead of leaving a gap. */
.ad-slot:empty { display: none; }

.ad-slot > div {
  max-width: 100%;
  min-height: 90px;
}

/* Never let a wide banner push the page sideways. */
.ad-slot iframe,
.ad-slot img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 620px) {
  .ad-slot {
    margin: 32px auto 30px;
    padding: 0 16px;
  }

  .ad-slot > div { min-height: 60px; }
}