/* ============================================================
   Mitchell's Jewelry — Designer Brands Page
   Scoped to: .mjd-wrap
   Paste into: Punchmark Site Manager > Global CSS
   ============================================================ */

.mjd-wrap {
  font-family: 'Jost', sans-serif !important;
  padding: 32px 0 48px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* ── Intro ───────────────────────────────────────────────── */
.mjd-intro {
  margin: 0 0 36px !important;
  padding-bottom: 24px !important;
  border-bottom: 1px solid #eeeeee !important;
}

.mjd-intro p {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 300 !important;
  color: #555555 !important;
  line-height: 1.8 !important;
  margin: 0 !important;
  max-width: 760px !important;
}

/* ── Grid ────────────────────────────────────────────────── */
.mjd-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 3px !important;
  margin: 0 0 40px !important;
}

/* ── Tile ────────────────────────────────────────────────── */
.mjd-tile {
  display: block !important;
  text-decoration: none !important;
  background: #f5f5f5 !important;
  border: 1px solid #e8e8e8 !important;
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 2/1 !important;
}

.mjd-tile__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 24px !important;
  position: relative !important;
  transition: background 0.3s ease !important;
}

.mjd-tile:hover .mjd-tile__inner {
  background: #efefef !important;
}

.mjd-tile img {
  width: 100% !important;
  height: auto !important;
  max-height: 55px !important;
  object-fit: contain !important;
  display: block !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  opacity: 0.8 !important;
}

.mjd-tile:hover img {
  opacity: 1 !important;
  transform: scale(1.03) !important;
}

/* ── Tile name (hidden until hover) ─────────────────────── */
.mjd-tile__name {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(184,150,46,0.92) !important;
  color: #ffffff !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 6px 8px !important;
  transform: translateY(100%) !important;
  transition: transform 0.25s ease !important;
  display: block !important;
}

.mjd-tile:hover .mjd-tile__name {
  transform: translateY(0) !important;
}

/* ── Text-only tile (University of Oklahoma) ─────────────── */
.mjd-tile--text-only .mjd-tile__inner {
  background: #f5f5f5 !important;
}

.mjd-tile__text-logo {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: #555555 !important;
  text-align: center !important;
  line-height: 1.3 !important;
  display: block !important;
  transition: color 0.3s ease !important;
}

.mjd-tile--text-only:hover .mjd-tile__text-logo {
  color: #1a1a1a !important;
}

/* ── CTA footer ──────────────────────────────────────────── */
.mjd-cta {
  border-top: 1px solid #eeeeee !important;
  padding-top: 24px !important;
}

.mjd-cta p {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 300 !important;
  color: #666666 !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}

.mjd-cta a {
  color: #b8962e !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(184,150,46,0.4) !important;
  transition: border-color 0.2s ease !important;
}

.mjd-cta a:hover {
  border-color: #b8962e !important;
}

/* ── Filler tiles (complete last grid row) ───────────────── */
.mjd-tile--filler {
  background: #f0f0f0 !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .mjd-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .mjd-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .mjd-tile img {
    max-height: 45px !important;
  }
}

@media (max-width: 480px) {
  .mjd-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .mjd-tile__name {
    transform: translateY(0) !important;
    font-size: 0.6rem !important;
  }
}