/* ======================================================================
   HOW-TO HUB — /alpacas/how-to/
   Load after style.css and alpacas.css.
   ====================================================================== */

.howto-head{
  max-width:48rem;
}

.howto-jump-links{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .75rem;
  margin:2rem 0 .25rem;
  padding:.875rem 0;
  border-block:1px solid var(--fleece-beige);
}

.howto-jump-links a{
  padding:.25rem 0;
  color:var(--fleece-brown);
  font-size:.8125rem;
  font-weight:600;
  text-decoration:none;
}

.howto-jump-links a:not(:last-child)::after{
  content:"/";
  margin-left:.75rem;
  color:var(--fleece-beige);
}

.howto-jump-links a:hover{
  color:var(--indigo);
  text-decoration:underline;
}

/* Main category modules. Duplicate one of these blocks when a new
   how-to category is added to the hub. */
.howto-category{
  --thread:var(--fleece-silver);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:2.5rem 3.5rem;
  align-items:center;
  margin-top:4rem;
  padding:2rem;
  scroll-margin-top:6rem;
  background:linear-gradient(135deg, rgba(251,250,247,.96), rgba(220,213,200,.26));
  border:1px solid var(--fleece-beige);
  border-left:4px solid var(--thread);
  border-radius:0 var(--radius) var(--radius) 0;
}

.howto-category--reverse .howto-category-media{
  order:2;
}

.howto-category-media{
  margin:0;
}

.howto-category-media a{
  display:block;
  overflow:hidden;
  border:1px solid var(--fleece-beige);
  border-radius:var(--radius);
}

.howto-category-media img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  transition:transform .3s var(--ease), filter .3s var(--ease);
}

.howto-category-media a:hover img{
  transform:scale(1.015);
  filter:brightness(.97);
}

.howto-category-media figcaption{
  margin-top:.6rem;
  font-size:.8125rem;
  line-height:1.45;
  color:var(--fleece-silver);
}

.howto-category-copy h2{
  margin:0 0 1rem;
  font-size:clamp(1.5rem, 3vw, 2rem);
}

.howto-category-copy h2 a{
  color:var(--fleece-bay);
  text-decoration:none;
}

.howto-category-copy h2 a:hover{
  color:var(--indigo);
}

.howto-category-copy > p:not(.eyebrow){
  font-size:.9375rem;
  color:var(--fleece-brown);
}

.howto-sublinks{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.25rem;
  margin-top:1.25rem;
  padding-top:1rem;
  border-top:1px solid var(--fleece-beige);
  font-size:.8125rem;
  font-weight:600;
}

.howto-sublinks a{
  color:var(--indigo);
  text-decoration:none;
  white-space:nowrap;
}

.howto-sublinks a::after{
  content:" →";
}

.howto-sublinks a:hover{
  text-decoration:underline;
}

/* Smaller cross-links separate the major how-to categories from the
   site's supporting reference pages. */
.howto-related-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.75rem;
  max-width:52rem;
  margin:1rem auto 0;
}

.howto-related-card{
  --thread:var(--fleece-silver);
  display:block;
  height:100%;
  padding:.9rem 1rem 1rem;
  background:var(--fleece-card);
  border:1px solid var(--fleece-beige);
  border-left:3px solid var(--thread);
  border-radius:0 var(--radius) var(--radius) 0;
  text-decoration:none;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}

.howto-related-card:hover{
  transform:translateX(2px);
  box-shadow:var(--shadow-sm);
}

.howto-related-kicker{
  display:block;
  margin-bottom:.1rem;
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fleece-silver);
}

.howto-related-title{
  display:block;
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 70,"opsz" 30;
  font-size:1.0625rem;
  font-weight:600;
  color:var(--fleece-bay);
}

.howto-related-desc{
  display:block;
  margin-top:.1rem;
  font-size:.8125rem;
  line-height:1.45;
  color:var(--fleece-brown);
}

/* Long-form context gives the hub useful information beyond its list of
   child pages and creates natural internal-link opportunities. */
.howto-prose{
  max-width:46rem;
  margin:4.5rem auto 0;
  padding-top:3rem;
  border-top:1px solid var(--fleece-beige);
}

.howto-prose h2{
  margin:0 0 1.25rem;
  font-size:clamp(1.65rem, 4vw, 2.15rem);
}

.howto-prose p:not(.eyebrow){
  color:var(--fleece-brown);
}

.howto-prose p:last-child{
  margin-bottom:0;
}

@media (max-width:52rem){
  .howto-category{
    grid-template-columns:1fr;
    gap:1.5rem;
    margin-top:3rem;
    padding:1.25rem;
  }

  .howto-category--reverse .howto-category-media{
    order:0;
  }

  .howto-prose{
    margin-top:3.5rem;
    padding-top:2.5rem;
  }
}

@media (max-width:38rem){
  .howto-related-row{
    grid-template-columns:1fr;
  }

  .howto-category{
    padding:1rem;
  }
}

@media (max-width:30rem){
  .howto-jump-links{
    gap:.25rem .6rem;
  }

  .howto-jump-links a:not(:last-child)::after{
    margin-left:.6rem;
  }
}