/* ============================================================
   150-anniversary — Custom content styles
   AUX CDN handles global typography, colors, and components.
   This file covers the light-mode reset plus a handful of
   documented deviations from stock AUX markup.
   ============================================================ */

/* ── Base — force light mode regardless of OS/browser preference ── */
html, body { background: #ffffff; color: var(--aux-gray-800, #2c2b28); color-scheme: light; }

/* ── Deviation from stock AUX: main-header .site-title .superhead is
   desktop-hidden by default (AUX only shows it below 768px). This site
   wants "150th Anniversary" visible at all sizes, so we override it. ── */
.main-header .site-title .superhead {
  display: block;
  visibility: visible;
}

/* ── Search, nested inside the hero content column, full width;
   deviation from stock AUX (search is normally page-width constrained) ── */
.hero__content .section-intro__container { padding: 0; margin: 0; }
.hero__content .section-intro__description { margin-bottom: var(--space-sm, 8px); }

.hero__content .search {
  max-width: none;
  margin: 0;
}

/* Quick links below the search: 3 left / 2 right in two columns
   (grid-auto-flow: column fills column 1 top-to-bottom first) */
.quick-links {
  margin: var(--space-md, 16px) 0 0;
}

.quick-links ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: var(--space-xl, 48px);
  row-gap: var(--space-xs, 4px);
  width: 100%;
}

/* ── 150th logo strip — deviates from AUX component library entirely,
   per explicit request; markup/CSS supplied by the user. ── */
