/* ==========================================================================
   academics-wp.css — WordPress-only additions for the program finder
   University of Bridgeport

   Load order: style.css → ub-elements.css → home.css → academics.css → THIS FILE

   Why this file exists rather than edits to academics.css:

   academics.css is a byte-identical copy of new-redesign/css/academics.css, and
   that equivalence is what stops the theme and the mockup drifting — it is
   verifiable with md5. Editing it would end that guarantee. Everything here is
   a state the static mockup never had to describe, because every one of its 34
   cards was hand-authored with a photograph.
   ========================================================================== */

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

   In the mockup every card had a photograph, so `.ac-card-media` only ever
   described a cropped `<img>`. In the CMS the opposite is true: 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 home.css 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; }
}


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

   The mockup's cards were `href="#"` placeholders, so their focus ring was
   never load-bearing. Here 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;
}


/* --------------------------------------------------------------------------
   3. THE FINDER AS A PAGE IN THE THEME

   academics.css styles .ac-finder as one section of a longer mockup page that
   opened with .ac-hero. Rendered from a block on an otherwise empty page, the
   finder is the whole page, so it needs its own top spacing rather than
   inheriting the hero's.
   -------------------------------------------------------------------------- */
.ac-finder:first-child {
  padding-top: 64px;
}