/**
 * Projects Dashboard visual refresh.
 * Theme-aligned typography + whimsical layout accents.
 */

:root {
  --cop-navy: #1a2e4a;
  --cop-orange: #e06b2d;
  --cop-sky: #dfeaf5;
  --cop-surface: #f4f7fb;
  --cop-white: #ffffff;
  --cop-border: #d7e0ea;
  --cop-text: #243447;
  --cop-muted: #5e6d7c;
  --cop-shadow-sm: 0 4px 16px rgba(26, 46, 74, 0.08);
  --cop-shadow-lg: 0 12px 32px rgba(26, 46, 74, 0.14);
}

.projects-dashboard,
.projects-dashboard * {
  font-family: inherit;
}

.projects-dashboard .block-title,
.projects-dashboard .views-title,
.projects-dashboard h2.block-title,
.projects-dashboard h3.block-title,
.projects-dashboard .view-header,
.projects-dashboard #block-featured-region > h2,
.projects-dashboard #block-featured-region > h3,
.projects-dashboard #block-categories-region > h2,
.projects-dashboard #block-categories-region > h3,
.projects-dashboard #block-featured-region .view > h2,
.projects-dashboard #block-categories-region .view > h2,
.projects-dashboard .view-id-projects_poc .view-header,
.projects-dashboard .view-id-projects_poc .view-title {
  display: none !important;
}

.projects-dashboard {
  width: min(1100px, calc(100% - 24px));
  margin: 26px auto 70px;
  padding: 0;
  color: var(--cop-text);
}

.projects-dashboard__hero {
  text-align: center;
  padding: 34px 18px 26px;
  margin-bottom: 24px;
  border-radius: 14px 14px 0 0;
  /* border: 1px solid var(--cop-border); */
  border-bottom: 0;
  background: none;
}

.projects-dashboard__eyebrow {
  margin: 0 0 6px;
  color: var(--cop-muted);
  font-size: 1.15rem;
  font-weight: 600;
}

.projects-dashboard__title {
  margin: 0;
  color: var(--cop-navy);
  font-size: clamp(2.2rem, 5vw, 4.1rem);
  font-weight: 700;
  line-height: 1.08;
  border: 0 !important;
}

.projects-dashboard__intro {
  margin: 10px auto 0;
  max-width: 720px;
  color: var(--cop-muted);
  font-size: 1.5rem;
  line-height: 1.55;
}

.projects-dashboard__construction-link {
  margin: 18px auto 0;
  text-align: center;
  /* Match the site's body text size (18px), not the larger subtitle above. */
  font-size: 18px;
  line-height: 1.55;
}

/* Match the existing dashboard link style: blue, no underline, orange hover. */
.projects-dashboard__construction-link a {
    /* display: inline-flex;
    align-items: center;
    justify-content: center; */
    gap: 12px;
    display: inline-block;
    padding: 9px 18px;
    border: 1px solid #1f3f6d;
    border-radius: 4px;
    color: #1f3f6d;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background-color 0.2s ease,color 0.2s ease,box-shadow 0.2s ease,transform 0.2s ease;
}

.projects-dashboard__construction-link a::after {
    content: "→";
    display: inline-block;
    font-size: 1.15em;
    line-height: 1;
    transition: transform 0.2s ease;
    position: relative;
    top: 1.5px;
    margin: 0 0 0 8px;
}

.projects-dashboard__construction-link a:hover,.projects-dashboard__construction-link a:focus {
    background: var(--cop-navy);
    color: var(--cop-white);
    text-decoration: none;
    box-shadow: var(--cop-shadow-lg);
    transform: translateY(-2px);
    outline: none;
}

.projects-dashboard__construction-link a:hover::after,.projects-dashboard__construction-link a:focus::after {
    transform: translateX(4px);
}

.projects-dashboard__construction-link a:active {
    transform: translateY(0);
    box-shadow: var(--cop-shadow-sm);
}

.projects-dashboard__construction-link a:focus-visible {
    box-shadow: var(--cop-shadow-lg),0 0 0 3px rgba(26,46,74,0.25);
}
@media (max-width: 575px) {
    .projects-dashboard__construction-link a {
        min-width:0;
        width: 100%;
        padding: 13px 24px;
        border-radius: 10px;
    }
}

