/* =========================================================
   Michael & Son's Jewelers — Global CSS
   Widget: Nevada Athletics Hall of Fame Rings landing page
   Scope: .mson-hof
   Paste into Site Manager > Design/Theme Settings > Global CSS
   ========================================================= */

.mson-hof {
  --mson-cream:   #F9F8EB; /* Almond Bloom  - background */
  --mson-blush:   #E8E1D3; /* Porcelain Blush - section alt */
  --mson-forest:  #555439; /* Forest Seed - primary */
  --mson-olive:   #9F9C6C; /* Olive Husk - accent, decorative + buttons */
  --mson-slate:   #919B9B; /* River Slate - hairlines only */
  --mson-ink:     #202014; /* dark ink for body copy */
  --mson-white:   #FFFFFF;

  --mson-head: "Playfair Display", Georgia, "Times New Roman", serif;
  --mson-body: "Jost", "Helvetica Neue", Arial, sans-serif;

  color: var(--mson-ink);
  font-family: var(--mson-body);
}

/* ---------- Shared type ---------- */
.mson-hof .mson-h2 {
  font-family: var(--mson-head);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  color: var(--mson-forest);
  margin: 0 0 .75rem;
}
.mson-hof .mson-h3 {
  font-family: var(--mson-head);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  color: var(--mson-forest);
  margin: 0;
}
.mson-hof .mson-h2--light { color: var(--mson-white); }

.mson-hof .mson-eyebrow {
  display: block;
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--mson-white);
  margin-bottom: .75rem;
}
.mson-hof .mson-eyebrow--dark { color: var(--mson-forest); opacity: .85; }

.mson-hof .mson-rule {
  width: 64px;
  height: 2px;
  background: var(--mson-olive);
  margin: 1rem 0 1.25rem;
}
.mson-hof .text-center .mson-rule,
.mson-hof .mson-style__head + .row .mson-rule { margin-left: auto; margin-right: auto; }
.mson-hof .mson-rule--light { background: var(--mson-olive); }

.mson-hof .mson-lead {
  font-size: 1.0625rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}
