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

.unit-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);

  max-width: var(--content-width);
  margin: 0 auto;
}


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

.unit-card {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: var(--space-md);

  padding: var(--space-md) var(--space-lg);

  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);

  background: var(--bg-surface);

  text-decoration: none;
  color: inherit;

  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.unit-card:hover {
  border-color: var(--accent-primary);
  background: var(--hover-overlay);
  transform: translateY(-2px);
}


/* =====================================================
   INFO
===================================================== */

.unit-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.unit-card__name {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}


/* =====================================================
   PATCH NUMBER (FABRIC STYLE)
===================================================== */

.unit-card__number {
  display: inline-flex;
  gap: var(--space-xs);
}

.unit-card__number span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 36px;

  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);

  /* text */
  color: var(--text-inverse);

  border-radius: var(--radius-xs);

  /* fabric base (tokenized gold tone) */
  background: linear-gradient(
    145deg,
    var(--accent-hover),
    var(--accent-primary)
  );

  /* border */
  border: 1px solid var(--border-accent);

  /* stitched / depth */
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.2),
    inset 0 -2px 3px rgba(0,0,0,0.25),
    var(--shadow-sm);
}

.unit-card:hover .unit-card__number span {
  border-color: var(--accent-primary);
}


/* =====================================================
   ACTION
===================================================== */

.unit-card__action {
  font-size: var(--font-size-xs);
  letter-spacing: 0.6px;
  text-transform: uppercase;

  padding: var(--space-xs) var(--space-md);

  border-radius: 999px;

  background: var(--hover-overlay);
  border: 1px solid var(--border-subtle);

  color: var(--text-secondary);

  transition: var(--transition-fast);
}

.unit-card:hover .unit-card__action {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  background: var(--accent-glow);
}


/* =====================================================
   ACTIVE UNIT
===================================================== */

.unit-card--active {
  border-color: var(--accent-primary);
  background: var(--accent-glow);
}

.unit-card--active .unit-card__action {
  color: var(--text-inverse);

  background: linear-gradient(
    90deg,
    var(--accent-primary),
    var(--accent-hover)
  );

  border: none;
}


/* =====================================================
   PAGE OPTIONS GRID
===================================================== */

.page-options {
  display: grid;
  gap: var(--space-md);
  margin: var(--space-lg) 0;

  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .page-options {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .page-options {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .page-options {
    grid-template-columns: repeat(4, 1fr);
  }
}


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

.page-options__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  gap: var(--space-md);

  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);

  padding: var(--space-lg) var(--space-md);
  min-height: 140px;

  text-align: center;
  text-decoration: none;
  color: var(--text-primary);

  box-shadow: var(--shadow-sm);

  position: relative;
  overflow: hidden;

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.page-options__container:hover {
  transform: translateY(-4px);
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-md);
}


/* ICON */

.options-container__logo {
  width: 80px;
  height: 80px;

  margin-bottom: var(--space-sm);

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: var(--bg-elevated);

  font-size: var(--font-size-md);

  position: relative;
  overflow: hidden;

  transition:
    transform var(--transition),
    background var(--transition),
    box-shadow var(--transition);
}


/* image */

.page-options__container:not(.options-container--unit-select) .options-container__logo::before {
  content: "";
  width: 60%;
  height: 60%;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


/* hover */

.page-options__container:hover .options-container__logo {
  transform: scale(1.08);
}

/* ================================
   ICON MAPPING (YOUR ORIGINAL IMAGES)
================================ */

.options-container--search .options-container__logo:before {
    background: url("../images/icons/search.png");

}

.options-container--filter .options-container__logo:before {
    background: url("../images/icons/main_sort.png");
}
.options-container--serials .options-container__logo:before {
    background: url("../images/icons/serial_sort.png");
}
.options-container--years .options-container__logo:before {
    background: url("../images/icons/years.png");
}
.options-container--list .options-container__logo:before {
    background: url("../images/icons/list.png");
}
.options-container--dues .options-container__logo:before {
	background: url("../images/icons/dues.png");
}
.options-container--new .options-container__logo:before {
    background: url("../images/icons/new_record.png");
}
.options-container--candidates .options-container__logo:before {
    background: url("../images/icons/nominate.png");
}
/* =====================================================
   PAGE OPTION TEXT
===================================================== */

.page-options__container span {
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);

  transition: color var(--transition);
}

.page-options__container:hover span {
  color: var(--text-primary);
}


/* =====================================================
   OPTION VARIANTS
===================================================== */

.options-container--search:hover { border-color: var(--color-info); }

.options-container--filter:hover,
.options-container--serials:hover,
.options-container--years:hover { border-color: var(--color-warning); }

.options-container--list:hover { border-color: var(--accent-primary); }


.options-container--new:hover { border-color: var(--color-success); }

.options-container--candidates:hover { border-color: var(--color-warning); }


/* =====================================================
   MOBILE (OPTIONS)
===================================================== */

@media (max-width: 600px) {

  .page-options__container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .options-container__logo {
    width: 64px;
    height: 64px;
    margin: var(--space-sm) 0;
  }

  .options-container__logo i,
  .options-container__logo svg {
    font-size: 28px;
  }

  .page-options__container p {
    font-size: var(--font-size-sm);
    max-width: 260px;
  }

  .page-button {
    width: 100%;
    max-width: 240px;
  }
}