/* =====================================================================
   HBV COLLECTION — shared "Three tiers. One standard." block.
   SINGLE SOURCE OF TRUTH for the .collection / .tiers / .tier styling on
   every page (homepage + all market pages). Link AFTER the page body CSS
   so the kit wins on equal-specificity rules:
       <link rel="stylesheet" href="hbv/hbv-collection.css">
   Pair with hbv/hbv-collection.js (tier image slideshow + separator
   equalizer). Images stay per-page; look + behavior are global here.
   Canonical look = equal-height cards, separators aligned on one row,
   finite mobile swipe carousel (no loop).
   ===================================================================== */

/* --- Section shell --- */
.collection { padding: 4.5rem 0 4rem; background: var(--soft-ivory, #FFFFFF); }
.collection__head { max-width: 60ch; margin-left: auto; margin-right: auto; text-align: center; }
.collection .collection__head { margin-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.collection .eyebrow { justify-content: center; }
.collection__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink, #2A2A28);
  margin: 0.6rem 0 1rem 0; line-height: 1.25;
}
.collection__title .script { text-transform: none; font-size: 1.25em; color: var(--taupe-deep, #8A7C66); letter-spacing: 0; display: inline-block; line-height: 1.05; }
.collection__intro { max-width: 60ch; margin: 0 auto; color: var(--ink-muted, #6B6862); font-size: 1.04rem; line-height: 1.6; }

/* --- Tiers grid (desktop: 3 columns) --- */
.tiers:not(.tiers--slim) { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); margin-top: 3rem; align-items: stretch; }
.tier { background: var(--soft-ivory, #FDFAF5); position: relative; overflow: hidden; display: flex; flex-direction: column; }
.tier__media { aspect-ratio: 4/3; position: relative; overflow: hidden; }
.tier__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s ease; }
.tier:hover .tier__media img { transform: scale(1.03); }
.tier__badge { position: absolute; top: 1.25rem; left: 1.25rem; z-index: 3; font-family: var(--font-display, 'Archivo', sans-serif); font-size: 0.706rem; letter-spacing: 0.3em; text-transform: uppercase; color: #FFFFFF; background: rgba(21,52,66,0.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 0.45rem 0.75rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.tier__badge::before { content: ''; width: 4px; height: 4px; background: currentColor; display: inline-block; }
.tier__badge[data-tier="premier"] { background: rgba(21,52,66,0.85); color: #FFFFFF; }
.tier__badge[data-tier="signature"] { background: rgba(152,193,216,0.92); color: #153442; }
.tier__badge[data-tier="luxe"] { background: rgba(175,160,133,0.95); color: #FFFFFF; }
.tier__prev, .tier__next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.5); color: #fff; border: none; width: 34px; height: 34px; cursor: pointer; font-size: 1.1rem; z-index: 4; display: flex; align-items: center; justify-content: center; border-radius: 3px; padding: 0; }
.tier__prev { left: .6rem; }
.tier__next { right: .6rem; }
.tier__prev:hover, .tier__next:hover { background: rgba(0,0,0,.75); }
.tier__body { padding: 2rem 1.75rem; flex: 1; display: flex; flex-direction: column; position: relative; }
.tier__body::before { content: ''; position: absolute; top: 0; left: 1.75rem; right: 1.75rem; height: 2px; }
.tier--premier .tier__body::before { background: var(--deep-teal, #0C2A3E); }
.tier--signature .tier__body::before { background: var(--mist-blue, #A8C5D4); }
.tier--luxe .tier__body::before { background: var(--taupe-deep, #8B7E62); }
.tier__name { font-family: var(--font-display, Archivo, sans-serif); font-weight: 500; font-size: 1.15rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted, #5C6A75); margin: 1rem 0 .4rem; }
.tier__name .script { display: block; font-family: var(--font-script, 'Sacramento', cursive); font-weight: 400; font-size: 2rem; letter-spacing: 0; color: var(--ink, #1a1a1a); text-transform: none; margin-bottom: .1rem; line-height: 1; }
.tier__desc { color: var(--ink-muted, #5C6A75); font-size: .96rem; line-height: 1.65; margin: 1rem 0 1.5rem; flex: 0 1 auto; }
.tier__features { list-style: none; padding: 1.35rem 0 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; border-top: 1px solid var(--hairline, rgba(12,42,62,.15)); }
.tier__features li { font-size: .86rem; color: var(--ink-muted, #5C6A75); display: grid; grid-template-columns: 20px 1fr; align-items: baseline; gap: .65rem; line-height: 1.5; }
.tier__features li::before { content: '--'; color: var(--taupe-deep, #8B7E62); font-size: .95rem; }

/* --- Mobile (<=768px): finite swipe carousel, equal-size cards --- */
@media (max-width: 768px) {
  .tiers:not(.tiers--slim) {
    display: flex !important; grid-template-columns: none !important;
    gap: 1rem !important; overflow-x: auto !important; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; align-items: stretch !important;
  }
  .tiers:not(.tiers--slim)::-webkit-scrollbar { display: none; }
  .tiers:not(.tiers--slim) .tier__desc { flex: 0 0 auto !important; }
  .tiers:not(.tiers--slim) > .tier { flex: 0 0 min(88%, 280px) !important; max-width: min(88%, 280px) !important; scroll-snap-align: center; }
  .tiers:not(.tiers--slim) .tier__prev, .tiers:not(.tiers--slim) .tier__next { width: 44px !important; height: 44px !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; }
  .tiers:not(.tiers--slim) .tier__prev { left: 0.6rem !important; right: auto !important; }
  .tiers:not(.tiers--slim) .tier__next { right: 0.6rem !important; left: auto !important; }
}