@use "../../../../styles/abstracts/mixins";
@use "../../../../styles/abstracts/variables" as *;

.blog {
  @include mixins.pageBase;

  width: 100%;

  /* ==========================================
     CONTAINER
  ========================================== */

  &__container {
    width: 100%;

    max-width: 100%;

    margin: 0;

    padding: 0;
  }

  /* ==========================================
     HERO
  ========================================== */

  &__hero {
    margin-top: 1rem;

    margin-bottom: 1.75rem;
  }

  &__badge {
    display: inline-flex;

    align-items: center;

    height: 30px;

    padding: 0 1rem;

    border-radius: 999px;

    background:
      rgba(
        247,
        147,
        24,
        0.08
      );

    border:
      1px solid
      rgba(
        247,
        147,
        24,
        0.15
      );

    color: #f79318;

    font-size: 0.65rem;

    font-weight: 600;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    margin-bottom: 1rem;
  }

  &__hero h1 {
    color: #fff;

    font-size: clamp(
      1.5rem,
      3vw,
      1.5rem
    );

    line-height: 1.12;

    font-weight: 600;

    letter-spacing: -0.04em;

    max-width: 900px;

    margin-bottom: 0.75rem;
  }

  &__meta {
    color:
      rgba(
        255,
        255,
        255,
        0.5
      );

    font-size: 0.8rem;

    font-weight: 500;
  }

  /* ==========================================
     COVER IMAGE
  ========================================== */

  &__cover {
    position: relative;

    overflow: hidden;

    border-radius: 6px;

    margin-bottom: 2.5rem;

    border:
      1px solid
      rgba(
        255,
        255,
        255,
        0.05
      );

    background:
      linear-gradient(
        180deg,
        rgba(22, 22, 24, 0.98),
        rgba(15, 15, 18, 1)
      );

    img {
      width: 100%;

      height: 300px;

      object-fit: cover;

      display: block;
    }

    &::before {
      content: "";

      position: absolute;

      inset: 0;

      background:
        linear-gradient(
          180deg,
          rgba(0, 0, 0, 0.03),
          rgba(0, 0, 0, 0.25)
        );

      pointer-events: none;

      z-index: 1;
    }

    &::after {
      content: "";

      position: absolute;

      left: 0;
      right: 0;
      bottom: 0;

      height: 100px;

      background:
        linear-gradient(
          180deg,
          transparent,
          var(--background)
        );

      pointer-events: none;

      z-index: 2;
    }
  }

  &__coverGlow {
    position: absolute;

    top: -80px;
    right: -80px;

    width: 240px;
    height: 240px;

    border-radius: 50%;

    background:
      radial-gradient(
        circle,
        rgba(
          247,
          147,
          24,
          0.12
        ),
        transparent 70%
      );

    pointer-events: none;

    z-index: 1;
  }

  /* ==========================================
     CONTENT
  ========================================== */

  &__content {
    // max-width: 900px;

    p {
      color:
        rgba(
          255,
          255,
          255,
          0.72
        );

      font-size: 0.9rem;

      line-height: 2.15;

      white-space: pre-wrap;
      font-weight: 400 !important;

      margin-bottom: 1.5rem;
    }

    p:last-child {
      margin-bottom: 0;
    }
  }
}

/* ==========================================
   SKELETONS
========================================== */

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.skeletonBack,
.skeletonBadge,
.skeletonTitle,
.skeletonMeta,
.skeletonImage,
.skeletonLine {
  position: relative;

  overflow: hidden;

  background:
    rgba(
      255,
      255,
      255,
      0.04
    );

  border-radius: 10px;

  &::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(
          255,
          255,
          255,
          0.06
        ),
        transparent
      );

    transform: translateX(-100%);

    animation:
      shimmer 1.8s infinite;
  }
}

.skeletonBack {
  width: 90px;

  height: 30px;

  margin-bottom: 2rem;
}

.skeletonHero {
  margin-bottom: 1.75rem;
}

.skeletonBadge {
  width: 120px;

  height: 32px;

  margin-bottom: 1rem;

  border-radius: 999px;
}

.skeletonTitle {
  width: 75%;

  height: 54px;

  margin-bottom: 1rem;
}

.skeletonMeta {
  width: 180px;

  height: 16px;
}

.skeletonImage {
  width: 100%;

  height: 320px;

  border-radius: 24px;

  margin-bottom: 2rem;
}

.skeletonLine {
  width: 100%;

  height: 14px;

  margin-bottom: 1rem;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 768px) {
  .blog {
    &__hero {
      margin-top: 0.75rem;
    }

    &__hero h1 {
      font-size: 1.4rem;

      line-height: 1.2;
    }

    &__cover {
      margin-bottom: 2rem;

      img {
        height: 220px;
      }
    }

    &__content {
      p {
        font-size: 0.8rem;

        line-height: 2;
      }
    }
  }

  .skeletonImage {
    height: 220px;
  }

  .skeletonTitle {
    width: 100%;
  }
}