/* ═══════════════════════════════════════════════════════════════
   CareBravo — Tutorials cluster (/tutorials/)
   Scoped to .tut-* classes. Uses the design tokens from /css/style.css
   and does not override any shared selector used by existing pages.
   ═══════════════════════════════════════════════════════════════ */

/* Class display rules below must not defeat the hidden attribute. */
.tut-page [hidden] { display: none !important; }

/* style.css styles every bare <nav> as the fixed site header; undo that for
   the cluster's in-page navigation landmarks. */
.tut-page nav.tut-nav { position: static; z-index: auto; display: block; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

.tut-skip { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 0.75rem 1.25rem; background: var(--accent); color: var(--white); font-weight: 600; border-radius: 0 0 6px 0; text-decoration: none; }
.tut-skip:focus { left: 0; }

.tut-page a:focus-visible,
.tut-page button:focus-visible,
.tut-page input:focus-visible,
.tut-page select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Hero additions ── */
.tut-hero { padding-bottom: 4rem; }
.tut-hero .hero-sub { text-align: center; margin-bottom: 1.25rem; }
.tut-hero-stats { font-size: 0.85rem; font-weight: 600; color: var(--teal); letter-spacing: 0.02em; text-align: center; }

.tut-breadcrumb { margin-bottom: 1.5rem; }
.tut-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; font-size: 0.8rem; }
.tut-breadcrumb li { display: flex; align-items: center; gap: 0.35rem; color: var(--slate); }
.tut-breadcrumb li + li::before { content: '/'; color: var(--slate); }
.tut-breadcrumb a { color: var(--silver); text-decoration: none; }
.tut-breadcrumb a:hover { color: var(--white); text-decoration: underline; }
.tut-breadcrumb a[aria-current="page"] { color: var(--white); font-weight: 600; }

/* ── Sections ── */
.tut-main section.tut-section { padding: 4.5rem 3rem; background: var(--white); }
.tut-main section.tut-section-alt { background: var(--cloud); }
.tut-wrap { max-width: 1180px; margin: 0 auto; }
.tut-h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 0.75rem; }
.tut-lead { font-size: 0.98rem; line-height: 1.7; color: var(--ink-muted); max-width: 760px; margin-bottom: 2rem; }
.tut-lead a, .tut-related a { color: var(--accent); font-weight: 600; text-decoration: none; }
.tut-lead a:hover, .tut-related a:hover { text-decoration: underline; }

/* ── Topic grid (hub) ── */
.tut-topic-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.tut-topic-card { display: flex; flex-direction: column; gap: 0.35rem; height: 100%; padding: 1.4rem 1.5rem; background: var(--white); border: 1px solid var(--pearl); border-radius: 8px; text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.tut-topic-card:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,0.07); transform: translateY(-2px); }
.tut-topic-card-count { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); }
.tut-topic-card-name { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); line-height: 1.25; }
.tut-topic-card-desc { font-size: 0.84rem; line-height: 1.55; color: var(--slate); }

/* ── Sibling topic list (category pages) ── */
.tut-topic-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.6rem; }
.tut-topic-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding: 0.85rem 1rem; background: var(--white); border: 1px solid var(--pearl); border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 0.9rem; font-weight: 600; transition: border-color 0.2s; }
.tut-topic-list a:hover { border-color: var(--accent); }
.tut-topic-count { font-size: 0.75rem; font-weight: 500; color: var(--slate); white-space: nowrap; }

/* ── Role chips ── */
.tut-roles { margin-bottom: 1.5rem; }
.tut-roles-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.6rem; }
.tut-role-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tut-role-chip { font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--ink-muted); background: var(--white); border: 1px solid var(--pearl); border-radius: 100px; padding: 0.45rem 0.9rem; cursor: pointer; transition: all 0.2s; }
.tut-role-chip span { font-weight: 500; color: var(--slate); margin-left: 0.2rem; }
.tut-role-chip:hover { border-color: var(--accent); color: var(--ink); }
.tut-role-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--white); }
.tut-role-chip[aria-pressed="true"] span { color: var(--white); }

/* ── Filters ── */
.tut-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.9rem 1rem; padding: 1.1rem 1.25rem; margin-bottom: 2rem; background: var(--cloud); border: 1px solid var(--pearl); border-radius: 8px; }
.tut-section-alt .tut-filters { background: var(--white); }
.tut-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; flex: 0 1 200px; }
.tut-field-search { flex: 1 1 260px; }
.tut-field label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.tut-field input, .tut-field select { width: 100%; font: inherit; font-size: 0.9rem; color: var(--ink); background: var(--white); border: 1px solid var(--silver); border-radius: 6px; padding: 0.6rem 0.75rem; min-height: 44px; }
.tut-field input::placeholder { color: var(--slate); }
.tut-reset { font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--ink-muted); background: transparent; border: 1px solid var(--silver); border-radius: 6px; padding: 0.6rem 1rem; min-height: 44px; cursor: pointer; }
.tut-reset:hover { border-color: var(--accent); color: var(--ink); }
.tut-count { flex-basis: 100%; font-size: 0.82rem; color: var(--slate); }
.tut-empty { padding: 2rem; text-align: center; color: var(--ink-muted); background: var(--cloud); border-radius: 8px; margin-bottom: 2rem; }
.tut-link-btn { font: inherit; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; text-decoration: underline; }

