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

.blog__item {
  position: relative;

  display: flex;
  flex-direction: column;

  flex: 0 0 340px;

  overflow: hidden;

  border-radius: 24px;

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

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

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;

  overflow: hidden;

  &::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
      radial-gradient(
        circle at top right,
        rgba(247, 147, 24, 0.08),
        transparent 45%
      );

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;
  }

  &:hover {
    transform: translateX(3px);

    border-color:
      rgba(
        255,
        255,
        255,
        0.08
      );

    box-shadow:
      0 25px 60px rgba(0, 0, 0, 0.45);

    &::before {
      opacity: 1;
    }
  }

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

  &--content {
    display: flex;

    flex-direction: column;

    text-decoration: none;

    color: inherit;

    flex: 1;
  }

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

  &--img {
    position: relative;

    height: 200px;

    overflow: hidden;

    img {
      width: 100%;
      height: 100%;

      object-fit: cover;

      transition: transform 0.5s ease;
    }

    span {
      position: absolute;

      top: 1rem;
      left: 1rem;

      display: inline-flex;

      align-items: center;

      padding: 0.4rem 0.8rem;

      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;

      text-transform: uppercase;

      letter-spacing: 0.08em;

      backdrop-filter: blur(10px);
    }
  }

  &:hover &--img img {
    transform: scale(1.05);
  }

  /* ==========================
     BODY
  ========================== */

  &--body {
    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 1.5rem;

    h1 {
      color: #fff;

      font-size: 1.05rem;

      font-weight: 500;

      line-height: 1.5;

      margin-bottom: 0.8rem;
    }

    &--meta {
      margin-bottom: 1rem;

      small {
        color:
          rgba(
            255,
            255,
            255,
            0.45
          );

        font-size: 0.72rem;

        letter-spacing: 0.04em;
      }
    }

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

      font-size: 0.82rem;

      line-height: 1.8;

      margin-bottom: auto;
    }

    /* ==========================
       ACTIONS
    ========================== */

    &--buttons {
      padding: 0 1.5rem 1.5rem;

      margin-top: auto;

      &--options {
        display: flex;

        gap: 0.75rem;
      }

      &--options--view,
      &--options--edit,
      &--options--delete {
        flex: 1;

        height: 42px;

        border-radius: 14px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 0.4rem;

        font-size: 0.8rem;

        font-weight: 600;

        text-decoration: none;

        cursor: pointer;

        transition: 0.25s ease;
      }

      /* VIEW */

      &--options--view {
        background:
          rgba(
            59,
            130,
            246,
            0.08
          );

        border:
          1px solid
          rgba(
            59,
            130,
            246,
            0.18
          );

        color: #60a5fa;

        &:hover {
          background:
            rgba(
              59,
              130,
              246,
              0.12
            );
        }
      }

      /* EDIT */

      &--options--edit {
        border: none;

        background:
          rgba(
            34,
            197,
            94,
            0.08
          );

        border:
          1px solid
          rgba(
            34,
            197,
            94,
            0.18
          );

        color: #22c55e;

        &:hover {
          background:
            rgba(
              34,
              197,
              94,
              0.12
            );
        }
      }

      /* DELETE */

      &--options--delete {
        border: none;

        background:
          rgba(
            239,
            68,
            68,
            0.08
          );

        border:
          1px solid
          rgba(
            239,
            68,
            68,
            0.18
          );

        color: #ef4444;

        &:hover {
          background:
            rgba(
              239,
              68,
              68,
              0.12
            );
        }
      }
    }
  }

  @media (max-width: 1000px) {
    flex: none;
    width: 100%;
  }

  @media (max-width: 640px) {
  &--img {
    height: 180px;
  }

  &--body {
    padding: 1.25rem;

    h1 {
      font-size: 1rem;
    }

    p {
      font-size: 0.8rem;
    }

    &--buttons {
      padding: 0 1.25rem 1.25rem;

      &--options {
        display: flex;

        flex-direction: column;

        gap: 0.75rem;

        width: 100%;
      }

      &--options--view,
      &--options--edit,
      &--options--delete {
        width: 100%;

        min-height: 44px;

        padding: 0.85rem 1rem;

        flex: none;

        justify-content: center;

        font-size: 0.82rem;

        border-radius: 14px;
      }
    }
  }
}
}