/* blog.css - the blog list (blog.html) only. House variables only. */

/* The head: title and lead left, Apply right, the section tabs underneath. */
.bl-head{padding-top:var(--mcf-s8)}
.bl-head .lead-small{max-width:56ch}
.bl-film{max-width:480px;margin-top:var(--mcf-s5)}
.bl-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--mcf-s5);margin-top:var(--mcf-s7)}
.bl-tabs{border-bottom:0;flex:1 1 auto;min-width:0}
.bl-tabs button{cursor:pointer}
.bl-tabs button:focus-visible{outline:2px solid var(--mcf-blue);outline-offset:2px;border-radius:var(--mcf-r-control)}
.bl-apply{display:flex;align-items:center;gap:var(--mcf-s4);flex-shrink:0;padding-bottom:var(--mcf-s2)}
@media (max-width:760px){
  .bl-head{padding-top:var(--mcf-s6)}
  .bl-bar{flex-direction:column-reverse;align-items:stretch;gap:var(--mcf-s4);margin-top:var(--mcf-s5)}
  .bl-apply{justify-content:space-between;padding-bottom:0}
}

/* The rolling bar: every post with its little picture. */
.bl-strip{margin-top:0}
.bl-strip-item{flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--mcf-s4);width:380px}
.strip-thumb{flex-shrink:0;width:88px;aspect-ratio:1/1;border-radius:var(--mcf-r-inner);overflow:hidden;background:var(--mcf-fill);display:flex;align-items:center;justify-content:center}
.strip-thumb img{width:100%;height:100%;object-fit:cover}
.strip-thumb .cover{height:100%;width:auto;flex-shrink:0}
.strip-thumb-empty{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--mcf-grey)}
.strip-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.strip-text b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bl-strip-item:focus-visible{outline:2px solid var(--mcf-blue);outline-offset:-2px;border-radius:var(--mcf-r-inner)}
@media (max-width:640px){.bl-strip-item{width:300px}.strip-thumb{width:64px}.strip-text b{font-size:var(--mcf-size-body)}}

/* The listing. */
.bl-band{padding-top:var(--mcf-s8)}
.bl-filters-btn{display:none}
@media (max-width:900px){.bl-filters-btn{display:inline-flex}.filters[hidden]{display:none}.filters{margin-top:var(--mcf-s4)}}
.bl-clear{margin-top:var(--mcf-s4);align-self:flex-start;font-size:var(--mcf-size-small);font-weight:500;color:var(--mcf-blue);cursor:pointer}
.bl-clear:focus-visible,.check input:focus-visible,.filters summary:focus-visible,.seg button:focus-visible{outline:2px solid var(--mcf-blue);outline-offset:2px}
.filters summary{cursor:pointer;list-style:none}
.filters summary::-webkit-details-marker{display:none}
.card:focus-visible{outline:2px solid var(--mcf-blue);outline-offset:4px}
.card-pic .slot figcaption small,.card-pic .slot .slot-id{display:none}
.card-pic .slot figcaption{font-size:var(--mcf-size-caption);padding-inline:var(--mcf-s4)}
.blog-list.is-list .card-pic .slot figcaption{display:none}
.card[hidden]{display:none}
.bl-empty{display:flex;flex-direction:column;gap:var(--mcf-s2);padding:var(--mcf-s7) 0;border-top:1px solid var(--mcf-line)}
.bl-empty[hidden]{display:none}
.bl-empty b{font-size:var(--mcf-size-section);font-weight:600}
@media (max-width:640px){.toolbar .search-field{max-width:none;flex-basis:100%}.toolbar .count{margin-left:0}}

/* Filter and sort, folded by default on every screen (WEB-061): the button always shows; the list takes the whole width until it is opened. */
.bl-filters-btn{display:inline-flex}
.filters[hidden]{display:none}
.blog-layout:has(> .filters[hidden]){grid-template-columns:minmax(0,1fr)}

/* Donnie the librarian (WEB-061 part 2): his picture beside the ask, a white card on the page's grey. On a phone
   the picture sits above, cropped to Donnie and the shelf, and the box and button take the full width. */
.lib{padding-top:var(--mcf-s7)}
.lib-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--mcf-s6);align-items:start;background:var(--mcf-card);border:1px solid var(--mcf-line);border-radius:var(--mcf-r-card);padding:var(--mcf-s6)}
.lib-pic .illo{width:100%;height:auto;display:block}
.lib-h{font-size:var(--mcf-size-section);font-weight:600;margin:var(--mcf-s2) 0}
.lib-ask{display:flex;gap:var(--mcf-s3);margin-top:var(--mcf-s5);align-items:stretch}
.lib-ask .search-field{flex:1 1 auto;max-width:none;min-width:0}
.lib-ask .btn{flex-shrink:0}
.lib-answer{margin-top:var(--mcf-s5);padding-top:var(--mcf-s5);border-top:1px solid var(--mcf-line);display:flex;flex-direction:column;gap:var(--mcf-s3)}
.lib-answer[hidden]{display:none}
.lib-say{margin:0}
.lib-found{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--mcf-s2)}
.lib-link{display:flex;align-items:center;justify-content:space-between;gap:var(--mcf-s3);padding:var(--mcf-s3) var(--mcf-s4);min-height:44px;border:1px solid var(--mcf-line);border-radius:var(--mcf-r-inner);color:inherit;text-decoration:none}
.lib-link:hover b{color:var(--mcf-blue)}
.lib-link:focus-visible,.lib-more:focus-visible{outline:2px solid var(--mcf-blue);outline-offset:2px}
.lib-link b{font-weight:600}
.lib-more{align-self:flex-start;min-height:44px;font-size:var(--mcf-size-small);font-weight:500;color:var(--mcf-blue);cursor:pointer;background:none;border:0;padding:0;text-align:left}
.lib-topic{display:flex;flex-direction:column;gap:var(--mcf-s3)}
.lib-field{display:flex;flex-direction:column;gap:var(--mcf-s1);font-size:var(--mcf-size-small)}
.lib-field input{min-height:44px;padding:0 var(--mcf-s3);border:1px solid var(--mcf-control);border-radius:var(--mcf-r-control);font:inherit;font-size:16px;background:var(--mcf-card)}
.lib-tick{display:flex;gap:var(--mcf-s3);align-items:flex-start;font-size:var(--mcf-size-small)}
.lib-tick input{width:20px;height:20px;flex-shrink:0;margin-top:2px}
.lib-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.lib-topic .btn{align-self:flex-start}
.lib-status{margin:0;font-size:var(--mcf-size-small)}
.lib-status:empty{display:none}
.lib-game{margin-top:0}
@media (max-width:760px){
  .lib{padding-top:var(--mcf-s5)}
  .lib-card{grid-template-columns:minmax(0,1fr);gap:var(--mcf-s4);padding:var(--mcf-s5)}
  .lib-ask{flex-direction:column}
  .lib-ask .btn,.lib-topic .btn{align-self:stretch;min-height:48px}
  .lib-link{flex-direction:column;align-items:flex-start}
}