.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-wrapper {
  --_gap: 1.125rem !important;
  color: var(--white-clr);
  overflow-x: clip;
}

.hero-content {
  border-radius: 3rem;
  padding-block: clamp(3rem, 7vw, 4.375rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  backdrop-filter: blur(40px);
  background-image: url("/assets/images/home/call-to-action.png");
  background-size: cover;
  background-position: center;
  scale: crop;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background: url("/assets/images/home/hero-gradient.png");
    background-size: cover;
    background-position: center;
    opacity: 0.3;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background: url("/assets/images/home/hero-gradient.png");
    background-size: cover;
    /* background-size: 100% 180%; */
    background-position: center;
    opacity: 0.5;
  }

  .hero-header {
    grid-column: 2/12;
  }

  .hero-body {
    grid-column: 3/11;
  }

  @media (width <=1200px) {
    padding-inline: 1.25rem;

    .hero-header {
      grid-column: 1/-1;
    }
  }

  @media (width <=1024px) {
    .hero-body {
      grid-column: 2/12;
    }
  }

  @media (width <=768px) {
    .hero-body {
      grid-column: 1/-1;
    }
  }
}

.event-hero-wrapper .hero-content {
  background-image: url("/assets/images/home/event.png");
}

.counsellor-hero-wrapper .hero-content {
  background-image: url("/assets/images/home/register-counsellor.png");
  background-position: center 30%;

  .hero-search {
    max-width: 524px;
  }
}

.hero-header {
  text-align: center;

  > * {
    margin-inline: auto;
  }

  .h1 {
    max-width: 25ch;
    font-size: var(--fs-700);
    text-transform: uppercase;
  }

  p {
    margin-top: 1.125rem;
    font-weight: var(--fw-500);
    font-size: var(--fs-450);
    line-height: 1.3;
  }

  @media (width <=1024px) {
    .h1 {
      font-size: var(--fs-650);
    }
  }
}

.hero-body {
  /* padding-block: 11.25rem 4.25rem; */
  padding-top: 3rem;
  text-align: center;

  p {
    padding-bottom: 3rem;
    max-width: 35ch;
    margin-inline: auto;
    font-size: var(--fs-500);
  }

  @media (width <=1024px) {
    p {
      font-size: var(--fs-450);
    }
  }

  @media (width <=600px) {
    p {
      font-size: var(--fs-400);
    }
  }
}

.hero-search {
  /* height: 78px; */
  max-width: 800px;
  margin-inline: auto;
  padding: 0.5rem;
  background-color: var(--white-clr);
  border-radius: 100vw;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-weight: var(--fw-500);
  transition: 300ms ease;

  &:focus-within {
    outline: 2px solid var(--secondary-clr);
  }

  input {
    flex: 1 0 0;
    background-color: transparent;
    border: none;
    min-width: 0;
    line-height: 0.97;

    &:focus-visible {
      outline: none;
    }
  }

  &:has(.course-search:focus-visible) {
    .location-search-wrapper {
      width: fit-content;

      aspect-ratio: 1;
      transition: all 400ms ease-out;

      input {
        transition: all 400ms ease-out;
        display: none;
      }
    }
  }

  &:has(.location-search:focus-visible) {
    .course-search {
      width: 0;
      display: none;
      transition: all 400ms ease-out;
    }

    .location-search-wrapper {
      flex: 1;
      min-width: 0;
      transition: all 400ms ease-out;
    }
  }

  .course-search {
    padding: 1rem;
    transition: 600ms ease-in;
  }

  .location-search-wrapper {
    max-height: 48px;
    /* min-width: 360px; */
    width: 360px;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;

    border: 1px solid var(--border-clr-900);
    border-radius: 100vw;
    transition: 600ms ease-in;
  }

  .search-btn {
    cursor: pointer;
    background-color: var(--tertiary-clr-900);
    padding: 1rem;
    border: none;
    border-radius: 50%;
  }

  @media (width <=1200px) {
    max-height: revert;
    padding: 0.5rem;
    height: auto;

    .course-search {
      padding: 0.75rem;
    }

    .location-search-wrapper {
      display: none;
    }
  }

  @media (width <=768px) {
    padding: 0.25rem;

    .course-search {
      text-indent: 1.25rem;
      padding: 0.5rem;
    }
  }
}

.filter-search {
  padding: 0.375rem;
  margin-bottom: 0.5rem;

  background-color: var(--white-clr-850);
  border: 1px solid var(--white-clr-700);
  .course-search {
    padding: 0;
  }

  input {
    text-indent: 1.5ch;
  }
  .search-btn {
    padding: 0.75rem;
  }
}

/* End of Hero */

.wrapper {
  .show-more {
    margin-block-start: 3.75rem;
    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);
}

.post-card-content {
  > * {
    font-size: var(--fs-400);
    font-weight: var(--fw-500);
  }
}

.no-posts {
  grid-column: 1/-1;
  text-align: center;
  padding: 40px 20px;
  color: #666;
  display: grid;
  align-items: center;
  justify-items: center;
}

.no-posts .iconify {
  font-size: 48px;
  margin-bottom: 15px;
  opacity: 0.5;
}

.no-posts p {
  font-size: 16px;
  margin: 0;
}

.loading {
  text-align: center;
  padding: 40px;
  color: #999;
}
/* 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-block: 6.25rem 3.125rem;
  background-color: #faf9fe;
}
/* End of Trending */

/* All Posts */
.all-posts-wrapper {
  padding-block: 6.25rem 3.125rem;
}
/* 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 */

/* Newsletter */
.news-letter-wrapper {
  padding-block: 8.375rem;
  background-color: #faf9fe;
}

.news-letter-content {
  --_card-size: 210px;

  .news-letter-post-tags-list {
    margin-inline: auto;
    max-width: fit-content;
    display: grid;
    /* grid-template-columns: repeat(
      auto-fill,
      minmax(min(var(--_card-size), 100%), 1fr)
    ); */
    grid-template-columns: repeat(3, minmax(min(var(--_card-size), 100%), 1fr));
    grid-template-rows: 150px;
    gap: 4rem;
  }

  img {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
  }

  .active {
    scale: 1.25;
  }

  header {
    padding-block: 4rem 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;
    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;
      padding: var(--_email-input-padding);
      padding-inline-end: calc(var(--_email-input-padding) * 3);
      background-color: var(--white-clr);
      border-radius: 100vw;
      border: none;
    }

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