/* Rex 02/11/2026: /guides hub cards (released with the footer change on Harvie's say-so). */
/* guides hub */
.zp-guides { padding: 96px 48px 40px; }
.zp-guides-inner { max-width: 1200px; margin: 0 auto; }
.zp-guides-group { margin-bottom: 72px; }
.zp-guides-group h2 { font-family: var(--font-display, 'Bebas Neue', sans-serif); font-weight: 400; font-size: clamp(36px, 4vw, 56px); letter-spacing: 0.02em; color: var(--cream, #f0ead8); margin-bottom: 28px; padding-bottom: 14px; border-bottom: 1px solid rgba(201,168,76,0.25); }
.zp-guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.zp-guide-card { display: flex; flex-direction: column; background: var(--dark-2, #161616); border: 1px solid rgba(240,234,216,0.06); transition: transform .25s, border-color .25s; }
.zp-guide-card:hover { transform: translateY(-4px); border-color: rgba(216,30,99,0.5); }
.zp-guide-card .img { aspect-ratio: 16/10; overflow: hidden; background: #0d0d0d; }
.zp-guide-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.zp-guide-card:hover img { transform: scale(1.04); }
.zp-guide-card .body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.zp-guide-card h3 { font-family: var(--font-display, 'Bebas Neue', sans-serif); font-weight: 400; font-size: 28px; line-height: 1.05; letter-spacing: 0.02em; color: var(--cream, #f0ead8); }
.zp-guide-card p { font-size: 14px; line-height: 1.7; color: rgba(240,234,216,0.68); flex: 1; }
.zp-guide-card .more { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red-text, #ff3f86); }
@media (max-width: 980px) { .zp-guides { padding: 64px 20px 24px; } .zp-guides-grid { grid-template-columns: 1fr; gap: 20px; } }
@media (min-width: 640px) and (max-width: 980px) { .zp-guides-grid { grid-template-columns: repeat(2, 1fr); } }
/* guides mobile swipe rows */
@media (max-width: 767px) {
  .zp-guides-group { margin-bottom: 56px; }
  .zp-guides-group h2 { position: relative; }
  .zp-guides-group h2::after { content: "Swipe \2192"; content: "Swipe \2192" / ""; position: absolute; right: 0; top: calc(100% + 8px); line-height: 1; font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red-text, #ff3f86); }
  .zp-guides-grid { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; margin: 0 -20px; padding: 4px 20px 8px; scrollbar-width: none; }
  .zp-guides-grid::-webkit-scrollbar { display: none; }
  .zp-guide-card { flex: 0 0 82%; scroll-snap-align: start; }
  .zp-guide-card:hover { transform: none; }
  .zp-guide-card:focus-visible { outline: 2px solid var(--red-text, #ff3f86); outline-offset: -2px; }
}