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

/* =========================================
   DESIGN TOKENS
========================================= */

$primary: #5e3817;
$primary-2: #7a4b20;

$primary-light: rgba(122, 75, 32, 0.08);
$primary-soft: rgba(122, 75, 32, 0.12);
$primary-border: rgba(122, 75, 32, 0.25);
$primary-muted: rgba(122, 75, 32, 0.6);

$text-dark: #1a1a1a;
$text-muted: #6b6b6b;

/* =========================================
   ANNOUNCE CARD
========================================= */

.announce {
  background: variables.$col-white;
  padding: 1.5rem 1.5rem;
  border-radius: 12px;
  margin-top: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);

  @media only screen and (max-width: 1000px) {
    padding: 1.2rem 1.2rem;
    margin-top: 0.2rem !important;
  }

  &__top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;

    h2 {
      font-size: 0.95rem;
      font-weight: 600;
      color: $text-dark;
    }

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 36px;
      width: 36px;
      border-radius: 50%;
      background: $primary-light;
      color: $primary;
      font-size: 1rem;
      transition: all 0.25s ease;
    }
  }

  &__content {
    margin-top: 0.4rem;

    h4 {
      font-size: 0.9rem;
      font-weight: 600;
      color: $text-dark;
      margin-bottom: 0.25rem;
    }

    p {
      font-size: 0.9rem;
      line-height: 1.6;
      color: $text-muted;
    }
  }
}