.h1 {
  font-weight: var(--fw-900);
  font-size: var(--fs-1000);
  line-height: 1.14;
}

/* h2 {
  margin-bottom: 0;
  color: var(--tertiary-clr-900);
} */

/* End of Utilities */

/* End of Css Only Carousel */

.wrapper {
  --_max-width: 1600px;

  @media (width <=768px) {
    --_gap: 0px !important;
  }
}

/* Hero */

/* Hero */
.hero-wrapper {
  --_gap: 1.125rem !important;
  padding-block: clamp(1.25rem, 7vw + 1rem, 6rem) 0;
  color: var(--white-clr);
  overflow-x: clip;
  position: relative;
  isolation: isolate;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.87) 83.65%),
      var(--_hero-img) lightgray 50% / cover no-repeat;
  }

  /* &.post-card-main { */
  min-height: 70dvh;
  --_post-card-padding: 2.5rem;
  --_post-category-fs: var(--fs-400);
  /* --_post-title-fs: var(--fs-550); */
  /* overflow: hidden; */
  align-content: end;
  img {
    max-height: 542px;
  }

  img {
    z-index: -2;
    border-radius: 1rem;
    width: 100%;
    object-fit: cover;
  }

  header {
    display: flex;
    flex-direction: column;
  }

  .post-title {
    font-size: var(--_post-title-fs, var(--fs-900));
    max-width: 15ch;
    font-weight: 700;
    line-height: normal;

    @media (width <= 1024px) {
      --_post-title-fs: var(var(--fs-800));
    }
  }

  .post-category {
    order: -1;
    color: #ccc;
    font-size: var(--_post-category-fs, var(--fs-300));
    text-transform: uppercase;
  }

  .post-date {
    margin-block: 1.125rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ccc;
    font-size: 1.125rem;

    span {
      font-size: var(--fs-300);
      color: #aaa;
      font-weight: var(--fw-700);
    }
  }

  .post-tags-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.25rem;
  }

  .post-tags-list {
    display: flex;
    gap: 0.625rem;
  }

  .post-tag {
    text-align: center;
    font-size: var(--fs-300);
    color: var(--text-clr-700);
    background-color: #f2f2f2;
    padding: 0.25rem 1.25rem;
    border-radius: 100vw;
  }
}

.hero-content {
  display: grid;
  grid-template-areas: "stack";

  > * {
    grid-area: stack;
    align-self: end;
  }

  @media (width <=768px) {
    .post-card-body {
      justify-self: center;
      text-align: center;
    }

    .post-tags-wrapper,
    .post-date {
      justify-content: center;
    }
    .post-tags-wrapper {
      padding: 0.875rem 1.25rem;
    }
  }
}
/* End of Hero */

/* Details */
.details-wrapper {
  /* padding-block: 3rem 6.25rem; */
  padding-block: 3rem clamp(3rem, 7vw + 1rem, 6.25rem);
}

.details-content {
  display: grid;
  gap: 3.25rem;
  grid-template-columns: 0.5fr 1.25fr;

  @media (width <= 1024px) {
    .column:last-of-type {
      grid-column: 1 / -1;
      /* grid-template-columns: revert; */
    }
  }
  @media (width <= 768px) {
    grid-template-columns: 1fr;
    .column:first-of-type {
      justify-self: center;
    }
  }

  @media (width > 1024px) {
    grid-template-columns: 0.5fr 1.25fr 0.5fr;
    .post-cards-list {
      grid-template-columns: revert;
    }
  }
}

.details-body {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    scroll-margin-top: 4lh;
  }

  h1 {
    margin-bottom: 1.25rem;
    color: #222;
    font-family: Satoshi;
    font-size: var(--fs-550);
    font-weight: 900;
    max-width: revert;
  }

  h2 {
    margin-bottom: 1.25rem;
    color: #222;
    font-family: Satoshi;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
  }

  p {
    margin-bottom: 1.875rem;
    color: #222;
    text-align: justify;
    font-family: Satoshi;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px; /* 80% */

    color: #444;
    font-family: Satoshi;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
  }
}
/* End of Details */

.wrapper {
  .show-more {
    margin-block: 3.75rem 3.125rem;
    margin-inline: auto;
    padding: 0.625rem 2rem;
    text-transform: initial;
    border: 1px solid var(--_btn-txt-clr);
  }
}

.content {
  @media (width <=1200px) {
    padding-inline: 1.25rem;
  }
}
/* Featured */
.featured-wrapper {
  padding-block: 2.25rem 6.25rem;
}

.blog-header {
  display: flex;
  gap: 2rem;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 2.5rem;

  h2 {
    /* display: inline-block; */
    color: var(--text-clr-700);
    font-size: var(--fs-600);
    font-weight: var(--fw-700);
    letter-spacing: 0.64px;

    &:has(svg) {
      display: flex;
      gap: 1rem;
    }
  }

  a {
    color: #2a3245;
    font-size: var(--fs-425);
    text-decoration: underline;
    transition: text-decoration 300ms ease;

    &:hover {
      text-decoration: none;
    }
  }
}