.projects-dashboard .dashboard-section {
  margin-top: 30px;
}

.projects-dashboard .section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}

.projects-dashboard .section-heading {
  margin: 0;
  color: var(--cop-navy);
  font-size: clamp(1.5rem, 2.2vw, 2rem) !important;
  font-weight: 700 !important;
  line-height: 1.2;
  border: 0 !important;
  border-bottom: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: inherit !important;
}

.projects-dashboard .section-label h2.section-heading::after,
.projects-dashboard .section-label h2.section-heading::before {
  content: none !important;
  display: none !important;
}

.projects-dashboard .section-rule {
  flex: 1;
  height: 1px;
  background: var(--cop-border);
}

.projects-dashboard .map-block-wrapper {
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)),
    repeating-linear-gradient(
      150deg,
      transparent 0 24px,
      rgba(255, 255, 255, 0.6) 24px 30px
    ),
    repeating-linear-gradient(
      28deg,
      transparent 0 26px,
      rgba(255, 255, 255, 0.58) 26px 32px
    ),
    var(--cop-sky);
  border: 1px solid var(--cop-border);
  border-radius: 0 0 14px 14px;
  padding: 16px;
}

.projects-dashboard .cop-dashboard-map-banner {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #bfd0e0;
  box-shadow: var(--cop-shadow-lg);
  min-height: 460px;
  background: var(--cop-white);
}

.projects-dashboard #cop-dashboard-projects-map,
.projects-dashboard .cop-dashboard-map-empty {
  min-height: 460px;
  width: 100%;
}

.projects-dashboard .cop-dashboard-map-empty {
  display: grid;
  place-items: center;
  color: var(--cop-muted);
  font-size: 1rem;
  text-align: center;
  padding: 20px;
}

.projects-dashboard .cop-dashboard-map-card {
  display: block;
  width: 290px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 30px rgba(26, 46, 74, 0.2);
  text-decoration: none;
  color: inherit;
}

.projects-dashboard .cop-dashboard-map-card__image {
  height: 126px;
  background: #d8e1eb;
}

.projects-dashboard .cop-dashboard-map-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.projects-dashboard .cop-dashboard-map-card__body {
  padding: 12px 14px 14px;
}

.projects-dashboard .cop-dashboard-map-card__dept {
  margin-bottom: 6px;
  color: var(--cop-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.projects-dashboard .cop-dashboard-map-card__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
}

.projects-dashboard .cop-dashboard-map-card__title a {
  color: var(--cop-navy);
  text-decoration: none;
}

.projects-dashboard .cop-dashboard-map-card__title a:hover {
  color: var(--cop-orange);
}

.projects-dashboard .cop-dashboard-map-card__status {
  display: inline-block;
  margin-top: 8px;
  border-radius: 99px;
  background: rgba(224, 107, 45, 0.12);
  color: var(--cop-orange);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 9px;
}

.projects-dashboard .cop-dashboard-map-card__summary {
  margin: 9px 0 0;
  color: var(--cop-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

.projects-dashboard #block-featured-region .row,
.projects-dashboard #block-featured-region .view-content {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 0 !important;
}

.projects-dashboard #block-featured-region .row > [class*="col"] {
  padding: 0 !important;
  max-width: 100% !important;
  flex: unset !important;
  width: auto !important;
}

.projects-dashboard #block-featured-region .views-row {
  margin: 0 !important;
  position: relative;
}

.projects-dashboard #block-featured-region .card,
.projects-dashboard #block-featured-region .cop-project-card {
  height: 100%;
  border-radius: 12px;
  border: 1px solid var(--cop-border);
  box-shadow: var(--cop-shadow-sm);
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.projects-dashboard #block-featured-region .card *,
.projects-dashboard #block-featured-region .cop-project-card * {
  font-family: inherit !important;
}

.projects-dashboard #block-featured-region .card:hover,
.projects-dashboard #block-featured-region .cop-project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cop-shadow-lg);
}

/* The featured view renders with Views' Responsive Grid markup
   (.views-view-responsive-grid__item), NOT .row/.view-content. Force equal
   three-up columns and make every grid item + card stretch to full row
   height so all cards end at the same bottom line. */
