/* ==========================================================================
   finder.css - the ubp/finder block's own stylesheet
   University of Bridgeport

   Enqueued by ub-programs (ub_programs_finder_assets) when the block is on the
   page, and in the block editor. It holds the rules the finder's markup needs
   (includes/finder.php) and the classes assets/finder.js adds: persona presets,
   search bar, facet rail, active-filter chips, program cards (with and without a
   featured image) and the empty state.

   It is written against the design tokens and shared primitives every UB page
   loads (--ub-purple, --white, --shadow-*, --transition, --section-pad,
   .container, .eyebrow-rule, .display-lg, .section-lede, .btn) and names no
   theme handle, so it travels with the plugin.

   Origin: the theme's academics.css and academics-wp.css. academics.css was a
   byte-identical copy of the static mockup's sheet; that invariant is dropped,
   and this file is now the source of truth for the finder. The theme's
   academics.css keeps the filter controls (.ac-persona, .ac-chip, .ac-check) for
   the brand guide, which documents them.

   SOURCE ORDER. The plugin prints this sheet before the theme's style.css;
   academics.css printed after it. Nothing in style.css, ub-elements.css or
   wp-content.css targets these classes, so no rule here depends on coming later.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SECTION
   -------------------------------------------------------------------------- */
.ac-finder { padding: 78px 0 var(--section-pad); background: var(--white); }
.ac-finder-head { max-width: 46rem; margin-bottom: 34px; }

/* ---------- "I am a…" persona presets ---------- */
.ac-personas { margin-bottom: 30px; }
.ac-personas-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 13px;
}
.ac-persona-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ac-persona {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1.5px solid #CBD4D8;
  padding: 13px 20px;
  font-family: inherit;
  font-size: 0.97rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition);
}
.ac-persona i { color: var(--ub-blue-text); font-size: 0.95rem; }
.ac-persona:hover {
  border-color: var(--ub-purple);
  color: var(--ub-purple);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.ac-persona[aria-pressed="true"] {
  background: var(--ub-purple);
  border-color: var(--ub-purple);
  color: var(--white);
}
.ac-persona[aria-pressed="true"] i { color: var(--white); }

/* ---------- Search + count bar (sticky) ---------- */
.ac-searchbar {
  position: sticky;
  /* The site header is also sticky (229px, z-index 1000), so a top:0 sticky
     bar pins underneath it and disappears. --ac-header-h is measured at
     runtime by ub-chrome.js and updated on resize, because the header's
     height changes at breakpoints (the centennial ribbon hides at 768px). */
  top: var(--ac-header-h, 0px);
  z-index: 40;
  background: var(--white);
  border-top: 3px solid var(--ub-purple);
  border-bottom: 1px solid #DDE4E7;
  box-shadow: 0 6px 18px rgba(44,62,80,0.06);
  padding: 16px 0;
  margin-bottom: 28px;
}
.ac-searchbar-inner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
}
.ac-search { position: relative; }
.ac-search i {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--ub-purple);
  font-size: 1rem;
  pointer-events: none;
}
.ac-search input {
  width: 100%;
  padding: 15px 44px 15px 46px;
  font-family: inherit;
  font-size: 1.02rem;
  color: var(--text-main);
  background: var(--bg-light);
  border: 1.5px solid #CBD4D8;
  border-radius: 0;
  outline: none;
  transition: var(--transition);
}
.ac-search input:focus {
  border-color: var(--ub-purple);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(89,45,130,0.13);
}
.ac-search input::placeholder { color: #8A979E; }
.ac-search-clear {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 1.05rem;
  cursor: pointer;
  padding: 6px 8px;
  display: none;
}
.ac-search-clear.visible { display: block; }
.ac-search-clear:hover { color: var(--ub-purple); }

.ac-count {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
}
.ac-count b { color: var(--ub-purple); font-size: 1.16rem; }

.ac-sort {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.86rem;
  color: var(--text-light);
  font-weight: 600;
  white-space: nowrap;
}
.ac-sort select {
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-main);
  padding: 10px 34px 10px 12px;
  border: 1.5px solid #CBD4D8;
  border-radius: 0;
  background-color: var(--white);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%23592D82' d='M1.4 0 7 5.6 12.6 0 14 1.4 7 8.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
}
.ac-sort select:focus { border-color: var(--ub-purple); }

/* ---------- Layout: facet rail + results ---------- */
.ac-layout {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 44px;
  align-items: start;
}

