/* ============================================================
   CTL Website — Shared Widget Stylesheet v8.21.26
   ============================================================
   One shared stylesheet for every widget under widgets/, replacing the
   <style> block each widget used to carry on its own. Uploaded to dotCMS as
   a plain static file (not the File Asset content type — that path is
   unreliable for asset serving in this dotCMS instance) and loaded via a
   <link rel="stylesheet"> tag placed in the sitewide contact-info content
   block that already renders on every CTL page, so one file update reaches
   every page at once.

   HOW TO USE THIS FILE:
   Each section below is labeled with the page(s)/widget(s) it renders on —
   use that to find the right rule when a page's styling needs a change.
   Class prefixes hint at origin but aren't fully reliable on their own:
   `.ctl-gh-*` = the old "Get Help" widget lineage (now Our Services + the
   staff/FDC personnel cards), `.ctl-res-*` = the For Instructional Design resource
   listing + its homepage carousel twin, `.ctl-ir-*` = the resource DETAIL
   page specifically (its own separate copies of similar-looking classes —
   see the mismatch note further down). When a section says a class isn't
   used by any widget yet, that means it's drafted here but the widget HTML
   still needs an edit before it takes effect — inline style="..." on the
   HTML always wins over a class of the same intent.
   ============================================================ */

:root {
  --ctl-maroon: #8A2A2B;
  --ctl-maroon-tint: rgba(138, 42, 43, 0.05);
  --ctl-navy: #04202E;
  --ctl-navy-tint: rgba(4, 32, 46, 0.06);
  --ctl-border: #E7E3DB;
  --ctl-gray-bg: #EFEEED;
  /* Was #95959C — ~2.6:1 against --ctl-gray-bg and ~3:1 against white, both
     well under WCAG AA's 4.5:1 for normal text (this is the token behind
     meta rows, subtext, "muted" listing cards, and the Activity Detail
     compensation box, all reported as low-contrast). Darkened to clear
     4.5:1 against both white and --ctl-gray-bg. */
  --ctl-gray-text: #5F6368;
  --ctl-closed-bg: #f8d7da;
  --ctl-closed-text: #842029;
  --ctl-closed-border: #f5c2c7;
  --ctl-open-bg: #d1e7dd;
  --ctl-open-text: #0f5132;
}

/* ============================================================
   Shared utility classes — small, generic building blocks reused across
   many widgets (not tied to one page/section). Prefer these over a
   one-off inline style="..." when a pattern matches.
   ============================================================ */
.ctl-empty-state {
  padding: 40px;
  text-align: center;
  color: var(--ctl-gray-text);
}
.ctl-warn-box {
  background: #fff3cd;
  color: #856404;
  padding: 20px;
  border: 1px solid #ffeeba;
  border-radius: 6px;
}
.ctl-warn-box h4 {
  margin-top: 0;
}
/* Smaller, permanent-notice variant of .ctl-warn-box — used for the
   "Editors only: N item(s) hidden" QC notice on the Instructional Design
   Resources listing page, shown whenever $EDIT_MODE and not tied to any
   debug dump. */
.ctl-editor-notice {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}
.ctl-link-inherit {
  color: inherit;
}
.ctl-text-gray {
  color: var(--ctl-gray-text);
}
.ctl-section-divider {
  margin-bottom: 32px;
  border-top: 1px solid var(--ctl-border);
  padding-top: 20px;
}
.ctl-section-divider-sm {
  margin-bottom: 28px;
}
.ctl-subheading {
  font-size: 1.1rem;
  margin-bottom: 16px;
  font-weight: 700;
}
.ctl-subheading-sm {
  margin-bottom: 12px;
}
.ctl-badge-neutral {
  background-color: var(--ctl-gray-bg);
  color: var(--ctl-gray-text);
}
.ctl-mt-40 {
  margin-top: 40px;
}
.ctl-mt-50 {
  margin-top: 50px;
}
.ctl-mt-56 {
  margin-top: 56px;
}
.ctl-section-subtext {
  color: var(--ctl-gray-text);
  font-size: 0.9rem;
  margin-bottom: 24px;
}

/* EDIT_MODE-only debug banners — never visible on a live/published page.
   Base class sets shared box metrics; a --info/--warn/--neutral modifier
   sets color; -sm / -compact modifiers tighten size for denser dumps. */
.ctl-debug-box {
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 0.8rem;
  font-family: monospace;
}
.ctl-debug-box-sm {
  font-size: 0.75rem;
}
.ctl-debug-box-compact {
  border-radius: 4px;
  padding: 4px 10px;
  margin-bottom: 4px;
  font-size: 0.72rem;
}
.ctl-debug-box--info {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}
.ctl-debug-box--warn {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}
.ctl-debug-box--neutral {
  background: #e2e3e5;
  color: #383d41;
  border: 1px solid #d6d8db;
}

/* Attachment/download link tile — Activity Detail (Downloads) and the
   Instructional Resource detail page (Session/Resource Materials) share
   this exact card shape: file icon square + label + download chevron. */
.ctl-downloads-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 500px;
}
.ctl-download-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
  text-align: left;
  text-transform: uppercase;
}
.ctl-download-icon-wrap {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  background-color: #ffffff !important;
  color: var(--ctl-maroon) !important;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid currentColor;
}
.ctl-download-icon-inner {
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ctl-download-icon {
  font-size: 1.25rem;
  opacity: 0.5;
}
.ctl-download-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  padding: 0 16px;
  gap: 12px;
}
.ctl-download-label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.2;
}
.ctl-download-chevron {
  font-size: 0.95rem;
  font-weight: 700;
  display: inline-flex;
  flex-shrink: 0;
}

/* ============================================================
   Buttons — the maroon-outline CTA button (fills solid maroon on hover)
   Used on: Activity Detail (Add to Calendar / Register / Apply / Submit),
   Meet the CTL Staff + Faculty Development Committee + Request Support's
   Make an Appointment section (Meet with Me / Visit My Website), and
   Request Support's Our Services (Access this Service).
   ============================================================ */
.ctl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
  color: var(--ctl-maroon);
  background: transparent;
  border: 1px solid var(--ctl-maroon);
  border-radius: 4px;
  text-decoration: none;
}
.ctl-btn:hover {
  background: var(--ctl-maroon);
  color: #fff;
  text-decoration: none;
}

/* ============================================================
   Status badges — pill/tag labels signaling an item's state
   ============================================================ */
/* Activity Detail only — "Registration Required" / "Application Required" /
   submission-track pill. Background/text color is set per-instance inline
   via $badgeBg/$badgeColor in the widget since it varies by state. */
.ctl-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Activity Detail only — signup-status pill: "Open" / "Due [date]" /
   "Closed" (registration/application), plus "Past Event". One shared box
   shape across all three status colors. */
.ctl-badge-open,
.ctl-badge-due,
.ctl-badge-closed,
.ctl-badge-closed-compact {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  white-space: nowrap;
}

.ctl-badge-open,
.ctl-badge-due,
.ctl-badge-closed {
  padding: 4px 10px;
  font-size: 0.85rem;
}

.ctl-badge-open {
  background: var(--ctl-open-bg);
  color: var(--ctl-open-text);
}

.ctl-badge-due {
  background: var(--ctl-navy-tint);
  color: var(--ctl-navy);
}

.ctl-badge-closed,
.ctl-badge-closed-compact {
  background: var(--ctl-closed-bg);
  color: var(--ctl-closed-text);
}

