.showcase-page {
  /* Aliased to the canonical WADIREP/WASCAL tokens from ckanext-custom/assets/style.css
     (loaded site-wide via base.html) instead of a locally hardcoded palette, so this
     page can't drift from the brand blue/green defined once in one place. This file
     already did that for --showcase-blue-dark; the other tokens below used to be
     hardcoded to a different blue (#0f5f8f) than the rest of the brand (#0D6BF1). */
  --showcase-blue: var(--color-wascal-blue, #0D6BF1);
  --showcase-blue-dark: var(--color-wascal-blue-muted, #33526F);
  --showcase-green: var(--color-wascal-green, #43C16F);
  --showcase-accent: var(--color-accent, #b87912);
  --showcase-surface: var(--color-surface, #ffffff);
  --showcase-surface-muted: var(--color-surface-secondary, #f7fafb);
  --showcase-border: var(--color-border, #d9e1e7);
  --showcase-text: var(--color-text-primary, #172331);
  --showcase-text-muted: var(--color-text-muted, #5c6875);
  --showcase-focus: rgba(13, 107, 241, 0.22);
  --showcase-blue-soft: rgba(13, 107, 241, 0.12);
  /* --showcase-danger has no brand-token equivalent (it's a UI error state, not a brand
     color) -- same value as ckanext-wascal-theme's story.css --story-danger, kept
     unchanged in dark mode for the same reason. */
  --showcase-danger: #b42318;
  color: var(--showcase-text) !important;
  background: var(--showcase-surface-muted) !important;
  letter-spacing: 0;
}

.dark .showcase-page {
  --showcase-surface: var(--color-surface-dark-secondary, #494A4F);
  --showcase-surface-muted: var(--color-surface-dark, #0C0F13);
  --showcase-border: var(--color-border-dark, #6D7779);
  --showcase-text: var(--color-text-dark-primary, #ffffff);
  --showcase-text-muted: var(--color-text-dark-secondary, #C4C4C4);
}

.showcase-container {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.showcase-hero,
.showcase-read-hero {
  color: #fff !important;
  background-color: var(--showcase-blue) !important;
  border-bottom: 4px solid var(--showcase-green) !important;
}

.dark .showcase-hero,
.dark .showcase-read-hero {
  background-color: var(--showcase-surface-muted) !important;
  border-bottom-color: var(--showcase-blue) !important;
}

.showcase-hero {
  padding: 3.5rem 0;
}

.showcase-hero-layout,
.showcase-read-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.5rem;
  align-items: center;
}

.showcase-hero-copy {
  max-width: 52rem;
}

.showcase-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72) !important;
}

.showcase-hero h1,
.showcase-read-hero h1 {
  margin: 0;
  color: #fff !important;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.showcase-hero-copy > p:last-child {
  max-width: 48rem;
  margin: 1.25rem 0 0;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 1rem;
  line-height: 1.8;
}

.showcase-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

.showcase-stat {
  min-width: 10rem;
  padding: 1.25rem 1.5rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.showcase-stat strong,
.showcase-stat span {
  display: block;
}

.showcase-stat strong {
  color: #fff !important;
  font-size: 2.25rem;
  line-height: 1;
}

.showcase-stat span {
  margin-top: 0.4rem;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.showcase-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
  margin: 0 0 8px;
  border: 1px solid var(--showcase-border) !important;
  border-radius: 8px;
  background: var(--showcase-surface) !important;
}

.showcase-search-input,
.showcase-search-select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  /* Deliberately NOT var(--showcase-text): that token flips to white in dark
     mode, but this field's background stays a fixed white (#fff) in both
     themes (matching the mobile search field convention), so the text color
     must stay fixed dark too or it becomes white-on-white in dark mode. */
  color: var(--color-text-primary, #172331) !important;
  border: 1px solid var(--showcase-border) !important;
  border-radius: 6px;
  background: #fff !important;
  font-size: 1rem;
  line-height: 1.4;
}

.showcase-search-input::placeholder {
  color: var(--color-text-muted, #5c6875) !important;
}

.showcase-search-input:focus,
.showcase-search-select:focus {
  outline: 0;
  border-color: var(--showcase-blue) !important;
  box-shadow: 0 0 0 3px var(--showcase-focus);
}

.showcase-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--showcase-border) !important;
  border-radius: 6px;
  background: var(--showcase-surface) !important;
  color: var(--showcase-text) !important;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.showcase-button:hover,
.showcase-button:focus {
  color: var(--showcase-text) !important;
  text-decoration: none;
  border-color: var(--showcase-blue) !important;
  box-shadow: 0 0 0 3px var(--showcase-focus);
}

.showcase-button-primary {
  border-color: var(--showcase-blue) !important;
  background: var(--showcase-blue) !important;
  color: #ffffff !important;
}

.showcase-button-primary:hover,
.showcase-button-primary:focus {
  color: #ffffff !important;
  background: var(--showcase-blue) !important;
}

.showcase-button-accent {
  color: #0C0F13 !important;
  border-color: var(--showcase-accent) !important;
  background: var(--showcase-accent) !important;
}

.showcase-button-accent:hover,
.showcase-button-accent:focus {
  color: #0C0F13 !important;
  background: var(--color-accent-hover, #D39A66) !important;
}

.showcase-button-secondary {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  background: transparent !important;
}

.showcase-button-secondary:hover,
.showcase-button-secondary:focus {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.showcase-button-danger {
  color: #ffffff !important;
  border-color: var(--showcase-danger) !important;
  background: var(--showcase-danger) !important;
}

.showcase-button-danger:hover,
.showcase-button-danger:focus {
  color: #ffffff !important;
  border-color: var(--showcase-danger) !important;
  background: var(--showcase-danger) !important;
}

.showcase-content {
  padding: 28px 0 48px;
}

.showcase-directory-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.showcase-directory-head h1 {
  margin: 0;
  color: var(--showcase-text) !important;
  font-size: 3rem;
  font-weight: 760;
  line-height: 1.06;
  letter-spacing: 0;
}

.showcase-directory-head p {
  margin: 0.35rem 0 0;
  color: var(--showcase-text-muted) !important;
  font-weight: 650;
}

.showcase-content-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.showcase-filters,
.showcase-read-sidebar {
  display: grid;
  gap: 1rem;
}

.showcase-panel,
.showcase-card,
.showcase-empty {
  border: 1px solid var(--showcase-border) !important;
  border-radius: 8px;
  background: var(--showcase-surface) !important;
  box-shadow: none;
}

.showcase-panel {
  padding: 16px;
}

.showcase-panel h2 {
  margin: 0;
  color: var(--showcase-text) !important;
  font-size: 1.05rem;
  font-weight: 760;
  line-height: 1.25;
  letter-spacing: 0;
}

.showcase-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.showcase-panel-heading h2 {
  margin: 0;
}

.showcase-panel-heading > span {
  display: inline-flex;
  min-width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--showcase-blue) !important;
  background: #edf5f8 !important;
  font-size: 0.78rem;
  font-weight: 800;
}

.showcase-tag-list,
.showcase-dataset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The showcase-filters sidebar (facet groups, checkboxes, chips) has its own
   dedicated stylesheet: showcase-filters.css. */

.showcase-help p,
.showcase-muted,
.showcase-card-description,
.showcase-byline {
  color: var(--showcase-text-muted) !important;
}

.showcase-help p,
.showcase-card-description {
  margin: 0;
  line-height: 1.65;
}

.showcase-results {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.showcase-results-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.showcase-results-heading > div {
  min-width: 0;
  max-width: 100%;
}

.showcase-results-title {
  margin: 0;
  color: var(--showcase-text) !important;
  font-size: 1.15rem;
  font-weight: 760;
  line-height: 1.25;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.showcase-results-count {
  margin: 0.45rem 0 0;
  color: var(--showcase-text-muted) !important;
  font-weight: 650;
}

.showcase-query-text,
.showcase-empty h3,
.showcase-card h3,
.showcase-card-description {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.showcase-query-text {
  display: inline;
  min-width: 0;
  max-width: 100%;
  color: var(--showcase-blue) !important;
  font-weight: 760;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.showcase-sort-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.showcase-sort-label {
  margin: 0;
  color: var(--showcase-text-muted) !important;
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
}

.showcase-sort-select {
  width: min(220px, 46vw);
  min-height: 40px;
  padding: 8px 34px 8px 10px;
  color: var(--showcase-text) !important;
  border: 1px solid var(--showcase-border) !important;
  border-radius: 6px;
  background: var(--showcase-surface) !important;
}

.showcase-sort-select:focus,
.showcase-sort-submit:focus {
  outline: 0;
  border-color: var(--showcase-blue) !important;
  box-shadow: 0 0 0 3px var(--showcase-focus);
}

.showcase-sort-submit {
  display: inline-flex;
  width: 40px;
  min-width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--showcase-border) !important;
  border-radius: 6px;
  color: var(--showcase-text) !important;
  background: var(--showcase-surface) !important;
}

.showcase-sort-submit:hover {
  color: var(--showcase-blue) !important;
  border-color: var(--showcase-blue) !important;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.showcase-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.18s ease;
}

.showcase-card:hover {
  border-color: var(--showcase-blue) !important;
}

.showcase-card-image-link {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-wadirep-blue-pale, #C0D4E9) !important;
}

.showcase-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.showcase-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.25rem;
}

.showcase-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.showcase-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--showcase-border) !important;
  border-radius: 999px;
  color: var(--showcase-text-muted) !important;
  background: var(--showcase-surface-muted) !important;
  font-size: 0.72rem;
  font-weight: 700;
}

.showcase-pill-private {
  color: var(--color-bmftr-red, #FF0000) !important;
  border-color: rgba(255, 0, 0, 0.18) !important;
  background: rgba(255, 0, 0, 0.08) !important;
}

.showcase-pill-featured {
  color: #0C0F13 !important;
  border-color: rgba(205, 133, 31, 0.28) !important;
  background: rgba(205, 133, 31, 0.16) !important;
}

.showcase-card h3 {
  margin: 0 0 0.7rem;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: 0;
}

.showcase-card h3 a {
  color: var(--showcase-blue) !important;
  text-decoration: none;
}

.dark .showcase-card h3 a {
  color: var(--color-wascal-blue-light, #7198F5) !important;
}

.showcase-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1rem;
}

.showcase-mini-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.showcase-mini-list li {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--showcase-border) !important;
  border-radius: 0.5rem;
  color: var(--showcase-text-muted) !important;
  background: var(--showcase-surface-muted) !important;
  font-size: 0.72rem;
  font-weight: 700;
}

.showcase-tag-list a {
  display: inline-flex;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  color: var(--showcase-green) !important;
  background: rgba(67, 193, 111, 0.1) !important;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
}

.dark .showcase-tag-list a {
  color: var(--color-wascal-green-light, #6CC88A) !important;
  background: rgba(67, 193, 111, 0.12) !important;
}

.showcase-card-footer {
  padding: 0 1.25rem 1.25rem;
}

.showcase-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--showcase-blue) !important;
  font-weight: 700;
  text-decoration: none;
}

.dark .showcase-card-link {
  color: var(--color-wascal-blue-light, #7198F5) !important;
}

.showcase-empty {
  padding: 34px 20px;
  text-align: center;
}

.showcase-empty > i {
  color: var(--showcase-blue) !important;
  font-size: 2rem;
}

.showcase-empty h3 {
  margin: 1rem 0 0;
  color: var(--showcase-text) !important;
}

.showcase-pagination {
  margin-top: 26px;
}

.showcase-pagination .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
}

.showcase-pagination .pagination a,
.showcase-pagination .pagination span {
  border-radius: 0.45rem !important;
}

.showcase-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.showcase-read-hero {
  padding: 1.5rem 0 3rem;
}

.showcase-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.85rem;
}

.showcase-breadcrumb a {
  color: #fff !important;
}

.showcase-read-hero-layout {
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 28rem);
}

.showcase-read-hero h1 {
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.showcase-read-hero .showcase-pill {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.showcase-byline {
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.75) !important;
}

.showcase-read-summary {
  max-width: 48rem;
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.84) !important;
  font-size: 1rem;
  line-height: 1.7;
}

.showcase-read-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.showcase-read-image {
  width: 100%;
  max-height: 19rem;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 0.5rem;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.24);
}

.showcase-read-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem);
  gap: 2rem;
  align-items: start;
}

.showcase-read-main {
  display: grid;
  gap: 1rem;
}

.showcase-description {
  font-size: 1rem;
  line-height: 1.75;
}

.showcase-description img {
  max-width: 100%;
  height: auto;
}

.showcase-metadata-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
}

.showcase-metadata-grid div {
  min-width: 0;
}

.showcase-metadata-grid dt {
  margin-bottom: 0.25rem;
  color: var(--showcase-text-muted) !important;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.showcase-metadata-grid dd {
  margin: 0;
  color: var(--showcase-text) !important;
  overflow-wrap: anywhere;
}

.showcase-dataset-list {
  display: grid;
  gap: 0.45rem;
}

.showcase-dataset-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--showcase-border) !important;
  border-radius: 0.5rem;
  color: var(--showcase-text) !important;
  text-decoration: none;
}

.showcase-dataset-list a:hover,
.showcase-dataset-list a:focus {
  color: var(--showcase-blue) !important;
  border-color: rgba(13, 107, 241, 0.4) !important;
  text-decoration: none;
}

.showcase-form {
  width: 100%;
  max-width: 68rem;
  min-width: 0;
}

.showcase-form,
.showcase-form *,
.showcase-form *::before,
.showcase-form *::after {
  box-sizing: border-box;
}

.showcase-form-section {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--showcase-border, #C4C4C4) !important;
}

.showcase-form-section > h2 {
  margin: 0 0 1rem;
  color: var(--showcase-text, #0C0F13) !important;
  font-size: 1.2rem;
  line-height: 1.25;
}

/* Every showcase form field -- label and its input -- occupies its own full-width
   row: a single-column stack, never side by side, regardless of viewport. */
.showcase-form-grid,
.showcase-form-language-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.showcase-form .control-group {
  min-width: 0;
}

.showcase-form .control-full,
.showcase-form .controls,
.showcase-form .input-prepend,
.showcase-form .input-append {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.showcase-form .control-required {
  color: var(--showcase-danger, #b42318) !important;
  font-weight: 600;
}

.showcase-form .form-control,
.showcase-form select,
.showcase-form textarea,
.showcase-form input[type="text"],
.showcase-form input[type="url"],
.showcase-form input[type="email"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.showcase-form select[multiple] {
  min-height: 10rem;
}

.showcase-form .ck,
.showcase-form .ck *,
.showcase-form .ck *::before,
.showcase-form .ck *::after {
  box-sizing: border-box;
}

.showcase-form .ck.ck-editor,
.showcase-form .ck.ck-editor__top,
.showcase-form .ck.ck-editor__main,
.showcase-form .ck.ck-sticky-panel,
.showcase-form .ck.ck-sticky-panel__content,
.showcase-form .ck.ck-reset,
.showcase-form .ck.ck-content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.showcase-form .ck.ck-toolbar {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-color: var(--showcase-border, #C4C4C4) !important;
  border-radius: 0.5rem 0.5rem 0 0;
  -webkit-overflow-scrolling: touch;
}

.showcase-form .ck.ck-toolbar > .ck-toolbar__items,
.showcase-form .ck.ck-toolbar .ck-toolbar__items,
.showcase-form .ck.ck-toolbar_grouping > .ck-toolbar__items {
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
}

.showcase-form .ck.ck-toolbar .ck-button,
.showcase-form .ck.ck-toolbar .ck-dropdown,
.showcase-form .ck.ck-toolbar .ck-toolbar__separator {
  flex: 0 0 auto;
}

.showcase-form .ck.ck-toolbar .ck-button {
  max-width: 100%;
}

.showcase-form .ck.ck-dropdown .ck-dropdown__panel {
  max-width: min(24rem, calc(100vw - 32px));
}

.showcase-form .ck.ck-editor__editable_inline {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 16rem;
  padding: 1rem 1.125rem;
  overflow-x: auto;
  border-color: var(--showcase-border, #C4C4C4) !important;
  color: var(--showcase-text, #0C0F13) !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.showcase-form .ck.ck-editor__editable_inline:focus {
  border-color: var(--showcase-blue, #0D6BF1) !important;
  box-shadow: 0 0 0 3px var(--showcase-focus, rgba(13, 107, 241, 0.16));
}

.showcase-form .ck.ck-editor__editable_inline img,
.showcase-form .ck.ck-editor__editable_inline figure,
.showcase-form .ck.ck-editor__editable_inline .image {
  max-width: 100%;
  height: auto;
}

.showcase-form .ck.ck-editor__editable_inline table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.showcase-description .ck-content {
  color: var(--showcase-text) !important;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.showcase-description .ck-content > :first-child {
  margin-top: 0;
}

.showcase-description .ck-content > :last-child {
  margin-bottom: 0;
}

.showcase-description .ck-content img,
.showcase-description .ck-content figure,
.showcase-description .ck-content .image {
  max-width: 100%;
  height: auto;
}

.showcase-description .ck-content .table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.showcase-description .ck-content table {
  max-width: 100%;
}

.showcase-management-page {
  min-height: 50vh;
}

.showcase-management-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.showcase-management-head > div:first-child {
  min-width: 0;
}

.showcase-management-eyebrow {
  margin: 0 0 0.45rem;
  color: var(--showcase-text-muted) !important;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.showcase-management-head h1,
.showcase-confirm-panel h1 {
  margin: 0;
  color: var(--showcase-text) !important;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.showcase-management-summary,
.showcase-confirm-panel p {
  max-width: 48rem;
  margin: 0.65rem 0 0;
  color: var(--showcase-text-muted) !important;
  line-height: 1.65;
}

.showcase-management-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.showcase-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.showcase-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--showcase-border) !important;
  border-radius: 6px;
  color: var(--showcase-text-muted) !important;
  background: var(--showcase-surface) !important;
  font-weight: 750;
  text-decoration: none;
}

.showcase-tab:hover,
.showcase-tab:focus,
.showcase-tab.is-active {
  color: var(--showcase-blue) !important;
  border-color: var(--showcase-blue) !important;
  background: #eef6f9 !important;
  text-decoration: none;
}

.dark .showcase-tab:hover,
.dark .showcase-tab:focus,
.dark .showcase-tab.is-active {
  color: var(--color-wascal-blue-light, #7198F5) !important;
  background: rgba(113, 152, 245, 0.13) !important;
}

.showcase-management-panel {
  padding: 1.5rem;
}

.showcase-management-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem) auto;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.showcase-management-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.showcase-dataset-picker {
  min-width: 0;
}

.showcase-list-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}

.showcase-dataset-pick-list,
.showcase-admin-list,
.showcase-related-list {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.showcase-dataset-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem;
  border: 1px solid var(--showcase-border) !important;
  border-radius: 8px;
  background: var(--showcase-surface-muted) !important;
  cursor: pointer;
}

.showcase-dataset-row input {
  margin-top: 0.25rem;
}

.showcase-dataset-row strong,
.showcase-dataset-row small {
  display: block;
}

.showcase-dataset-row a,
.showcase-related-item h2 a {
  color: var(--showcase-blue) !important;
  text-decoration: none;
}

.showcase-dataset-row small,
.showcase-related-item p {
  margin-top: 0.35rem;
  color: var(--showcase-text-muted) !important;
  line-height: 1.55;
}

.showcase-empty-compact {
  padding: 1.5rem 1rem;
}

.showcase-confirm-container {
  max-width: 46rem;
}

.showcase-confirm-panel {
  padding: 2rem;
  text-align: left;
}

.showcase-confirm-panel > i {
  margin-bottom: 1rem;
  color: var(--showcase-danger) !important;
  font-size: 2rem;
}

.showcase-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.showcase-admin-page {
  display: grid;
  gap: 1rem;
}

.showcase-admin-panel,
.showcase-admin-help {
  padding: 1rem;
}

.showcase-admin-form label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--showcase-text) !important;
  font-weight: 750;
}

.showcase-admin-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
}

.showcase-admin-form input,
.showcase-admin-form select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  color: var(--color-text-primary, #172331) !important;
  border: 1px solid var(--showcase-border) !important;
  border-radius: 6px;
  background: #ffffff !important;
}

.showcase-admin-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--showcase-border) !important;
  border-radius: 8px;
  background: var(--showcase-surface-muted) !important;
}

.showcase-dataset-tab {
  display: grid;
  gap: 1rem;
}

.showcase-related-list {
  gap: 1rem;
}

.showcase-related-item {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid var(--showcase-border) !important;
  border-radius: 8px;
  background: var(--showcase-surface) !important;
}

.showcase-related-image {
  width: 7rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: var(--showcase-surface-muted) !important;
}

.showcase-related-item h2 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.25;
}

@media (max-width: 62rem) {
  .showcase-content-layout,
  .showcase-read-layout,
  .showcase-management-grid,
  .showcase-management-toolbar {
    grid-template-columns: 1fr;
  }

  .showcase-metadata-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  .showcase-hero-layout,
  .showcase-read-hero-layout,
  .showcase-search,
  .showcase-grid,
  .showcase-metadata-grid {
    grid-template-columns: 1fr;
  }

  .showcase-directory-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .showcase-management-head,
  .showcase-admin-form-row,
  .showcase-related-item {
    grid-template-columns: 1fr;
  }

  .showcase-management-head {
    flex-direction: column;
  }

  .showcase-management-actions,
  .showcase-list-actions {
    justify-content: flex-start;
  }

  .showcase-related-image {
    width: 100%;
    max-height: 12rem;
  }

  .showcase-hero {
    padding: 2.5rem 0;
  }

  .showcase-hero-actions {
    align-items: flex-start;
  }

  .showcase-results-heading,
  .showcase-sort-form {
    align-items: stretch;
    flex-direction: column;
  }
  
  .showcase-button,
  .showcase-search .showcase-button,
  .showcase-sort-select,
  .showcase-sort-submit {
    width: 100%;
  }

  .showcase-stat {
    width: 100%;
  }

  .showcase-card-image-link {
    height: 11rem;
  }

  .showcase-management-panel {
    padding: 1rem;
  }

  .showcase-form-section {
    padding: 1rem 0;
  }

  .showcase-form .ck.ck-toolbar {
    padding: 0.25rem;
  }

  .showcase-form .ck.ck-toolbar__separator {
    display: none;
  }

  .showcase-form .ck.ck-dropdown__button .ck-button__label {
    max-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .showcase-form .ck.ck-editor__editable_inline {
    min-height: 12rem;
    padding: 0.75rem;
  }
}

@media (max-width: 30rem) {
  .showcase-container {
    width: min(1180px, calc(100% - 20px));
  }

  .showcase-management-panel {
    padding: 0.75rem;
  }

  .showcase-form .ck.ck-dropdown__button .ck-button__label {
    max-width: 5.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-card,
  .showcase-card-image,
  .showcase-button,
  .showcase-tab {
    transition: none;
  }
}