/* ===================================================================
   VibesToGo — tutorials pages and the #tutorials block on the home page.
   Uses the tokens at the top of styles.css; nothing here defines a colour.
   =================================================================== */

.tutorials-page { max-width: 900px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) 20px 4rem; }
.tutorials-page .sec-head { margin-bottom: 1.6rem; }

.tut-contents { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 2rem; }
.tut-contents .chip { text-decoration: none; }
.tut-contents .chip:hover { border-color: var(--primary-border); }

.tut { padding: clamp(1.4rem, 4vw, 2.4rem); border-radius: var(--r-xl); margin-bottom: 1.6rem; scroll-margin-top: 90px; }
.tut h2 { font-family: var(--display); font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin-bottom: 0.5rem; }
.tut__intro { color: var(--on-surface-var); margin-bottom: 1.6rem; max-width: 40em; }

.tut-steps { list-style: none; counter-reset: tutstep; display: grid; gap: 1.8rem; padding: 0; margin: 0; }
.tut-step { counter-increment: tutstep; display: grid; gap: 0.8rem; }
.tut-step__text {
  position: relative; padding-left: 3rem; min-height: 2.2rem; line-height: 1.55;
  color: var(--on-surface); font-size: 1.02rem;
}
.tut-step__text::before {
  content: counter(tutstep); position: absolute; left: 0; top: -0.1rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-container); color: var(--on-primary-container);
  border: 1px solid var(--primary-border); font-family: var(--mono); font-size: 0.85rem; font-weight: 500;
}
.tut-step__shot { margin: 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--glass-edge); box-shadow: var(--elev-1); background: var(--surface-1); }
.tut-step__shot img { display: block; width: 100%; height: auto; min-height: 120px; }

/* the home-page block: two cards, one per store */
.tut-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.tut-card { padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--r-xl); display: grid; gap: 0.9rem; align-content: start; }
.tut-card h3 { font-family: var(--display); font-size: 1.35rem; }
.tut-card p { color: var(--on-surface-var); }
.tut-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.tut-card li a { color: var(--on-surface); text-decoration: none; border-bottom: 1px solid var(--outline); }
.tut-card li a:hover { color: var(--primary); border-bottom-color: var(--primary-border); }
.tut-card .btn { justify-self: start; margin-top: 0.4rem; }

@media (max-width: 720px) {
  .tut-cards { grid-template-columns: 1fr; }
  .tut-step__text { padding-left: 2.6rem; font-size: 1rem; }
}