.projects-dashboard #block-featured-region .views-view-responsive-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;      /* every row equal height */
  align-items: stretch !important;     /* items fill the row height */
  gap: 18px !important;
  margin: 0 !important;
}
/* FULL height chain — every wrapper between the grid item and the card must
   stretch, INCLUDING the inline span.field-content that Views injects. If any
   link in this chain doesn't stretch, the card's height:100% has nothing to
   resolve against and cards collapse to content height (unequal). */
.projects-dashboard #block-featured-region .views-view-responsive-grid__item,
.projects-dashboard #block-featured-region .views-view-responsive-grid__item-inner,
.projects-dashboard #block-featured-region .views-field-nothing,
.projects-dashboard #block-featured-region .views-field-nothing > .field-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: auto !important;
  align-self: stretch !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 767px) {
  .projects-dashboard #block-featured-region .views-view-responsive-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
}

/* Fixed image strip: identical HEIGHT on every card regardless of source
   image dimensions or a broken/missing image. A hard height (not just
   aspect-ratio) guarantees the box never collapses. */
.projects-dashboard #block-featured-region .card-img-top,
.projects-dashboard #block-featured-region .cop-card-image {
  position: relative !important;
  width: 100% !important;
  height: 220px !important;
  min-height: 220px !important;
  overflow: hidden !important;
  background: var(--cop-surface) !important;
  flex: 0 0 auto !important;
}

.projects-dashboard #block-featured-region .cop-card-image img,
.projects-dashboard #block-featured-region .card-img-top img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Card stretches to row height; body is a column with the footer pinned to
   the bottom — status pills align across all cards no matter how many lines
   the title wraps to. */
.projects-dashboard #block-featured-region .cop-project-card {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: auto !important;
  align-self: stretch !important;
}

.projects-dashboard #block-featured-region .card-body,
.projects-dashboard #block-featured-region .cop-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 16px 16px 14px;
}

.projects-dashboard #block-featured-region .card-title,
.projects-dashboard #block-featured-region .cop-card-title,
.projects-dashboard #block-featured-region .views-field-title a {
  display: block !important;
  margin: 0 0 8px !important;
  color: var(--cop-navy) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  border: 0 !important;
  /* Reserve exactly two title lines so the row below (status pill) starts at
     the same height on every card; clamp longer titles to two lines. */
  min-height: calc(1.3em * 2);
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cop-card-body .cop-card-title a {
    font-size: 18px;
    font-weight: normal;
}

/* Pin the status pill row to the card bottom — aligned across all cards. */
.projects-dashboard #block-featured-region .cop-card-footer {
  margin-top: auto !important;
}

.projects-dashboard #block-featured-region .card-text,
.projects-dashboard #block-featured-region .cop-card-summary {
  color: var(--cop-muted) !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
}

.projects-dashboard #block-featured-region .cop-card-link,
.projects-dashboard #block-featured-region .views-field-view-node,
.projects-dashboard #block-featured-region .card-footer a {
  display: none !important;
}

/* Featured/status pills for multiple possible Views field class outputs. */
.projects-dashboard #block-featured-region .views-field-field-featured,
.projects-dashboard #block-featured-region .views-field-field-featured-value {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  margin: 0 !important;
  padding: 4px 10px !important;
  border-radius: 999px;
  background: var(--cop-orange) !important;
  color: #fff !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1.1 !important;
  box-shadow: 0 4px 10px rgba(224, 107, 45, 0.35);
}

.projects-dashboard #block-featured-region .views-field-field-featured *,
.projects-dashboard #block-featured-region .views-field-field-featured-value * {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.projects-dashboard #block-featured-region .views-field-field-project-status,
.projects-dashboard
  #block-featured-region
  .views-field-field-project-status-value {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content;
  margin-top: 8px !important;
  padding: 4px 10px !important;
  border-radius: 999px;
  border: 1px solid #d9e4ef;
  background: #f4f8fc !important;
  color: #40607d !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  line-height: 1.1 !important;
}

.projects-dashboard #block-featured-region .views-field-field-project-status *,
.projects-dashboard
  #block-featured-region
  .views-field-field-project-status-value
  * {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* ==========================================================
   Projects by Category — 2-column grid
   (JS in projects-dashboard-ui.js wraps h2+rows into
   .cop-category-group divs and adds .cop-categories-grid)
   ========================================================== */

/* ── 2-column flow (no gaps from unequal card heights) ── */
#block-categories-region .cop-categories-grid {
  column-count: 2;
  column-gap: 24px;
}