/* Smaller/bolder variant used for the "Expired" badge on Past Recipients
   (Missed Connections section, ctl-widget_missed-opportunities.html). */
.ctl-badge-closed-compact {
  border: 1px solid var(--ctl-closed-border);
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

/* ============================================================
   Category tags — small grey pills naming an activity's category
   ============================================================ */
/* Activity Detail only — the category pills above the title. */
.ctl-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  background-color: var(--ctl-gray-bg);
  color: #444;
  border: 1px solid var(--ctl-border);
  border-radius: 4px;
}

/* Not wired into any widget yet — drafted as a dimmed variant for expired
   items on Past Recipients (Missed Connections section), which currently
   uses its own inline-styled grey pill instead of a class. */
.ctl-tag-muted {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  background-color: var(--ctl-gray-bg);
  color: var(--ctl-gray-text);
  border: 1px solid var(--ctl-border);
  border-radius: 4px;
  line-height: 1;
}

/* ============================================================
   Meta info row — Activity Detail only: the date/time/location/badge
   strip directly under the title.
   ============================================================ */
.ctl-info-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 0.9rem;
  color: var(--ctl-gray-text);
}

/* ============================================================
   Deadline boxes — Activity Detail only: the "Register/Apply by [date]"
   box, plus the dashed-border optional submission-track box below it.
   ============================================================ */
.ctl-deadline-box {
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.ctl-deadline-box-primary {
  border: 1px solid var(--ctl-border);
}
.ctl-deadline-box-optional {
  border: 1px dashed var(--ctl-border);
  background: var(--ctl-gray-bg);
}

/* Wired in (2026-08-07) on the two single-column listing widgets: Current
   Opportunities (ctl-widget_active-opportunities.html) and Events Upcoming
   (ctl-widget_upcoming-events.html) — both now use class="ctl-listing-card
   ctl-hover-lift" in place of the identical copy-pasted inline style="..."
   they used to carry. Moving border/box-shadow out of inline is required,
   not cosmetic — .ctl-hover-lift:hover changes border-color/box-shadow, and
   an inline style always beats a stylesheet :hover rule on specificity, so
   the hover state was invisible until this swap.
   position:relative added 2026-08-07 (whole-tile-clickable pass) so the
   title link's .stretched-link overlay can anchor to the card itself, same
   as .ctl-res-card/.ctl-ir-related-card above. */
.ctl-listing-card {
  position: relative;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  border: 1px solid var(--ctl-border);
  border-radius: 8px;
  padding: 28px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Same border/radius/shadow as .ctl-listing-card above, but for the two
   pared-down 2-column-grid cards (Past Events, Missed Connections) whose
   layout differs (column not row, 24px padding not 28px, no gap — they
   space children with margin-bottom instead). Wired in 2026-08-07 alongside
   .ctl-listing-card, same reason: border/box-shadow can't stay inline once
   .ctl-hover-lift is applied. ctl-widget_missed-opportunities.html pairs
   this with .ctl-listing-card-muted (below) for its grayed-out expired look.
   position:relative added 2026-08-07, same reason as .ctl-listing-card above. */
.ctl-listing-card-compact {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ctl-border);
  border-radius: 8px;
  padding: 24px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Whole-tile-clickable pass (2026-08-07): every .ctl-hover-lift tile that
   also carries a real button (Apply/Register/Details/View Details) needs
   that button to stay independently clickable ON TOP of the title's
   Bootstrap .stretched-link overlay (which stretches to z-index:1 across
   the whole card — see .ctl-listing-title-link below). Without this, the
   button becomes visually present but dead — the overlay eats the click and
   always routes to the title's href instead. Scoped to the two card shapes
   that pair a stretched title with a separate button
   (.ctl-listing-card/-compact); .ctl-res-card, .ctl-ir-related-card, and
   .ctl-activity-card have no second link inside them, so they don't need this. */
.ctl-listing-card .btn,
.ctl-listing-card-compact .btn {
  position: relative;
  z-index: 2;
}

/* Declared AFTER .ctl-listing-card / .ctl-listing-card-compact on purpose —
   ctl-widget_missed-opportunities.html pairs this with
   .ctl-listing-card-compact on the same element, and since both are
   single-class selectors of equal specificity, the `background` property
   needs source order (not just selector weight) to decide the tie: this
   rule must come later so its gray background wins over compact's white
   one. Reorder with care if this ever gets touched again.
   No opacity here (there used to be one, 0.85) — applying opacity to the
   whole card blends its already-muted text toward the page background too,
   compounding the low-contrast problem instead of just fading the card.
   The gray background + muted text colors carry the "expired" look on
   their own. */
.ctl-listing-card-muted {
  background: var(--ctl-gray-bg);
}


/* Used on: Events page (Past Events section) and Past Recipients page
   (Missed Connections section) — 2-column card grid, collapses to 1 column
   under 768px. */
.ctl-past-events-grid,
.ctl-missed-opps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 767px) {
  .ctl-past-events-grid,
  .ctl-missed-opps-grid {
    grid-template-columns: 1fr;
  }
}

/* 2-line text clamp. Used on: Past Recipients (expired opportunity
   description, no expand control). Was also used on Request Support > Our
   Services (with a "Read more" toggle, via .ctl-gh-svc-desc/.is-expanded) —
   removed 2026-08-07 per user feedback; service tiles now show their full
   description with no truncation, so that variant and its toggle button/JS
   are gone. */
.ctl-missed-opp-desc {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Listing card BODY layout — the internal anatomy shared by all 5
   CtlActivity listing widgets (Happening Now, Upcoming Events, Past Events,
   Current Opportunities, Missed Connections): thumbnail, category tag row,
   title, a meta row of icon+text items separated by "|" dividers, a
   horizontal rule, then a description + action button footer. Row-layout
   widgets (Happening Now/Upcoming/Current Opportunities) pair these with
   .ctl-listing-card; the 2-column grid widgets (Past Events/Missed
   Connections) pair them with .ctl-listing-card-compact and the
   *-compact/-muted modifiers below. */
.ctl-listing-thumb-wrap {
  flex: 0 0 200px;
}
.ctl-listing-thumb {
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 6px;
}
.ctl-listing-compact-thumb {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 14px;
}
.ctl-listing-body {
  flex: 1;
  min-width: 0;
}
.ctl-listing-head {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}
.ctl-listing-head-tight {
  margin-bottom: 10px;
}
.ctl-listing-tags-row {
  order: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.ctl-cat-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  background-color: var(--ctl-gray-bg);
  color: #444;
  border: 1px solid var(--ctl-border);
  border-radius: 4px;
  display: inline-block;
  line-height: 1;
}
.ctl-cat-tag-muted {
  color: var(--ctl-gray-text);
}
.ctl-listing-title {
  order: 2;
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
}
.ctl-listing-title-compact {
  font-size: 1.2rem;
}
.ctl-listing-title-muted {
  color: var(--ctl-gray-text);
}
.ctl-listing-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-size: 0.9rem;
  color: var(--ctl-gray-text);
}
.ctl-listing-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ctl-listing-meta-single {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--ctl-gray-text);
  margin-bottom: 10px;
}
.ctl-listing-meta-icon {
  font-size: 0.95rem;
}
.ctl-listing-meta-row-tight {
  margin-bottom: 14px;
}
.ctl-listing-meta-divider {
  color: var(--ctl-border);
}
.ctl-listing-divider {
  border-top: 1px solid var(--ctl-border);
  margin-bottom: 14px;
}
.ctl-listing-divider-spaced {
  margin-top: 14px;
}
.ctl-listing-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.ctl-listing-desc-block {
  margin: 0 0 14px 0;
  color: #444;
  font-size: 0.95rem;
  line-height: 1.4;
  flex: 1;
}
.ctl-listing-desc-inline {
  margin: 0;
  color: #444;
  font-size: 0.95rem;
  line-height: 1.4;
  flex: 1;
}
.ctl-listing-desc-muted {
  color: var(--ctl-gray-text);
}
.ctl-listing-actions {
  flex-shrink: 0;
}
.ctl-listing-empty {
  color: var(--ctl-gray-text);
  font-style: italic;
}
.ctl-listing-empty-pad {
  padding: 12px 0;
}
.ctl-listing-indent {
  margin-left: 10px;
}
.ctl-listing-indent-bottom {
  margin-bottom: 30px;
}
/* Stacked single-column listing wrapper — Upcoming Events, Happening Now,
   and Current Opportunities (event-listing-group / opp-listing-group in
   each widget's markup) all wrap their repeated .ctl-listing-card tiles in
   one of these two class names. Neither was ever defined here, so
   consecutive tiles rendered flush against each other with no vertical
   whitespace between them. */