/* ── Groups ── */
.tut-group { margin-bottom: 3rem; }
.tut-group:last-child { margin-bottom: 0; }
.tut-group[hidden] { display: none; }
.tut-group-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; font-family: var(--serif); font-weight: 400; font-size: 1.45rem; color: var(--ink); line-height: 1.3; margin-bottom: 1.25rem; padding-bottom: 0.65rem; border-bottom: 2px solid var(--pearl); }
.tut-group-title a { color: inherit; text-decoration: none; }
.tut-group-title a:hover { color: var(--accent); }
.tut-group-count, .tut-group-title time { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--slate); }
.tut-release-title { font-size: 1.25rem; }

/* ── Cards ── */
.tut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 1.1rem; }
.tut-card { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; padding: 1.4rem 1.5rem; background: var(--white); border: 1px solid var(--pearl); border-radius: 8px; transition: border-color 0.2s, box-shadow 0.2s; }
.tut-card:hover { border-color: rgba(200,121,65,0.45); box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
.tut-card[hidden] { display: none; }
.tut-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; font-size: 0.72rem; color: var(--slate); min-height: 1rem; }
.tut-card-meta:empty { display: none; }
.tut-card-cat { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.tut-card-cat:hover { text-decoration: underline; }
.tut-badge { font-weight: 700; color: var(--teal); background: var(--teal-soft); border-radius: 100px; padding: 0.15rem 0.55rem; }
.tut-card-title { font-family: var(--serif); font-weight: 400; font-size: 1.08rem; line-height: 1.32; color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.tut-card-title a { color: inherit; text-decoration: none; }
.tut-card-title a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.tut-card-desc { font-size: 0.84rem; line-height: 1.55; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tut-card-release { font-size: 0.78rem; line-height: 1.45; color: var(--ink-muted); }
.tut-card-release > span:first-child { font-weight: 700; color: var(--slate); }
.tut-card-more { color: var(--slate); }
.tut-card-roles { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tut-card-roles li { font-size: 0.7rem; font-weight: 600; color: var(--ink-muted); background: var(--cloud); border: 1px solid var(--pearl); border-radius: 100px; padding: 0.15rem 0.55rem; }
.tut-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: auto; padding-top: 0.4rem; }
.tut-card-cta { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.1rem; min-height: 40px; background: var(--accent); color: var(--white); font-size: 0.85rem; font-weight: 600; text-decoration: none; border-radius: 6px; transition: background 0.2s; }
.tut-card-cta:hover { background: var(--accent-light); }
.tut-card-preview { font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--ink-muted); background: none; border: none; padding: 0.4rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tut-card-preview:hover { color: var(--accent); }

/* ── Category page bar ── */
.tut-cat-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 1.5rem; margin-bottom: 1.5rem; }
.tut-back { font-size: 0.88rem; font-weight: 600; color: var(--ink-muted); text-decoration: none; }
.tut-back:hover { color: var(--accent); }
.tut-related { font-size: 0.88rem; color: var(--slate); display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }

/* ── Elsewhere (hub) ── */
.tut-elsewhere { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.tut-elsewhere a { display: flex; flex-direction: column; gap: 0.35rem; height: 100%; padding: 1.4rem 1.5rem; background: var(--white); border: 1px solid var(--pearl); border-radius: 8px; text-decoration: none; color: var(--ink); transition: border-color 0.2s; }
.tut-elsewhere a:hover { border-color: var(--accent); }
.tut-elsewhere strong { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; }
.tut-elsewhere span { font-size: 0.85rem; line-height: 1.55; color: var(--slate); }

/* ── Preview dialog ── */
.tut-dialog { width: min(1100px, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 2rem); padding: 0; border: none; border-radius: 10px; background: var(--white); box-shadow: 0 30px 80px rgba(0,0,0,0.35); overflow: hidden; }
.tut-dialog::backdrop { background: rgba(11,22,35,0.75); }
.tut-dialog-head { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0.75rem 0.75rem 1.25rem; border-bottom: 1px solid var(--pearl); }
.tut-dialog-title { flex: 1; min-width: 0; font-family: var(--sans); font-size: 0.95rem; font-weight: 600; color: var(--ink); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tut-dialog-open { font-size: 0.82rem; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.tut-dialog-close { width: 40px; height: 40px; flex-shrink: 0; font-size: 1.5rem; line-height: 1; color: var(--ink-muted); background: var(--cloud); border: none; border-radius: 50%; cursor: pointer; }
.tut-dialog-close:hover { background: var(--pearl); color: var(--ink); }
.tut-dialog-frame { position: relative; aspect-ratio: 16 / 9; max-height: calc(100vh - 6rem); background: var(--cloud); }
.tut-dialog-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Final CTA tweaks ── */
.tut-final .btn-primary { padding: 1.1rem 2.5rem; font-size: 1rem; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .tut-main section.tut-section { padding: 3rem 1rem; }
    .tut-hero.page-hero { padding-left: 1rem; padding-right: 1rem; }
    .tut-field { flex: 1 1 160px; }
}
@media (max-width: 560px) {
    .tut-filters { padding: 1rem; }
    .tut-field, .tut-field-search { flex: 1 1 100%; }
    .tut-reset { width: 100%; }
    .tut-card { padding: 1.2rem 1.1rem; }
    .tut-dialog-open { display: none; }
    .tut-dialog-frame { aspect-ratio: auto; height: calc(100vh - 6rem); }
}
@media (prefers-reduced-motion: reduce) {
    .tut-card, .tut-topic-card { transition: none; }
    .tut-topic-card:hover { transform: none; }
}