/* Reuse the website Blog collection styles. */
@import url('./blog.css');


.tutorial-heading { display:flex; align-items:baseline; justify-content:space-between; gap:32px; }
.tutorial-search { display:flex; align-items:center; gap:10px; width:240px; color:var(--muted); }
.tutorial-search svg { flex:none; width:17px; height:17px; }
.tutorial-search input { width:100%; min-width:0; min-height:44px; padding:8px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; color:var(--rf-text-dark); font-size:13px; }
.tutorial-search input::placeholder { color:var(--muted); }
.tutorial-filters .filter-button { min-height:40px; }
.tutorial-grid { scroll-margin-top:110px; }
.tutorial-pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; margin-top:48px; }
.tutorial-pagination:empty { display:none; }
.tutorial-pagination button { min-width:38px; min-height:44px; padding:8px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--muted); font:inherit; font-size:13px; cursor:pointer; }
.tutorial-pagination button[aria-current="page"] { border-color:#fff; background:#fff; color:var(--paper); }
.tutorial-pagination button:hover:not(:disabled):not([aria-current="page"]) { background:rgb(255 255 255 / 8%); }
.tutorial-pagination button:disabled { opacity:.35; cursor:default; }
.tutorial-pagination svg { display:block; width:16px; height:16px; }
.rf-blog .tutorial-page-note { margin:20px 0 0; text-align:center; color:var(--muted); font-size:12px; }
.tutorial-page #tutorial-reset { min-height:44px; }
@media (max-width:850px) {
  .tutorial-page.rf-blog { padding-top:80px; }
}
@media (max-width:560px) {
  .tutorial-heading { align-items:stretch; flex-direction:column; gap:0; }
  .tutorial-heading .tutorial-search { order:2; width:100%; margin:0 0 24px; }
  .tutorial-filters .filter-button { min-height:44px; }
  .tutorial-pagination { gap:3px; }
  .tutorial-pagination button { min-width:36px; }
}