.mson-hof .mson-lead--light { color: #F2F1E4; }

/* ---------- Sections ---------- */
.mson-hof .mson-section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.mson-hof .mson-section--cream  { background: var(--mson-cream); }
.mson-hof .mson-section--blush  { background: var(--mson-blush); }
.mson-hof .mson-section--forest { background: var(--mson-forest); color: #F2F1E4; }

/* ---------- Buttons ---------- */
.mson-hof .mson-btn {
  font-family: var(--mson-body);
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 0;
  padding: .85rem 1.75rem;
  border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.mson-hof .mson-btn--sm { padding: .6rem 1.25rem; font-size: .75rem; }

.mson-hof .mson-btn--solid {
  background: var(--mson-forest);
  border-color: var(--mson-forest);
  color: var(--mson-white);
}
.mson-hof .mson-btn--solid:hover,
.mson-hof .mson-btn--solid:focus {
  background: #403F2B;
  border-color: #403F2B;
  color: var(--mson-white);
}

.mson-hof .mson-btn--gold {
  background: var(--mson-olive);
  border-color: var(--mson-olive);
  color: #202014;
}
.mson-hof .mson-btn--gold:hover,
.mson-hof .mson-btn--gold:focus {
  background: #B4B183;
  border-color: #B4B183;
  color: #202014;
}

.mson-hof .mson-btn--ghost {
  background: transparent;
  border-color: var(--mson-white);
  color: var(--mson-white);
}
.mson-hof .mson-btn--ghost:hover,
.mson-hof .mson-btn--ghost:focus {
  background: var(--mson-white);
  color: var(--mson-forest);
}
.mson-hof .mson-section--cream .mson-btn--ghost {
  border-color: var(--mson-forest);
  color: var(--mson-forest);
}
.mson-hof .mson-section--cream .mson-btn--ghost:hover {
  background: var(--mson-forest);
  color: var(--mson-white);
}

.mson-hof .mson-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}
.mson-hof .mson-btn-row--center { justify-content: center; }

.mson-hof .mson-btn:focus-visible {
  outline: 2px solid var(--mson-olive);
  outline-offset: 3px;
}

/* ---------- 1. Hero ---------- */
/* Hero: artwork is never covered or dimmed. The rings sit left and the
   Hall of Fame lockup sits right, so the copy goes beneath the image
   rather than on top of either. */
.mson-hof .mson-hero { position: relative; background: var(--mson-forest); }
.mson-hof .mson-hero__media {
  display: block;
  background: #202014;
}
.mson-hof .mson-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
}
.mson-hof .mson-hero__overlay {
  background: var(--mson-forest);
  padding: clamp(2rem, 4vw, 3.25rem) 0;
  text-align: center;
}
.mson-hof .mson-hero__title {
  font-family: var(--mson-head);
  color: var(--mson-white);
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 1.05;
  margin: 0 0 1rem;
}
.mson-hof .mson-hero__text {
  color: #F2F1E4;
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 62ch;
  margin: 0 auto;
}
.mson-hof .mson-hero .mson-btn-row { justify-content: center; }

/* ---------- 3. Steps ---------- */
.mson-hof .mson-step {
  display: block;
  height: 100%;
  background: var(--mson-cream);
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
}
.mson-hof .mson-step:hover,
.mson-hof .mson-step:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(32,32,20,.14);
}
.mson-hof .mson-step__media { display: block; overflow: hidden; }
.mson-hof .mson-step__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .5s ease;
}
.mson-hof .mson-step:hover .mson-step__media img { transform: scale(1.04); }
.mson-hof .mson-step__body { display: block; padding: 1.5rem 1.5rem 1.75rem; }
.mson-hof .mson-step__num {
  display: block;
  font-family: var(--mson-head);
  font-size: .9rem;
  letter-spacing: .2em;
  color: var(--mson-olive);
  margin-bottom: .35rem;
}
.mson-hof .mson-step__title {
  display: block;
  font-family: var(--mson-head);
  font-size: 1.35rem;
  color: var(--mson-forest);
  margin-bottom: .5rem;
}
.mson-hof .mson-step__text { display: block; font-size: .95rem; line-height: 1.65; }

/* ---------- 4. Pricing ---------- */
/* Banner: image is never cropped. Below 992px the caption stacks under it;
   at 992px+ it overlays with a scrim so the full photo still shows. */
.mson-hof .mson-priceband {
  position: relative;
  background: var(--mson-forest);
  margin-bottom: 2.5rem;
  overflow: hidden;
}
.mson-hof .mson-priceband__media { display: block; background: #202014; }
.mson-hof .mson-priceband__media img {
  display: block;
  width: 100%;
  height: auto;          /* full image in frame, no cover-crop */
  object-fit: contain;
}
.mson-hof .mson-priceband__overlay {
  padding: 1.25rem 1rem 1.5rem;
  text-align: center;
}
.mson-hof .mson-priceband__overlay .mson-h2 { margin-bottom: .35rem; }
.mson-hof .mson-priceband__sub { color: #F2F1E4; margin: 0; font-size: 1rem; }

@media (min-width: 992px) {
  .mson-hof .mson-priceband__media img { opacity: .8; }
  .mson-hof .mson-priceband__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: linear-gradient(90deg, rgba(32,32,20,.15) 0%, rgba(32,32,20,.78) 28%, rgba(32,32,20,.78) 72%, rgba(32,32,20,.15) 100%);
  }
}

.mson-hof .mson-pricecard {
  height: 100%;
  background: var(--mson-white);
  border: 1px solid var(--mson-blush);
  border-top: 3px solid var(--mson-forest);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
}
.mson-hof .mson-pricecard__title {
  font-family: var(--mson-head);
  font-size: 1.75rem;
  color: var(--mson-forest);
  text-align: center;
  margin: 0 0 1.5rem;
}
.mson-hof .mson-pricecard__group { margin-bottom: 1.5rem; }
.mson-hof .mson-pricecard__metal {
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mson-forest);
  border-bottom: 1px solid var(--mson-blush);
  padding-bottom: .5rem;
  margin: 0 0 .75rem;
}
.mson-hof .mson-pricelist { list-style: none; margin: 0; padding: 0; }
.mson-hof .mson-pricelist li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .55rem 0;
  font-size: .95rem;
  line-height: 1.45;
  border-bottom: 1px dotted rgba(85,84,57,.28);
}
.mson-hof .mson-pricelist li:last-child { border-bottom: 0; }
.mson-hof .mson-pricelist li > span:first-child { max-width: 72%; }
.mson-hof .mson-price {
  font-family: var(--mson-head);
  font-size: 1.05rem;
  color: var(--mson-forest);
  white-space: nowrap;
}
.mson-hof .mson-pricecard .mson-btn { margin-top: auto; }

