/* tutorials.css — public Tutorials hub: compact far-left side menu + a content
   pane that fills the remaining width. Mobile: the menu is a slide-over drawer
   opened by the "All tutorials" toggle. */

/* Full-bleed page: the hub escapes .wg-main's centered max-width so the
   sidebar hugs the left edge and the content takes the rest of the screen. */
.wg-main.wg-main-wide { max-width: none; width: 100%; margin-left: 0; margin-right: 0; }

.wg-tuts-hub {
  padding: var(--wg-space);
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

/* Mobile drawer toggle + backdrop (hidden on desktop) */
.wg-tuts-menu-toggle { display: none; }
.wg-tuts-menu-backdrop { display: none; }

/* Side menu (compact) ------------------------------------------------------ */
.wg-tuts-menu { position: sticky; top: 16px; min-width: 0; }
.wg-tuts-menu-h { margin: 0 0 3px; font-size: 1.02rem; }
.wg-tuts-menu-intro { margin: 0 0 12px; color: var(--wg-muted); font-size: 0.72rem; line-height: 1.4; }
.wg-tuts-menu-list { display: flex; flex-direction: column; gap: 13px; }

/* Category groups */
.wg-tuts-group-h {
  margin: 0 0 6px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--wg-muted);
}
.wg-tuts-group-items { display: flex; flex-direction: column; gap: 6px; }

.wg-tuts-menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px; border-radius: var(--wg-radius-card);
  border: 1px solid var(--wg-border-soft); background: var(--wg-bg);
  color: var(--wg-text); text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.wg-tuts-menu-item:hover { border-color: var(--wg-color); }
.wg-tuts-menu-item.is-active {
  border-color: var(--wg-color); background: var(--wg-tint);
  box-shadow: inset 3px 0 0 var(--wg-color);
}
.wg-tuts-menu-cover {
  flex: 0 0 30px; width: 30px; height: 44px; border-radius: 6px;
  background: var(--wg-tint) center top / cover no-repeat;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.wg-tuts-menu-txt { display: flex; flex-direction: column; min-width: 0; }
.wg-tuts-menu-title { font-weight: 600; font-size: 0.78rem; line-height: 1.25; }
.wg-tuts-menu-count { font-size: 0.66rem; color: var(--wg-color-dark); font-weight: 600; margin-top: 2px; }

/* Content pane: fills the remaining width ----------------------------------- */
.wg-tuts-content { min-width: 0; }
.wg-tut-detail[aria-busy] { opacity: 0.5; }

.wg-tut-head { margin: 0 0 20px; }
.wg-tut-head h2 { margin: 0 0 8px; font-size: 1.4rem; line-height: 1.25; }
.wg-tut-desc { margin: 0; color: var(--wg-muted); line-height: 1.55; }
.wg-tut-soon { padding: 32px 12px; }

/* Steps: vertical, numbered, tall portrait screenshots in a phone frame. */
.wg-tut-steps { list-style: none; margin: 0; padding: 0; }
.wg-tut-step {
  padding: 0 0 26px 0; margin: 0 0 26px;
  border-bottom: 1px dashed var(--wg-border);
}
.wg-tut-step:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.wg-tut-step-num {
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--wg-color); color: #fff; font-weight: 700; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.wg-tut-step-body { text-align: center; }

.wg-phone {
  display: inline-block; max-width: 300px; width: 100%;
  padding: 8px; background: #111; border-radius: 26px;
  box-shadow: 0 6px 22px rgba(16, 24, 40, 0.18);
}
.wg-phone-shot {
  display: block; width: 100%; height: auto; max-height: 78vh;
  object-fit: contain; border-radius: 18px; background: var(--wg-tint); cursor: zoom-in;
}
.wg-tut-caption {
  margin: 14px auto 0; max-width: 34rem;
  color: var(--wg-text); font-size: 0.98rem; line-height: 1.55; text-align: left;
}
.wg-tut-step-label {
  display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--wg-color-dark); margin: 0 0 3px;
}

/* Lightbox ----------------------------------------------------------------- */
.wg-tut-lb {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.9);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.wg-tut-lb-img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.wg-tut-lb-x {
  position: absolute; top: 12px; right: 16px; background: none; border: 0;
  color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer;
}

/* Mobile: the menu becomes a slide-over drawer -------------------------------
   Opened by the "All tutorials" toggle; closes on backdrop tap, Escape, or
   picking a tutorial. */
@media (max-width: 760px) {
  .wg-tuts-hub { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .wg-tuts-menu-toggle {
    display: inline-flex; align-items: center; gap: 7px; width: auto;
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--wg-border-soft); background: var(--wg-bg);
    font-size: 0.84rem; font-weight: 700; color: var(--wg-text); cursor: pointer;
    justify-self: start;
  }

  .wg-tuts-menu {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1200;
    width: min(82vw, 300px); overflow-y: auto;
    background: var(--wg-bg); padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 8px 0 30px rgba(16, 24, 40, 0.18);
    /* visibility gates the closed state too, so the drawer stays hidden even
       in renderers that suppress transforms */
    transform: translateX(-102%); visibility: hidden;
    transition: transform 0.22s var(--wg-ease-out, ease-out), visibility 0s linear 0.22s;
  }
  .wg-tuts-menu.is-open {
    transform: translateX(0); visibility: visible;
    transition: transform 0.22s var(--wg-ease-out, ease-out), visibility 0s;
  }
  @media (prefers-reduced-motion: reduce) { .wg-tuts-menu, .wg-tuts-menu.is-open { transition: none; } }

  .wg-tuts-menu-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1190;
    background: rgba(16, 24, 40, 0.45);
  }
  .wg-tuts-menu-backdrop[hidden] { display: none; }
}