/* PORCH-WO-31c-1: the WNM Resource library and Resource collection elements (design: 31c-0; ported from its preview.css).
   Loaded only on a page that uses either element (render.php's enqueue map), after events-calendar.css, whose chips, toggle, tags,
   dots, date block and empty state these reuse. Tokens only: var(--…) and color-mix() of a token. No motion beyond hover colors. */

.res-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.evc.is-loading .res-results { opacity: 0.55; }

/* ---- controls ---- */
.res { margin-top: clamp(24px, 4vw, 40px); }
.res-controls { display: grid; gap: 20px; margin-bottom: 28px; }
.res-search { position: relative; }
.res-search input {
  display: block; width: 100%; min-height: 56px; padding: 0 56px 0 52px; border: 1.5px solid var(--c-ink); border-radius: var(--r-pill);
  background: var(--c-light); color: var(--c-ink); font: 500 17px/1.2 var(--font-body);
}
.res-search input::placeholder { color: var(--color-text-2); opacity: 1; }
.res-search input::-webkit-search-cancel-button, .res-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.res-search input:focus-visible, .res-select select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.res-search__ico { position: absolute; left: 20px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--c-ink); pointer-events: none; }
.res-search__clear { position: absolute; right: 8px; top: 50%; width: var(--circle-md); height: var(--circle-md); margin-top: calc(var(--circle-md) / -2); display: grid; place-items: center; border-radius: 50%; color: var(--c-ink); cursor: pointer; }
.res-search__clear:hover { background: var(--c-paper); }
.res-search__clear svg { width: var(--circle-glyph); height: var(--circle-glyph); }

.res-ministries { display: flex; flex-wrap: wrap; gap: 8px; }
.res-n { font: 500 12px/1 var(--font-body); opacity: 0.72; }
.evc-chipbtn:focus-visible, .res-tab:focus-visible, .evc-toggle__btn:focus-visible, .res-clear:focus-visible, .res-act:focus-visible, .res-search__clear:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* folder tabs: shown when a ministry is chosen (the WNMD Files "folder" idea) */
.res-folders { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; border-bottom: 1px solid var(--color-border); }
.res-folders[hidden] { display: none; }
.res-folders__lbl { margin-right: 4px; font: 500 12px/1.3 var(--font-body); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--color-text-2); }
.res-tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-bottom: -1px; padding: 8px 2px;
  border-bottom: 3px solid transparent; color: var(--color-text-2); font: 600 15px/1.2 var(--font-body); cursor: pointer;
  transition: color var(--dur-fast) linear, border-color var(--dur-fast) linear;
}
.res-tab:hover { color: var(--c-ink); }
.res-tab[aria-pressed="true"] { color: var(--c-ink); border-bottom-color: var(--c-green); }