/* ---------- Facets ---------- */
/* Clears the sticky header AND the sticky search bar above it. */
.ac-facets {
  position: sticky;
  top: calc(var(--ac-header-h, 0px) + var(--ac-searchbar-h, 88px) + 22px);
}
.ac-facet-group { margin-bottom: 26px; padding-bottom: 24px; border-bottom: 1px solid #E4E9EB; }
.ac-facet-group:last-of-type { border-bottom: none; }
.ac-facet-group > h3 {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ub-purple);
  margin-bottom: 14px;
}
.ac-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 0.96rem;
  color: var(--text-main);
  transition: var(--transition);
  line-height: 1.35;
}
.ac-check:hover { color: var(--ub-purple); }
.ac-check input {
  width: 17px; height: 17px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--ub-purple);
  cursor: pointer;
}
.ac-check .tally {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-light);
  padding-left: 8px;
}
/* Facet values that no longer match anything read as unavailable, not broken */
.ac-check.exhausted { opacity: 0.42; }

.ac-reset {
  width: 100%;
  background: none;
  border: 1.5px solid #CBD4D8;
  padding: 12px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition);
}
.ac-reset:hover { border-color: var(--ub-purple); color: var(--ub-purple); }

/* ---------- Active filter chips ---------- */
.ac-active {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin-bottom: 22px;
}
.ac-active:empty { display: none; }
.ac-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--bg-light);
  border-left: 3px solid var(--ub-blue);
  padding: 8px 12px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-main);
}
.ac-chip button {
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0 0 2px;
}
.ac-chip button:hover { color: var(--ub-purple); }
.ac-clear-all {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ub-blue-text);
  cursor: pointer;
  text-decoration: underline;
  padding: 8px 4px;
}
.ac-clear-all:hover { color: var(--ub-purple); }

/* ---------- Results grid ---------- */
.ac-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ac-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  border-bottom: 4px solid transparent;
  transition: transform 0.3s cubic-bezier(0.25,0.8,0.25,1),
              box-shadow 0.3s cubic-bezier(0.25,0.8,0.25,1),
              border-color 0.3s ease;
}
.ac-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
  border-bottom-color: var(--ub-blue);
}
.ac-card.hidden { display: none; }

.ac-card-media {
  position: relative;
  height: 156px;
  overflow: hidden;
}
.ac-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25,0.8,0.25,1);
}
.ac-card:hover .ac-card-media img { transform: scale(1.05); }
/* Wedge corner cut */
.ac-card-media::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  border-style: solid;
  border-width: 0 0 26px 26px;
  border-color: transparent transparent var(--white) transparent;
}
.ac-card-degree {
  position: absolute;
  top: 0; left: 0;
  background: var(--ub-purple);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 6px 11px;
}
.ac-card-body {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ac-card-name {
  font-size: 1.14rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.018em;
  line-height: 1.26;
}
.ac-card-college {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-top: 7px;
  line-height: 1.4;
}
.ac-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid #EDF1F2;
}
.ac-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ub-blue-text);
  background: rgba(0,167,224,0.09);
  padding: 4px 8px;
}
.ac-tag.campus { color: var(--ub-purple); background: rgba(89,45,130,0.09); }

/* ---------- Empty state ---------- */
.ac-empty {
  display: none;
  border: 2px dashed #CBD4D8;
  padding: 54px 34px;
  text-align: center;
}
.ac-empty.visible { display: block; }
.ac-empty i { font-size: 2.1rem; color: var(--ub-purple); opacity: 0.4; }
.ac-empty h3 {
  font-size: 1.42rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.02em;
  margin: 16px 0 10px;
}
.ac-empty p {
  font-size: 1rem;
  color: var(--text-light);
  line-height: 1.6;
  max-width: 30rem;
  margin: 0 auto 22px;
}
.ac-empty-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

/* Visually hidden, still announced */
.ac-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   THE CARD WITH NO FEATURED IMAGE

   `.ac-card-media` above describes a cropped `<img>`. In the CMS the opposite is
   the usual case: a program is
   published as soon as its facts are right, and the photography arrives later
   or not at all. So this is the normal state, not an error state, and it has to
   look deliberate rather than unfinished.

   Three options were on the table. A stock photograph shared across unrelated
   programs is the worst of them — it implies a specific place or discipline that
   the program has nothing to do with. Hiding the media well entirely gives the
   grid two card heights and breaks the scan down a column. What is left is to
   let the well be typographic: a deep purple field carrying the degree
   abbreviation as an oversized watermark.

   That device is not invented here. It is the same treatment the homepage hero gives
   .hero2-watermark for the centennial numeral — brand type at low opacity as
   texture. Reusing it means a card with no photograph still reads as part of
   this design system rather than as a placeholder someone forgot to replace.

   The small corner badge (.ac-card-degree) is rendered on BOTH states and is
   not restyled here, so the degree is always read in the same place. The
   watermark repeats it at a size that reads as pattern, not as a second label —
   which is why it is aria-hidden in the markup.
   -------------------------------------------------------------------------- */
