/* ===== How-To Shared ===== */
.howto h1 { margin: 0 0 1rem 0; }
.howto-intro { margin-bottom: 1rem; }

/* Index grid */
.howto-grid {
  display: grid;
  gap: 1rem;
}
.howto-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-md, 0 8px 20px rgba(0,0,0,.08));
  padding: 1rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
@media (hover:hover) {
  .howto-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
  }
}
.howto-card h2 { margin: 0 0 .4rem 0; color: var(--color-brand, #ba0c2f); }
.howto-card a { text-decoration: none; color: inherit; }
.howto-card a:hover { text-decoration: underline; }
.howto-blurb { color: #334155; }

/* Detail list */
.howto-steps {
  list-style: none;
  margin: 0;
  padding: 1rem;
  display: grid;
  gap: 1rem;
}
.howto-step {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-md, 0 8px 20px rgba(0,0,0,.06));
  padding: 1rem;
}
.howto-step h3 { margin: 0 0 .4rem 0; color: var(--color-brand, #ba0c2f); }
.howto-body { color: #2d2d2d; }

.howto-figure figcaption {
  font-size: .9rem;
  color: #475569;
  margin-top: .3rem;
}

.howto-img {
  width: 50%;
  height: auto;
  display: block;
  border-radius: 0;
  margin: 0 auto;
}

.howto-help {
  margin-top: 1rem;
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
}
.btn-print {
  background: var(--color-brand, #ba0c2f);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .5rem .9rem;
  cursor: pointer;
}
.btn-print:hover { filter: brightness(1.05); }

/* Container sizing for detail pages */
.howto-detail .container {
  max-width: 1000px; 
  padding: 1rem;  /* adjust as needed */
}

/* Mobile */
@media (max-width: 720px) {
  .howto h1 {
    font-size: 1.6rem;
    line-height: 1.3;
    text-align: center;
    padding: 0 .5rem;
  }
  .howto-grid { grid-template-columns: 1fr; }
  .howto-step { padding: .9rem; }
  .howto-step .img {
    width: 100%;
    height: auto;
    align-items: center; 
    object-fit: contain;
  }
}

/* Print: show just the article */
@media print {
  header, footer, .btn-print { display: none !important; }
  .container { box-shadow: none !important; padding: 0 !important; }
  .howto-step {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd;
    object-fit: cover;
  }
}
.home-promos .promo-img { 
  width:100%; 
  height:auto; 
  display:block; 
  border-radius:8px; 
  margin-bottom:.75rem; 
}
.promo-kicker { 
  font-size:.85rem; 
  letter-spacing:.04em; 
  text-transform:uppercase; 
  color:#475569; 
  margin-bottom:.25rem; 
}
/*.btn { 
  display:inline-block; 
  padding:.5rem .9rem; 
  border-radius:999px; 
  background:var(--color-brand,#ba0c2f); 
  color:#fff; 
  text-decoration:none; 
}*/
.btn:hover { 
  filter:brightness(1.05); 
}