/* selects: the #66 dropdown style (appearance none, the chevron at the field's own side padding, room for padding + chevron + gap) */
.res-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 16px; align-items: end; }
.res-field { display: grid; gap: 6px; min-width: 0; }
.res-field label { font: 500 12px/1.3 var(--font-body); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--color-text-2); }
.res-select { position: relative; display: block; --pad: 18px; }
.res-select select {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 48px;
  padding: 0 calc(var(--pad) + 8px + 12px) 0 var(--pad); border: 1.5px solid var(--c-ink); border-radius: var(--r-pill);
  background: var(--c-light); color: var(--c-ink); font: 500 15px/1.2 var(--font-body); cursor: pointer; text-overflow: ellipsis;
}
.res-select::after {
  content: ""; position: absolute; right: var(--pad); top: 50%; width: 8px; height: 8px; margin-top: -6px; pointer-events: none;
  border-right: 1.75px solid var(--c-ink); border-bottom: 1.75px solid var(--c-ink); transform: rotate(45deg);
}
.res-clear { min-height: 48px; padding: 0 6px; color: var(--color-link); font: 600 14px/1.2 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.res-clear[hidden] { display: none; }

.res-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 24px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.res-count { margin: 0; font: 600 var(--fs-h3)/var(--lh-h3) var(--font-display); letter-spacing: var(--tr-title); min-width: 0; overflow-wrap: anywhere; }
.res-bar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.res-field--inline { display: flex; align-items: center; gap: 10px; }
.res-field--inline .res-select { min-width: 150px; }

/* ---- results: grid ---- */
.res-grid, .res-list { list-style: none; margin: 0; padding: 0; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--grid-gap); }
.res-li { display: grid; min-width: 0; }
.res-card {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; min-width: 0; overflow: hidden;
  border: 1px solid var(--color-border); border-radius: var(--r-md); background: var(--c-light); color: var(--c-ink);
}
.res-card--featured { border-color: var(--c-green); box-shadow: 0 0 0 2px var(--c-green); }
.res-card__media { position: relative; display: block; }
.res-flag {
  position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-green); color: var(--c-ink);
  font: 600 12px/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
}
.res-card__body { display: grid; align-content: start; gap: 10px; padding: 20px 20px 8px; }
.res-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; min-width: 0; }
.res-card__facts { font: 500 12px/1.3 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-2); }
.res-card__title { margin: 0; font: 600 21px/1.2 var(--font-display); letter-spacing: var(--tr-title); overflow-wrap: anywhere; }
.res-card__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.res-card__title a:focus-visible, .res-row__title a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.res-card__title a::after { content: ""; position: absolute; inset: 0; }   /* the whole card opens the page; the buttons sit above */
.res-card__desc, .res-row__desc { margin: 0; font-size: 15px; line-height: 1.5; color: var(--color-text-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.res-card__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 16px 20px 20px; }
.res-act { padding: 6px 2px; color: var(--color-link); font: 600 14px/1.2 var(--font-body); text-decoration: underline; text-underline-offset: 4px; }
.res-act:hover { color: var(--c-ink); }

/* kind tile: the file type, big, in the type's own tint */
.res-tile {
  --tile: color-mix(in srgb, var(--c-ink) 6%, var(--c-light)); --tile-fg: var(--c-ink);
  position: relative; display: grid; place-content: center; justify-items: center; gap: 6px; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--tile); color: var(--tile-fg);
}
.res-tile[data-type="spreadsheet"] { --tile: color-mix(in srgb, var(--c-green) 24%, var(--c-light)); }
.res-tile[data-type="presentation"] { --tile: color-mix(in srgb, var(--c-ochre) 32%, var(--c-light)); }
.res-tile[data-type="image"] { --tile: color-mix(in srgb, var(--c-sage) 30%, var(--c-light)); }
.res-tile[data-type="webpage"] { --tile: color-mix(in srgb, var(--c-forest) 16%, var(--c-light)); }
.res-tile[data-type="video"] { --tile: var(--c-ink); --tile-fg: var(--c-light); }
.res-tile[data-type="audio"] { --tile: var(--c-sage-deep); --tile-fg: var(--c-white); }
.res-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.res-tile__ext { font: 600 clamp(28px, 3vw, 38px)/1 var(--font-display); letter-spacing: var(--tr-heading); }
.res-tile__type { font: 500 11px/1.3 var(--font-body); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; }
.res-tile img ~ .res-tile__type { position: absolute; left: 12px; bottom: 10px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-light); color: var(--c-ink); opacity: 1; }
.res-tile__play {
  position: relative; display: inline-block; width: 44px; height: 44px; border-radius: 50%; background: var(--c-light);
}
.res-tile__play::after { content: ""; position: absolute; left: 17px; top: 13px; border-left: 15px solid var(--c-ink); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.res-tile[data-type="video"] .res-tile__ext { display: none; }
.res-tile[data-type="video"] .res-tile__play { order: -1; }
.res-tile[data-type="video"] img ~ .res-tile__play { position: absolute; left: 50%; top: 50%; margin: -22px 0 0 -22px; }

/* ---- results: list (the Events list row, with the file type in the date block) ---- */
.res-list { border-top: 1px solid var(--color-border); }
.res-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 3vw, 32px);
  padding: 20px 0; border-bottom: 1px solid var(--color-border);
}
.res-kind strong { font-size: 17px; }
.res-row__title { margin: 0; font: 600 clamp(19px, 2.2vw, 23px)/1.2 var(--font-display); letter-spacing: var(--tr-title); overflow-wrap: anywhere; }
.res-row__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.res-row__desc { font-size: 15px; }
.res-row__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 16px; }