.ac-card-media.is-placeholder {
  display: grid;
  place-items: center;
  background: var(--ub-purple-deep);
  /* Query container for the mark's cqw sizing below. Scoped to the placeholder
     rather than to every .ac-card-media, so the photographed cards take on no
     containment they have no use for. */
  container-type: inline-size;
}

/* The signature diagonal, at the same angle the hero and the card grid use.
   Without it the field is a flat rectangle, and 20 flat rectangles in a grid
   read as missing images however well the type is set. */
.ac-card-media.is-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(114deg,
      rgba(0, 167, 224, 0.22) 0%,
      rgba(0, 167, 224, 0.06) 42%,
      rgba(0, 167, 224, 0) 66%),
    linear-gradient(to top, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0));
}

.ac-card-mark {
  position: relative;
  /* Clamped rather than fixed: "DC" and "Ed.D." differ by three characters, and
     a size that suits the shorter one overflows the card at the longer one.
     The cap is what keeps a two-letter degree from filling the whole well. */
  font-size: clamp(1.9rem, 13cqw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.17);
  text-transform: uppercase;
  user-select: none;
  /* A long abbreviation stays on one line and inside the well rather than
     wrapping into the wedge cut at the bottom-right. */
  white-space: nowrap;
  max-width: 100%;
  padding: 0 14px;
  overflow: hidden;
  transition: color 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* The photographed card answers hover with a 1.05 scale on its image. This is
   the same acknowledgement for a card that has no image to scale — without it
   the placeholder cards feel dead next to their neighbours. */
.ac-card:hover .ac-card-media.is-placeholder .ac-card-mark,
.ac-card:focus-visible .ac-card-media.is-placeholder .ac-card-mark {
  color: rgba(255, 255, 255, 0.29);
}

/* A program with no degree abbreviation has no watermark to show, so the field
   would be empty. Keep the wedge and the diagonal; they still read as a
   deliberate surface. Nothing more is added — inventing a glyph for a program
   whose credential is not recorded would be asserting something untrue. */

@media (prefers-reduced-motion: reduce) {
  .ac-card-mark { transition: none; }
}

/* --------------------------------------------------------------------------
   FOCUS VISIBILITY ON THE CARD

   Every card is a real destination and the grid is often the only thing on the
   page, which makes it the primary keyboard path.
   -------------------------------------------------------------------------- */
.ac-card:focus-visible {
  outline: 3px solid var(--ub-blue);
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   THE FINDER AS THE WHOLE PAGE

   .ac-finder is padded as one section of a longer page. Rendered from a block on
   an otherwise empty page, the finder is the whole page, so it needs its own top
   spacing.
   -------------------------------------------------------------------------- */
.ac-finder:first-child {
  padding-top: 64px;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  /* Facets collapse into a disclosure above the results */
  .ac-layout { grid-template-columns: 1fr; gap: 26px; }
  .ac-facets { position: static; }
  .ac-facets-panel {
    display: none;
    border: 1px solid #DDE4E7;
    padding: 22px 20px 8px;
    background: var(--bg-light);
  }
  .ac-facets-panel.open { display: block; }
  .ac-facets-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: var(--white);
    border: 1.5px solid var(--ub-purple);
    padding: 14px 18px;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ub-purple);
    cursor: pointer;
    margin-bottom: 14px;
  }
  .ac-facets-toggle .n {
    background: var(--ub-purple);
    color: var(--white);
    font-size: 0.78rem;
    padding: 3px 9px;
  }
  .ac-facet-group { margin-bottom: 20px; padding-bottom: 18px; }

  .ac-searchbar-inner { grid-template-columns: 1fr auto; row-gap: 12px; }
  .ac-sort { grid-column: 1 / -1; justify-content: flex-end; }

  .ac-grid { grid-template-columns: repeat(2, 1fr); }
}

/* The facets toggle only exists below 1100px */
@media (min-width: 1101px) {
  .ac-facets-toggle { display: none; }
  .ac-facets-panel { display: block !important; }
}

@media (max-width: 768px) {
  .ac-persona-row { display: grid; grid-template-columns: 1fr 1fr; }
  .ac-persona { justify-content: center; padding: 12px 10px; font-size: 0.88rem; }

  .ac-searchbar { padding: 12px 0; }
  .ac-searchbar-inner { grid-template-columns: 1fr; }
  .ac-count { text-align: left; }
  .ac-sort { justify-content: space-between; }
  .ac-sort select { flex: 1; margin-left: 10px; }

  .ac-grid { grid-template-columns: 1fr; }
  .ac-empty { padding: 38px 20px; }
}