/* ============================================
   tutorials_styles.css — Caption-Below layout
   Two-up grid, image on top, tightly stacked info below.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

/* ── page layout — mirrors software page (page-layout: custom) ── */
#quarto-content { padding: 0; }
#title-block-header { display: none !important; }
body { padding-top: 80px !important; }

.tut-wrap {
  max-width: 1600px;
  margin: 0 auto;
  padding: 3rem 4rem 6rem;
}

/* ── entrance animations — matches software page ── */
@keyframes swIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

section.tut-page-title {
  animation: swIn 0.6s cubic-bezier(.22, 1, .36, 1) 0.05s both;
}

@media (prefers-reduced-motion: reduce) {
  section.tut-page-title { animation: none; opacity: 1; }
}

/* ── Page header — identical to software page section.sw-page-title ── */
section.tut-page-title {
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 2.5rem;
}

h1.tut-page-title {
  font-family: var(--ff);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  letter-spacing: -0.02em;
  color: var(--ink-0);
  margin: 0 0 0.75rem;
  line-height: 1.05;
}

section.tut-page-title > p {
  max-width: 60ch;
  font-size: 1rem;
  color: var(--ink-1);
  line-height: 1.65;
  margin: 0;
}

/* Hidden dummy heading that forces Pandoc to keep div.tut-wrap as a real wrapper */
section#tut-listing-section > h1 { display: none; }

@media (max-width: 768px) {
  .tut-wrap { padding: 3rem 1.5rem 4rem; }
}

/* ── hidden anchor headings for the TOC ── */
.toc-anchor {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── sticky right-margin TOC ── */
#quarto-margin-sidebar {
  position: sticky !important;
  top: 90px !important;
  padding-top: 1.2rem;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

/* ── listing → five-column grid ── */
.quarto-listing-default {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  grid-auto-rows: min-content !important;
  align-items: start !important;
  gap: 1.4rem 1.2rem !important;
  margin-bottom: 1rem;
}

@media (max-width: 1400px) {
  .quarto-listing-default {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 1100px) {
  .quarto-listing-default {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 820px) {
  .quarto-listing-default {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 540px) {
  .quarto-listing-default {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   CARD — flex column with zero gap
   ============================================ */
.quarto-listing-default .quarto-post {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: start !important;
  overflow: visible;
  position: relative;
  animation: none;
}

.quarto-listing-default .quarto-post::before,
.quarto-listing-default .quarto-post::after {
  content: none !important;
}

/* ── smooth reveal: fade + translateY — matches software page swIn ── */
.quarto-listing-default .quarto-post.tut-card {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.65s cubic-bezier(.22, 1, .36, 1),
    transform 0.65s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.quarto-listing-default .quarto-post.tut-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.quarto-listing-default .quarto-post:hover {
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ── NUKE all margins, padding, line-heights on every descendant ── */
.quarto-listing-default .quarto-post,
.quarto-listing-default .quarto-post * {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* ============================================
   ORDER of stacked items inside the card
   .body uses display:contents so its children
   become flex children of .quarto-post
   ============================================ */
.quarto-listing-default .quarto-post .body {
  display: contents !important;
}

.quarto-listing-default .quarto-post .thumbnail        { order: 0 !important; }
.quarto-listing-default .quarto-post .listing-categories { order: 1 !important; }
.quarto-listing-default .quarto-post .listing-title    { order: 2 !important; }
.quarto-listing-default .quarto-post .listing-description,
.quarto-listing-default .quarto-post .delink.listing-description { order: 3 !important; }
.quarto-listing-default .quarto-post .metadata         { order: 4 !important; }

/* ============================================
   THUMBNAIL — taller (4:3) image
   ============================================ */
.quarto-listing-default .quarto-post .thumbnail {
  aspect-ratio: 5 / 4 !important;
  height: auto !important;
  width: 100% !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #161D27 !important;
  transition: opacity 0.35s cubic-bezier(.22, 1, .36, 1);
  margin: 0 0 0.6rem 0 !important;
}

.quarto-listing-default .quarto-post:hover .thumbnail {
  opacity: 0.85;
}

.quarto-listing-default .quarto-post .thumbnail a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 0 !important;
}

.quarto-listing-default .quarto-post .thumbnail img,
.quarto-listing-default .quarto-post .thumbnail-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  filter: none;
}

/* ============================================
   KICKER ROW — categories (tags)
   ============================================ */
.quarto-listing-default .quarto-post .listing-categories {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.4rem !important;
  align-items: baseline !important;
  line-height: 1 !important;
  margin: 0 0 0.3rem 0 !important;
}

.quarto-listing-default .quarto-post .listing-category {
  font-family: 'Quicksand', system-ui, sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #64B5F6 !important;
  background: transparent !important;
  border-radius: 0 !important;
  cursor: pointer;
  line-height: 1 !important;
  transform: translateY(0);
  transition: color 0.25s ease, transform 0.3s cubic-bezier(.22, 1, .36, 1), text-shadow 0.3s ease;
}

.quarto-listing-default .quarto-post .listing-category.tag-lit {
  color: #ffffff !important;
  transform: translateY(-2px);
  text-shadow: 0 0 12px rgba(100, 181, 246, 0.55);
}

.quarto-listing-default .quarto-post .listing-category + .listing-category::before {
  content: "·";
  margin-right: 0.3rem !important;
  color: rgba(255, 255, 255, 0.20);
}

.quarto-listing-default .quarto-post .listing-category:hover {
  color: #ffffff !important;
}

.quarto-listing-default .quarto-post .listing-category:nth-child(n+3) {
  display: none !important;
}

/* ============================================
   TITLE — h3.listing-title
   ============================================ */
.quarto-listing-default .quarto-post h3.listing-title,
.quarto-listing-default .quarto-post .listing-title {
  font-family: 'Quicksand', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.005em !important;
  line-height: 1.15 !important;
  margin: 0 0 0.3rem 0 !important;
}

.quarto-listing-default .quarto-post .listing-title a {
  color: #ffffff !important;
  text-decoration: none !important;
  line-height: 1.15 !important;
  transition: color 0.25s ease;
}

.quarto-listing-default .quarto-post:hover .listing-title a {
  color: #64B5F6 !important;
}

.quarto-listing-default .quarto-post .listing-title a::after {
  content: none !important;
}

/* ============================================
   DESCRIPTION
   ============================================ */
.quarto-listing-default .quarto-post .listing-description,
.quarto-listing-default .quarto-post .delink.listing-description {
  font-family: 'Quicksand', system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  max-width: 46ch !important;
  display: block !important;
  margin: 0 0 0.35rem 0 !important;
}

.quarto-listing-default .quarto-post .listing-description a,
.quarto-listing-default .quarto-post .delink.listing-description a {
  color: inherit !important;
  text-decoration: none !important;
  display: block !important;
  line-height: 1.3 !important;
}

.quarto-listing-default .quarto-post .listing-description p,
.quarto-listing-default .quarto-post .delink.listing-description p {
  display: block !important;
  line-height: 1.3 !important;
}

/* ============================================
   DATE
   ============================================ */
.quarto-listing-default .quarto-post .metadata {
  line-height: 1 !important;
}

.quarto-listing-default .quarto-post .metadata a {
  display: block !important;
  line-height: 1 !important;
  color: inherit !important;
  text-decoration: none !important;
}

.quarto-listing-default .quarto-post .listing-date {
  font-family: 'Quicksand', system-ui, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.35) !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
}

.quarto-listing-default .listing-no-matching {
  display: none !important;
}