/* ==========================================================================
   MID — Special Offers pages (Specials Limited 521, White 551, Fancy 555)
   Loaded ONLY on slugs: specials / white / fancy (see modules/config.php).
   Reuses the approved luxury system (mid-luxury-* / mid-wd-* / mid-hr-*) and
   harmonises the curated di-custom-diamond product cards + the [mid-specials]
   feed into the navy/gold luxury language. Scoped by enqueue → other Specials
   pages (cut-specials etc.) are NOT affected.
   ========================================================================== */

/* ---- product/offer sections: warm ground + editorial spacing ---- */
.mid-sp--grid,
.mid-sp--offers { background: var(--mid-ivory); padding: 96px 0 104px; }
@media (max-width:767px){ .mid-sp--grid, .mid-sp--offers { padding: 64px 0 72px; } }

.mid-sp-gridsec { margin-top: 22px; }

/* ---- responsive product grid (4 / 2 / 1) ---- */
.mid-sp-grid > .elementor-widget-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  align-items: stretch;
}
.mid-sp-grid > .elementor-widget-wrap > .elementor-widget {
  width: auto;
  margin: 0 !important;
}
@media (max-width:1024px){ .mid-sp-grid > .elementor-widget-wrap { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width:600px){  .mid-sp-grid > .elementor-widget-wrap { grid-template-columns: 1fr; gap: 20px; } }

/* ---- luxury diamond card (di-custom-diamond) ---- */
.mid-sp-grid .specials_section {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--mid-warm-white);
  border: 1px solid var(--mid-platinum);
  padding: 0 0 20px;
  transition: border-color .25s, box-shadow .25s;
}
.mid-sp-grid .specials_section:hover {
  border-color: var(--mid-light-gold);
  box-shadow: 0 10px 30px rgba(28,28,28,.06);
}
.mid-sp-grid .iframe_block {
  border-bottom: 1px solid var(--mid-platinum);
  background: #fff;
  margin-bottom: 14px;
}
.mid-sp-grid .row_1_d,
.mid-sp-grid .row_2_d,
.mid-sp-grid .row_3_d,
.mid-sp-grid .row_4_d { padding-left: 18px; padding-right: 18px; }
.mid-sp-grid .row_1_d span:first-child { font-family: var(--mid-font-serif); font-size: 18px; color: var(--mid-charcoal); }

/* price → navy, refined */
.mid-sp-grid .row_5_d { padding: 6px 18px 12px; margin-top: auto; }
.mid-sp-grid .row_5_d span { color: var(--mid-navy); font-weight: 600; }
.mid-sp-grid .row_5_d .opacity_leter_d { color: #8a8a8a; font-weight: 400; }

/* Inquire button → navy luxury button (gold on hover).
   High specificity (4 classes) to beat theme general.css
   ".specials_section .row_6_d .popup_button_s" (font-size:30px; width:80%; #f45810). */
.mid-sp-grid .row_6_d { padding: 0 18px; }
.mid-sp-grid .specials_section .row_6_d .popup_button_s {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  background: var(--mid-navy);
  color: var(--mid-warm-white);
  border: 1.5px solid var(--mid-navy);
  border-radius: 0;
  padding: 13px 18px;
  font-family: var(--mid-font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .3s, color .3s, border-color .3s;
}
.mid-sp-grid .specials_section .row_6_d .popup_button_s:hover {
  background: var(--mid-light-gold);
  border-color: var(--mid-light-gold);
  color: var(--mid-charcoal);
}

/* ---- [mid-specials] live feed (page 521) — align accents to luxury ----
   The plugin (middiamonds-specials/styles/mid-specials.css) styles the feed
   button via ID selectors + !important: "#col1 .elementor-cta__button{
   background-color:#C9A482!important}". Match that ID structure (+ our section
   class) so our navy wins on specificity. */
.mid-sp--offers .specials_section { border: 1px solid var(--mid-platinum); background: var(--mid-warm-white); }
.mid-sp--offers #col1 .elementor-cta__button,
.mid-sp--offers #col2 .elementor-cta__button,
.mid-sp--offers #col3 .elementor-cta__button,
.mid-sp--offers #col4 .elementor-cta__button {
  background-color: var(--mid-navy) !important;
  background-image: none !important;
  color: var(--mid-warm-white) !important;
  border: 1.5px solid var(--mid-navy) !important;
  border-radius: 0 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background-color .3s, color .3s, border-color .3s;
}
.mid-sp--offers #col1 .elementor-cta__button:hover,
.mid-sp--offers #col2 .elementor-cta__button:hover,
.mid-sp--offers #col3 .elementor-cta__button:hover,
.mid-sp--offers #col4 .elementor-cta__button:hover {
  background-color: var(--mid-light-gold) !important;
  border-color: var(--mid-light-gold) !important;
  color: var(--mid-charcoal) !important;
}