/* Two-column article layout: main content + RHS sidebar
   (banner ad, today's codes, related reading). */

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  align-items: start;
}

.article-main { min-width: 0; }

.article-sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-widget {
  background: #fff;
  border: 1px solid rgba(19, 76, 95, 0.14);
  border-radius: 16px;
  padding: 18px;
}

.sidebar-widget h3 {
  font-family: 'Baloo 2', sans-serif;
  font-size: 0.95rem;
  color: #134C5F;
  margin: 0 0 14px;
}

/* Today's Codes widget — reuses the exact .ticket/.store/.stub markup and
   classes from the homepage (site.css) rather than a separate design, so
   the two never visually drift apart. This just narrows it to fit the
   300px sidebar column and stacks them one per row instead of 3-across. */
.sidebar-coupons {
  background: transparent;
  border: none;
  padding: 0;
}
.sidebar-coupons h3 { padding: 0 2px; margin-bottom: 16px; }
.sidebar-coupons .ticket {
  margin-bottom: 16px;
}
.sidebar-coupons .ticket:last-child { margin-bottom: 0; }
.sidebar-coupons .ticket .store {
  padding: 16px 14px;
}
.sidebar-coupons .ticket .store .brand {
  font-size: 0.9rem;
}
.sidebar-coupons .ticket .store .desc {
  font-size: 0.8rem;
  margin-bottom: 10px;
}
.sidebar-coupons .ticket .stub {
  width: 76px;
}
.sidebar-coupons .ticket .stub .off {
  font-size: 1.05rem;
}
.sidebar-coupons .ticket .stub .code {
  font-size: 0.6rem;
  padding: 3px 7px;
}
.sidebar-coupons .ticket .stub .code svg { width: 11px; height: 11px; }

/* Banner ad — sized for a 160x600-style skyscraper or a smaller square,
   whichever the uploaded image actually is; the box just constrains width. */
.sidebar-banner { padding: 0; overflow: hidden; }
.sidebar-banner a { display: block; line-height: 0; }
.sidebar-banner img { width: 100%; height: auto; display: block; }

/* Related Reading */
.sidebar-related ul { list-style: none; margin: 0 0 12px; padding: 0; }
.sidebar-related ul:last-child { margin-bottom: 0; }
.sidebar-related li {
  padding: 9px 0;
  border-top: 1px solid rgba(19, 76, 95, 0.1);
}
.sidebar-related li:first-child { padding-top: 0; border-top: none; }
.sidebar-related a {
  font-size: 0.86rem;
  color: #134C5F;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.4;
}
.sidebar-related a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }
  .article-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .sidebar-widget { flex: 1 1 260px; }
}