@media (max-width: 767px) {
  #block-categories-region .cop-categories-grid {
    column-count: 1;
  }
}

/* ── Category group card ── */
#block-categories-region .cop-category-group {
  background: #fff;
  border: 1px solid #d6e0ea;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(26, 46, 74, 0.07);
  break-inside: avoid;
  margin-bottom: 24px;
}

/* ── Category heading ── */
#block-categories-region .cop-category-group h2 {
  margin: 0;
  padding: 14px 18px;
  background: #edf3f9;
  border-bottom: 1px solid #d6e0ea;
  color: #1a2e4a;
  font-family: "Roboto Slab", serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Orange left accent removed — was a 4×16 ::before bar before the category title. */

/* ── Each project row ── */
#block-categories-region .cop-category-group .views-field-nothing {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* padding: 12px 18px; */
  /* border-bottom: 1px solid #f0f4f8; */
  transition: background 0.15s ease;
}

#block-categories-region .cop-category-group .views-field-nothing:last-child {
  border-bottom: 0;
}

#block-categories-region .cop-category-group .views-field-nothing:hover {
  background: #f7fafd;
}

/* ── Title link ── */
#block-categories-region .cop-category-group .views-field-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
}

#block-categories-region .cop-category-group .views-field-title a {
  display: block;
  color: #215f9e;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  white-space: normal;
}

#block-categories-region .cop-category-group .views-field-title a:hover {
  color: #e06b2d;
}

/* ── Status pill ── */
#block-categories-region .cop-category-group .views-field-field-project-status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  background: #f4f8fc;
  border: 1px solid #d4dee8;
  color: #3f617f;
  min-width: 0;
}

#block-categories-region
  .cop-category-group
  .views-field-field-project-status:empty {
  display: none;
}

/* ── Status colours ── */
#block-categories-region [data-status="started"],
#block-categories-region [data-status="in-progress"] {
  background: #eef8f2;
  border-color: #b8e2c5;
  color: #1f7a3f;
}

#block-categories-region [data-status="done"],
#block-categories-region [data-status="completed"] {
  background: #e8f1fb;
  border-color: #bfd8f2;
  color: #1f5f9a;
}

#block-categories-region [data-status="planned"] {
  background: #fff5ea;
  border-color: #ffd7ad;
  color: #a75d14;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  #block-categories-region .view-content {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================
   Featured Projects — cop-project-card styles
   Targets the real custom HTML field structure in the View
   ========================================================== */

/* ── Grid wrapper ── */
.projects-dashboard #block-featured-region .view-content {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

/* ── Card shell ── */
.cop-project-card {
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  border: 1px solid #d6e0ea !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(26, 46, 74, 0.08) !important;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease !important;
  height: 100% !important;
}

.cop-project-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 32px rgba(26, 46, 74, 0.14) !important;
}

/* ── Image container (relative so badges can overlay) ── */
.cop-card-image {
  position: relative !important;
  line-height: 0 !important;
  flex-shrink: 0 !important;
}

.cop-card-image img {
  width: 100% !important;
  height: 210px !important;
  object-fit: cover !important;
  display: block !important;
}

/* ── ★ Featured badge — top-left overlay ── */
.cop-featured-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  background: #e06b2d !important;
  color: #fff !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  box-shadow: 0 4px 10px rgba(224, 107, 45, 0.35) !important;
}

/* ── Category badge — top-right overlay ── */
.cop-card-category {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(4px) !important;
  color: #1a2e4a !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

/* ── Card body ── */
.cop-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 16px !important;
  gap: 12px !important;
}

/* ── Title ── */
.cop-card-title {
  display: block !important;
  font-family: "Roboto Slab", serif !important;
  color: #215f9e !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  border: 0 !important;
}

.cop-card-title:hover {
  color: #1a2e4a !important;
  text-decoration: underline !important;
}

/* ── Footer row ── */
.cop-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: auto !important;
  gap: 8px !important;
}

/* ── Status pill ── */
.cop-status {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  /* Default (fallback) colours */
  background: #f4f8fc !important;
  border: 1px solid #d4dee8 !important;
  color: #3f617f !important;
}

