/* ==========================================================
   GLOWUP ONLINE - BLOG COLLECTION

   Collection styling for the native Squarespace Basic Grid,
   plus metadata-driven heroes and article rails on blog posts.
========================================================== */

body.collection-type-blog-basic-grid.view-item:not(.sqs-edit-mode-active) {

  /* Keep wide native blog posts aligned with the site's framed container. */
  #siteWrapper {
    width: 100%;
    max-width: var(--sqs-site-max-width);
  }

  &.glowup-blog-hero-mounted {

    .blog-item-wrapper article.h-entry {
      padding: 0 !important;
    }

    .blog-item-inner-wrapper {
      width: 100%;
      max-width: none;
    }

    .glowup-blog-hero {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      min-height: clamp(560px, 46vw, 650px);
      border-bottom: 1px solid var(--black);
    }

    .glowup-blog-hero__media {
      min-width: 0;
      padding: 24px;
      background: var(--accent);
      box-sizing: border-box;
    }

    .glowup-blog-hero__image {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
    }

    .blog-item-top-wrapper {
      display: flex !important;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      min-width: 0;
      margin: 0 !important;
      padding: 56px 48px;
      background: var(--siteBackgroundColor);
      text-align: left;
      box-sizing: border-box;
    }

    .blog-item-meta-wrapper {
      order: 1;
      display: flex !important;
      align-items: center;
      gap: 16px;
      width: 100%;
      margin: 0 0 34px !important;
      color: var(--black);
      font-family: var(--meta-font-font-family, monospace);
      font-size: 0.65rem;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.05em;
      text-transform: uppercase;

      &::after {
        content: "";
        flex: 1;
        order: 3;
        border-top: 1px dotted hsla(var(--black-hsl), 0.45);
      }
    }

    .blog-meta-item--author {
      display: none !important;
    }

    .blog-item-author-date-wrapper {
      display: block !important;
      flex: 0 0 auto;
      order: 1;
    }

    .blog-meta-item--categories {
      display: block !important;
      flex: 0 0 auto;
      order: 2;

      &::before {
        content: "\2022";
        margin-right: 10px;
      }
    }

    .blog-item-category {
      color: inherit !important;
      font: inherit;
      letter-spacing: inherit;
      text-decoration: none !important;
    }

    .blog-meta-item--date {
      display: block;
      color: inherit;
      font: inherit;
      letter-spacing: inherit;

      &::after {
        content: none !important;
        display: none !important;
      }
    }

    .blog-item-title {
      order: 2;
      width: 100%;
      margin: 0 !important;
    }

    .entry-title {
      margin: 0 !important;
      font-family: var(--heading-font-font-family);
      font-size: 3.4rem;
      font-weight: var(--heading-font-font-weight, 400);
      line-height: 0.98;
      letter-spacing: 0;
      text-align: left;
    }

    .glowup-blog-hero__excerpt {
      order: 3;
      max-width: 560px;
      margin: 28px 0 0;
    }

  }

  &.glowup-blog-layout-mounted {

    .blog-item-content-wrapper {
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box;
    }

    .glowup-blog-layout {
      display: grid;
      grid-template-columns: 260px minmax(0, 1fr) 290px;
      align-items: stretch;
      width: 100%;
    }

    .glowup-blog-layout--no-toc {
      grid-template-columns: minmax(0, 1fr) 290px;
    }

    .glowup-blog-toc {
      min-width: 0;
      padding: 64px 32px;
      border-right: 1px solid var(--black);
      box-sizing: border-box;
    }

    .glowup-blog-toc__sticky {
      position: sticky;
      top: 104px;
      max-height: calc(100vh - 136px);
      overflow-y: auto;
      scrollbar-width: thin;
    }

    .glowup-blog-toc__toggle {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      margin: 0 0 32px;
      padding: 0;
      color: var(--black);
      background: transparent;
      border: 0;
      border-radius: 0;
      font-family: var(--meta-font-font-family, monospace);
      font-size: 0.7rem;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.05em;
      text-align: left;
      text-transform: uppercase;
      pointer-events: none;
    }

    .glowup-blog-toc__label {
      flex: 0 0 auto;
    }

    .glowup-blog-toc__rule {
      flex: 1;
      border-top: 1px dotted hsla(var(--black-hsl), 0.45);
    }

    .glowup-blog-toc__chevron {
      display: none;
    }

    .glowup-blog-toc__nav {
      display: grid;
      gap: 20px;
    }

    .glowup-blog-toc__link {
      color: var(--black);
      font-size: 0.9rem;
      font-weight: 400;
      line-height: 1.35;
      text-decoration: none;
      opacity: 0.48;
      transition: opacity 0.2s ease;
    }

    .glowup-blog-toc__link:hover,
    .glowup-blog-toc__link.is-active {
      opacity: 1;
    }

    .glowup-blog-toc__link.is-active {
      font-weight: 600;
    }

    .glowup-blog-article {
      min-width: 0;
      padding: 64px;
      box-sizing: border-box;
    }

    .glowup-blog-article .blog-item-content {
      width: 100% !important;
      margin: 0 0 54px !important;
    }

    .glowup-blog-article :is(h2, h3) {
      scroll-margin-top: 120px;
    }

    .glowup-blog-promos {
      display: flex;
      flex-direction: column;
      gap: 16px;
      min-width: 0;
      padding: 16px;
      border-left: 1px solid var(--black);
      box-sizing: border-box;
    }

    .glowup-blog-promo {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 480px;
      padding: 68px 28px 36px;
      border: 1px solid var(--black);
      border-radius: 8px;
      box-sizing: border-box;
      overflow: hidden;
    }

    .glowup-blog-promo--dark {
      color: var(--white);
      background: var(--black);

      &::before {
        content: "";
        position: absolute;
        inset: 8px;
        border: 1px solid hsla(var(--white-hsl), 0.12);
        border-radius: 6px;
        pointer-events: none;
      }
    }

    .glowup-blog-promo--light {
      color: var(--black);
      background: var(--siteBackgroundColor);
    }

    .glowup-blog-promo__eyebrow {
      position: absolute;
      top: 20px;
      right: -1px;
      margin: 0;
      padding: 9px 14px;
      color: var(--white);
      background: var(--black);
      border-radius: 2px 0 0 2px;
      font-family: var(--meta-font-font-family, monospace);
      font-size: 0.65rem;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .glowup-blog-promo__title {
      margin: 0 0 30px !important;
      color: inherit !important;
      font-family: var(--heading-font-font-family);
      font-size: 2.2rem;
      font-weight: var(--heading-font-font-weight, 400);
      line-height: 1.05;
      letter-spacing: 0;
    }

    .glowup-blog-promo__copy {
      margin: 0 0 36px;
      color: inherit !important;
      font-size: 0.95rem;
      line-height: 1.55;
    }

    .glowup-blog-promo__link {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      justify-content: center;
      gap: 8px;
      min-height: 42px;
      margin-top: auto;
      padding: 10px 18px;
      color: inherit;
      background: transparent;
      border: 1px solid currentColor;
      border-radius: 999px;
      font-size: 0.7rem;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.03em;
      text-decoration: none;
      text-transform: uppercase;
      box-sizing: border-box;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .glowup-blog-promo--dark .glowup-blog-promo__link:hover {
      color: var(--black);
      background: var(--white);
    }

    .glowup-blog-promo--light .glowup-blog-promo__link:hover {
      color: var(--white);
      background: var(--black);
    }
  }
}

@media screen and (max-width: 1199px) and (min-width: 768px) {
  body.collection-type-blog-basic-grid.view-item.glowup-blog-hero-mounted:not(.sqs-edit-mode-active) {

    .blog-item-top-wrapper {
      padding: 48px 36px;
    }

    .entry-title {
      font-size: 2.8rem;
    }
  }

  body.collection-type-blog-basic-grid.view-item.glowup-blog-layout-mounted:not(.sqs-edit-mode-active) {

    .glowup-blog-layout,
    .glowup-blog-layout--no-toc {
      display: block;
    }

    .glowup-blog-toc {
      padding: 24px 36px;
      border-right: 0;
      border-bottom: 1px solid var(--black);
    }

    .glowup-blog-toc__sticky {
      position: static;
      max-height: none;
      overflow: visible;
    }

    .glowup-blog-toc__toggle {
      margin: 0;
      pointer-events: auto;
      cursor: pointer;
    }

    .glowup-blog-toc__chevron {
      display: block;
      width: 8px;
      height: 8px;
      border-right: 1px solid currentColor;
      border-bottom: 1px solid currentColor;
      transform: rotate(45deg);
      transition: transform 0.2s ease;
    }

    .glowup-blog-toc.is-open .glowup-blog-toc__chevron {
      transform: rotate(225deg);
    }

    .glowup-blog-toc__nav {
      display: none;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px 28px;
      padding-top: 24px;
    }

    .glowup-blog-toc.is-open .glowup-blog-toc__nav {
      display: grid;
    }

    .glowup-blog-article {
      padding: 56px 36px;
    }

    .glowup-blog-promos {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: 24px 36px 36px;
      border-top: 1px solid var(--black);
      border-left: 0;
    }

    .glowup-blog-promo {
      min-height: 420px;
    }
  }
}

@media screen and (max-width: 767px) {
  body.collection-type-blog-basic-grid.view-item.glowup-blog-hero-mounted:not(.sqs-edit-mode-active) {

    .glowup-blog-hero {
      grid-template-columns: minmax(0, 1fr);
      min-height: 0;
    }

    .glowup-blog-hero__media {
      aspect-ratio: 4 / 3;
      padding: 16px;
    }

    .blog-item-top-wrapper {
      padding: 38px 20px 46px;
    }

    .blog-item-meta-wrapper {
      gap: 12px;
      margin-bottom: 26px !important;
    }

    .entry-title {
      font-size: 2.4rem;
      line-height: 1;
    }

    .glowup-blog-hero__excerpt {
      margin-top: 20px;
    }

    .item-pagination-link--next .item-pagination-icon {
      padding-left: 4px;
    }
  }

  body.collection-type-blog-basic-grid.view-item.glowup-blog-layout-mounted:not(.sqs-edit-mode-active) {

    .glowup-blog-layout,
    .glowup-blog-layout--no-toc {
      display: block;
    }

    .glowup-blog-toc {
      padding: 22px 20px;
      border-right: 0;
      border-bottom: 1px solid var(--black);
    }

    .glowup-blog-toc__sticky {
      position: static;
      max-height: none;
      overflow: visible;
    }

    .glowup-blog-toc__toggle {
      margin: 0;
      pointer-events: auto;
      cursor: pointer;
    }

    .glowup-blog-toc__chevron {
      display: block;
      width: 8px;
      height: 8px;
      border-right: 1px solid currentColor;
      border-bottom: 1px solid currentColor;
      transform: rotate(45deg);
      transition: transform 0.2s ease;
    }

    .glowup-blog-toc.is-open .glowup-blog-toc__chevron {
      transform: rotate(225deg);
    }

    .glowup-blog-toc__nav {
      display: none;
      gap: 14px;
      padding-top: 22px;
    }

    .glowup-blog-toc.is-open .glowup-blog-toc__nav {
      display: grid;
    }

    .glowup-blog-article {
      padding: 42px 20px;
    }

    .glowup-blog-promos {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      padding: 16px;
      border-top: 1px solid var(--black);
      border-left: 0;
    }

    .glowup-blog-promo {
      min-height: 400px;
      padding: 60px 28px 32px;
    }

    .glowup-blog-promo__title {
      font-size: 2rem;
    }
  }
}

body.collection-type-blog-basic-grid.view-list:not(.sqs-edit-mode-active) {

  /* Featured post Summary Block. The data attribute keeps the published
     section styled until Squarespace exposes the intended section ID. */
  :is(#featured-post, section[data-section-id="6a654f7c181563454ad9b432"]) {

    .content-wrapper,
    .content {
      width: 100% !important;
      max-width: none !important;
      padding-right: 0 !important;
      padding-left: 0 !important;
    }

    .fluid-engine {
      display: block;
      min-height: 0;
    }

    .fe-block {
      position: static;
    }

    .sqs-block {
      padding: 0;
    }

    .summary-block-header {
      display: none;
    }

    .summary-item {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      min-height: clamp(560px, 46vw, 650px);
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;

      &::before,
      &::after {
        content: none !important;
        display: none !important;
      }
    }

    .summary-thumbnail-outer-container {
      float: none !important;
      width: auto !important;
      padding: 24px;
      background: var(--accent);
      box-sizing: border-box;
    }

    .summary-thumbnail-container,
    .summary-thumbnail {
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
    }

    .summary-thumbnail-container {
      padding: 0 !important;
    }

    .summary-thumbnail {
      padding: 0 !important;
      overflow: hidden;
      border-radius: 8px;
    }

    .summary-thumbnail-image {
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover;
    }

    .summary-content {
      display: flex !important;
      float: none !important;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      width: auto !important;
      padding: 56px 48px;
      background: var(--siteBackgroundColor);
      box-sizing: border-box;
    }

    .summary-metadata-container--above-title {
      display: flex;
      align-items: center;
      gap: 16px;
      width: 100%;
      margin: 0 0 34px !important;
      color: var(--black);
      font-family: var(--meta-font-font-family, monospace);
      font-size: 0.65rem;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.05em;
      text-transform: uppercase;

      &::after {
        content: "";
        flex: 1;
        border-top: 1px dotted hsla(var(--black-hsl), 0.45);
      }
    }

    .summary-metadata-container--below-title,
    .summary-metadata-container--below-content {
      display: none !important;
    }

    .summary-title {
      width: 100%;
      margin: 0 0 28px !important;
      font-family: var(--heading-font-font-family);
      font-size: 3.4rem;
      font-weight: var(--heading-font-font-weight, 400);
      line-height: 0.98;
      letter-spacing: 0;
    }

    .summary-title-link {
      color: inherit !important;
      text-decoration: none !important;
    }

    .summary-excerpt {
      max-width: 560px;
      margin: 0 0 54px !important;

      p {
        margin: 0 !important;
      }
    }

    .summary-read-more-link {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 44px;
      margin: 0 !important;
      padding: 10px 22px !important;
      color: var(--black) !important;
      background: transparent;
      border: 1px solid var(--black);
      border-radius: 999px;
      font-size: 0 !important;
      line-height: 1 !important;
      text-decoration: none !important;
      text-transform: uppercase;
      box-sizing: border-box;
      transition: background-color 0.2s ease, color 0.2s ease;

      &::before {
        content: "Read Article";
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.03em;
      }

      &::after {
        content: "\2197";
        display: inline-block !important;
        width: auto !important;
        height: auto !important;
        background: none !important;
        font-size: 1rem;
        line-height: 0.7;
        transform: none !important;
      }

      &:hover {
        color: var(--white) !important;
        background: var(--black);
      }
    }
  }

  /* Remove Squarespace's internal grid inset while preserving the
     section's native top offset beneath the fixed header. */
  .page-section.collection-type-blog-basic-grid {
    border-bottom: 1px solid var(--black);

    .content-wrapper,
    .content {
      width: 100% !important;
      max-width: none !important;
      padding-right: 0 !important;
      padding-left: 0 !important;
    }
  }

  .blog-basic-grid.collection-content-wrapper {
    --blog-columns: 4;
    --blog-column-width: 25%;
    display: grid !important;
    grid-template-columns: repeat(var(--blog-columns), minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;

    /* Keeps column lines visible through an incomplete final row. */
    background-image: linear-gradient(
      to right,
      transparent calc(100% - 0.5px),
      var(--black) calc(100% - 0.5px)
    );
    background-size: var(--blog-column-width) 100%;
    box-shadow: inset -1px 0 var(--siteBackgroundColor);
  }

  .blog-basic-grid--container {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0;
    margin: 0 !important;
    padding: 32px !important;
    border-bottom: 1px solid var(--black);
    box-sizing: border-box;
  }

  .blog-basic-grid--container:nth-child(4n + 1):nth-last-child(-n + 4),
  .blog-basic-grid--container:nth-child(4n + 1):nth-last-child(-n + 4) ~ .blog-basic-grid--container {
    border-bottom: 0;
  }

  .blog-basic-grid--container .image-wrapper {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 22px;
    padding-bottom: 0 !important;
    aspect-ratio: 5 / 6;
    overflow: hidden;
    border-radius: 0 8px 8px 8px;
  }

  .blog-basic-grid--container .image {
    transition: transform 0.45s ease;
  }

  .blog-basic-grid--container:hover .image {
    transform: scale(1.02);
  }

  .blog-article-spacer {
    display: none !important;
  }

  .blog-basic-grid--text {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    margin-top: 28px;
  }

  /* The category already exists in Squarespace's primary metadata.
     Reposition it over the image and suppress unused metadata. */
  .blog-meta-section {
    position: absolute !important;
    top: 32px;
    left: 32px;
    z-index: 2;
    width: auto !important;
    margin: 0 !important;
  }

  .blog-meta-primary {
    display: block;
  }

  .blog-author,
  .blog-date,
  .blog-meta-secondary,
  .blog-meta-delimiter {
    display: none !important;
  }

  .blog-categories-list {
    display: block;
    font-size: 0;
    line-height: 1;
  }

  .blog-categories {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 5px 12px 4px;
    color: var(--white) !important;
    background: var(--black);
    border-radius: 2px 2px 0 0;
    font-family: var(--meta-font-font-family, monospace);
    font-size: 0.65rem !important;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
    text-decoration: none !important;
    text-transform: uppercase;
    box-sizing: border-box;
  }

  .blog-title {
    margin: 0 0 14px !important;
  }

  .blog-title a {
    color: inherit !important;
    text-decoration: none !important;
  }

  .blog-excerpt {
    margin: 0 0 22px !important;
  }

  .blog-excerpt p {
    margin: 0 !important;
  }

  .blog-more-link {
    display: inline-flex !important;
    align-items: center;
    align-self: flex-start;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    margin-top: auto !important;
    padding: 8px 17px !important;
    color: var(--black) !important;
    background: transparent;
    border: 1px solid var(--black);
    border-radius: 999px;
    font-size: 0 !important;
    font-weight: 500;
    line-height: 1 !important;
    letter-spacing: 0.03em;
    text-decoration: none !important;
    text-transform: uppercase;
    box-sizing: border-box;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .blog-more-link::after {
    content: "\2197";
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    font-size: 1rem;
    line-height: 0.7;
    transform: none !important;
  }

  .blog-more-link::before {
    content: "Read Article";
    font-size: 0.7rem;
  }

  .blog-more-link:hover {
    color: var(--white) !important;
    background: var(--black);
  }

  @media screen and (max-width: 1199px) {
    .blog-basic-grid.collection-content-wrapper {
      --blog-columns: 2;
      --blog-column-width: 50%;
    }

    .blog-basic-grid--container {
      padding: 24px !important;
      border-bottom: 1px solid var(--black);
    }

    .blog-meta-section {
      top: 24px;
      left: 24px;
    }

    .blog-basic-grid--container:nth-child(4n + 1):nth-last-child(-n + 4),
    .blog-basic-grid--container:nth-child(4n + 1):nth-last-child(-n + 4) ~ .blog-basic-grid--container {
      border-bottom: 1px solid var(--black);
    }

    .blog-basic-grid--container:nth-child(2n + 1):nth-last-child(-n + 2),
    .blog-basic-grid--container:nth-child(2n + 1):nth-last-child(-n + 2) ~ .blog-basic-grid--container {
      border-bottom: 0;
    }
  }

  @media screen and (max-width: 767px) {
    :is(#featured-post, section[data-section-id="6a654f7c181563454ad9b432"]) {

      .summary-item {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
      }

      .summary-thumbnail-outer-container {
        aspect-ratio: 4 / 3;
        padding: 16px;
      }

      .summary-content {
        padding: 38px 20px 46px;
      }

      .summary-metadata-container--above-title {
        gap: 12px;
        margin-bottom: 26px !important;
      }

      .summary-title {
        margin-bottom: 20px !important;
        font-size: 2.4rem;
        line-height: 1;
      }

      .summary-excerpt {
        margin-bottom: 34px !important;
      }
    }

    .blog-basic-grid.collection-content-wrapper {
      --blog-columns: 1;
      --blog-column-width: 100%;
    }

    .blog-basic-grid--container {
      padding: 20px !important;
      border-bottom: 1px solid var(--black);
    }

    .blog-meta-section {
      top: 20px;
      left: 20px;
    }

    .blog-basic-grid--text {
      margin-top: 22px;
    }

    .blog-basic-grid--container:nth-child(4n + 1):nth-last-child(-n + 4),
    .blog-basic-grid--container:nth-child(4n + 1):nth-last-child(-n + 4) ~ .blog-basic-grid--container,
    .blog-basic-grid--container:nth-child(2n + 1):nth-last-child(-n + 2),
    .blog-basic-grid--container:nth-child(2n + 1):nth-last-child(-n + 2) ~ .blog-basic-grid--container {
      border-bottom: 1px solid var(--black);
    }

    .blog-basic-grid--container:last-child {
      border-bottom: 0;
    }
  }
}