.logo-strip {
  padding: 1.5rem;
}
.logo-strip.logo-strip--light-gray {
  background: #eaeaea;
}
.logo-strip__container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.logo-strip__container .dot-divider {
  flex: 1 0 20px;
  display: block;
  border-top: dotted #500000 3px;
}
.logo-strip__container .logo-strip__left {
  display: flex;
  width: fit-content;
  align-items: center;
}
.logo-strip__container .logo-strip__left img {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  margin-right: 1rem;
}
.logo-strip__container .logo-strip__right {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.logo-strip__container .logo-strip__right a {
  font-family: "Work Sans", sans-serif;
  text-transform: uppercase;
  font-weight: 800;
  color: #500000;
  text-decoration: none;
}
.logo-strip__container .logo-strip__right a::after {
  content: " →";
}

@media screen and (max-width: 875px) {
  .logo-strip--simple .logo-strip__right {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media screen and (max-width: 600px) {
  .logo-strip--simple .logo-strip__container {
    flex-direction: column;
  }
  .logo-strip--simple .dot-divider {
    display: none;
  }
}

.on-dark-note {
  margin-top: var(--space-md, 16px);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

/* ── AUX's .row/.col-6 grid utility has no built-in responsive
   breakpoint (unlike Bootstrap's col-md-6). Used here to split long
   plain-fact lists into two columns inside Link Slabs; this restores
   the single-column stack below the same 768px breakpoint AUX's own
   .link-slab already collapses at. ── */
@media (max-width: 768px) {
  .link-slab .row > .col-6 {
    width: 100%;
  }
}

/* ============================================================
   Photo Snapshot — a deliberate departure from the AUX component
   library, not a substitute for it. AUX's media components (Captioned
   Media, Media Feature) are fixed-width and formally captioned; on
   pages with a narrower sidebar-nav content column they either crowd
   the text or read as too dominant. This is a smaller, informal
   "photo album" treatment: a white mat, thin gray outline, soft
   shadow, and a slight tilt, sized to fit alongside a paragraph
   rather than to a fixed column width. Prototyped on Oral Histories'
   "Why Oral History Matters"; --sm/--lg and tilt variants added so a
   page with several snapshots doesn't read as one repeated component.
   ============================================================ */

.snapshot-feature {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 56px);
}

.snapshot-feature__text {
  flex: 1 1 320px;
  min-width: 280px;
}

.snapshot-feature__photo {
  flex: 0 1 300px;
  display: flex;
  justify-content: center;
}

.photo-snapshot {
  display: inline-block;
  width: 320px;
  max-width: 100%;
  background: #ffffff;
  padding: 10px 10px 28px;
  border: 1px solid var(--aux-gray-200, #e8e6e0);
  box-shadow:
    0 16px 32px -12px rgba(28, 27, 24, 0.28),
    0 4px 12px rgba(28, 27, 24, 0.08);
  transform: rotate(-2.5deg);
}

.photo-snapshot img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.photo-snapshot figcaption {
  margin-top: 10px;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
  color: var(--aux-gray-600, #5c5a55);
  text-align: center;
}

@media (max-width: 600px) {
  .photo-snapshot {
    transform: rotate(-1.5deg);
  }
}

/* Size variants — mix these across a page so multiple snapshots don't
   read as one repeated component at one fixed size. */
.photo-snapshot--sm { width: 240px; }
.photo-snapshot--lg { width: 340px; }

/* Tilt variants — vary alongside size for the same reason. */
.photo-snapshot--tilt-right { transform: rotate(3deg); }
.photo-snapshot--tilt-deep { transform: rotate(-5deg); }
@media (max-width: 600px) {
  .photo-snapshot--tilt-right { transform: rotate(1.5deg); }
  .photo-snapshot--tilt-deep { transform: rotate(-2.5deg); }
}

/* On a dark (maroon) background the default charcoal shadow reads too
   close in value to sit under the card — lift it with a deeper, more
   diffuse shadow instead so the white mat still looks lifted off the
   surface rather than just high-contrast. */
.photo-snapshot--on-dark {
  box-shadow:
    0 20px 40px -10px rgba(0, 0, 0, 0.55),
    0 6px 16px rgba(0, 0, 0, 0.35);
}

/* Non-AUX companion to Button Slab's own .slab-intro/.button-group
   50/50 split: a second column that holds a snapshot instead of a
   button, for sections where the CTA moved into .slab-intro alongside
   the text and the photo gets the other half to itself. */
.button-slab .button-slab__photo {
  width: 50%;
  display: flex;
  justify-content: center;
}
@media (max-width: 768px) {
  .button-slab .button-slab__photo {
    width: 100%;
    margin-top: var(--space-lg, 24px);
  }
}

/* A CTA moved into .slab-intro (see above) sits in a narrower column
   than Button Slab normally gives its button — AUX's own .btn already
   declares width:fit-content, but it renders stretched to the column
   width here and wraps to two lines. Force it back to content width
   and keep the label on one line. */
.button-slab .slab-intro .button-group {
  width: fit-content;
}
.button-slab .slab-intro .btn {
  width: fit-content;
  white-space: nowrap;
}

/* ============================================================
   Card image motion — hover-to-play (proof of concept)

   A deliberate extension beyond AUX: the linked-card component
   has no motion or video variant. One card in the "Browse the
   University Archives" group (Corps of Cadets) carries a short,
   silent clip generated from that card's own archival photograph
   (OpenArt, Kling 3.0 image-to-video — the still is the literal
   first frame). The clip lies over the still and fades in while
   the card is hovered or holds keyboard focus, then fades out and
   resets. It plays once per hover — the photograph "comes to
   life, then settles" — rather than looping, so there is no
   visible loop seam.

   The still image is always the real content (it keeps its alt
   text); the clip is decorative (aria-hidden, tabindex -1) and
   purely additive. It is preload="none" (a ~240 KB, 720p H.264
   file, ffmpeg-optimised from OpenArt's 3 MB output) so nothing
   downloads until the first hover.
   Gated off entirely for reduced-motion and for pointer-less
   (touch) devices, where a hover has no meaning — in CSS here and
   again in the JS guard on index.html.

   Full workflow (photo -> OpenArt -> download -> wire up):
   process.html, "Bringing an archival photo to life" section.
   ============================================================ */

.card__image { position: relative; }

.card-motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.6rem 0.6rem 0 0;   /* matches AUX .card__image img */
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;               /* clicks fall through to .linked-card__link::after */
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .linked-card:hover .card-motion,
  .linked-card:focus-within .card-motion {
    opacity: 1;
  }
}

/* Touch (no hover intent) or reduced motion: the clip never renders.
   Redundant with the JS guard and the query above, on purpose. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .card-motion { display: none; }
}

/* ============================================================
   Hero background video — AUX hero__video variant (it stands in
   for hero__image as the hero background, exactly as AUX's Home
   Page Header "Video" variant does). The loop is a silent
   ping-pong cinemagraph built from the hero photograph itself
   (OpenArt / Kling 3.0 image-to-video, closed into a seamless
   loop with ffmpeg). Playback is JS-gated on prefers-reduced-
   motion rather than AUX's hard `autoplay` — a deliberate a11y
   choice; see the script near the end of index.html.

   AUX's `.hero.hero--main .hero__video` ships `z-index: -1` so
   the video sits behind `.hero__container`. This experiment's
   opaque `body { background:#fff }` reset would otherwise let
   that negative z-index fall behind the page itself, so `.hero`
   is given its own stacking context to contain it — the same
   fix the Media Feature component needed here (see process.html).
   ============================================================ */

.hero.hero--main {
  isolation: isolate;
}

/* AUX's markup puts `style="width:100%;height:100%"` on the <video>; as a
   CSS-only integration we set it here so the frame fills the flex wrapper
   (object-fit: cover comes from AUX). */
.hero .hero__video video {
  width: 100%;
  height: 100%;
}

/* Reduced-motion / no-JS fallback: a static still stands in for the
   loop. Hidden by default; revealed (and the video + control removed)
   only when the viewer has asked for reduced motion. */
.hero .hero__image--fallback {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero__video,
  .hero .hero__video + .hero__video-controls {
    display: none;
  }
  .hero .hero__image--fallback {
    display: block;
  }
}

/* AUX's hero__video-controls is a bare white glyph with no backing — it
   vanishes against the bright sky in the top-right of this photograph.
   Add a dark scrim disc behind it so the control is always perceivable
   (WCAG), and shrink the hit area to the disc so a click near the top of
   the hero doesn't toggle playback by accident. */
.hero .hero__video + .hero__video-controls {
  width: auto;
  height: auto;
  padding: 1.25rem;
}
.hero .hero__video + .hero__video-controls::before {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  background: rgba(28, 27, 24, 0.5);
}
.hero .hero__video + .hero__video-controls::after {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
}

.custom-content .custom-content__container {
    width: 100%;
}