.event-listing-group,
.opp-listing-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ctl-listing-card-now {
  border-left: 4px solid var(--ctl-maroon);
  background: var(--ctl-maroon-tint);
}
.ctl-badge-now {
  background-color: var(--ctl-maroon);
  color: #fff;
}

/* Missed Connections collapsible toggle header. */
.ctl-collapse-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.ctl-collapse-toggle h2 {
  margin: 0;
}
.ctl-collapse-arrow {
  font-size: 0.85rem;
  color: var(--ctl-gray-text);
}
.ctl-collapse-subtext {
  color: var(--ctl-gray-text);
  font-size: 0.9rem;
  margin-bottom: 24px;
  margin-top: 6px;
}
.ctl-missed-opps-grid.is-collapsed {
  display: none;
}

/* ============================================================
   Horizontal scroll-snap carousel — Welcome to the CTL homepage only,
   both the Featured Resources and Upcoming Events & Opportunities
   carousels. A flex row with scroll-snap, not a Bootstrap .carousel —
   arrow buttons scroll it, there's no auto-play/slide transition.
   ============================================================ */
.ctl-hscroll-wrap {
  position: relative;
}
.ctl-hscroll {
  display: flex;
  gap: 1rem;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-top: 0.5rem;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--ctl-maroon) var(--ctl-gray-bg);
}
.ctl-hscroll::-webkit-scrollbar {
  height: 10px;
}
.ctl-hscroll::-webkit-scrollbar-track {
  background: var(--ctl-gray-bg);
  border-radius: 10px;
}
.ctl-hscroll::-webkit-scrollbar-thumb {
  background-color: var(--ctl-maroon);
  border-radius: 10px;
}
.ctl-hscroll-item {
  flex: 0 0 88%;
  scroll-snap-align: start;
}
@media (min-width: 576px) {
  .ctl-hscroll-item {
    flex-basis: 62%;
  }
}
@media (min-width: 768px) {
  .ctl-hscroll-item {
    flex-basis: 48%;
  }
}
@media (min-width: 992px) {
  /* ~2.3 cards visible -- 2 full + a peek of the 3rd, standard/max desktop
     width. Stays here at all wider widths too since the container caps out. */
  .ctl-hscroll-item {
    flex-basis: 44%;
  }
}
.ctl-hscroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--ctl-border);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  color: var(--ctl-maroon);
  font-size: 1.1rem;
}
.ctl-hscroll-btn:hover {
  background: var(--ctl-maroon);
  color: #fff;
  border-color: var(--ctl-maroon);
}
.ctl-hscroll-btn.ctl-hscroll-prev {
  left: 0;
}
.ctl-hscroll-btn.ctl-hscroll-next {
  right: 0;
}
@media (min-width: 576px) {
  .ctl-hscroll-wrap {
    padding: 0 48px;
  }
}
@media (max-width: 575px) {
  .ctl-hscroll-btn {
    display: none;
  }
}
/* Lift-on-hover (rises slightly, adds shadow + maroon border). Used on:
   homepage nav tiles (.ctl-nav-tile, defined further down), the For Course
   Design resource listing page (.ctl-res-card, added 2026-08-07 — the
   homepage's Featured Resources carousel twin does NOT get it, same card
   markup otherwise), the resource DETAIL page's own "Related Resources"
   row (.ctl-ir-related-card, added 2026-08-07 alongside a Bootstrap
   .stretched-link on the title so the whole card is clickable, not just
   the title text), and, via .ctl-hscroll-item .card, the Upcoming Events
   & Opportunities carousel card. Also added 2026-08-07 to all 4 event/
   opportunity LISTING widgets (Current Opportunities, Past Recipients'
   Missed Connections, Events Upcoming, Events Past) so those tiles get the
   same hover treatment as the carousel/nav-tile/resource cards above — see
   .ctl-listing-card / .ctl-listing-card-compact just above, which those 4
   widgets now pair this with (moving border/box-shadow out of inline was
   required for the hover state to actually show, see those classes'
   comments). .ctl-hover-lift is the reusable name — grouped here with the
   older .ctl-hscroll-item .card selector so both keep working; apply
   .ctl-hover-lift directly to any new card that wants the same effect. */
.ctl-hover-lift,
.ctl-hscroll-item .card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ctl-hover-lift:hover,
.ctl-hscroll-item .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  border-color: var(--ctl-maroon);
}

/* Same scroll-snap technique as .ctl-hscroll above, under its own
   .ctl-ir-hscroll* name. Used on: For Instructional Design resource detail page,
   the "Related Resources" row. .ctl-ir-hscroll-btn/-wrap below are defined
   but NOT currently referenced by that widget — it has no prev/next button
   markup yet, so its row scrolls by touch/trackpad only (see mismatch note
   further down for why this differs from the homepage carousels). */
.ctl-ir-hscroll-wrap {
  position: relative;
}
.ctl-ir-hscroll {
  display: flex;
  gap: 1rem;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-top: 0.5rem;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--ctl-maroon) var(--ctl-gray-bg);
}
.ctl-ir-hscroll::-webkit-scrollbar {
  height: 10px;
}
.ctl-ir-hscroll::-webkit-scrollbar-track {
  background: var(--ctl-gray-bg);
  border-radius: 10px;
}
.ctl-ir-hscroll::-webkit-scrollbar-thumb {
  background-color: var(--ctl-maroon);
  border-radius: 10px;
}
.ctl-ir-hscroll-item {
  flex: 0 0 88%;
  scroll-snap-align: start;
}
@media (min-width: 576px) {
  .ctl-ir-hscroll-item {
    flex-basis: 62%;
  }
}
@media (min-width: 768px) {
  .ctl-ir-hscroll-item {
    flex-basis: 48%;
  }
}
@media (min-width: 992px) {
  .ctl-ir-hscroll-item {
    flex-basis: 44%;
  }
}
/* Round prev/next arrow buttons — same look for both hscroll variants
   above so a button added to the resource-detail row (see note above)
   would match the homepage carousels with no extra styling. */
