/* ======================================================================
   MAKING ALPACA CLOTHING — /alpacas/how-to/clothing/
   Load after style.css, alpacas.css, and how-to.css.
   ====================================================================== */

.clothing-howto-head{
  max-width:50rem;
}

.clothing-process-hero{
  max-width:58rem;
  margin:2.75rem auto 0;
}

.clothing-process-hero img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border:1px solid var(--fleece-beige);
  border-left:4px solid var(--indigo);
  border-radius:0 var(--radius) var(--radius) 0;
}

.clothing-process-hero figcaption{
  margin-top:.6rem;
  font-size:.8125rem;
  color:var(--fleece-silver);
}

.clothing-howto-prose,
.clothing-process,
.clothing-projects{
  scroll-margin-top:6rem;
}

.clothing-howto-prose{
  margin-top:4rem;
}

.clothing-section-head{
  max-width:46rem;
  margin-bottom:2rem;
}

.clothing-section-head h2{
  margin:0 0 .75rem;
  font-size:clamp(1.65rem, 4vw, 2.15rem);
}

.clothing-section-head > p:last-child{
  margin:0;
  color:var(--fleece-brown);
}

/* Five preparation steps form a quiet timeline. */
.clothing-process{
  margin-top:4.5rem;
  padding-top:3rem;
  border-top:1px solid var(--fleece-beige);
}

.process-steps{
  counter-reset:process-step;
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:.75rem;
  margin:0;
  padding:0;
  list-style:none;
}

.process-steps li{
  counter-increment:process-step;
  position:relative;
  padding:2.75rem 1rem 1.1rem;
  background:var(--fleece-card);
  border:1px solid var(--fleece-beige);
  border-top:3px solid var(--fleece-silver);
  border-radius:0 0 var(--radius) var(--radius);
}

.process-steps li::before{
  content:counter(process-step, decimal-leading-zero);
  position:absolute;
  top:.75rem;
  left:1rem;
  font-size:.6563rem;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--indigo);
}

.process-steps h3{
  margin:0 0 .45rem;
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 70,"opsz" 30;
  font-size:1.0625rem;
}

.process-steps p{
  margin:0;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--fleece-brown);
}

.clothing-process + .howto-related-row{
  margin-top:1rem;
}

/* Project cards use a six-column grid: two larger cards followed by
   three equal cards. All images remain lazy-loaded in the markup. */
.clothing-projects{
  margin-top:4.5rem;
  padding-top:3rem;
  border-top:1px solid var(--fleece-beige);
}

.project-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:1rem;
}

.project-card{
  --thread:var(--fleece-silver);
  grid-column:span 2;
  display:block;
  overflow:hidden;
  height:100%;
  background:var(--fleece-card);
  border:1px solid var(--fleece-beige);
  border-left:3px solid var(--thread);
  border-radius:0 var(--radius) var(--radius) 0;
  color:inherit;
  text-decoration:none;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}

.project-card--wide{
  grid-column:span 3;
}

.project-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
  color:inherit;
}

.project-card img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-bottom:1px solid var(--fleece-beige);
  transition:filter .25s var(--ease);
}

.project-card:hover img{
  filter:brightness(.97);
}

.project-card-body{
  display:block;
  padding:1rem 1rem 1.1rem;
}

.project-card-title{
  display:block;
  margin-bottom:.25rem;
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 70,"opsz" 30;
  font-size:1.125rem;
  font-weight:600;
  color:var(--fleece-bay);
}

.project-card-desc{
  display:block;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--fleece-brown);
}

.clothing-final-links{
  margin-top:1rem;
}

@media (max-width:58rem){
  .process-steps{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .process-steps li:last-child{
    grid-column:1 / -1;
  }
}

@media (max-width:52rem){
  .project-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .project-card,
  .project-card--wide{
    grid-column:span 1;
  }

  .project-card:last-child{
    grid-column:1 / -1;
  }

  .clothing-process,
  .clothing-projects{
    margin-top:3.5rem;
    padding-top:2.5rem;
  }
}

@media (max-width:38rem){
  .process-steps,
  .project-grid{
    grid-template-columns:1fr;
  }

  .process-steps li:last-child,
  .project-card:last-child{
    grid-column:auto;
  }

  .clothing-process-hero{
    margin-top:2rem;
  }
}