---
import FeatureImage from "./FeatureImage.astro";
import type { Settings, PostOrPage } from "@matthiesenxyz/astro-ghostcms/api";
export type Props = {
  page: PostOrPage;
  settings: Settings;
  pageClass?: string;
};
const { page, settings, pageClass } = Astro.props as Props;
---

<main id="site-main" class="site-main">
  <article class={`article page ${pageClass}`}>
    <header class="article-header gh-canvas">
      {page.feature_image && (
        <FeatureImage
          image={page.feature_image}
          alt={page.feature_image_alt ? page.feature_image_alt : page.title}
          caption={page.feature_image_caption || ""}
          settings={settings}
        />
      )}
    </header>

    <section class="gh-content gh-canvas">
      <h1 class="article-title">{page.title}</h1>
      <Fragment set:html={page.html} />
    </section>
  </article>
</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%;
  }

  /* 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>