/* ==========================================================================
   WRAPPER
========================================================================== */

.asicon-icons-wrapper { 
  margin: 10px 0;
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* ==========================================================================
   CATEGORY
========================================================================== */

.asicon-icons-category {
  margin-bottom: 12px;
  width: 100%;
}

/* ==========================================================================
   CATEGORY TITLE
========================================================================== */

.asicon-icons-category__title {

  font-size: 1.2rem;

  font-weight: 700;

  color: #252424;

  margin: 4px 0 2px;

  border-bottom: 0;

  padding-bottom: 0;
}

/* ==========================================================================
   GRID
========================================================================== */

.asicon-icons-grid {

  display: grid;

  /* RESPONSIVE + FIX FOR LAST ITEM BREAKING */

  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));

  gap: 8px;

  width: 100%;

  margin-bottom: 0;

  padding-top: 20px;

  padding-bottom: 20px;

  box-sizing: border-box;

  align-items: stretch;
}

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

.asicon-icon-card {

  position: relative;

  overflow: hidden;

  text-align: center;

  border-radius: 15px;

  color: #135f84;

  background-color: #f2f2f2;

  padding: 6px 4px;

  border: 0.7px solid #135f84;

  box-shadow: 0 0 0 rgba(0,0,0,0);

  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;

  min-height: 165px;

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

  width: 100%;
}

.asicon-icon-card:hover {

  background-color: #f2f2f2;

  box-shadow:
    0 4px 10px rgba(0,0,0,0.08);

  transform: translateY(-2px);
}

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

.asicon-icon-card__content {

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;
}

/* ==========================================================================
   LINKED CARD
========================================================================== */

.asicon-icon-card.is-linked {

  background-color: #d6e9f8;
}

.asicon-icon-card.is-linked:hover {

  background-color: #d6e9f8;
}

/* Link indicator */

.asicon-icon-card.is-linked::after {

  content: "🔗";

  position: absolute;

  top: 6px;

  right: 8px;

  font-size: 16px;

  color: #135f84;

  opacity: 0.7;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.asicon-icon-card.is-linked:hover::after {

  opacity: 1;

  transform: scale(1.2);
}

/* ==========================================================================
   ERROR CARD
========================================================================== */

.asicon-icon-card.error-icon-card {

  background-color: #ffd6d6;

  border: 1px solid #fdc2c2;
}

.asicon-icon-card.error-icon-card
.asicon-icon-card__title {

  color: #d3aaaa;

  font-weight: bold;
}

/* ==========================================================================
   LINK WRAPPER
========================================================================== */

.asicon-icon-link {

  text-decoration: none;

  color: inherit;

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;
}

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

.asicon-icon-card__icon {

  width: 75%;

  max-width: 100px;

  aspect-ratio: 1 / 1;

  margin: 0 auto 8px auto;

  border-radius: 50%;

  border: 1px solid #135f84;

  background-color: #ffffff;

  display: flex;

  align-items: center;

  justify-content: center;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;

  flex-shrink: 0;
}

.asicon-icon-card:hover
.asicon-icon-card__icon {

  border-color: #135f84;

  box-shadow:
    0 0 6px rgba(180,180,180,0.8);
}

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

.asicon-icon-card__icon img {

  width: 70%;

  height: auto;

  object-fit: contain;

  display: block;
}

/* ==========================================================================
   TITLE
========================================================================== */

.asicon-icon-card__title {

  font-size: 14px;

  font-weight: 700;

  color: #135f84 !important;

  text-align: center;

  text-decoration: none;

  margin: 2px 0 12px 0;

  line-height: 1.2;

  transition:
    color 0.2s ease,
    font-size 0.2s ease;

  word-break: break-word;

  width: 100%;
}

.asicon-icon-card:hover
.asicon-icon-card__title {

  color: #135f84 !important;

  font-size: 14px;

  text-decoration: none;
}

/* ==========================================================================
   DESCRIPTION TOOLTIP
========================================================================== */

.asicon-icon-card__description {

  position: absolute;

  left: 6px;

  right: 6px;

  bottom: 6px;

  background: #135f84;

  color: #ffffff;

  font-size: 11px;

  line-height: 1.25;

  padding: 4px 4px;

  border-radius: 8px;

  text-align: center;

  opacity: 0;

  visibility: hidden;

  transform: translateY(4px);

  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;

  pointer-events: none;

  z-index: 10;

  box-sizing: border-box;
}

/* Show tooltip */

.asicon-icon-card:hover
.asicon-icon-card__description {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);
}

/* ==========================================================================
   ACTIVE / FOCUS
========================================================================== */

.asicon-icon-card:active {

  transform: scale(0.98);

  box-shadow: none;
}

.asicon-icon-card:focus,
.asicon-icon-card:focus-visible {

  outline: none;

  border: 2px solid #000000;

  box-shadow:
    0 0 0 2px rgba(0,0,0,0.15);
}

/* ==========================================================================
   LINK STATES
========================================================================== */

.asicon-icon-link:hover,
.asicon-icon-link:focus,
.asicon-icon-link:active {

  text-decoration: none;

  outline: none;
}

.asicon-icon-link:focus
.asicon-icon-card,

.asicon-icon-link:focus-visible
.asicon-icon-card {

  border: 2px solid #000000;

  box-shadow:
    0 0 0 2px rgba(0,0,0,0.15);
}

/* ==========================================================================
   LARGE DESKTOP
========================================================================== */

@media (min-width: 1600px) {

  .asicon-icons-grid {

    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

/* ==========================================================================
   <= 1400px
========================================================================== */

@media (max-width: 1400px) {

  .asicon-icons-grid {

    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* ==========================================================================
   <= 1200px
========================================================================== */

@media (max-width: 1200px) {

  .asicon-icons-grid {

    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .asicon-icon-card {

    min-height: 155px;
  }

  .asicon-icon-card__title {

    font-size: 13px;
  }

  .asicon-icon-card__icon {

    max-width: 90px;
  }
}

/* ==========================================================================
   <= 992px
========================================================================== */

@media (max-width: 992px) {

  .asicon-icons-grid {

    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));

    gap: 6px;
  }

  .asicon-icon-card {

    min-height: 150px;
  }

  .asicon-icon-card__title {

    font-size: 13px;
  }

  .asicon-icon-card__icon {

    max-width: 85px;
  }
}

/* ==========================================================================
   <= 768px
========================================================================== */

@media (max-width: 768px) {

  .asicon-icons-grid {

    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

    gap: 6px;
  }

  .asicon-icon-card {

    min-height: 145px;

    padding: 5px 4px;
  }

  .asicon-icon-card__title {

    font-size: 12px;

    margin-bottom: 10px;
  }

  .asicon-icon-card__icon {

    max-width: 75px;
  }

  .asicon-icon-card__description {

    font-size: 10px;
  }
}

/* ==========================================================================
   <= 600px
========================================================================== */

@media (max-width: 600px) {

  .asicon-icons-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 6px;
  }

  .asicon-icon-card {

    min-height: 135px;

    padding: 4px 3px;
  }

  .asicon-icon-card__title {

    font-size: 11px;

    line-height: 1.15;

    margin-bottom: 8px;
  }

  .asicon-icon-card__icon {

    max-width: 65px;
  }

  .asicon-icon-card__description {

    display: none;
  }

  .asicon-icons-category__title {

    font-size: 1rem;
  }
}

/* ==========================================================================
   <= 400px
========================================================================== */

@media (max-width: 400px) {

  .asicon-icons-grid {

    grid-template-columns: 1fr;
  }

  .asicon-icon-card {

    min-height: 125px;
  }
}