.ctl-hscroll-btn,
.ctl-ir-hscroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--ctl-border);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  color: var(--ctl-maroon);
  font-size: 1.1rem;
}
.ctl-hscroll-btn:hover,
.ctl-ir-hscroll-btn:hover {
  background: var(--ctl-maroon);
  color: #fff;
  border-color: var(--ctl-maroon);
}
.ctl-hscroll-btn.ctl-hscroll-prev,
.ctl-hscroll-btn.ctl-ir-hscroll-prev,
.ctl-ir-hscroll-btn.ctl-hscroll-prev,
.ctl-ir-hscroll-btn.ctl-ir-hscroll-prev {
  left: 0;
}
.ctl-hscroll-btn.ctl-hscroll-next,
.ctl-hscroll-btn.ctl-ir-hscroll-next,
.ctl-ir-hscroll-btn.ctl-hscroll-next,
.ctl-ir-hscroll-btn.ctl-ir-hscroll-next {
  right: 0;
}
@media (min-width: 576px) {
  .ctl-ir-hscroll-wrap {
    padding: 0 48px;
  }
}
@media (max-width: 575px) {
  .ctl-hscroll-btn,
  .ctl-ir-hscroll-btn {
    display: none;
  }
}


/* ============================================================
   Resource cards — For Instructional Design listing page and its homepage
   "Featured Resources" carousel twin (same card markup on purpose, so a
   featured card looks identical in both places). The listing page's cards
   also carry .ctl-hover-lift (added 2026-08-07, see that class above) —
   the carousel twin intentionally does not, so featured cards only lift on
   hover when viewed on the listing page itself.
   ============================================================ */
.ctl-res-card,
.ctl-ir-related-card {
  position: relative;
}

/* Card title link: plain text until hovered, then maroon + underline.
   Grouped across three different card scopes that all want this same
   treatment: .ctl-res-card (resource listing/carousel, above),
   .ctl-ir-related-card (resource DETAIL page's own "Related Resources"
   row), and .ctl-activity-card (homepage's Upcoming Events & Opportunities
   carousel). */
.ctl-res-card .card-title a,
.ctl-ir-related-card .card-title a,
.ctl-activity-card .card-title a {
  color: inherit;
  text-decoration: none;
}
.ctl-res-card .card-title a:hover,
.ctl-ir-related-card .card-title a:hover,
.ctl-activity-card .card-title a:hover {
  color: var(--ctl-maroon);
  text-decoration: underline;
}
.ctl-activity-card img.card-img-top {
  height: 160px;
  object-fit: cover;
}

/* Same "plain until hovered, then maroon + underline" treatment as the
   .ctl-activity-card title links above, applied directly (no card-title
   wrapper) to the 4 single/2-column listing widgets: Current Opportunities,
   Past Recipients, Events (Upcoming), Events (Past). Added 2026-08-07 —
   these headings were already wrapped in a link but had no hover state, so
   they didn't visually read as clickable. As of the whole-tile-clickable
   pass (2026-08-07, same day), this link also carries Bootstrap's
   .stretched-link so the entire .ctl-listing-card/-compact tile is
   clickable to the same href, not just the title text — see the
   position:relative + .btn z-index rules on .ctl-listing-card above. */
.ctl-listing-title-link {
  color: inherit;
  text-decoration: none;
}
.ctl-listing-title-link:hover {
  color: var(--ctl-maroon);
  text-decoration: underline;
}
.ctl-res-card img.ctl-res-thumb {
  width: 100%;
  height: 160px;
  object-fit: cover;
}
/* Format badge (e.g. "Video", "Article") on resource cards. */
.ctl-res-fmt-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  background: var(--ctl-gray-bg);
  color: #444;
  border: 1px solid var(--ctl-border);
  border-radius: 4px;
  margin-right: 4px;
  margin-bottom: 6px;
}
/* Topic chip (e.g. "Rubric Design") on resource cards. */
.ctl-res-topic-chip {
  display: inline-block;
  font-size: 0.7rem;
  padding: 2px 9px;
  background: #fff;
  color: var(--ctl-gray-text);
  border: 1px solid var(--ctl-border);
  border-radius: 20px;
  margin-right: 4px;
  margin-top: 4px;
}

/* For Instructional Design listing page only — maroon border + tint on the top 3
   pinned "featured" cards (sorted by last-modified date). Not needed on
   the homepage carousel since that only ever shows featured items. */
.ctl-res-card.is-featured {
  border: 2px solid var(--ctl-maroon);
  background: var(--ctl-maroon-tint);
}
.ctl-res-featured-flag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--ctl-maroon);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 2;
}

/* .ctl-ir-tag and .ctl-res-fmt-badge both style a format badge; .ctl-ir-topic-chip
   and .ctl-res-topic-chip both style a topic chip. ctl-site_instRes-detail uses the
   .ctl-ir-* classes below; the listing page and homepage carousel use the .ctl-res-*
   classes instead, with different sizing/shape:
     format badge:  .ctl-res-fmt-badge  0.68rem / 3px 8px padding / mr 4px
                     .ctl-ir-tag        0.7rem  / 4px 8px padding / mr 6px
     topic chip:    .ctl-res-topic-chip  pill, border-radius 20px, white bg
                     .ctl-ir-topic-chip   tag,  border-radius 4px,  grey bg
   All .ctl-ir-* classes below are used on the resource detail page only. */
.ctl-ir-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  background-color: var(--ctl-gray-bg);
  color: #444;
  border: 1px solid var(--ctl-border);
  border-radius: 4px;
  margin-right: 6px;
  margin-bottom: 6px;
}
/* Solid-maroon variant of .ctl-ir-tag, for modality (e.g. "In-Person"). */
.ctl-ir-modality-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  background-color: var(--ctl-maroon);
  color: #fff;
  border: 1px solid var(--ctl-maroon);
  border-radius: 4px;
  margin-right: 6px;
  margin-bottom: 6px;
}
.ctl-ir-topic-chip {
  display: inline-block;
  font-size: 0.75rem;
  padding: 3px 8px;
  background: var(--ctl-gray-bg);
  color: var(--ctl-gray-text);
  border: 1px solid var(--ctl-border);
  border-radius: 4px;
  margin-right: 6px;
  margin-bottom: 6px;
}
/* Teaching-framework chip (e.g. "UDL") — tinted maroon/tan, distinct from
   the format/topic tags above so frameworks read as their own category. */
/* Background/border here are a hand-picked tan tint, hand-tuned to the old
   maroon (#730A00) and not yet recalculated for the current brand maroon
   (#8A2A2B, see :root) — a known lingering mismatch, not part of the brand
   color pass that updated --ctl-maroon and the gray scale above. */
.ctl-ir-framework-chip {
  display: inline-block;
  font-size: 0.75rem;
  padding: 3px 8px;
  background: #f0ece9;
  color: var(--ctl-maroon);
  border: 1px solid #e0d6d2;
  border-radius: 4px;
  margin-right: 6px;
  margin-bottom: 6px;
}
/* "By [author] · Updated [date]" line under the resource title. */
.ctl-ir-byline {
  font-size: 0.9rem;
  color: var(--ctl-gray-text);
  margin-bottom: 24px;
}
.ctl-ir-byline-tight {
  margin-bottom: 14px;
}
.ctl-ir-frameworks-row {
  margin-bottom: 20px;
}
.ctl-ir-tags-row {
  margin-bottom: 14px;
}
.ctl-ir-topics-heading {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ctl-maroon);
  margin-bottom: 10px;
}
.ctl-ir-citations-body {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.6;
}
.ctl-ir-related-list {
  padding-left: 20px;
}
.ctl-ir-video-wrap {
  margin-bottom: 28px;
}
.ctl-ir-video {
  width: 100%;
  border-radius: 8px;
}
.ctl-ir-embed-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-bottom: 28px;
  border-radius: 8px;
}
.ctl-ir-embed-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* "Need to Know" highlights callout — resource detail page only, rendered
   above the article body from the `highlights` Textarea field (up to 4
   short bullets, one per line). Maroon-tint box + left accent bar, same
   tint token as the listing page's featured-card treatment
   (.ctl-res-featured, see below) so the callout reads as "important" using
   the same visual language as the rest of the site rather than a new color. */
