/*
 * DII Resource Library presentation (P2-WP-07 Resource Library
 * Implementation), loaded on the Resource Library page only, after
 * dii-homepage.css (tints, Newsletter panel) and dii-article.css
 * (breadcrumb). Same DII tokens; no new brand colour, no external font, no
 * icon font. The filter controls are plain native form elements; there is no
 * JS-only interaction that native HTML could not also express.
 */

.dii-library-page {
  max-width: var(--cdi-grid-max-content-width, 75rem);
  margin: 0 auto;
  padding: 0 var(--cdi-spacing-md, 1rem) var(--cdi-spacing-3xl, 4rem);
}

.dii-library-page > * + * {
  margin-top: var(--cdi-spacing-2xl, 3rem);
}

/* Masthead: the shared split-hero component (template-parts/shared-dii/hero,
   the same one the Homepage and Topic Page use) — breadcrumb, eyebrow, H1,
   intro and CTA on the left, the approved photographic Resource Library
   hero on the right. Its absence is not an error: the shared component
   simply omits the media column. */
.dii-site .dii-library-page .dii-breadcrumb {
  padding: var(--cdi-spacing-lg, 1.5rem) 0 var(--cdi-spacing-sm, 0.5rem);
}

.dii-library-masthead .dii-hero {
  display: grid;
  gap: var(--cdi-spacing-xl, 2rem);
  align-items: center;
}

.dii-library-masthead .dii-hero__title {
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
}

.dii-library-masthead .dii-hero__media {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1.5rem 2.5rem -1.5rem color-mix(in srgb, var(--dii-color-brand-primary) 70%, transparent);
}

.dii-library-masthead .dii-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (min-width: 64rem) {
  .dii-library-masthead .dii-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--cdi-spacing-2xl, 3rem);
  }
}

/* Resource-type navigation strip: the fixed type set, plus "All", as a
   horizontal row immediately below the Hero — the same treatment as the
   Topic Page's topic-navigation strip. */
.dii-library-type-nav {
  margin-top: var(--cdi-spacing-lg, 1.5rem);
  padding-bottom: var(--cdi-spacing-md, 1rem);
  border-bottom: 1px solid var(--dii-color-border-subtle);
  overflow-x: auto;
}

.dii-library-type-nav__list {
  display: flex;
  gap: var(--cdi-spacing-xs, 0.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dii-site .dii-library-type-nav__link {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  min-width: 6.5rem;
  padding: var(--cdi-spacing-sm, 0.5rem) var(--cdi-spacing-md, 1rem);
  border: 0;
  border-radius: 0.5rem;
  color: var(--dii-color-text-secondary);
  background: transparent;
  text-align: center;
  font: inherit;
  font-size: var(--cdi-font-size-body-small, 0.875rem);
  font-weight: 700;
  cursor: pointer;
}

.dii-site .dii-library-type-nav__link:hover {
  background: var(--dii-tint);
}

.dii-site .dii-library-type-nav__link--current {
  position: relative;
  color: var(--dii-color-brand-primary);
  background: var(--dii-tint);
}

.dii-site .dii-library-type-nav__link--current::after {
  content: '';
  position: absolute;
  right: 0.75rem;
  bottom: -0.6875rem;
  left: 0.75rem;
  height: 0.1875rem;
  border-radius: 62.4375rem;
  background: var(--dii-color-brand-secondary);
}

.dii-library-type-nav__icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--dii-color-brand-secondary);
}

