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



.page-tutorials .tuts-wrap{
  max-width: 1200px;
  margin: 26px auto 80px;
  padding: 0 18px;
}

.filters{
  display:flex;
  justify-content:center;
  margin: 14px 0 22px;
}

.page-tutorials .tuts-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
  gap: 24px;                                        
}


/* Responsive styles */
@media (max-width: 1100px){
  .page-tutorials .tuts-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Responsive styles */
@media (max-width: 640px){
  .page-tutorials .tuts-grid{ grid-template-columns: 1fr; }
}

.page-tutorials .tut-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--border);
  border-radius:16px; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.page-tutorials .tut-card:hover{
  transform:translateY(-2px); box-shadow:0 10px 22px rgba(92,71,91,.12);
}

.page-tutorials .tut-thumb{
  position:relative; display:block; width:100%;
  aspect-ratio:16/9; background:#f2ecf2; overflow:hidden;
}
.page-tutorials .tut-thumb img,
.page-tutorials .tut-thumb video{
  width:100%; height:100%; object-fit:cover; display:block;
}

.page-tutorials .corner-label{
  position:absolute; top:8px; left:8px;
  background:#fff; color:var(--brand);
  border:1px solid var(--border);
  border-radius:999px; padding:4px 8px;
  font-weight:900; font-size:.78rem;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}

.page-tutorials .pdf-fallback{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  color:var(--brand); background:#f6eef5; font-weight:800;
}

.page-tutorials .tut-meta{
  padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px;
}
.page-tutorials .tut-title{
  margin:0; font-weight:800; font-size:1rem; line-height:1.25;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.page-tutorials .tut-title-link{ color:inherit; text-decoration:none; }
.page-tutorials .tut-channel{ font-size:.92rem; color:#6b5a69; }

.page-tutorials .tut-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.page-tutorials .tut-chip{
  background:#efe7ee; border:1px solid var(--border);
  border-radius:999px; padding:4px 10px; font-weight:700; font-size:.82rem;
}

.page-tutorials .tuts-empty{
  grid-column:1 / -1; text-align:center; opacity:.75; padding:32px 0;
}


.page-tutorials .js-card{ cursor:pointer; -webkit-tap-highlight-color: transparent; }
.page-tutorials .js-card:focus{ outline: none; }
.page-tutorials .js-card:focus-visible{
  outline: 3px solid rgba(92,71,91,.35);
  outline-offset: 3px;
}