/* Drupal will render the status value as text inside .cop-status.
   Use attribute selectors so no extra PHP/JS is needed. */
.cop-status:has-text,
.cop-project-card:has(.cop-status) .cop-status {
  /* overridden per-value below */
}

/* Target the rendered text value via the data attribute set in preprocess,
   OR use these utility modifier classes added via template / preprocess: */
.cop-status--started,
.cop-status[data-status="started"] {
  background: #eef8f2 !important;
  border-color: #b8e2c5 !important;
  color: #1f7a3f !important;
}

.cop-status--in-progress,
.cop-status[data-status="in-progress"] {
  background: #eef8f2 !important;
  border-color: #b8e2c5 !important;
  color: #1f7a3f !important;
}

.cop-status--done,
.cop-status--completed,
.cop-status[data-status="done"] {
  background: #e8f1fb !important;
  border-color: #bfd8f2 !important;
  color: #1f5f9a !important;
}

.cop-status--planned,
.cop-status[data-status="planned"] {
  background: #fff5ea !important;
  border-color: #ffd7ad !important;
  color: #a75d14 !important;
}

/* ── "Learn more →" link ── */
.cop-card-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #215f9e !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition:
    color 0.15s ease,
    gap 0.15s ease !important;
}

.cop-card-link:hover {
  color: #e06b2d !important;
  gap: 7px !important;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .projects-dashboard #block-featured-region .view-content {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  .projects-dashboard #block-featured-region .view-content {
    grid-template-columns: 1fr !important;
  }
}
/* --- Project category row layout ------------------------------------------ */
.project-category-row {
  display: flex;
  /* align-items: center; */
  gap: 8px;
  flex-wrap: nowrap;
  padding: 12px 18px;
  align-items: flex-start;
}
.project-category-row__title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.project-category-row__title a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-category-row__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  /* padding-right: 18px; */
}

/* Status badge */
.project-category-status {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #4a5568;
  background: #f1f5f9;
  border: 1px solid #cbd5e0;
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
  line-height: 1.5;
  max-width: fit-content;
}

@media (max-width: 575px) {
  .project-category-status {
    display: none;
  }
}

/* "Recently Updated" — now a small green dot. The full "Updated <date>"
   tooltip set on the element's title attribute (from the Twig template)
   shows on hover and reflects the last edit to a Project Update, Project
   Document, or Project Video (driven by field_content_updated). */
.project-recently-updated {
  display: inline-block;
  width: 12px;
  height: 12px;
  min-width: 12px;
  border-radius: 50%;
  background: #16a34a;          /* green */
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
  flex-shrink: 0;
  cursor: help;                 /* signals the tooltip on hover */
  /* Hide the inline "Recently Updated" text but keep it for screen readers
     and the browser's native tooltip (the title attribute). */
  font-size: 0;
  color: transparent;
  letter-spacing: 0;
  line-height: 0;
  text-indent: -9999px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.project-recently-updated:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.28);
}
.project-recently-updated::before {
  /* Suppress the old white inner dot from the pill design. */
  display: none;
}

/* --- Department page header ------------------------------------------------- */
.projects-dashboard__hero--dept {
  padding-left: 24px;
}
.projects-dashboard__back {
  display: inline-block;
  font-size: 1.5rem;
  color: #5e6d7c;
  text-decoration: none;
  margin-bottom: 10px;
}
.projects-dashboard__back:hover {
  color: #1a2e4a;
  text-decoration: underline;
}

/* --- Department project list ------------------------------------------------ */
.dept-project-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dept-project-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #e8edf2;
}
.dept-project-list__item:last-child {
  border-bottom: none;
}
.dept-project-list__title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1a2e4a;
  text-decoration: none;
  flex: 1;
}
.dept-project-list__title:hover {
  color: #e06b2d;
  text-decoration: underline;
}
.dept-project-list__status {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  background: #e8f1fb;
  color: #1f5f9a;
}

