/* 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 */
.sidebar-coupons ul { list-style: none; margin: 0; padding: 0; }
.sidebar-coupons li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
  border-top: 1px solid rgba(19, 76, 95, 0.1);
}
.sidebar-coupons li:first-child { padding-top: 0; border-top: none; }
.sc-store {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #134C5F;
  opacity: 0.7;
}
.sc-title { font-size: 0.86rem; color: #384649; line-height: 1.4; }
.sidebar-coupons .deal-trigger {
  align-self: flex-start;
  font-size: 0.8rem;
  padding: 7px 14px;
  border-radius: 999px;
  background: #FFB100;
  color: #134C5F;
  font-weight: 700;
  text-decoration: none;
}

/* 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; }
}