/* ═══════════════════════════════════════════════════════════
   LETTERHEAD PRINTING — product page
   Built on business-cards.css (same hero, guide, steps, FAQ).
   This file adds: portrait hero images and the guide card visuals.
═══════════════════════════════════════════════════════════ */

/* ─── Hero: portrait samples sit on a desk-like backdrop ─── */
.lh-body .bc-main-img { aspect-ratio: 3 / 2; background: radial-gradient(ellipse 70% 80% at 50% 40%, #ffffff 0%, #e9eef7 100%); }
.lh-body .bc-main-img.is-portrait img { object-fit: contain; padding: 22px 0; filter: drop-shadow(0 22px 26px rgba(0,30,90,0.22)); }
.lh-body .bc-main-img.is-portrait:hover img { transform: scale(1.02); }
.lh-body .bc-thumb img { object-position: top; }


/* ─── Styles card: a fanned row of real sample sheets ─── */
.lh-minis { display: flex; justify-content: center; margin-top: 26px; padding: 10px 0 4px; }
.lh-minis img {
  width: 22%; max-width: 104px; height: auto; aspect-ratio: 210 / 297; object-fit: cover; object-position: top;
  border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 18px 30px -18px rgba(0,30,90,0.55);
  transition: transform .45s var(--ease);
}
.lh-minis img + img { margin-left: -4%; }
.lh-minis img:nth-child(1) { transform: rotate(-7deg) translateY(8px); }
.lh-minis img:nth-child(2) { transform: rotate(-2deg); position: relative; z-index: 1; }
.lh-minis img:nth-child(3) { transform: rotate(3deg); position: relative; z-index: 2; }
.lh-minis img:nth-child(4) { transform: rotate(8deg) translateY(8px); position: relative; z-index: 3; }
.bc-gcard:hover .lh-minis img:nth-child(1) { transform: rotate(-10deg) translate(-10px, 6px); }
.bc-gcard:hover .lh-minis img:nth-child(4) { transform: rotate(11deg) translate(10px, 6px); }

/* ─── What to include: a tidy 2-column checklist ─── */
.lh-include { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lh-include li {
  position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 12px 42px; border-radius: 14px;
  background: var(--soft); box-shadow: 0 0 0 1px var(--line);
}
.lh-include li::before {
  content: ''; position: absolute; left: 13px; top: 13px; width: 20px; height: 20px; border-radius: 50%;
  background: #dcfce7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.lh-include b { font: 800 14px/1.25 'Manrope', sans-serif; color: var(--text); }
.lh-include span { font-size: 12.5px; line-height: 1.4; color: var(--mute); }

/* ─── Size card: a small A4 sheet with its specs ─── */
.lh-a4 { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 16px; border-radius: 16px; background: var(--soft); box-shadow: 0 0 0 1px var(--line); }
.lh-a4-sheet {
  position: relative; flex-shrink: 0; width: 52px; aspect-ratio: 210 / 297; border-radius: 3px; background: #fff; padding: 9px 7px;
  display: flex; flex-direction: column; gap: 4px; box-shadow: 0 0 0 1px var(--line), 0 10px 18px -10px rgba(0,30,90,0.5);
}
.lh-a4-sheet::before { content: ''; height: 6px; width: 60%; border-radius: 2px; background: linear-gradient(90deg, var(--brand2), #2f8bff); margin-bottom: 3px; }
.lh-a4-sheet i { display: block; height: 3px; border-radius: 2px; background: #e6ebf4; }
.lh-a4-sheet i:last-child { width: 60%; }
.lh-a4-dim { display: flex; flex-direction: column; gap: 3px; flex: 1; font-size: 12.5px; color: var(--mute); line-height: 1.35; }
.lh-a4-dim + .lh-a4-dim { padding-left: 14px; border-left: 1px solid var(--line); }
.lh-a4-dim b { font: 800 16px/1.1 'Manrope', sans-serif; color: var(--text); }

/* WhatsApp mock: show the top of the A4 proof, same size as the business card mock */
.lh-body .wa-img { background: #fff; }
.lh-body .wa-img img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

/* Delivery card: speed tiles then area chips */
.lh-body .bc-speed + .bc-chips-areas { margin-top: 16px; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 640px) {
  .lh-body .bc-product > * { min-width: 0; }
  .lh-body .bc-types { display: grid; grid-template-columns: 1fr 1fr; }
  .lh-body .bc-type { font-size: 13.5px; }
  .lh-include { grid-template-columns: 1fr; }
  .lh-a4 { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .lh-minis img { transition: none; }
}