/* --- Archive link card on main dashboard ---------------------------------- */
.dashboard-archive-link {
  margin-top: 20px;
}
.dashboard-archive-link__card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid #d6e0ea;
  /* border-left: 5px solid #e06b2d; */
  border-radius: 12px;
  text-decoration: none;
  color: #1a2e4a;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease;
}
.dashboard-archive-link__card:hover {
  background: #fdf6f1;
  box-shadow: 0 4px 16px rgba(26, 46, 74, 0.08);
}
.dashboard-archive-link__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.dashboard-archive-link__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dashboard-archive-link__text strong {
  font-size: 15px;
  font-weight: 700;
  color: #1a2e4a;
}
.dashboard-archive-link__text span {
  font-size: 15px;
  color: #5e6d7c;
  font-family: "Montserrat", sans-serif;
}
.dashboard-archive-link__arrow {
  font-size: 1.2rem;
  color: #e06b2d;
  flex-shrink: 0;
}

/* --- Archive page header accent ------------------------------------------ */
.projects-dashboard__title-accent {
  color: #e06b2d;
}

/* --- Archive project list ------------------------------------------------- */
.archive-project-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #d6e0ea;
  border-radius: 12px;
  overflow: hidden;
}
.archive-project-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid #f0f4f8;
  gap: 12px;
}
.archive-project-list__item:last-child {
  border-bottom: 0;
}
.archive-project-list__item:hover {
  background: #f7fafd;
}
.archive-project-list__title {
  flex: 1;
  color: #1a2e4a;
  text-decoration: none;
  font-size: 15px;
}
.archive-project-list__title:hover {
  color: #e06b2d;
  text-decoration: underline;
}
.archive-project-list__status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #575a5e;
  background: #f1f5f9;
  border: 1px solid #cbd5e0;
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* --- View toggle buttons -------------------------------------------------- */
.dashboard-view-toggle {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 0px;
  padding: 0;
  position: relative;
  z-index: 1;
  top: 30px;
}
.dashboard-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  font-size: 1rem;
  font-weight: 600;
  color: #5e6d7c;
  background: #d9d9d9;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
  letter-spacing: 0.01em;
}
.dashboard-view-toggle-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.dashboard-view-toggle-btn:hover {
  background: #f2f4f6;
  color: #1a2e4a;
  border-color: #b0c4d8;
}
.dashboard-view-toggle-btn--active {
  background: #1a2e4a;
  color: #fff;
  border-color: #1a2e4a;
  box-shadow: 0 2px 8px rgba(26, 46, 74, 0.18);
}
.dashboard-view-toggle-btn--active:hover {
  background: #d1d1d1;
}

/* --- List view ------------------------------------------------------------ */
.dashboard-list-view {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #d6e0ea;
  border-radius: 12px;
  overflow: hidden;
}
.dashboard-list-view__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid #f0f4f8;
  transition: background 0.15s;
  flex-wrap: nowrap;
}
.dashboard-list-view__item:last-child {
  border-bottom: 0;
}
.dashboard-list-view__item:hover {
  background: #f7fafd;
}
.dashboard-list-view__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dashboard-list-view__title {
  display: block;
  color: #215f9e;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  white-space: normal;
}
.dashboard-list-view__title:hover {
  color: #e06b2d;
}
.dashboard-list-view__dept {
  font-size: 13px;
  color: #121212;
}
.dashboard-list-view__status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4a5568;
  background: #f1f5f9;
  border: 1px solid #cbd5e0;
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- View panel show/hide (toggled by JS class on wrapper) ---------------- */
.dashboard-panel--list {
  display: none;
}
.dashboard-panel--grid {
  display: block;
}

.dashboard-view-panels--list .dashboard-panel--list {
  display: block;
}
.dashboard-view-panels--list .dashboard-panel--grid {
  display: none;
}

/* --- List view badge group ------------------------------------------------ */
.dashboard-list-view__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.dashboard-list-view__featured {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #1a2e4a;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
  line-height: 1.5;
}
@media screen and (max-width: 1024px) {
  .dashboard-section span.field-content,
  .dashboard-section .views-field.views-field-nothing,
  .dashboard-section .views-view-responsive-grid__item-inner {
    height: 100%;
  }
}
@media screen and (max-width: 767px) {
  .dashboard-section .views-view-responsive-grid--horizontal {
    --views-responsive-grid--column-count: 1 !important;
  }
}
.project-section table td {
  word-break: break-word !important;
}
.project-section table td a {
  word-break: break-word !important;
}