/* blog.liquid */

.first-blogs-section {
  grid-template-areas: 'one one one one one one . two two two two .';
  
  >article:nth-child(1) {
    grid-area: one;
  }
  >article:nth-child(2) {
    grid-area: two;
  }
}

.second-blogs-section {
  grid-template-areas: '. . three three . . four four four four four four';

  >article:nth-child(1) {
    grid-area: three;
  }
  >article:nth-child(2) {
    grid-area: four;
  }
}

.third-blogs-section {
  grid-template-areas: '. five five five five . six six six six six six';

  >article:nth-child(1) {
    grid-area: five;
  }
  >div:nth-child(2) {
    grid-area: six;
  }
}

.blogs-section {
  padding: 0 var(--base-side-padding);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--base-padding);
  align-items: start;
  overflow: hidden;

  .blog-article {
    display: grid;
    grid-template-rows: 1fr min-content;
    align-items: start;
    height: auto;
    max-height: 100%;
    overflow: hidden;
  }
  
  .blog-article-image {
    display: block;
    width: 100%;
    max-height: 100%;
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
  }

  .blog-article-content {
    margin-top: var(--title-padding);
    display: flex;
    flex-direction: column;
    gap: var(--title-text-padding);
  }

  .blog-article-title {
    text-align: center;
  }

  .three-column-blogs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--base-padding);
  }
}

/* article.liquid */

.article-section {
  min-height: 30vh;
  padding-left: var(--base-side-padding);
  padding-right: var(--base-side-padding);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--base-padding);
  justify-items: center;
  align-items: center;
  position: relative;

  .image-section-wrapper {
    aspect-ratio: 4/5;
    width: 66.6%;
  }

  .image-section-wrapper[data-image-format="5/4"] {
    aspect-ratio: 5/4;
  }

  .image-section-wrapper[data-image-format="1/1"] {
    aspect-ratio: 1/1;
  }

  .image-section-wrapper[data-image-size="large"] {
    width: 100%;
  }

  .text-section-wrapper {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    gap: var(--line-height-body-text);
    justify-items: center;
    width: 100%;
    height: 100%;

    .top-container {
      width: 50%;
      text-align: center;
    }

    .mid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--base-padding);
      align-items: center;
      width: 100%;

      .mid-right {
        text-align: right;
      }
    }
    
    .bot-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: var(--base-padding);
      align-items: end;
      width: 100%;
  
      .bot-center {
        text-align: center;
      }

      .bot-right {
        text-align: right;
      }
    }

    .top-container > div, .mid-left > div, .mid-right > div, .bot-left > div, .bot-center > div, .bot-right > div {
      h1, h2, h3 {
        font-size: var(--font-size-body-text);
        font-weight: var(--font-weight-body-text);
        line-height: var(--line-height-body-text);
      }
    }
  }
}

@media only screen and (max-width: 768px) and (-webkit-max-device-pixel-ratio: 3) {
  .blogs-section {
    display: flex;
    flex-direction: column;
    gap: var(--smaller-section-margin);
    
    .blog-article {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;

      .blog-article-content {
        width: 100%;
      }
    }
  }

  .first-blogs-section {
    >article:nth-child(2) {
      width: 100%;
      .blog-article-image {
        max-width: var(--two-column-width);
      }
    }
  }

  .second-blogs-section {
    padding: 0;

    >article:nth-child(1) {
      .blog-article-content {
        padding-right: var(--base-side-padding);
        padding-left: var(--base-side-padding);
      }
    }

    >article:nth-child(2) {
      width: 100%;
      padding-right: var(--base-side-padding);
      padding-left: var(--base-side-padding);

      .blog-article-image {
        max-width: var(--two-column-width);
      }
    }
  }

  .third-blogs-section {

    >article:nth-child(1) {
      width: 100%;
    }

    .three-column-blogs {
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--base-padding);
      row-gap: var(--smaller-section-margin);
      >article {
        flex-basis: var(--two-column-width-percent);
      }
      >article:nth-child(3) {
        flex-basis: 100%;
        .blog-article-image {
          max-width: var(--two-column-width);
        }
      }
    }
  }

  .article-section {
    max-height: none;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    padding: 0;

    .image-section-wrapper {
      width: 100%;
      padding: 0 var(--base-side-padding);
    }
    .image-section-wrapper[data-image-size="large"] {
      padding: 0;
    }

    .text-section-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-right: var(--base-side-padding);
      padding-left: var(--base-side-padding);

      .top-container:not(:has(>p)) {
        .top-container:not(:has(>h2)) {
          display: none;
        }
      }
      .mid-container:not(:has(>div)) {
        display: none;
      }
    }

    .image-section-wrapper:has(~ .text-section-wrapper) {
      margin-top: var(--line-height-body-text);
    }
  }
}