.ctl-ir-highlights {
  background: var(--ctl-maroon-tint);
  border-left: 4px solid var(--ctl-maroon);
  border-radius: 6px;
  padding: 18px 24px;
  margin-bottom: 28px;
}
.ctl-ir-highlights h3 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ctl-maroon);
  margin: 0 0 10px;
  font-weight: 700;
}
.ctl-ir-highlights ul {
  margin: 0;
  padding-left: 20px;
}
.ctl-ir-highlights li {
  margin-bottom: 6px;
  line-height: 1.5;
}
.ctl-ir-highlights li:last-child {
  margin-bottom: 0;
}

/* Resource detail page's WYSIWYG `body` field (wrapped in .ctl-ir-body, see
   ctl-site_instRes-detail) — dev-checklist flagged that image captions
   added via the editor's "caption" option rendered identically to the
   surrounding body copy, making them hard to distinguish/read. Confirmed
   via live view-source 2026-08-06: the editor wraps a captioned image as
   `<figure class="image"><img>...<figcaption>...</figcaption></figure>`,
   so figcaption is targeted directly (no fallback selectors needed). */
.ctl-ir-body figure {
  margin: 0 0 20px;
}
.ctl-ir-body figure img {
  display: block;
  width: 100%;
  border-radius: 6px;
}
.ctl-ir-body figcaption {
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--ctl-gray-text);
  text-align: center;
  margin-top: 6px;
}

/* Bare-element selectors (not classes) so any <table> a content author
   pastes into any CtlInstructionalResource's WYSIWYG `body` field is
   styled automatically — the WYSIWYG editor doesn't let authors add
   classes, so this can't rely on one. display:block + overflow-x:auto on
   the table itself lets it scroll horizontally on narrow screens without
   needing a wrapper div the pasted markup won't have. */
.ctl-ir-body table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
}
.ctl-ir-body td,
.ctl-ir-body th {
  border: 1px solid var(--ctl-border);
  padding: 0.6rem 0.9rem;
  vertical-align: top;
}
.ctl-ir-body td p,
.ctl-ir-body th p {
  margin: 0;
}
.ctl-ir-body table tr:first-child td,
.ctl-ir-body table thead th {
  background: var(--ctl-gray-bg);
  border-bottom: 2px solid var(--ctl-maroon);
  font-weight: 700;
}
.ctl-ir-body table tbody tr:not(:first-child):nth-child(even) td {
  background: #fafafa;
}
/* Optional modifier for a checkbox/status first column (e.g. a checklist
   article) — only takes effect if that class survives into the body HTML,
   which requires editing the WYSIWYG source view directly. */
.ctl-ir-body .ctl-table-checklist td:first-child {
  width: 2.5rem;
  text-align: center;
  font-size: 1.1rem;
}
.ctl-ir-body .ctl-table-checklist td:nth-child(2) {
  width: 24%;
}

/* ============================================================
   Filter bar + topic pill cloud — For Instructional Design LISTING page only
   (not the detail page, not the homepage carousel): the Format/Modality
   radio filters and the collapsible Topics pill cloud above the grid.
   ============================================================ */
.ctl-res-count {
  font-size: 0.85rem;
  color: var(--ctl-gray-text);
  margin-bottom: 12px;
}
.ctl-res-filterbar {
  background: var(--ctl-gray-bg);
  border: 1px solid var(--ctl-border);
  border-radius: 10px;
  padding: 18px 20px 20px;
  margin-bottom: 32px;
}
.ctl-res-search-input {
  max-width: 320px;
}
.ctl-res-topic-pill {
  margin: 3px;
}
.ctl-res-subpanel {
  background: #fff;
  border: 1px solid var(--ctl-border);
  border-radius: 8px;
  padding: 12px 14px;
}
.ctl-res-filter-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ctl-gray-text);
  margin-bottom: 6px;
}
.ctl-res-radio-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.ctl-res-radio-list label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #444;
  cursor: pointer;
  margin-bottom: 0;
}
.ctl-res-radio-list input[type="radio"] {
  accent-color: var(--ctl-maroon);
  margin: 0;
}
.ctl-res-dimmed {
  opacity: 0.4;
}
.ctl-res-partial-divider {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ctl-gray-text);
  padding-top: 6px;
}
.ctl-res-pill {
  font-size: 0.8rem;
  padding: 4px 12px;
  border: 1px solid var(--ctl-border);
  border-radius: 20px;
  background: #fff;
  color: #444;
  cursor: pointer;
}
.ctl-res-pill:hover {
  border-color: var(--ctl-maroon);
  color: var(--ctl-maroon);
}
.ctl-res-pill.active {
  background: var(--ctl-maroon);
  border-color: var(--ctl-maroon);
  color: #fff;
}
#ctlResTopicCloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}
.ctl-res-topic-group {
  flex: 1 1 300px;
  max-width: 100%;
}
.ctl-res-topic-group-heading {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ctl-maroon);
  margin-bottom: 2px;
}

/* ============================================================
   Personnel cards — "gh" prefix is a naming holdover from this widget's
   original name (the old combined "Get Help" page); has nothing to do
   with current content.
   .ctl-gh-staff-* below: full single-column bio card. Used on: About the
   CTL > Meet the CTL Staff, AND Request Support > Make an Appointment
   (same widget file, ctl-widget_ctl-staff-profiles.html, reused with a
   different section heading on each page).
   .ctl-gh-grid-* further below: compact multi-column card (no bio text).
   Used on: About the CTL > Faculty Development Committee only
   (ctl-widget_fdc-member-grid.html).
   .ctl-gh-section is an intentionally-empty CSS hook, present in both
   widgets' markup for possible future use.
   ============================================================ */
.ctl-gh-section {
}
.ctl-gh-staff-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ctl-gh-staff-item {
  position: relative;
}
.ctl-gh-staff-item .card-body {
  padding-right: 170px;
}
.ctl-gh-staff-photo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.ctl-gh-staff-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.ctl-gh-staff-actions {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}
.ctl-gh-staff-actions .ctl-btn {
  padding: 4px 12px;
  font-size: 0.72rem;
}
/* FDC compact grid — 2 columns (was auto-fill/minmax(220px), which packed in
   ~4 narrow columns on desktop; widened 2026-08-14 to give each member card
   more horizontal room), collapsing to 1 column under 576px. */
.ctl-gh-staff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 576px) {
  .ctl-gh-staff-grid {
    grid-template-columns: 1fr;
  }
}
.ctl-gh-grid-card {
  height: 100%;
}
.ctl-gh-grid-card .card-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 16px;
  padding: 20px 16px;
}
.ctl-gh-grid-photo {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.ctl-gh-grid-info {
  min-width: 0;
}
.ctl-gh-grid-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 10px;
}
.ctl-gh-grid-actions .ctl-btn {
  padding: 4px 12px;
  font-size: 0.72rem;
}
.ctl-gh-grid-name {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1.25;
}
.ctl-gh-grid-pronouns {
  font-size: 0.875rem;
  color: var(--ctl-gray-text);
  margin-bottom: 0;
  line-height: 1.25;
}
.ctl-gh-grid-jobtitle {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--ctl-gray-text);
  margin-bottom: 0;
  margin-top: 4px;
  line-height: 1.25;
}
.ctl-gh-grid-years {
  font-size: 0.875rem;
  color: var(--ctl-gray-text);
  margin-bottom: 0;
  margin-top: 4px;
  line-height: 1.25;
}

