---
import PostHero from "../components/PostHero.astro";
import PostFooter from "../components/PostFooter.astro";
import {invariant, type Post, type Settings } from "@matthiesenxyz/astro-ghostcms/api";
export type Props = {
  post: Post;
  settings: Settings;
  postClass?: string;
  posts: Post[];
};
const { post, settings, postClass, posts } = Astro.props as Props;
invariant(settings, "Settings not found");
---

<main id="site-main" class="site-main">
  <article class={`article post ${postClass}`}>
    <PostHero post={post} settings={settings} />
    <section class="gh-content gh-canvas">
      <Fragment set:html={post.html} />
    </section>
  </article>
  <PostFooter post={post} settings={settings} posts={posts} />
</main>

<style lang="scss" is:global>
  .article {
    padding: 8vmin 0;
    word-break: break-word;
  }

  .article-header {
    padding: 0 0 6vmin 0;
  }

  .article-tag {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 0 0.5rem;
    color: var(--color-midgrey);
    font-size: 1.3rem;
    line-height: 1.4em;
    letter-spacing: 0.02em;
    font-weight: 600;
    text-transform: uppercase;
  }

  .article-tag a {
    color: var(--ghost-accent-color);
  }

  .article-title {
    color: color-mod(var(--color-darkgrey) l(-5%));
  }

  .article-excerpt {
    margin: 0 0 1rem;
    font-size: 2rem;
    line-height: 1.4em;
    opacity: 0.6;
  }

  .gh-canvas .article-image {
    grid-column: wide-start / wide-end;
    width: 100%;
    margin: 6vmin 0 0;
  }

  .gh-canvas .article-image img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  @media (max-width: 600px) {
    .article-excerpt {
      font-size: 1.8rem;
    }
  }

  /* -------- */

  /* Content grid
/* ---------------------------------------------------------- */

  /* Canvas creates a multi-column, centered grid which the post
is laid out on top of. Canvas just defines the grid, we don't
use it for applying any other styles. */

  .gh-canvas {
    display: grid;
    grid-template-columns:
      [full-start]
      minmax(4vmin, auto)
      [wide-start]
      minmax(auto, 240px)
      [main-start]
      min(720px, calc(100% - 8vw))
      [main-end]
      minmax(auto, 240px)
      [wide-end]
      minmax(4vmin, auto)
      [full-end];
  }

  .gh-canvas > * {
    grid-column: main-start / main-end;
  }

  .kg-width-wide {
    grid-column: wide-start / wide-end;
  }

  .kg-width-full {
    grid-column: full-start / full-end;
  }

  .kg-width-full img {
    width: 100%;
  }

  /* Content
/* ---------------------------------------------------------- */

  /* Content refers to styling all page and post content that is
created within the Ghost editor. The main content handles
headings, text, images and lists. We deal with cards lower down. */

  /* Default vertical spacing */
  .gh-content > * + * {
    margin-top: 4vmin;
    margin-bottom: 0;
  }

  /* [id] represents all headings h1-h6, reset all margins */
  .gh-content > [id] {
    margin: 0;
    color: var(--color-darkgrey);
  }

  /* Add back a top margin to all headings, unless a heading
is the very first element in the post content */
  .gh-content > [id]:not(:first-child) {
    margin: 2em 0 0;
  }

  /* Add a small margin between a heading and anything after it */
  .gh-content > [id] + * {
    margin-top: 1.5rem !important;
  }

  /* A larger margin before/after HRs and blockquotes */
  .gh-content > hr,
  .gh-content > blockquote {
    position: relative;
    margin-top: 6vmin;
  }
  .gh-content > hr + *,
  .gh-content > blockquote + * {
    margin-top: 6vmin !important;
  }

  /* Now the content typography styles */
  .gh-content a {
    color: var(--ghost-accent-color);
    text-decoration: underline;
    word-break: break-word;
  }

  .gh-content > blockquote,
  .gh-content > ol,
  .gh-content > ul,
  .gh-content > dl,
  .gh-content > p {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 2.1rem;
    line-height: 1.6em;
  }

  .gh-content > ul,
  .gh-content > ol,
  .gh-content > dl {
    padding-left: 1.9em;
  }

  .gh-content > blockquote {
    position: relative;
    font-style: italic;
    padding: 0;
  }

  .gh-content > blockquote::before {
    content: "";
    position: absolute;
    left: -1.5em;
    top: 0;
    bottom: 0;
    width: 0.3rem;
    background: var(--ghost-accent-color);
  }

  .gh-content :not(pre) > code {
    vertical-align: middle;
    padding: 0.15em 0.4em 0.15em;
    border: #e1eaef 1px solid;
    font-weight: 400 !important;
    font-size: 0.9em;
    line-height: 1em;
    color: #15171a;
    background: #f0f6f9;
    border-radius: 0.25em;
  }

  .gh-content pre {
    overflow: auto;
    padding: 16px 20px;
    color: var(--color-wash);
    font-size: 1.4rem;
    line-height: 1.5em;
    background: var(--color-darkgrey);
    border-radius: 5px;
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.4);
  }

  @media (max-width: 650px) {
    .gh-content blockquote,
    .gh-content ol,
    .gh-content ul,
    .gh-content dl,
    .gh-content p {
      font-size: 1.7rem;
    }

    .gh-content blockquote::before {
      left: -4vmin;
    }
  }

  /* Cards
/* ---------------------------------------------------------- */

  /* Cards are dynamic blocks of content which appear within Ghost
posts, for example: embedded videos, tweets, galleries, or
specially styled bookmark links. We add extra styling here to
make sure they look good, and are given a bit of extra spacing. */

  /* Add extra margin before/after any cards,
except for when immediately preceeded by a heading */
  .gh-content :not(.kg-card):not([id]) + .kg-card {
    margin-top: 6vmin;
    margin-bottom: 0;
  }
  .gh-content .kg-card + :not(.kg-card) {
    margin-top: 6vmin;
    margin-bottom: 0;
  }

  /* This keeps small embeds centered */
  .kg-embed-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  /* This keeps small iamges centered */
  .kg-image-card img {
    margin: auto;
  }

  /* Captions */
  figcaption {
    padding: 1.5rem 1.5rem 0;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.4em;
  }
  figcaption strong {
    color: rgba(0, 0, 0, 0.8);
  }
  figcaption a {
    color: var(--ghost-accent-color);
  }

  /* Highly specific styles for traditional Instagram embeds */
  iframe.instagram-media {
    margin-top: 6vmin !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
  }

  iframe.instagram-media + script + :not([id]) {
    margin-top: 6vmin;
  }

  /* Galleries
/* ---------------------------------------------------------- */

  /* When there galleries are mixed with images, reduce margin
between them, so it looks like 1 big gallery */
  .kg-image-card + .kg-gallery-card,
  .kg-gallery-card + .kg-image-card,
  .kg-gallery-card + .kg-gallery-card {
    margin-top: 0.75em;
  }

  .kg-image-card.kg-card-hascaption + .kg-gallery-card,
  .kg-gallery-card.kg-card-hascaption + .kg-image-card,
  .kg-gallery-card.kg-card-hascaption + .kg-gallery-card {
    margin-top: 1.75em;
  }

  .kg-gallery-container {
    position: relative;
  }

  .kg-gallery-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .kg-gallery-image img {
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
  }

  .kg-gallery-row:not(:first-of-type) {
    margin: 0.75em 0 0 0;
  }

  .kg-gallery-image:not(:first-of-type) {
    margin: 0 0 0 0.75em;
  }

  /* Bookmark Cards
/* ---------------------------------------------------------- */

  /* These are styled links with structured data, similar to a
Twitter card. These styles roughly match what you see in the
Ghost editor. */

  .kg-bookmark-card,
  .kg-bookmark-publisher {
    position: relative;
    width: 100%;
  }

  .kg-bookmark-container,
  .kg-bookmark-container:hover {
    display: flex;
    color: currentColor;
    font-family: var(--font-sans-serif);
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 5px;
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.4);
    overflow: hidden;
  }

  .kg-bookmark-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-basis: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20px;
  }

  .kg-bookmark-title {
    font-size: 1.5rem;
    line-height: 1.4em;
    font-weight: 600;
    color: #15171a;
  }

  .kg-bookmark-description {
    display: -webkit-box;
    font-size: 1.4rem;
    line-height: 1.5em;
    margin-top: 3px;
    color: #626d79;
    font-weight: 400;
    max-height: 44px;
    overflow-y: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .kg-bookmark-metadata {
    display: flex;
    align-items: center;
    margin-top: 22px;
    width: 100%;
    color: #394047;
    font-size: 1.4rem;
    font-weight: 500;
  }

  .kg-bookmark-icon {
    width: 20px;
    height: 20px;
    margin-right: 6px;
  }

  .kg-bookmark-author,
  .kg-bookmark-publisher {
    display: inline;
  }

  .kg-bookmark-publisher {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 240px;
    white-space: nowrap;
    display: block;
    line-height: 1.65em;
  }

  .kg-bookmark-metadata > span:nth-of-type(2) {
    color: #626d79;
    font-weight: 400;
  }

  .kg-bookmark-metadata > span:nth-of-type(2):before {
    content: "•";
    color: #394047;
    margin: 0 6px;
  }

  .kg-bookmark-thumbnail {
    position: relative;
    flex-grow: 1;
    min-width: 33%;
  }

  .kg-bookmark-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0 4px 4px 0;
  }

  /* Card captions
/* ---------------------------------------------------------- */

  .kg-width-full.kg-card-hascaption {
    display: grid;
    grid-template-columns: inherit;
  }

  .kg-width-wide.kg-card-hascaption img {
    grid-column: wide-start / wide-end;
  }
  .kg-width-full.kg-card-hascaption img {
    grid-column: 1 / -1;
  }

  .kg-width-full.kg-card-hascaption figcaption {
    grid-column: main-start / main-end;
  }

  .article-comments {
    margin: 6vmin 0 0 0;
  }

  /* -----old------ */

  .footnotes-sep {
    margin-bottom: 30px;
  }

  .footnotes {
    font-size: 1.5rem;
  }

  .footnotes p {
    margin: 0;
  }

  .footnote-backref {
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  /* Tables */
  .post-full-content table {
    display: inline-block;
    overflow-x: auto;
    margin: 0.5em 0 2.5em;
    max-width: 100%;
    width: auto;
    border-spacing: 0;
    border-collapse: collapse;
    font-family: var(--font-sans-serif);
    font-size: 1.6rem;
    white-space: nowrap;
    vertical-align: top;
  }

  .post-full-content table {
    -webkit-overflow-scrolling: touch;
    background: radial-gradient(
          ellipse at left,
          rgba(0, 0, 0, 0.2) 0%,
          rgba(0, 0, 0, 0) 75%
        )
        0 center,
      radial-gradient(
          ellipse at right,
          rgba(0, 0, 0, 0.2) 0%,
          rgba(0, 0, 0, 0) 75%
        )
        100% center;
    background-attachment: scroll, scroll;
    background-size: 10px 100%, 10px 100%;
    background-repeat: no-repeat;
  }

  .post-full-content table td:first-child {
    background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    background-size: 20px 100%;
    background-repeat: no-repeat;
  }

  .post-full-content table td:last-child {
    background-image: linear-gradient(
      to left,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    background-position: 100% 0;
    background-size: 20px 100%;
    background-repeat: no-repeat;
  }

  .post-full-content table th {
    color: var(--color-darkgrey);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-align: left;
    text-transform: uppercase;
    background-color: color-mod(var(--color-wash) l(+4%));
  }

  .post-full-content table th,
  .post-full-content table td {
    padding: 6px 12px;
    border: color-mod(var(--color-wash) l(-1%) s(-5%)) 1px solid;
  }
</style>
