/* =============================================================================
   DACC New Theme — Academic Listings
   Pass 32

   Canonical path:
   /_assets/css/main-theme/new/overrides/templates/academic-listing.css

   Applies one visual contract to Academic Program, Department, and Division
   listings. Foundation continues to own layout, responsive behavior, no-JS
   fallback, filters, and DACC.Listing behavior.
   ============================================================================= */

@import url("../components/academic-family.css");

/* Hero ------------------------------------------------------------------- */

.academic-listing__hero {
  border-block-end: 0;
  background:
    radial-gradient(
      circle at 88% 18%,
      color-mix(in srgb, var(--color-gold) 18%, transparent),
      transparent 24rem
    ),
    linear-gradient(
      135deg,
      var(--color-primary-dark) 0%,
      color-mix(in srgb, var(--color-primary) 82%, var(--color-primary-dark)) 100%
    );
}

.academic-listing__eyebrow {
  color: var(--color-gold);
}

.academic-listing__hero h1 {
  color: var(--color-white);
  text-wrap: balance;
}

.academic-listing__intro {
  color: color-mix(in srgb, var(--color-white) 90%, transparent);
}

.academic-listing__hero-mark {
  gap: 0.6rem;
  opacity: 1;
}

.academic-listing__hero-mark span {
  background: var(--color-gold);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--color-white) 28%, transparent);
}

/* Academic Affairs introduction ----------------------------------------- */

.academic-listing__affairs {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-primary) 6%, var(--color-white)),
      var(--color-white)
    );
}

.academic-listing__affairs h2,
.academic-listing__directory-heading h2,
.academic-listing__additional h2 {
  color: var(--color-primary-dark);
  text-wrap: balance;
}

.academic-listing__quick-links {
  border-color: transparent;
  border-block-start: 0.4rem solid var(--color-gold);
  background: var(--color-white);
}

.academic-listing__quick-links h3 {
  color: var(--color-primary-dark);
}

.academic-listing__quick-links a {
  color: var(--color-primary-dark);
}

.academic-listing__quick-links a:hover,
.academic-listing__quick-links a:focus {
  color: var(--color-accent);
}

/* Directory heading ------------------------------------------------------ */

.academic-listing__directory-heading {
  position: relative;
  padding-block-end: var(--space-md);
}

.academic-listing__directory-heading::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  inline-size: clamp(3rem, 8vw, 4.5rem);
  block-size: 0.28rem;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
}

.academic-listing__directory-heading .academic-listing__eyebrow {
  color: var(--color-primary);
}

.academic-listing__result-count {
  color: var(--color-primary-dark);
}

/* Search + filters ------------------------------------------------------- */

.academic-listing__tools {
  border-color: transparent;
  background:
    linear-gradient(
      135deg,
      var(--color-white),
      color-mix(in srgb, var(--color-primary) 5%, var(--color-white))
    );
}

.academic-listing__field label {
  color: var(--color-primary-dark);
}

.academic-listing__field input,
.academic-listing__field select {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.academic-listing__field input:hover,
.academic-listing__field select:hover {
  border-color: color-mix(in srgb, var(--color-primary) 52%, var(--color-border));
}

.academic-listing__clear {
  border-color: var(--color-primary);
  background: var(--color-white);
  color: var(--color-primary-dark);
  font-weight: var(--fw-black);
}

.academic-listing__clear:hover,
.academic-listing__clear:focus {
  border-color: var(--color-gold);
  background: var(--color-gold);
  color: var(--color-primary-dark);
}

/* Cards ------------------------------------------------------------------ */

.academic-listing__grid {
  gap: var(--space-xl);
}

.academic-listing-card {
  position: relative;
  background:
    linear-gradient(
      180deg,
      var(--color-white),
      color-mix(in srgb, var(--color-primary) 3%, var(--color-white))
    );
}

.academic-listing-card__media {
  border-block-end: 0.3rem solid var(--color-gold);
  background: var(--academic-new-soft-blue);
}

.academic-listing-card__placeholder {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-gold) 18%, transparent), transparent 54%),
    linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
}

.academic-listing-card__badge {
  border: 2px solid var(--color-white);
  background: var(--color-gold);
  color: var(--color-primary-dark);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--color-primary-dark) 30%, transparent);
}

.academic-listing-card__hierarchy {
  color: var(--color-primary);
}

.academic-listing-card__title {
  color: var(--color-primary-dark);
}

.academic-listing-card__title a {
  color: inherit;
}

.academic-listing-card__title a:hover,
.academic-listing-card__title a:focus {
  color: var(--color-accent);
}

.academic-listing-card__summary {
  color: var(--color-text);
}

.academic-listing-card__tags li {
  border-color: transparent;
  background: var(--academic-new-soft-blue);
  color: var(--color-primary-dark);
  font-weight: var(--fw-black);
}

.academic-listing-card__counts {
  padding-block-start: var(--space-md);
  border-block-start: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
}

.academic-listing-card__counts dt {
  color: var(--color-primary-dark);
}

.academic-listing-card__counts dd {
  color: var(--color-primary);
}

.academic-listing-card__action a {
  display: inline-flex;
  min-block-size: 2.75rem;
  align-items: center;
  color: var(--color-primary-dark);
  font-weight: var(--fw-black);
}

.academic-listing-card__action a:hover,
.academic-listing-card__action a:focus {
  color: var(--color-accent);
}

/* Type-specific accents -------------------------------------------------- */

.academic-listing--program .academic-listing-card::before,
.academic-listing--department .academic-listing-card::before,
.academic-listing--division .academic-listing-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 0.3rem;
  pointer-events: none;
}

.academic-listing--program .academic-listing-card::before {
  background: var(--color-primary);
}

.academic-listing--department .academic-listing-card::before {
  background: var(--color-gold);
}

.academic-listing--division .academic-listing-card::before {
  background: var(--color-primary-dark);
}

.academic-listing--division .academic-listing-card {
  background:
    linear-gradient(
      135deg,
      var(--color-white),
      color-mix(in srgb, var(--color-primary) 6%, var(--color-white))
    );
}

/* Empty state ------------------------------------------------------------ */

.academic-listing__empty,
.academic-listing__server-empty {
  border-color: transparent;
  border-block-start: 0.35rem solid var(--color-gold);
  background: var(--academic-new-soft-blue);
  box-shadow: var(--panel-echo);
}

.academic-listing__empty h2,
.academic-listing__server-empty h2 {
  color: var(--color-primary-dark);
}

/* Additional authored sections ------------------------------------------ */

.academic-listing__additional-section {
  border-block-start-color: color-mix(in srgb, var(--color-primary) 12%, var(--color-border));
}

.academic-listing__additional-section:nth-child(even) {
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-white));
}

.academic-listing__button {
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--fw-black);
}

.academic-listing__button:hover,
.academic-listing__button:focus {
  border-color: var(--color-gold);
  background: var(--color-gold);
  color: var(--color-primary-dark);
}

/* Responsive visual adjustments ----------------------------------------- */

@media (max-width: 759.98px) {
  .academic-listing__hero {
    padding-inline: var(--space-lg);
  }

  .academic-listing__tools,
  .academic-listing-card,
  .academic-listing__quick-links {
    box-shadow: 4px 4px 0 var(--color-border);
  }
}

@media (prefers-reduced-motion: reduce) {
  .academic-listing-card,
  .academic-listing-card__arrow {
    transition: none;
  }
}