@layer block {}

/*** tag-solutions.hbs ***/
@layer block.solutions {
  .b-solutions-section {
    display: flex;
    padding-block: clamp(4rem, 8vi, 6rem); /* 96px -> 64px */
    flex-direction: column;
    gap: clamp(2rem, 5vi, 4rem); /* 64px -> 32px */
  }
  .b-featured {
    display: flex;
    flex-wrap: wrap;
    min-inline-size: 20rem;
    align-items: start;
    gap: clamp(1rem, 3vi ,2rem);
  }
  .featured__image-area {
    min-inline-size: 20rem;
    flex: 824 1 0;
    border-radius: 1rem;
    overflow: hidden;
  }
  .featured__image-area img {
    display: block;
    max-inline-size: 100%;
    min-inline-size: 20rem;
    object-fit: cover;
    object-position: 50%;
    aspect-ratio: 2/1;
    @media (width <= 1000px) {
      aspect-ratio: 343.00/228.67;
    }
  }
  .featured__card-content {
    display: flex;
    flex: 360 1 0;
    inline-size: 100%;
    min-inline-size: 20rem;
    flex-direction: column;
    align-items: start;
    gap: 1.5rem;
  }
  .featured__heading-subheading {
    display: flex;
    inline-size: 100%;
    flex-direction: column;
    align-items: start;
    gap: 1rem;
    @media (width <= 375px) {
      gap: 0.5rem;
    }
  }
  .featured__subheading {
    text-decoration: none;
    color: var(--text-brand-secondary);;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.42857;
  }
  .featured__heading-text {
    display: flex;
    inline-size: 100%;
    flex-direction: column;
    align-items: start;
    gap: 0.5rem;
    @media (width <= 375px) {
      gap: 0.25rem;
    }
  }
  .featured__heading-icon {
    display: flex;
    inline-size: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
  .featured__heading a {
    display: block;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.33333;
    @media (width <= 375px) {
      font-size: 1.125rem;
      line-height: 1.55556;
    }
  }
  .featured__supporting {
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.50;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    @media (width <= 375px) {
      -webkit-line-clamp: 2;
    }
  }
  .b-solutions {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 3rem;
    @media (width <= 375px) {
      gap: 2rem;
    }
  }
  .solutions__heading-tabs-content {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.33333;
  }
  .solutions__post-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2rem;
  } 
  .solutions__posts {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 2rem;
    & > * {flex:1}
  }
  .solutions__blog-post-card {
    max-inline-size: 24rem;
    min-inline-size: 20rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1rem;
  }
  .solutions__image-area {
    border-radius: 0.5rem;
    overflow: hidden;
  }
  .solutions__image-area img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    object-fit: cover;
    object-position: 50%;
    aspect-ratio: 3/2;
  }
  .solutions__blog-content {
    display: flex;
    inline-size: 100%;
    flex-direction: column;
    align-items: start;
    gap: 1.5rem;
  }
  .solutions__heading-subheading {
    display: flex;
    inline-size: 100%;
    flex-direction: column;
    align-items: start;
    gap: 0.5rem;
  }
  .solutions__subheading {
    display: block;
    text-decoration: none;
    color: var(--text-brand-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.42857;
  }
  .solutions__heading-text {
    display: flex;
    inline-size: 100%;
    flex-direction: column;
    align-items: start;
    gap: 0.25rem;
  }
  .solutions__heading-icon {
    display: flex;
    inline-size: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
  .solutions__heading a {
    display: block;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.55556;
  }
  /* .solutions__icon-wrap {} */
  .arrow-up-right {
    color: var(--fg-quaternary);
  }
  .solutions__supporting {
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.50;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    @media (width <= 375px) {
      -webkit-line-clamp: 2;
    }
  }

} /* end of @layer block.solutions */

/*** index.hbs ***/
@layer block.latest {
  .b-latest-section {
    display: flex;
    padding-block: clamp(4rem, 8vi, 6rem); /* 96px -> 64px */
    flex-direction: column;
    gap: 4rem;
  }
  .latest__header-content {
    inline-size: 100%;
    display: flex;
    justify-content: space-between;
    align-items: start;
    row-gap: 2rem;
    flex-wrap: wrap;
  }
  .latest__heading-supporting {
    display: flex;
    max-inline-size: 48rem;
    flex-direction: column;
    gap: 1.25rem;
    @media (width <= 375px) {
      gap: 1rem;
    }
  }
  .latest__heading {
    color: var(--text-primary);
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.22222;
    letter-spacing: -0.02em;
    @media (width <= 375px) {
      font-size: 1.875rem;
      line-height: 1.26667;
      letter-spacing: initial;
    }
  }
  .latest__supporting {
    color: var(--text-tertiary);
    font-size: 1.25rem;
    line-height: 1.50;
    @media (width <= 375px) {
      font-size: 1.125rem;
      line-height: 1.55556;
    }
  }
  .latest__actions {
    @media (width <= 835px) {
      display: none;
    }
  }
  .latest__button {
    display: block;
    text-decoration: none;
    padding-block: calc(0.75rem - 2px);
    padding-inline: calc(1.125rem - 2px);

    border-radius: 0.5rem;
    border: 2px solid light-dark(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12));
    background-color: light-dark(#7F56D9, #7F56D9);

    /* Shadows/shadow-xs-skeuomorphic */
    box-shadow: 0 0 0 1px light-dark(rgba(10, 13, 18, 0.18), rgba(12, 14, 18, 0.18)) inset, 
    0 -2px 0 0 light-dark(rgba(10, 13, 18, 0.05), rgba(12, 14, 18, 0.05)) inset, 
    0 1px 2px 0 light-dark(rgba(10, 13, 18, 0.05), rgba(255, 255, 255, 0));
  }
  .latest__text-padding {
    padding-inline: 0.125rem;
  }
  .latest__text {
    color: var(--text-white);
    font-weight: 600;
    line-height: 1.50;
  }

} /* end of @layer block.latest */

/*** post tag ***/
@layer block.post-tag {
  .b-post-tag {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    align-content: start;
    gap: 0.5rem;
    align-self: stretch;
  }
  .post-tag__text {
    display: block;
    max-inline-size: fit-content;
    text-decoration: none;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.42857;
  }
  .post-tag__badge {
    padding-block: calc(0.125rem - 1px);
    padding-inline: calc(0.625rem - 1px);
    border-radius: 9999px;
    border: 1px solid;
    
  }
/* For The Tag Page */
  .post-tag__badge--about {
  color: var(--utility-gray-blue-700);
  background-color: var(--utility-gray-blue-50);
  border-color: var(--utility-gray-blue-200);
}
  .post-tag__badge--challenges {
  color: var(--utility-indigo-700);
  background-color: var(--utility-indigo-50);
  border-color: var(--utility-indigo-200);
}
  .post-tag__badge--category {
  color: var(--utility-blue-light-700);
  background-color: var(--utility-blue-light-50);
  border-color: var(--utility-blue-light-200);
}
  .post-tag__badge--tag {
  color: var(--utility-brand-700);
  background-color: var(--utility-brand-50);
  border-color: var(--utility-brand-200);
}
/* For The Solution Page */
  .post-tag__badge--html-css {
  color: var(--utility-purple-700);
  background-color: var(--utility-purple-50);
  border-color: var(--utility-purple-200);
}
  .post-tag__badge--javascript {
  color: var(--utility-orange-700);
  background-color: var(--utility-orange-50);
  border-color: var(--utility-orange-200);
}
  .post-tag__badge--api {
  color: var(--utility-pink-700);
  background-color: var(--utility-pink-50);
  border-color: var(--utility-pink-200);
}


} /* end of @layer block.post-tag */

/*** header.hbs ***/
@layer block.header {
  .b-header-section {
    /* 96px -> 64px */
    padding-block-start: clamp(4rem, 8vi, 6rem);
    text-align: center;
    text-wrap: pretty;
  }
  /* .header__content {} */
  .header__heading-supporting {
    max-inline-size: 48rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-inline: auto;
    @media (width <= 375px) {
      gap: 1rem;
    }
  }
  .header__heading-subheading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .header__subheading {
    color: var(--text-brand-secondary);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    @media (width <= 375px) {
      font-size: 0.875rem;
      line-height: 1.428579;
    }
  }
  .header__heading {
    color: var(--text-primary);
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    @media (width <= 375px) {
      font-size: 2.25rem;
      line-height: 1.2222299;
    }
  }
  .header__supporting {
    color: var(--text-tertiary);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    @media (width <= 375px) {
      font-size: 1.125rem;
      line-height: 1.555569;
    }
  }

} /* end of @layer block.header */

/*** navigation.hbs ***/
@layer block.navigation {
  .b-navigation-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.125rem;
    & a {display: block; text-decoration: none;}
    & ul {list-style: none;}
    & li {list-style: none;}
  }
  .nav__content {
    display: flex;
    align-items: center;
    gap: 1.25rem;
  }
  /* .nav__logo {} */
  .nav__logo-wrap > svg {
    fill: var(--text-primary);
  }
  .nav__menu {
    display: flex;
    align-items: center;
    gap: 0.125rem;
  }
  .nav__button {
    padding-inline: 0.375rem;
    padding-block: 0.25rem;
    border-radius: 0.5rem;
  }
  .nav__text-padding {
    padding-inline: 0.125rem;
  }
  .nav__text {
    color: var(--text-secondary);
    font-weight: 600;
    line-height: 1.5;
  }

  .nav__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .nav__action-button {
    padding-inline: calc(1rem - 1px);
    padding-block: calc(0.625rem - 1px);
    border-radius: 0.5rem;
    border: 1px solid light-dark(#D5D7DA, #373A41);
    background-color: var(--bg-primary);
    /* Shadows/shadow-xs-skeuomorphic */
    box-shadow: 
    0 0 0 1px light-dark(rgba(10, 13, 18, 0.18), rgba(12, 14, 18, 0.18)) inset, 
    0 -2px 0 0 light-dark(rgba(10, 13, 18, 0.05), rgba(12, 14, 18, 0.05)) inset, 
    0 1px 2px 0 light-dark(rgba(10, 13, 18, 0.05), #fff);
  }
  .nav__login {
    color: var(--text-secondary);
  }
  .nav__sign-up {
    color: var(--text-white);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: light-dark(#7F56D9, #7F56D9);
  }
  .nav__action-text-padding {
    padding-inline: 0.125rem;
  }
  .nav__action-text {
    font-weight: 600;
    line-height: 1.5;
  }
} /* end of @layer block.navigation */

/*** page-references.hbs ***/
@layer block.references {
  .b-references-section {
    padding-block: clamp(4rem, 8vi, 6rem); /* 96px -> 64px */
  }
  .references__tag-list {
    /* inline-size: fit-content; */
    /* display: flex; */
    /* padding-inline-start: 0.5rem; */
    /* flex-direction: column; */
    /* align-items: center; */
    /* gap: 0.75rem; */
    /* & > a { */
      /* display: block; */
      /* text-decoration: none; */
    /* } */
  }
    .tag-styles {
    max-inline-size: fit-content;
    margin-inline: auto;

    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }
  .tag-category-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
} /* end of @layer block.references */

/*** post.hbs ***/
@layer block.post {
  .b-post-header-section {
    padding-block-start: clamp(4rem, 8vi, 6rem);
    text-align: center;
    text-wrap: pretty;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
  }
  .post-header__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  /* .post-header__image-area {} */
  .post-header__image-area > img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    aspect-ratio: 19/10;
  }
  .post-header__heading-supporting {
    max-inline-size: 48rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-inline: auto;
    @media (width <= 375px) {
      gap: 1rem;
    }
  }
  .post-header__heading-subheading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .post-header__subheading {
    color: var(--text-brand-secondary);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    @media (width <= 375px) {
      font-size: 0.875rem;
      line-height: 1.428579;
    }
  }
  .post-header__heading {
    color: var(--text-primary);
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    @media (width <= 375px) {
      font-size: 2.25rem;
      line-height: 1.2222299;
    }
  }
  .post-header__supporting {
    color: var(--text-tertiary);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    @media (width <= 375px) {
      font-size: 1.125rem;
      line-height: 1.555569;
    }
  }
  /* .editor-content-footer {} */
  .editor-footer__author-link {
    font-style: normal;
    padding-block-start: 1.5rem;
    padding-block-end: 1.5rem;
    display: flex;
    flex-wrap: wrap;      
    justify-content: space-between;
    align-items: start;
    align-content: start;
    row-gap: 1.5rem;
    @media (width <= 375px) {
      padding-block-end: 0;
    }
  }
  /* .editor-footer__avatar-label {} */
  .editor-footer__text-supporting {
    display: flex;
    flex-direction: column;
    align-items: start;
  }
  .editor-footer__text {
    display: block;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.5;
  }
  .editor-footer__supporting {
    line-height: 1.5;
  }
} /* end of @layer block.post */