/* Right-side banner rail (160x600)
   Note: intentionally scoped by being included only on specific pages.
*/

.mc-left-rail,
.mc-right-rail{ display:none; }

.mc-right-rail-inner{
  position: sticky;
  top: 16px;
}

.mc-left-rail-inner{
  position: sticky;
  top: 16px;
}

.mc-ad-frame{
  position: relative;
  width: 160px;
  height: 600px;
  background: #ffffff;
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(15,23,42,.08);
  overflow: hidden;
}

.mc-ad-frame-label{
  display:block;
  position:absolute;
  top:10px;
  left:10px;
  z-index: 2;
  pointer-events:none;
  font-size: 11px;
  line-height: 1;
  color: rgba(15,23,42,.70);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(148,163,184,.35);
  padding: 3px 8px;
  border-radius: 999px;
}

.mc-ad-frame-box{
  width: 160px;
  height: 600px;
}

/* If ad JS is blocked, keep a visible placeholder instead of looking "missing" */
.mc-ad-frame-box:empty::before{
  content: "Ad blocked / not available";
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding: 14px;
  text-align:center;
  color: rgba(15,23,42,.55);
  font-size: 12px;
}

.mc-ad-frame-box iframe{
  display:block;
  width:160px;
  height:600px;
  border:0;
}

/* Desktop: add a second column without shrinking existing content */
@media (min-width: 1100px){
  main{
    max-width: 1480px;
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) 180px;
    gap: 16px;
    align-items: start;
  }
  /* Preferred: wrap the left content in one container so the rail height doesn't create blank rows */
  main > .mc-main-col{ grid-column: 2; min-width: 0; }
  /* Keep existing page content in the center column; reserve side columns for rails only */
  main > :not(.mc-left-rail):not(.mc-right-rail){
    grid-column: 2;
  }
  main > .mc-left-rail{
    display: block;
    grid-column: 1;
    grid-row: 1;
    width: 180px;
    margin-top: 0;
  }
  main > .mc-right-rail{
    display: block;
    grid-column: 3;
    grid-row: 1;
    width: 180px;
    margin-top: 0;
  }
}

/* Submit page uses a wrapper instead of <main> */
@media (min-width: 1100px){
  .mc-submit-shell{
    display: grid;
    grid-template-columns: 180px minmax(0, 880px) 180px;
    gap: 16px;
    align-items: start;
  }
  .mc-submit-shell > :not(.mc-left-rail):not(.mc-right-rail){ grid-column: 2; }
  .mc-submit-shell > .mc-left-rail{ display:block; width:180px; grid-column: 1; }
  .mc-submit-shell > .mc-right-rail{ display:block; width:180px; grid-column: 3; }
}