/*
 * /insights/interviews — video-archive layout.
 *
 * Layered on top of /insights/insights.css which still owns the page chrome
 * (breadcrumb, header, tab strip, feature row, spinner, ins-empty). Selectors
 * here are prefixed `.intv-` so they never collide with the shared shell's
 * `.ins-*`. The redesign drops the hero, sidebar, and chip filters and
 * replaces them with a search+commodity row and a 4-column card grid with
 * numbered pagination.
 *
 * Breakpoints — 4 across desktop, 2 across tablet, 1 across mobile per the
 * redesign ticket's responsive spec.
 */

/* ---- Filter row above the grid ----------------------------------------- */
.intv-filters {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 16px 0 20px;
}

.intv-search-input {
  position: relative;
  flex: 0 1 320px;
  min-width: 240px;
}

.intv-search-input input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 38px;
  border: 1px solid #d8dde6;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  color: #192342;
  box-sizing: border-box;
}
.intv-search-input input:focus {
  outline: none;
  border-color: #30a5bf;
  box-shadow: 0 0 0 2px rgba(48, 165, 191, 0.15);
}

.intv-search-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #8993a4;
  font-size: 14px;
  pointer-events: none;
}

/* Match the commodity dropdown size visually to the search field. */
.intv-chip {
  min-width: 200px;
}
.intv-chip::part(combobox) {
  height: 40px;
  border-radius: 6px;
}

/* Commodity facet count — dim, monospaced-feeling number floated to the
   right of each option's name in the dropdown. Reads as metadata, not as
   part of the commodity name. The label/count are wrapped in spans by
   interviews.js so we can flex-justify-between them across the option row. */
.intv-chip sl-option::part(base) {
  /* Let the inner spans use the full option width so the count can sit
     at the trailing edge instead of being crammed against the name. */
  justify-content: space-between;
  gap: 10px;
}
.intv-commodity-count {
  color: #8993a4;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.intv-commodity-label {
  /* Defensive truncation if a commodity name is unusually long. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Grid -------------------------------------------------------------- */
.intv-archive {
  margin-top: 4px;
}

.intv-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 28px 24px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1099px) {
  .intv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .intv-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Card -------------------------------------------------------------- */
.intv-card {
  list-style: none;
  /* Subtle fade + rise on mount. Plays once per render — when interviews.js
     re-renders the grid (filter/search/page change) the cards fade in
     rather than snap, which masks the InnerHTML flash. Respects motion
     preferences below. */
  animation: intv-card-in 0.32s ease-out both;
}
/* Slight stagger so cards don't all peak at the same frame — keeps the
   transition feeling responsive even on the 20-card grid. */
.intv-card:nth-child(4n+1) { animation-delay: 0ms; }
.intv-card:nth-child(4n+2) { animation-delay: 28ms; }
.intv-card:nth-child(4n+3) { animation-delay: 56ms; }
.intv-card:nth-child(4n)   { animation-delay: 84ms; }

@keyframes intv-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .intv-card { animation: none; }
}

.intv-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(25, 35, 66, 0.06), 0 0 0 1px rgba(25, 35, 66, 0.04);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.intv-card-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(25, 35, 66, 0.12), 0 0 0 1px rgba(25, 35, 66, 0.06);
}
.intv-card-link:focus-visible {
  outline: 3px solid #30a5bf;
  outline-offset: 3px;
}

.intv-card-thumb {
  display: block;
  position: relative;
  width: 100%;
  /* 16:9 aspect ratio for video thumbs. */
  aspect-ratio: 16 / 9;
  background-color: #d8dde6;
  background-size: cover;
  background-position: center center;
  /* The thumb is the top half of a single rounded card — only round its
     top corners so the bottom edge meets the title block cleanly. */
  border-radius: 0;
}

/* Play icon overlay — centered, semi-transparent disc + white triangle. */
.intv-card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.intv-card-play svg {
  width: 60px;
  height: 60px;
}
.intv-card-link:hover .intv-card-play {
  opacity: 1;
  transform: scale(1.04);
}

/* Duration badge — top-right, dark pill. */
.intv-card-duration {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  border-radius: 4px;
  pointer-events: none;
}

/* Interview type tag — bottom-left, dark navy semi-transparent pill matching
   the design mock. Tighter padding than v1 so the tag reads as a compact
   chip rather than a button. */
.intv-card-type {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 3px 7px;
  background: rgba(25, 35, 66, 0.85);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  border-radius: 3px;
  pointer-events: none;
}

.intv-card-title {
  margin: 0;
  /* No bottom padding on purpose — see comment below. The 6px gap above
     the meta row is handled by .intv-card-meta padding-top instead. */
  padding: 12px 14px 0;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  color: #192342;
  /* Cap at two lines so cards stay aligned regardless of title length.
     `-webkit-line-clamp` alone (plus `overflow: hidden`) was leaking a
     partial third line through the bottom padding because the clamp counts
     lines on the content box but the rendered line height + descenders
     varies enough by font-metric to push a sliver of line 3 into the
     padding strip. Tight clip: top-padding + exactly 2 line-boxes, no
     bottom-padding allowance. Any third-line content has nowhere to land. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: calc(12px + (2 * 1.35em));
  overflow: hidden;
}

.intv-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  /* 6px top padding restores the visual gap that used to sit on the title's
     bottom padding. Keeps the title→meta rhythm identical to before. */
  padding: 6px 14px 14px;
  font-size: 13px;
  color: #6b7280;
}
.intv-card-meta-sep {
  display: inline-block;
  width: 1px;
  height: 1em;
  /* Inline middle-dot via the · entity in markup; this rule is
     a no-op visually but keeps the separator span clickable-area-free. */
}
.intv-card-meta-sep::before { content: '·'; padding: 0 2px; }
.intv-card-company {
  font-weight: 500;
  color: #2a3650;
}

/* ---- Pagination -------------------------------------------------------- */
/* 3-column grid: summary left, pages truly centered on the page (NOT centered
   between the summary and the right edge), empty spacer on the right matches
   the summary's column width so the center column stays optically centered. */
.intv-pager {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px 24px;
}
.intv-pager-summary {
  font-size: 13px;
  color: #6b7280;
  grid-column: 1;
  justify-self: start;
}
.intv-pager-pages {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0;
  grid-column: 2;
  justify-self: center;
}
.intv-pager-pages > li {
  list-style: none;
}
.intv-pager-pages button {
  min-width: 40px;
  height: 36px;
  padding: 0 12px;
  background: #fff;
  color: #192342;
  border: 1px solid #d8dde6;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.intv-pager-pages button:hover:not(:disabled) {
  background: #f4f7fa;
  border-color: #b5c0d0;
}
.intv-pager-pages button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Selected page — slightly larger border ring + soft brand tint background,
   matching the mock's highlighted state. */
.intv-pager-page.is-active button {
  border-color: #30a5bf;
  color: #30a5bf;
  background: #fff;
  box-shadow: inset 0 0 0 1px #30a5bf;
}
.intv-pager-page.is-active button:hover { background: #fff; }
.intv-pager-ellipsis {
  padding: 0 4px;
  color: #8993a4;
  font-weight: 600;
}
.intv-pager-next button i {
  font-size: 11px;
}

@media (max-width: 719px) {
  .intv-pager {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  .intv-pager-summary,
  .intv-pager-pages {
    grid-column: 1;
    justify-self: center;
    text-align: center;
  }
}