/* ********************************************************
   MR. REBATES HOMEPAGE - SEVEN FIXED-HEIGHT PROMO SIZES
   Test stylesheet. Load AFTER app_10_27_25.css.

   All artwork is 270px high:
     760x270
     650x270
     560x270
     525x270
     450x270
     352x270
     310x270

   GOAL:
   Reduce visible letterboxing by choosing the closest-width
   artwork for each viewport band while preserving the fixed
   270px dashboard height and existing desktop panel layout.
   ******************************************************** */

/* Fixed dashboard height remains unchanged. */
.promo-bts {
    height: 270px;
    width: 100%;
    overflow: hidden;
}

/* Hide all seven by default. */
.Promo760,
.Promo650,
.Promo560,
.Promo525,
.Promo450,
.Promo352,
.Promo310 {
    display: none;
    width: auto;
    height: 270px;
    margin: 0 auto;
}

/* ---------------------------------------------------------
   STATE 1: FAVORITES + PROMO + 300x250 PAID AD
   Existing FavoriteStores remains visible above 1000px.
   These breakpoints are more granular to reduce center-slot
   letterbox at desktop widths.
   --------------------------------------------------------- */

/* 1001-1119: tightest 3-column center slot */
@media (min-width: 1001px) and (max-width: 1119px) {
    .Promo352 { display: inline-block; }
}

/* 1120-1179: slightly wider center slot */
@media (min-width: 1120px) and (max-width: 1179px) {
    .Promo450 { display: inline-block; }
}

/* 1180-1269: good fit for 525 */
@media (min-width: 1180px) and (max-width: 1269px) {
    .Promo525 { display: inline-block; }
}

/* 1270-1349: center slot supports 560 */
@media (min-width: 1270px) and (max-width: 1349px) {
    .Promo560 { display: inline-block; }
}

/* 1350-1459: wider desktop center slot */
@media (min-width: 1350px) and (max-width: 1459px) {
    .Promo650 { display: inline-block; }
}

/* 1460+: wrapper is near max width, center slot best matches 760 */
@media (min-width: 1460px) {
    .Promo760 { display: inline-block; }
}


/* ---------------------------------------------------------
   STATE 2: FAVORITES HIDDEN, PAID AD STILL VISIBLE
   Existing app CSS hides FavoriteStores at <=1000px.
   IMPORTANT: Images are never scaled horizontally. We only
   select an artwork width that actually fits the center slot.
   --------------------------------------------------------- */

/* 733-779: narrow opening beside 300x250 ad */
@media (min-width: 733px) and (max-width: 779px) {
    .Promo310 { display: inline-block; }
}

/* 780-877: enough room for 352 */
@media (min-width: 780px) and (max-width: 877px) {
    .Promo352 { display: inline-block; }
}

/* 878-961: 450 fits; 525 would begin to compress near 951px */
@media (min-width: 878px) and (max-width: 961px) {
    .Promo450 { display: inline-block; }
}

/* 962-1000: 525 fits cleanly */
@media (min-width: 962px) and (max-width: 1000px) {
    .Promo525 { display: inline-block; }
}


/* ---------------------------------------------------------
   STATE 3: PAID AD ALSO HIDDEN
   Existing app CSS hides SquareAd at <=732px.
   Promo now gets nearly the full wrapper width.
   --------------------------------------------------------- */

/* 680-732: full-width promo area supports 650 best */
@media (min-width: 680px) and (max-width: 732px) {
    .Promo650 { display: inline-block; }
}

/* 625-679: step down to 560 */
@media (min-width: 625px) and (max-width: 679px) {
    .Promo560 { display: inline-block; }
}

/* 560-624: step down to 525 */
@media (min-width: 560px) and (max-width: 624px) {
    .Promo525 { display: inline-block; }
}

/* 480-559: 450 image keeps art readable */
@media (min-width: 480px) and (max-width: 559px) {
    .Promo450 { display: inline-block; }
}

/* 400-479: medium composition */
@media (min-width: 400px) and (max-width: 479px) {
    .Promo352 { display: inline-block; }
}

/* <=399: smallest composition */
@media (max-width: 399px) {
    .Promo310 { display: inline-block; }
}


/* =========================================================
   INTRO / JOIN-NOW BACKGROUND ALIGNMENT FIX

   app_10_27_25.css defines .promo-join-now with:
       background-size: contain;

   That causes mrjoinnow_back.png to scale with the changing
   promo container width. Since the foreground promo artwork
   always remains exactly 270px high, the blue background band
   then drifts vertically at different viewport widths.

   Keep the background tile at its native 270px height instead.
   This preserves the original repeating-background concept while
   keeping the blue stripe at a consistent vertical position.
   ========================================================= */
.promo-join-now {
    background-image: url('https://s3.amazonaws.com/mr.basics/mrjoinnow_back.png') !important;
    background-repeat: repeat-x !important;
    background-size: auto 270px !important;
    background-position: center top !important;
}


/* =========================================================
   INTRO / JOIN-NOW LETTERBOX FIX
   Use a plain white fill around the selected splash artwork.
   The blue stripe is positioned differently inside the 7 source
   images, so extending it with one repeating background cannot
   stay aligned at every breakpoint.
   ========================================================= */
.promo-join-now {
    width: 100%;
    height: 270px;
    overflow: hidden;
    background: #FFFFFF !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
    background-position: center top !important;
}