/* ============================================================
   Service cards — originally Request Support > Our Services only; also
   reused statically (no $dotcontent.pull()) by the REACH content block's
   "Book a Consultation" tiles (content blocks/ctl-content_reach.html,
   added 2026-08-20) for a matching look. Tile grid plus the
   "Next Steps" section (button and/or freeform note text, gated on
   isCurrentlyAvailable — replaces the old "Available Now" / "Currently
   Unavailable" badge, which was dropped as redundant). Converted from a
   single-column list to tiles 2026-08-07 — .ctl-gh-svc-list (flex column
   list) is gone; matches .ctl-res-thumb's full-width-top-image treatment
   below instead of the old side-by-side thumbnail.

   Grid switched from Bootstrap row-cols-1/md-2/lg-3 to plain CSS Grid
   (.ctl-gh-svc-grid) 2026-08-12 when expand/collapse was added: a tile can
   now grow to the full row width via .is-expanded (grid-column: 1 / -1)
   while the rest keep their normal size — flexbox row-cols has no clean way
   to do that for a single item. Same 2-breakpoint pattern as
   .ctl-past-events-grid/.ctl-missed-opps-grid, just 3 columns wide instead
   of 2.

   Legibility pass (2026-08-14): the raw WYSIWYG longDescription had no
   line-height/paragraph spacing of its own (Velocity just prints the HTML
   as-is), and once a tile expands to the full grid row the text ran
   edge-to-edge with no line-length limit — both read as a "wall of text."
   Fixed by: line-height/spacing rules on the long-desc's child elements
   (p/ul/ol, since we don't control the WYSIWYG markup itself), a
   newspaper-style `columns` layout on .ctl-gh-svc-long-desc so wide expanded
   tiles reflow into readable ~320px-wide columns instead of one full-width
   paragraph block, and a small uppercase label + chevron on the toggle to
   make expand/collapse read as a distinct section rather than more running
   text.
   ============================================================ */
.ctl-gh-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 991px) {
  .ctl-gh-svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .ctl-gh-svc-grid {
    grid-template-columns: 1fr;
  }
}
/* Modifier for a 4-tile grid that should read as 2x2 instead of the default
   3-wide layout (e.g. articles/ctl-content_reach.html's Available Services
   section) — the existing responsive breakpoints above already collapse to
   2 and then 1 column, so this only needs to override the desktop width. */
.ctl-gh-svc-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}
.ctl-gh-svc-tile {
  min-width: 0;
}
.ctl-gh-svc-tile.is-expanded {
  grid-column: 1 / -1;
}
.ctl-gh-svc-thumb {
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.ctl-gh-svc-lead {
  line-height: 1.55;
  margin-bottom: 12px;
}
.ctl-gh-svc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  margin-bottom: 8px;
  padding: 0;
  border: none;
  background: none;
  color: var(--ctl-maroon);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
}
.ctl-gh-svc-toggle:hover,
.ctl-gh-svc-toggle:focus-visible {
  text-decoration: underline;
}
.ctl-gh-svc-toggle-icon {
  display: inline-block;
  font-size: 0.7rem;
  transition: transform 0.15s ease;
}
.ctl-gh-svc-tile.is-expanded .ctl-gh-svc-toggle-icon {
  transform: rotate(180deg);
}
.ctl-gh-svc-long-desc {
  margin-bottom: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ctl-border);
  font-size: 0.9rem;
  line-height: 1.65;
}
.ctl-gh-svc-long-desc-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ctl-gray-text);
  margin-bottom: 8px;
}
/* Newspaper-style columns so a wide, full-row-width expanded tile still
   reads at a comfortable line length instead of one edge-to-edge paragraph
   block; below ~700px the tile is narrow enough that a single column is
   already readable, so let it fall back naturally. */
@media (min-width: 700px) {
  .ctl-gh-svc-tile.is-expanded .ctl-gh-svc-long-desc {
    column-width: 320px;
    column-gap: 32px;
    column-rule: 1px solid var(--ctl-border);
  }
}
.ctl-gh-svc-long-desc p,
.ctl-gh-svc-long-desc ul,
.ctl-gh-svc-long-desc ol {
  margin-bottom: 0.85em;
  break-inside: avoid;
}
.ctl-gh-svc-long-desc p:last-child {
  margin-bottom: 0;
}
.ctl-gh-svc-long-desc li {
  margin-bottom: 0.3em;
}
.ctl-gh-svc-next-steps {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ctl-border);
}
.ctl-gh-svc-next-steps-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ctl-gray-text);
  margin-bottom: 6px;
}
.ctl-gh-svc-next-steps-note {
  font-size: 0.85rem;
  line-height: 1.55;
  margin-bottom: 8px;
}
.ctl-gh-svc-next-steps-note:last-child {
  margin-bottom: 0;
}
.ctl-gh-svc-btn {
  padding: 4px 12px;
  font-size: 0.72rem;
  white-space: normal;
  text-align: center;
}

/* ============================================================
   Activity Detail page body — ctl-site_activity-detail.html only. Layout
   for the article itself: heading/thumbnail, category tag row, meta row
   spacing, deadline-box text, compensation box, description, and the
   Contact/"Back to X" footer.
   ============================================================ */
.ctl-detail-article {
  max-width: 860px;
}
.ctl-detail-thumb {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 24px;
}
.ctl-detail-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.ctl-detail-heading {
  margin-top: 0;
}
.ctl-detail-meta-row {
  margin-bottom: 12px;
}
.ctl-detail-deadline-text {
  flex: 1;
  min-width: 140px;
}
.ctl-detail-comp-box {
  background: var(--ctl-gray-bg);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 24px;
}
.ctl-detail-description {
  line-height: 1.7;
  font-size: 1rem;
  color: #333;
  margin-bottom: 28px;
}
.ctl-detail-contact {
  font-size: 0.95rem;
  border-top: 1px solid var(--ctl-border);
  padding-top: 20px;
  margin-bottom: 28px;
}
.ctl-detail-contact dt {
  font-weight: 700;
}
.ctl-detail-contact dd {
  margin: 2px 0 0 0;
}
.ctl-detail-back-link {
  margin-top: 40px;
}

/* ============================================================
   Concurrent Sessions — ctl-site_activity-detail.html only, added
   2026-08-20. Accordion list of CtlActivitySession sub-records, grouped
   under a .ctl-session-block per sessionTimeBlock. Toggle treatment
   (chevron rotate, uppercase label) mirrors .ctl-gh-svc-toggle above;
   .ctl-session-abstract's p/ul/ol spacing mirrors .ctl-gh-svc-long-desc,
   minus the newspaper-column layout (this accordion body is never as
   wide as a full-row-expanded service tile, so a single column reads
   fine at any width it's likely to appear at).
   ============================================================ */