.dii-library-type-nav__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Featured Resource: the homepage's dominant-card treatment (.dii-featured), a wide banner-style card */
.dii-library-featured__heading {
  margin: 0 0 var(--cdi-spacing-md, 1rem);
  color: var(--dii-color-brand-primary);
  font-size: var(--cdi-font-size-h5, 1.25rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.dii-site .dii-library-featured__card {
  display: flex;
  align-items: flex-start;
  gap: var(--cdi-spacing-lg, 1.5rem);
  padding: var(--cdi-spacing-xl, 2rem);
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.75rem;
  color: inherit;
  background: white;
  text-decoration: none;
  box-shadow: 0 0.75rem 1.75rem -1.25rem color-mix(in srgb, var(--dii-color-brand-primary) 45%, transparent);
}

.dii-site .dii-library-featured__card:hover {
  border-color: var(--dii-color-brand-secondary);
}

.dii-library-featured__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  color: var(--dii-color-brand-secondary);
  background: var(--dii-tint);
}

.dii-library-featured__icon svg {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
}

.dii-library-featured__body {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.dii-library-featured__meta {
  color: var(--dii-accent-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dii-library-featured__title {
  margin: 0;
  color: var(--dii-color-brand-primary);
  font-size: var(--cdi-font-size-h4, 1.5rem);
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.dii-library-featured__description {
  color: var(--dii-color-text-secondary);
  line-height: 1.5;
}

.dii-library-featured__cta {
  margin-top: 0.25rem;
  color: var(--dii-color-link);
  font-weight: 700;
}

/* Controls: always-usable native search + two selects */
.dii-library-controls {
  padding: var(--cdi-spacing-lg, 1.5rem);
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.75rem;
  background: var(--dii-tint);
}

.dii-library-controls__row {
  display: grid;
  gap: var(--cdi-spacing-md, 1rem);
  align-items: end;
}

.dii-library-controls__field {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.dii-library-controls__label {
  color: var(--dii-color-brand-primary);
  font-size: 0.8125rem;
  font-weight: 700;
}

.dii-library-controls__input,
.dii-library-controls__select {
  min-height: 2.75rem;
  padding: 0 var(--cdi-spacing-md, 1rem);
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.375rem;
  color: var(--dii-color-text-primary);
  background: white;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.dii-library-controls__input::placeholder {
  color: var(--dii-color-text-secondary);
  opacity: 1;
}

.dii-site .dii-library-controls__reset:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 var(--cdi-spacing-md, 1rem);
  border: 1px solid var(--dii-color-brand-primary);
  border-radius: 0.375rem;
  color: var(--dii-color-brand-primary);
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.dii-site .dii-library-controls__reset:hover {
  color: white;
  background: var(--dii-color-brand-primary);
}

.dii-library-controls__status {
  margin: var(--cdi-spacing-md, 1rem) 0 0;
  color: var(--dii-color-text-secondary);
  font-size: var(--cdi-font-size-body-small, 0.875rem);
}

/* Grid */
.dii-library-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cdi-spacing-md, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dii-site .dii-resource-card {
  display: grid;
  gap: var(--cdi-spacing-sm, 0.5rem);
  align-content: start;
  height: 100%;
  padding: var(--cdi-spacing-lg, 1.5rem);
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.75rem;
  color: inherit;
  background: white;
}

.dii-site .dii-library-grid__item:has(.dii-resource-card__link:hover) .dii-resource-card,
.dii-site .dii-library-grid__item:has(.dii-resource-card__link:focus-visible) .dii-resource-card {
  border-color: var(--dii-color-brand-secondary);
}

.dii-resource-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.25rem;
  border-radius: 0.625rem;
  color: var(--dii-color-brand-secondary);
  background: var(--dii-tint);
}

.dii-resource-card__icon svg {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
}

.dii-resource-card__type {
  margin: 0;
  color: var(--dii-accent-text);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dii-resource-card__title {
  margin: 0;
  font-size: var(--cdi-font-size-h6, 1.125rem);
  font-weight: 700;
  line-height: 1.3;
}

.dii-site .dii-resource-card__link {
  color: var(--dii-color-brand-primary);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.dii-site .dii-resource-card__link:hover {
  color: var(--dii-color-brand-secondary);
  text-decoration: underline;
}

.dii-resource-card__description {
  margin: 0;
  color: var(--dii-color-text-secondary);
  font-size: var(--cdi-font-size-body-small, 0.875rem);
  line-height: 1.5;
}

.dii-resource-card__footer {
  margin: 0.25rem 0 0;
}

.dii-resource-card__topic {
  display: inline-block;
  padding: 0.1875rem 0.625rem;
  border-radius: 62.4375rem;
  color: var(--dii-color-text-secondary);
  background: var(--dii-tint);
  font-size: 0.75rem;
  font-weight: 600;
}

.dii-library-empty {
  max-width: 34rem;
  margin: var(--cdi-spacing-xl, 2rem) 0 0;
  color: var(--dii-color-text-secondary);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.dii-library-empty--filtered:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cdi-spacing-md, 1rem);
}

.dii-site .dii-library-empty__reset {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--dii-color-link);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

@media (min-width: 48rem) {
  .dii-library-page {
    padding-right: var(--cdi-spacing-lg, 1.5rem);
    padding-left: var(--cdi-spacing-lg, 1.5rem);
  }

  .dii-library-controls__row {
    grid-template-columns: minmax(0, 1fr) 12rem 12rem auto;
  }

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

@media (min-width: 64rem) {
  .dii-library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}