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

.read {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;

  /* add .show on mount to reveal modal */
  &.show {
    opacity: 1;
    visibility: visible;
  }

  &__content {
    background: #FCFCFC;
    color: #000;
    width: 100%;
    max-width: 750px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transform: translateY(30px);
    animation: slideUp 0.36s ease forwards;
    max-height: 85vh; /* prevents full-screen overflow */
    display: flex;
    flex-direction: column;

    /* inner scrollable area */
    &__details {
      padding: 1.5rem 1.5rem;
      overflow-y: auto;
      flex: 1;
    }

    @media only screen and (max-width: 1000px) {
      max-width: 92%;
    }

    /* close button */
    &--close {
      position: absolute;
      top: 0.75rem;
      right: 0.75rem;
      background: variables.$col-danger-bg;
      color: variables.$col-danger-color;
      padding: 0.4rem 0.6rem;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 600;
      font-size: 0.85rem;
      border: none;
      transition: transform 0.12s ease, opacity 0.12s ease;

      &:hover {
        transform: translateY(-2px);
        opacity: 0.95;
      }
    }

    /* header area with waves background */
    &__details__header {
      margin: 0 -1.5rem 1.1rem -1.5rem;
      background: linear-gradient(
          to right,
          rgba(40, 98, 255, 0.99),
          rgba(34, 96, 255, 0.94)
        ),
        url("/assets/images/waves.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 10px;
      text-align: center;
      padding: 2.8rem 2rem;
      color: variables.$col-white !important;
      font-size: 1.4rem;
      font-weight: 800;
      text-transform: capitalize;

      @media only screen and (max-width: 1000px) {
        padding: 2rem 1rem;
        font-size: 1.15rem;
      }
    }

    /* news meta / type row */
    &__details--type {
      display: block;
      font-size: 0.92rem;
      margin-bottom: 0.6rem;
      color: variables.$col-secondary;
      border-bottom: 2px solid variables.$col-border-lining;
      padding-bottom: 0.6rem;
    }

    /* intro and small text */
    small {
      display: block;
      font-weight: 500;
      font-size: 0.85rem;
      opacity: 0.85;
      margin-top: 0.5rem;
    }

    p {
      font-size: 0.95rem;
      color: variables.$col-secondary;
      line-height: 1.9;
      font-weight: 500;
      opacity: 0.9;
      margin-bottom: 1rem;
    }

    /* body block to visually separate article details */
    &__details--body {
      background: #f7f9fb;
      padding: 1rem;
      border-radius: 8px;
      color: #222;
      font-size: 0.98rem;
      line-height: 1.7;
      margin-top: 0.6rem;

      p {
        margin: 0;
        color: #222;
        opacity: 0.95;
        font-weight: 400;
      }
    }
  }
}

/* small slide-up animation used by the modal */
@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* hide native scrollbar visually but keep functionality */
.read__content__details::-webkit-scrollbar {
  width: 8px;
}
.read__content__details::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 8px;
}
.read__content__details::-webkit-scrollbar-track {
  background: transparent;
}