/* ---- empty, show more, help ---- */
.res-empty { margin-top: 8px; }
.res-empty p + p { margin-top: 8px; }
.res-empty[hidden], .res-more[hidden] { display: none; }
.res-more { display: grid; justify-items: center; gap: 14px; margin-top: 36px; }
.res-more__count { margin: 0; font: 500 13px/1.3 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-2); }
.res-help { margin-top: clamp(40px, 6vw, 72px); }
.res-help__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px clamp(20px, 4vw, 48px);
  padding: 24px 0; border-block: 1px solid var(--color-border);
}
.res-help__row p { margin: 0; }
.res-help__lbl { font: 600 var(--fs-h3)/var(--lh-h3) var(--font-display); letter-spacing: var(--tr-title); }

/* ---- collection band (a ministry page, Home): the Row around it is a stock Row; the element prints head + items ---- */
.vc_row.wnm-shape--panel:has(.res-coll) { margin-block: var(--panel-inset); }
.res-coll__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(28px, 4vw, 48px); }
.res-coll__title { min-width: 0; flex: 1 1 360px; }
.res-coll__title .vc_custom_heading { margin-bottom: 10px; text-align: left; }
.res-coll__intro { max-width: var(--measure-lead); margin: 8px 0 0; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--color-text-2); }
.res-coll__cta { flex: none; }
.res-coll .res-list .res-row { padding-block: 24px; }
.res-coll .res-card__body { color: var(--c-ink); }
/* on a dark row: cream cards need no border; the featured outline stays green; a list's text is light */
.vc_row.wnm-bg--ink .res-coll__intro { color: var(--c-light-muted); }
.vc_row.wnm-bg--ink .res-coll .res-card { border-color: transparent; }
.vc_row.wnm-bg--ink .res-coll .res-card--featured { border-color: var(--c-green); box-shadow: 0 0 0 3px var(--c-green); }
.vc_row.wnm-bg--ink .res-coll .res-list, .vc_row.wnm-bg--ink .res-coll .res-row { border-color: color-mix(in srgb, var(--c-light) 24%, transparent); }
.vc_row.wnm-bg--ink .res-coll .res-row__desc, .vc_row.wnm-bg--ink .res-coll .res-row .evc-row__meta { color: var(--c-light-muted); }
.vc_row.wnm-bg--ink .res-coll .res-row .res-act { color: var(--c-light); }
.vc_row.wnm-bg--ink .res-coll .res-row .evc-date { color: var(--c-ink); }

/* ---- phone and tablet ---- */
@media (max-width: 1023px) {
  .res-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .res-clear { justify-self: start; }
}
@media (max-width: 767px) {
  .res-filters { grid-template-columns: 1fr; }
  .res-bar { align-items: flex-start; }
  .res-bar__tools { width: 100%; justify-content: space-between; }
  .res-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .res-row__actions { grid-column: 1 / -1; justify-content: flex-start; }
  .res-help__row { grid-template-columns: 1fr; justify-items: start; }
  .res-search input { font-size: 16px; }
  .res-coll__cta .btn { width: 100%; }
  .res-chipbtn, .evc-chipbtn { padding: 6px 12px; min-height: 40px; font-size: 13px; }
}
@media (max-width: 599px) { .res-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
  .res-card__actions .btn { max-width: 100%; }
  .res-folders { gap: 0 16px; }
  .res-folders__lbl { flex-basis: 100%; padding-top: 8px; }
}


/* 14aw: the Beliefs feature six keeps its original light, three-across paper-card rhythm. */
.vc_row#position-papers .res-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vc_row#position-papers .res-card { grid-template-rows: 1fr auto; min-height: 196px; }
.vc_row#position-papers .res-card__media,
.vc_row#position-papers .res-card__desc,
.vc_row#position-papers .res-card__meta .evc-tag,
.vc_row#position-papers .res-coll:not(.res-coll--actions) .res-card__actions .btn { display: none; }
.vc_row#position-papers .res-card__body { display: flex; flex-direction: column; gap: 12px; padding: 30px 32px 0; }
.vc_row#position-papers .res-card__title { order: -1; }
.vc_row#position-papers .res-card__actions { padding: 10px 32px 28px; }
@media (max-width: 1023px) { .vc_row#position-papers .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .vc_row#position-papers .res-grid { grid-template-columns: minmax(0, 1fr); } }