/* bsvsearch_pay_features 4.35.2 (kit b1 + b2) - Features index + Feature page. Colours follow the Creations shell's
   reader variables (Light / Sepia / Dark / Night) with plain fallbacks for any page outside the shell. */
/* 4.35.1d: the variables also on .bsvf-list, else the sidebar box and its Apply button come out transparent. */
/* 4.35.4: .bsv-hub-features too - the hub's Features section now holds cards. */
.bsvf, .bsvf-list, .bsvf-empty, .bsvf-card-places, .bsvf-places, .bsvf-follow, .bsvf-takeout-form, .bsv-hub-features { --bsvf-ink: var(--r-ink, #16233a); --bsvf-soft: var(--r-soft, #5b6676); --bsvf-rule: var(--r-rule, #dfe5ee);
  --bsvf-card: var(--cs-card, #fff); --bsvf-gold: #c9972e; }
.bsvf-sub { font-size: 1.125rem; line-height: 1.5; color: var(--bsvf-ink); margin: 0 0 .75rem; }
.bsvf-intro { color: var(--bsvf-soft); line-height: 1.65; max-width: 46rem; margin: 0 0 2rem; }

/* index cards */
.bsvf-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bsvf-card { display: flex; flex-direction: column; border: 1px solid var(--bsvf-rule); border-radius: 16px; overflow: hidden;
  background: var(--bsvf-card); color: var(--bsvf-ink) !important; text-decoration: none !important; transition: box-shadow .15s, transform .15s; }
.bsvf-card:hover { box-shadow: 0 12px 28px rgba(22, 35, 58, .12); transform: translateY(-2px); }
.bsvf-card-media { position: relative; display: block; }
.bsvf-card-img { display: block; width: 100%; height: 180px; object-fit: cover; }
.bsvf-card--plain .bsvf-card-media { min-height: 44px; }
.bsvf-card-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.bsvf-card-name { font-family: var(--r-serif, Georgia, serif); font-size: 1.375rem; font-weight: 700; line-height: 1.2; }
.bsvf-card-tagline { font-size: .9375rem; color: var(--bsvf-soft); }
.bsvf-card-desc { font-size: .875rem; line-height: 1.55; color: var(--bsvf-soft); }
/* 4.35.4: the 4 newest Features on the /creations hub, 2 x 2 (one column on a phone, as on the index) */
.bsv-hub-features .bsvf-hub-cards { margin: 18px 0 18px; }

/* badge: small white label in the banner's / card cover's top-left corner (OC37) */
.bsvf-badge { position: absolute; top: 12px; left: 12px; z-index: 1; display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: #fff; color: #16233a; font: 700 .75rem/1.3 var(--r-sans, system-ui, sans-serif); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.bsvf-badge--closed { color: #5b6676; }

/* Feature page banner */
.bsvf-banner { position: relative; border-radius: 18px; overflow: hidden; margin: 0 0 1.5rem; background: #16233a; }
.bsvf-banner-img { display: block; width: 100%; height: clamp(180px, 28vw, 320px); object-fit: cover; }
.bsvf-banner--plain { min-height: 120px; background: radial-gradient(90% 120% at 100% 0%, #24466b 0%, #16233a 58%, #0f1a2b 100%); }
.bsvf-tagline { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 48px 22px 18px; color: #fff;
  font: 600 1.125rem/1.4 var(--r-sans, system-ui, sans-serif); background: linear-gradient(to top, rgba(10, 18, 30, .78), rgba(10, 18, 30, 0)); }
.bsvf-desc { line-height: 1.65; margin: 0 0 1.25rem; }
.bsvf-closed, .bsvf-reviews { margin: 0 0 1.25rem; padding: 12px 16px; border: 1px solid var(--bsvf-rule); border-left: 4px solid var(--bsvf-gold);
  border-radius: 10px; background: var(--bsvf-card); color: var(--bsvf-ink); line-height: 1.55; }
.bsvf-writers { margin: 0 0 1.75rem; border: 1px solid var(--bsvf-rule); border-radius: 12px; background: var(--bsvf-card); }
.bsvf-writers > summary { cursor: pointer; padding: 12px 16px; font-weight: 700; color: var(--bsvf-ink); }
.bsvf-writers > :not(summary) { margin-left: 16px; margin-right: 16px; }
.bsvf-writers > :last-child { margin-bottom: 16px; }
/* 4.35.3g: keep the 16px side margins of the rule above (this rule reset them to 0, so the headings touched the border) */
.bsvf-writers h3 { font-size: 1rem; margin: .75rem 16px .35rem; }
.bsvf-empty { color: var(--bsvf-soft); }

/* the article list (view mc_articles, display feature): Editor's pick star in the card's top-right corner (OC38) */
.view-display-id-feature .creations-row { position: relative; }
.bsvf-star { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: rgba(10, 18, 30, .72); color: #f2c94c; font-size: 16px; line-height: 1; cursor: help; }
/* 4.35.1c (Marquez, 5 Nov 20:32): the Show / Sort by box sits beside the cards, like the Articles sidebar,
   instead of taking the full width above them. The theme renders the form and the rows as siblings of one
   box, so that box becomes a two-column grid: rows (and the pager) left, the form right and sticky. */
.bsvf-list .views-exposed-form { background: var(--bsvf-card) !important; border: 1px solid var(--bsvf-rule) !important; border-radius: 16px;
  box-shadow: none !important; padding: 18px 20px; margin: 0 0 1.5rem; }
.bsvf-list .views-exposed-form :is(label, legend) { color: var(--bsvf-ink) !important; }
.bsvf-list .views-exposed-form :is(select, input[type="text"]) { width: 100%; background: var(--r-bg, #fff); color: var(--bsvf-ink); border-color: var(--bsvf-rule); }
.bsvf-list .views-exposed-form :is(.button, input[type="submit"], button[type="submit"]) { width: 100%;
  background: var(--bsvf-ink) !important; border-color: var(--bsvf-ink) !important; color: var(--r-bg, #fff) !important; }
@media (min-width: 901px) {
  .bsvf-list > .view, .bsvf-list > [class*="js-view-dom-id-"] { display: grid; grid-template-columns: minmax(0, 1fr) 280px; column-gap: 28px; align-items: start; }
  .bsvf-list > .view > *, .bsvf-list > [class*="js-view-dom-id-"] > * { grid-column: 1; min-width: 0; }
  .bsvf-list > .view > .views-exposed-form, .bsvf-list > [class*="js-view-dom-id-"] > .views-exposed-form { grid-column: 2; grid-row: 1 / span 400; position: sticky; top: 16px; margin: 0; }
}

@media (max-width: 700px) {
  .bsvf-cards { grid-template-columns: 1fr; }
  .bsvf-tagline { font-size: 1rem; padding: 36px 16px 14px; }
}

/* 4.35.2 (kit b2): the Submit button on an open Feature, the places on cards and on the reading page. */
.bsvf-actions { margin: 0 0 1.75rem; }
.bsvf-submit, .bsvf-empty a { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--bsvf-ink); color: var(--r-bg, #fff) !important;
  font: 600 .9375rem/1.2 var(--r-sans, system-ui, sans-serif); text-decoration: none !important; }
.bsvf-empty a { padding: 6px 14px; font-size: .875rem; margin-left: 6px; }
.bsvf-card-places, .bsvf-places { font-size: .875rem; color: var(--r-soft, #5b6676); }
.bsvf-card-places a, .bsvf-places a { color: inherit !important; text-decoration: underline; text-decoration-color: rgba(91, 102, 118, .4); }
.bsvf-places .field__label { font-weight: 600; margin-right: .35rem; }

/* 4.35.3 (kit b3): Follow (W4/W5), the stop page (W27), the take-out page (W18/W28). */
.bsvf-follow { margin: -1rem 0 1.75rem; }
.bsvf-follow .form-actions { margin: 0; }
.bsvf-follow-btn { display: inline-block; padding: 9px 18px !important; border-radius: 999px !important; font-weight: 600; cursor: pointer;
  background: transparent !important; color: var(--bsvf-ink) !important; border: 1.5px solid var(--bsvf-ink) !important; }
.bsvf-follow-btn.is-following { background: var(--bsvf-card) !important; color: var(--bsvf-soft) !important; border-color: var(--bsvf-rule) !important; }
.bsvf-follow--anon { color: var(--bsvf-soft); }
.bsvf-follow--anon a { color: var(--bsvf-ink); font-weight: 600; }
.bsvf-stopped p, .bsvf-takeout p { color: var(--bsvf-ink); line-height: 1.6; max-width: 40rem; }
.bsvf-takeout-form { color: var(--bsvf-ink); }

/* 4.35.6 (Marquez, 6 Nov 14:20): space between the article cards on a Feature page, as on /creations/articles (16px).
   The browse.css gap rule needs .views-element-container, which a Feature page does not have. A margin, not a grid gap:
   the Show / Sort box spans 400 grid rows, so a row gap would make the page thousands of pixels tall. */
.bsvf-list .creations-row.views-row + .creations-row.views-row { margin-top: 16px; }