.ctl-session-block {
  margin-bottom: 28px;
}
.ctl-session-block:last-child {
  margin-bottom: 0;
}
.ctl-session-block-heading {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ctl-maroon);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ctl-maroon-tint);
}
.ctl-session-item {
  border: 1px solid var(--ctl-border);
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
}
.ctl-session-item:last-child {
  margin-bottom: 0;
}
.ctl-session-toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  background: var(--ctl-gray-bg);
  text-align: left;
  cursor: pointer;
}
.ctl-session-toggle:hover,
.ctl-session-toggle:focus-visible {
  background: var(--ctl-navy-tint);
}
.ctl-session-toggle-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ctl-session-title {
  font-weight: 700;
  font-size: 0.95rem;
}
.ctl-session-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  font-size: 0.82rem;
  color: var(--ctl-gray-text);
}
.ctl-session-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* Right-hand cluster: tags (top-right corner of the tile) + chevron. */
.ctl-session-toggle-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ctl-session-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}
/* Deliberately NOT styled like .ctl-btn/.ctl-badge (solid fill, pill
   radius) — those visual cues read as "clickable" on this page, and these
   tags aren't. Outline chip + neutral weight reads as a descriptive label
   instead. */
.ctl-session-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  color: var(--ctl-maroon);
  border: 1px solid var(--ctl-border);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  cursor: default;
}
.ctl-session-tag i {
  font-size: 0.75rem;
  color: var(--ctl-maroon);
}
.ctl-session-toggle-icon {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--ctl-maroon);
  transition: transform 0.15s ease;
  margin-top: 3px;
}
.ctl-session-toggle[aria-expanded="true"] .ctl-session-toggle-icon {
  transform: rotate(180deg);
}
.ctl-session-body {
  padding: 14px;
  border-top: 1px solid var(--ctl-border);
  font-size: 0.9rem;
}
.ctl-session-abstract {
  line-height: 1.65;
}
.ctl-session-abstract p,
.ctl-session-abstract ul,
.ctl-session-abstract ol {
  margin-bottom: 0.85em;
}
.ctl-session-abstract p:last-child {
  margin-bottom: 0;
}
.ctl-session-materials {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--ctl-border);
}
.ctl-session-materials-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ctl-gray-text);
  margin-bottom: 8px;
}
.ctl-session-material-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--ctl-maroon);
  margin-right: 16px;
  margin-bottom: 6px;
}
.ctl-session-material-link:hover,
.ctl-session-material-link:focus-visible {
  text-decoration: underline;
}
.ctl-session-citation {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--ctl-border);
}
.ctl-session-citation-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ctl-gray-text);
  margin-bottom: 8px;
}
.ctl-session-citation-text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 0;
}

/* ============================================================
   Homepage nav tiles — Welcome to the CTL only: the 5-tile section-link
   grid (Request Support / Events / Funding / Resources / About the CTL).
   ============================================================ */
.ctl-nav-tile {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ctl-nav-tile:hover,
.ctl-nav-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  border-color: var(--ctl-maroon);
}
.ctl-nav-tile:hover i,
.ctl-nav-tile:focus-visible i {
  color: var(--ctl-maroon);
}

/* ⚠ NOTE: .ctl-nav-tile duplicates the same three transition/hover
   properties as .ctl-hover-lift (defined earlier, in the carousel
   section) instead of using it directly — left as its own rule since it
   also needs the extra `i` (icon) color-on-hover selector below, which
   .ctl-hover-lift doesn't have. Worth collapsing into
   `.ctl-hover-lift` + this icon rule in a future cleanup pass. */

/* ============================================================
   Section landing blurbs — Funding, Resources (both new 2026-08-06) and
   the Events top-of-page intro (new 2026-08-06). Reuses .ctl-nav-tile
   as-is for the down-links to each section's own subpages (same card/hover
   treatment as the homepage grid, just fewer tiles and scoped under
   .ctl-landing-blurb instead of full page width). No new tile class needed.
   ============================================================ */
.ctl-landing-blurb {
  margin-bottom: 8px;
}

/* ============================================================
   Impact & Reports — outcomes stat tiles (new 2026-08-06). Static/manual
   content (institutional accomplishment numbers), not pulled from a
   content type — same "hardcode it, edit the file directly" convention as
   the homepage nav tiles' welcome text. Auto-fill grid so tile count can
   change year to year without a breakpoint rewrite.
   ============================================================ */
.ctl-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin: 24px 0 40px;
}
.ctl-outcome-tile {
  border: 1px solid var(--ctl-border);
  border-radius: 8px;
  padding: 24px 20px;
  text-align: center;
  background: #fff;
}
.ctl-outcome-tile i {
  font-size: 1.6rem;
  color: var(--ctl-maroon);
  margin-bottom: 10px;
  display: inline-block;
}
.ctl-outcome-stat {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ctl-maroon);
}
.ctl-outcome-label {
  display: block;
  font-size: 0.85rem;
  color: var(--ctl-gray-text);
  margin-top: 4px;
}

/* Flagship stat — spans the full grid row, pairs an icon with a large stat
   and a fill bar against a baseline marker. Descriptive only (current value
   vs. baseline) — no semester/year labels. Place it first inside
   .ctl-outcomes-grid. */
.ctl-outcome-feature {
  grid-column: 1 / -1;
  display: flex;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--ctl-maroon);
  border-radius: 8px;
  padding: 24px 28px;
  background: var(--ctl-maroon-tint);
}
.ctl-outcome-feature-icon i {
  font-size: 2.4rem;
  color: var(--ctl-maroon);
}
.ctl-outcome-feature-body {
  flex: 1;
  min-width: 0;
}
.ctl-outcome-feature-stat {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ctl-maroon);
}
.ctl-outcome-feature-headline {
  display: block;
  font-size: 0.9rem;
  color: var(--ctl-gray-text);
  margin: 2px 0 12px;
}
.ctl-outcome-feature-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid var(--ctl-border);
  overflow: visible;
}
.ctl-outcome-feature-fill {
  height: 100%;
  border-radius: 5px;
  background: var(--ctl-maroon);
  overflow: hidden;
}
.ctl-outcome-feature-baseline {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 16px;
  background: var(--ctl-gray-text);
  transform: translateX(-1px);
}
.ctl-outcome-feature-caption {
  display: block;
  font-size: 0.8rem;
  color: var(--ctl-gray-text);
  margin-top: 8px;
}
@media (max-width: 480px) {
  .ctl-outcome-feature {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   Impact & Reports — grants secured. Separate from .ctl-outcomes-grid: a
   total bar followed by a per-grant breakdown, each grant's fill sized to
   its share of the total.
   ============================================================ */
.ctl-grants-section {
  margin: 8px 0 40px;
}
.ctl-grants-total {
  border: 1px solid var(--ctl-maroon);
  border-radius: 8px;
  padding: 20px 24px;
  background: var(--ctl-maroon-tint);
  margin-bottom: 20px;
}
.ctl-grants-total-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.ctl-grants-total-label {
  font-size: 0.9rem;
  color: var(--ctl-gray-text);
}
.ctl-grants-total-stat {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ctl-maroon);
}
.ctl-grants-total-track {
  height: 14px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--ctl-border);
  overflow: hidden;
}
.ctl-grants-total-fill {
  height: 100%;
  border-radius: 7px;
  background: var(--ctl-maroon);
}
.ctl-grants-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.ctl-grants-item-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 0.9rem;
}
.ctl-grants-item-note {
  color: var(--ctl-gray-text);
  font-size: 0.8rem;
}
.ctl-grants-item-amount {
  font-weight: 700;
  color: var(--ctl-maroon);
  white-space: nowrap;
}
.ctl-grants-item-track {
  height: 8px;
  border-radius: 4px;
  background: var(--ctl-gray-bg);
  overflow: hidden;
}
.ctl-grants-item-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--ctl-maroon);
  opacity: 0.6;
}