/* ---------- 5. Styles / galleries ---------- */
.mson-hof .mson-style { margin-top: 3rem; }
.mson-hof .mson-style__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--mson-slate);
  padding-bottom: .9rem;
  margin-bottom: 1.5rem;
}
.mson-hof .mson-tile {
  background: var(--mson-white);
  border: 1px solid rgba(85,84,57,.12);
  overflow: hidden;
}
.mson-hof .mson-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .5s ease;
}
.mson-hof .mson-tile:hover img { transform: scale(1.05); }

/* ---------- 6. Make it personal ---------- */
.mson-hof .mson-specs {
  margin: 1.75rem 0 0;
  border-top: 1px solid rgba(255,255,255,.18);
}
.mson-hof .mson-specs__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.mson-hof .mson-specs dt {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #CFCDA4;
  font-weight: 500;
  line-height: 1.6;
  padding-top: .35rem;   /* optical align with first chip */
}
.mson-hof .mson-specs dd {
  margin: 0;
  color: #F2F1E4;
  font-size: 1rem;
  line-height: 1.6;
}
@media (min-width: 576px) {
  .mson-hof .mson-specs__row {
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
  }
}

/* Chip lists — replaces the pipe-separated runs */
.mson-hof .mson-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: 0;
}
.mson-hof .mson-tags li {
  font-size: .8125rem;
  line-height: 1.2;
  letter-spacing: .02em;
  color: #F2F1E4;
  background: rgba(249,248,235,.08);
  border: 1px solid rgba(249,248,235,.28);
  padding: .4rem .7rem;
  white-space: nowrap;
}
/* NOTE: must match the li rule's specificity or the chip styling wins. */
.mson-hof .mson-tags li.mson-tags__more {
  background: transparent;
  border-color: transparent;
  color: #CFCDA4;
  font-style: italic;
  padding-left: .15rem;
  padding-right: .15rem;
}
.mson-hof .mson-specs dd .mson-specs__note {
  margin: .65rem 0 0;
  font-size: .875rem;
  line-height: 1.55;
  color: #D9D8C4;
  font-style: normal;
}

.mson-hof .mson-video { overflow: hidden; border: 1px solid rgba(255,255,255,.22); }
.mson-hof .mson-video video { display: block; width: 100%; height: auto; }

/* ---------- 7. Sizing ---------- */
.mson-hof .mson-sizer { border: 1px solid var(--mson-blush); background: var(--mson-white); }
.mson-hof .mson-sizer img { display: block; width: 100%; height: auto; }

/* ---------- 8. Closing CTA ---------- */
.mson-hof .mson-cta { position: relative; background: #202014; }
.mson-hof .mson-cta__media { display: block; }
.mson-hof .mson-cta__media img {
  display: block;
  width: 100%;
  height: clamp(340px, 46vh, 520px);
  object-fit: cover;
  opacity: .5;
}
.mson-hof .mson-cta__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.mson-hof .mson-cta__overlay .btn { pointer-events: auto; }
.mson-hof .mson-cta__text { color: #F2F1E4; margin: 0 0 .5rem; font-size: 1.0625rem; }

/* ---------- Motion / small screens ---------- */
@media (prefers-reduced-motion: reduce) {
  .mson-hof * { transition: none !important; }
  .mson-hof .mson-step:hover { transform: none; }
}
@media (max-width: 575.98px) {
  .mson-hof .mson-btn-row .btn { flex: 1 1 100%; text-align: center; }
}