.post-cards-list {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); */
  grid-template-columns: repeat(4, 1fr);
  gap: 2.375rem;
  gap: var(--fs-650);
  grid-auto-flow: row;
  grid-auto-rows: fit-content(252px);

  li:has(.post-card-main) {
    grid-row: span 2;
    grid-column: span 2;
  }
  /* gap: 1rem; */
  li:has(.post-card-non-stack) {
    grid-column: 1 / span 2;
  }
}

.post-cards-list {
  @media (width <= 1440px) {
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  }
}

.post-card {
  /* width: 100%; */
  display: grid;
  grid-template-areas: "stack";
  isolation: isolate;
  align-items: end;
  color: var(--white-clr);
  position: relative;
  border-radius: 1rem;

  &:not(.post-card-non-stack)::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.87) 83.65%
    );
    border-radius: 1rem;
  }
  /* padding: var(--_post-card-padding, 1.25rem); */

  &.post-card-main {
    --_post-card-padding: 2.5rem;
    --_post-category-fs: var(--fs-400);
    --_post-title-fs: var(--fs-550);
    overflow: hidden;
    align-content: end;
    img {
      max-height: 542px;
    }
  }

  &:not(.post-card-main) {
    .post-category {
      margin-bottom: 0.5rem;
    }

    img {
      max-height: 252px;
    }
  }

  &.post-card-non-stack {
    --_line-clamp: 3;

    grid-column: span 2;
    grid-template-areas: "img content";
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    /* grid-template-columns: 1fr 1fr; */

    img {
      grid-area: img;
    }

    .post-card-body {
      grid-area: content;
    }
  }

  > * {
    grid-area: stack;
  }

  img {
    z-index: -2;
    border-radius: 1rem;
    width: 100%;
    object-fit: cover;
  }

  header {
    display: flex;
    flex-direction: column;
  }

  .post-title {
    font-size: var(--_post-title-fs, var(--fs-425));
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  .post-category {
    order: -1;
    color: #ccc;
    font-size: var(--_post-category-fs, var(--fs-300));
    text-transform: uppercase;
  }

  .post-date {
    margin-block: 1.125rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ccc;
    font-size: 1.125rem;

    span {
      font-size: var(--fs-300);
      color: #aaa;
      font-weight: var(--fw-700);
    }
  }

  .post-tags-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.25rem;
  }

  .post-tags-list {
    display: flex;
    gap: 0.625rem;
  }

  .post-tag {
    text-align: center;
    font-size: var(--fs-300);
    color: var(--text-clr-700);
    background-color: #f2f2f2;
    padding: 0.25rem 1.25rem;
    border-radius: 100vw;
  }
}

.post-card-body {
  padding: var(--_post-card-padding, 1.25rem);
}

/* End of Featured */

.pill-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 3.125rem;
}

.pill-tab {
  min-width: fit-content;
  padding: 0.5rem 1.875rem;
  color: var(--secondary-clr-900);
  background-color: var(--white-clr);
  border-radius: 100vw;
  border: none;

  &.pill-tab-active {
    color: var(--white-clr);
    background-color: var(--secondary-clr-900);
  }
}

/* Latest */
.latest-wrapper {
  background-color: #1a1a1a;
  padding: 6.25rem;

  h2,
  a {
    color: var(--white-clr);
  }
}
/* End of Latest */
/* Trending */
.trending-wrapper {
  padding-top: 6.25rem;
  background-color: #faf9fe;
}
/* End of Trending */

/* All Posts */
.all-posts-wrapper {
  padding-top: 6.25rem;
}
/* End of All Posts */

/* Tags */
.trending-tags-wrapper {
  --_card-list-gap: 2.375rem;

  padding-block: 5rem;
  background-color: #faf9fe;
}

.round-btns {
  width: fit-content;
  display: flex;
  gap: 1.5rem;

  &.center {
    margin-top: 1rem;
    margin-inline: auto;
  }

  .prev-btn,
  .next-btn {
    cursor: pointer;
    width: 3rem;
    height: 3rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border: none;
    color: var(--tertiary-clr-900);
    background-color: var(--white-clr);

    &:hover {
      background-color: var(--tertiary-clr-900);
      border-color: var(--tertiary-clr-900);
      color: var(--white-clr);
    }

    &:disabled {
      color: var(--white-clr);
      background-color: var(--border-clr);
      outline: 1px solid var(--white-clr);
    }

    svg {
      margin: auto;
    }
  }
}

.round-btns {
  position: relative;
  padding-block: 2rem;
  width: auto;
}

.prev-btn,
.next-btn {
  z-index: 1;
  position: absolute;
  bottom: -7rem;
  inset-inline: 0;
  background-color: var(--tertiary-clr-900);
  color: var(--white-clr);
  outline: 1px solid var(--white-clr);
  transition: all 300ms ease;

  &:hover {
    scale: 1.1;
  }
}

