/* Posttype styles: simple comments added by me to explain sections. */

html { scrollbar-gutter: stable both-edges; }

.page-tutorials {
  --bg:#F6F3F6;
  --ink:#4f3b4e;
  --brand:#5C475B;
  --border:#e4dce3;
  --chip:#b49eb1;

  --pill-top-gap:26px;
  --gap-below-pill:36px;
}

.page-tutorials .tuts-wrap{
  max-width:1100px; margin:28px auto 64px; padding:0 18px;
}
.page-tutorials .tuts-stack{
  display:grid;
  row-gap:var(--gap-below-pill);
  margin-top:var(--pill-top-gap);
}

.page-tutorials .tuts-filters{
  display:flex; justify-content:center; align-items:center; margin:0;
}
.page-tutorials .tuts-filter{
  display:flex; align-items:center; gap:10px;
  padding:12px 20px; border-radius:30px;
  background:#F6F3F6; border:1px solid var(--border);
  box-shadow:0 2px 6px rgba(0,0,0,0.10);
}
.page-tutorials .tuts-filter label{
  margin-right:10px; font-weight:bold; color:#5C475B;
}
.page-tutorials .tuts-filter select{
  width:160px; height:38px; padding:8px 14px;
  border-radius:20px; border:none; font-size:14px;
  background:#fff; color:#5C475B;
  box-shadow:0 1px 4px rgba(0,0,0,0.10);
  outline:none; appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--chip) 50%),
    linear-gradient(135deg, var(--chip) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 24px) center,
    calc(100% - 16px) center,
    100% 0;
  background-size: 8px 8px, 8px 8px, 2.5rem 100%;
  background-repeat: no-repeat;
}
.page-tutorials .tuts-filter select:focus{
  box-shadow:0 0 0 3px rgba(92,71,91,.15);
  border-color:#d6c7d3;
}


.page-tutorials #grid { min-height: 320px; }

/* Responsive styles */
@media (max-width: 720px){
  .page-tutorials { --pill-top-gap:18px; --gap-below-pill:28px; }
  .page-tutorials .tuts-filter{ padding:10px 16px; }
  .page-tutorials .tuts-filter select{ width:150px; }
}