/* ============================================================
   Impact & Reports — reports grid (new 2026-08-06, CtlReport content type
   proposed but not yet created — see ctl-widget_reports-grid.html header).
   Auto-fill card grid, cover thumbnail optional.
   ============================================================ */
.ctl-reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.ctl-report-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ctl-report-thumb {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 6px 6px 0 0;
}
.ctl-report-card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ctl-report-summary {
  flex: 1;
}
.ctl-report-card .ctl-tag {
  align-self: flex-start;
}

/* ============================================================
   Funding > Past Recipients — award-winners grid (new 2026-08-06,
   CtlPastRecipient content type proposed but not yet created — see
   ctl-widget_past-award-recipients_past-recipients.html header). Same
   2-column/1-column-under-768px breakpoint as the Missed Connections grid
   it sits alongside, so both sections line up. First widget to actually
   use .ctl-listing-card (drafted earlier, previously unreferenced) instead
   of copy-pasted inline style="...", per the "future pass" note above —
   deliberate choice since this is a new file with no legacy inline-style
   debt to work around.
   ============================================================ */
.ctl-past-recipients-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 767px) {
  .ctl-past-recipients-grid {
    grid-template-columns: 1fr;
  }
}
.ctl-recipient-photo {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.ctl-recipient-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.ctl-recipient-name {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 700;
}
.ctl-recipient-meta {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--ctl-gray-text);
}
.ctl-recipient-summary {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* ============================================================
   About the CTL — Strategic Vision collapsible pillars (added
   2026-08-20). Each h3 pillar name is a Bootstrap native collapse
   trigger (data-bs-toggle="collapse") wrapping its Mission/Objectives
   content — no custom JS needed, since Bootstrap's bundle.js is already
   loaded sitewide via the theme. This is unlike the hand-rolled
   addEventListener toggles used elsewhere in this project (e.g. Past
   Recipients' Missed Connections section), which exist because those
   predate/duplicate non-Bootstrap show/hide behavior — a plain
   Bootstrap collapse didn't fit those cases the way it does here.
   Chevron rotates via the trigger's aria-expanded state.
   ============================================================ */
.ctl-mission-toggle {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
}
.ctl-mission-toggle .bi-chevron-down {
  transition: transform 0.2s ease;
}
.ctl-mission-toggle[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

/* ============================================================
   Generic content tables — for static content blocks/articles that
   render a plain HTML <table> (no widget/Velocity involved). Add
   class="ctl-table" to any table that needs borders/padding/a readable
   header row instead of unstyled browser-default borders. Wrap in a
   <div class="table-responsive"> so wide tables scroll on narrow
   viewports rather than overflowing the page.
   ============================================================ */
.ctl-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
}
.ctl-table td,
.ctl-table th {
  border: 1px solid var(--ctl-border);
  padding: 0.6rem 0.9rem;
  vertical-align: top;
}
.ctl-table td p,
.ctl-table th p {
  margin: 0;
}
.ctl-table thead th,
.ctl-table tr:first-child td {
  background: var(--ctl-gray-bg);
  border-bottom: 2px solid var(--ctl-maroon);
  font-weight: 700;
}
.ctl-table tbody tr:not(:first-child):nth-child(even) td {
  background: #fafafa;
}

/* Modifier for tables whose first column is a checkbox/status marker
   (e.g. articles/online learning checklist.html) — narrows and centers
   that column instead of letting it take an even share of the width. */
.ctl-table-checklist td:first-child {
  width: 2.5rem;
  text-align: center;
  font-size: 1.1rem;
}
.ctl-table-checklist td:nth-child(2) {
  width: 24%;
}

/* ============================================================
   Article-body skimmability classes — for use inside a
   CtlInstructionalResource's `body` field (rendered into .ctl-ir-body on
   the resource detail page, ctl-site_instRes-detail) or any other WYSIWYG
   body copy, not by any widget's own template markup. An in-page jump nav,
   a 2-up grid for short requirement-style lists, collapsible panels for
   long verbatim text (paired with .ctl-mission-toggle above for the
   trigger), and a comparison-card grid for content meant to stay visible
   side by side. Requires editing the WYSIWYG source view directly, since
   the editor doesn't offer these as formatting options.
   ============================================================ */
/* Outline-style indent: h2 stays flush left, everything else (h3 and all
   body content — paragraphs, lists, the toc, statement/collapse blocks)
   indents one step in, so h3 reads as nested under its h2 instead of
   lining up with it, and prose isn't flush against the same edge as a
   top-level heading. Only targets direct children of .ctl-ir-body —
   content already inside a card/panel (which has its own padding) isn't
   double-indented. */
.ctl-ir-body > *:not(h2) {
  margin-left: 20px;
}
.ctl-article-toc {
  background: var(--ctl-gray-bg);
  border: 1px solid var(--ctl-border);
  border-radius: 8px;
  padding: 18px 22px;
  margin: 24px 0;
}
.ctl-article-toc-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ctl-gray-text);
  margin-bottom: 10px;
}
.ctl-article-toc ul {
  columns: 2;
  margin: 0;
  padding-left: 1.1rem;
}
.ctl-article-toc li {
  break-inside: avoid;
  margin-bottom: 6px;
}
.ctl-article-toc a {
  color: var(--ctl-maroon);
  text-decoration: none;
}
.ctl-article-toc a:hover,
.ctl-article-toc a:focus-visible {
  text-decoration: underline;
}
@media (max-width: 575px) {
  .ctl-article-toc ul {
    columns: 1;
  }
}
.ctl-req-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 20px 0 28px;
}
@media (max-width: 767px) {
  .ctl-req-grid {
    grid-template-columns: 1fr;
  }
}
.ctl-req-card {
  border: 1px solid var(--ctl-border);
  border-radius: 8px;
  padding: 18px 20px;
  background: #fff;
}
.ctl-req-card h3 {
  margin-top: 0;
  font-size: 1rem;
}
.ctl-req-card ul {
  margin-bottom: 0;
}
.ctl-req-card li {
  margin-bottom: 4px;
}
.ctl-req-card li:last-child {
  margin-bottom: 0;
}
.ctl-collapse-panel {
  border: 1px solid var(--ctl-border);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 10px 0 28px;
  background: #fff;
}
.ctl-collapse-panel blockquote:last-child,
.ctl-collapse-panel p:last-child,
.ctl-collapse-panel ul:last-child {
  margin-bottom: 0;
}
.ctl-option-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 16px 0 28px;
}
.ctl-option-card {
  border: 1px solid var(--ctl-border);
  border-radius: 8px;
  padding: 16px 20px;
  background: #fff;
}
.ctl-option-card > *:last-child {
  margin-bottom: 0;
}
.ctl-option-label {
  margin-bottom: 8px;
}

/* ============================================================
   Side-nav location/hours block — renders in the nav area on every CTL
   page (content blocks/ctl-content_side-nav_location info.html). This is
   the sitewide content record that also carries the <link rel="stylesheet">
   to this file, per CLAUDE.md's Overview.
   ============================================================ */
.ctl-sidenav-location {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border-top: 1px solid #d6d3ce;
  font-size: 0.875rem;
  line-height: 1.4;
}
.ctl-sidenav-location h2 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.ctl-sidenav-location dt {
  font-weight: 600;
}