.prev-btn {
  margin-inline: var(--_card-list-gap) auto;
  margin-inline: 0 auto;
}

.next-btn {
  margin-inline: auto var(--_card-list-gap);
  margin-inline: auto 0;
}

.tag-slider {
  /* --slide-height: 19rem;
  --slide-spacing: 1rem;
  --slide-size: 100%; */

  overflow-x: clip;
  margin-inline: calc(var(--_card-list-gap) * 1.875);
  /* margin-inline: 7.2rem; */

  @media (width <=1024px) {
    --_card-list-gap: 1rem;
  }

  @media (width <=768px) {
    --_card-list-gap: 0.75rem;
  }

  @media (width <=600px) {
    --_card-size: 100%;
    /* --_card-list-gap: 0.625rem; */
  }
}

.post-tags-list {
  --_card-size: 210px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--_card-size);
  touch-action: pan-y pinch-zoom;

  /* Card list gap */
  margin-right: calc(var(--_card-list-gap) * -1);

  > * {
    margin-right: var(--_card-list-gap);

    /* @media (width <=600px) {
      margin-right: var(--_card-spacing);
    } */
  }
}
.post-tag {
  display: grid;
  grid-template-areas: "stack";
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  > * {
    grid-area: stack;
  }

  &::before {
    position: absolute;
    content: "";
    inset: 0;
    border-radius: 1rem;
    background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.3) 100%
    );
  }

  h3 {
    padding: 1.875rem;
    place-self: end center;
    z-index: 1;
    line-height: normal;
    color: var(--white-clr);
    text-align: center;
    font-size: var(--fs-450);
    font-weight: var(--fw-700);
  }
}

/* End of Tags */

.table-of-content {
  padding: 1.25rem;
  h2 {
    color: #222;
    font-family: Satoshi;
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 1.25rem;
  }

  li {
    padding: 0.5rem 3rem;
    border-bottom: 1px solid #e1e1e1;

    &:first-of-type {
      font-weight: var(--fw-700);
      border-top: 1px solid #e1e1e1;
    }
  }
}

.share-section {
  padding-block: 5rem 3rem;
  h2 {
    color: #222;
    font-family: Satoshi;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.64px;
    margin-bottom: var(--fs-300);
  }

  .social-icons {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
  }
}
/* Newsletter */

.news-letter-section {
  background-color: var(--white-clr);
  border-radius: 1.875rem;
  padding: 1.25rem;
  header {
    /* padding-block: 4rem 2rem; */
    padding-block: 0 2rem;
    text-align: center;
  }

  h2 {
    color: #000;
    font-family: Satoshi;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  p {
    color: #888;
    text-align: center;
    font-family: Satoshi;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .input-subscribe-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    justify-content: center;
  }

  .email-input-wrapper {
    --_email-input-padding: 1.125rem;
    display: grid;
    grid-template-areas: "stack";
    > * {
      grid-area: stack;
    }

    input {
      min-width: 360px;
      min-width: 260px;
      padding: var(--_email-input-padding);
      padding-inline-end: calc(var(--_email-input-padding) * 3);
      background-color: var(--white-clr);
      border-radius: 100vw;
      border: 1px solid #e1e1e1;
    }

    .iconify {
      z-index: 1;
      font-size: 1.5rem;
      place-self: center end;
      margin-inline-end: var(--_email-input-padding);
    }
  }
}
/* End of Newsletter */

.no-posts {
  /* margin-inline: auto; */
  text-align: center;
  .iconify {
    font-size: 3rem;
    margin-inline: auto;
  }
}

.toc-container {
  /* padding: 20px;
  margin: 20px 0;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */

  padding: 1.25rem;
}

.toc-header {
  /* font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 15px;
  color: #2c3e50;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px; */
  color: #222;
  font-family: Satoshi;
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 1.25rem;
}

.toc-nav ul {
  /* list-style-type: none; */
  /* margin: 0; */
  /* padding: 0; */
}

.toc-item {
  /* margin: 5px 0;
  padding: 5px 0; */
  padding: 0.5rem 3rem;
  border-bottom: 1px solid #e1e1e1;

  &:first-child {
    border-top: 1px solid #e1e1e1;
  }
}

.toc-item a {
  text-decoration: none;
  color: var(--text-clr-700);
  transition: color 0.3s;
  display: block;
  padding: 3px 0;
}

.toc-item a:hover {
  color: var(--secondary-clr-900);
  /* text-decoration: underline; */
}

.toc-item a:active {
  font-weight: var(--fw-700);
  /* text-decoration: underline; */
}

/* Indentation for different heading levels */
.toc-level-1 {
  padding-left: 0px;
}
.toc-level-2 {
  padding-left: 20px;
}
.toc-level-3 {
  padding-left: 40px;
}
.toc-level-4 {
  padding-left: 60px;
}
.toc-level-5 {
  padding-left: 80px;
}
.toc-level-6 {
  padding-left: 100px;
}