/* Ready-to-Deploy, Reji Display and Seasonal pages (Nov 2026). Builds on the rx-* components in style.css. */

/* Ready-to-Deploy product listing */
.rtd-product {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 40px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.rtd-gallery { display: flex; flex-direction: column; gap: 14px; }
.rtd-main {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 28px;
  border-radius: 18px;
  background: linear-gradient(180deg, #EEF8F4, #DDEFE8);
}
.rtd-main img { width: auto; max-width: 100%; height: 320px; object-fit: contain; }
.rtd-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rtd-thumbs figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #FFFFFF;
}
.rtd-thumbs img { width: 100%; height: 130px; object-fit: contain; }
.rtd-thumbs figcaption { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.rtd-info h3 { margin: 0 0 8px; font-family: "Dosis", sans-serif; font-size: 34px; font-weight: 700; line-height: 40px; color: var(--text); }
.rtd-lead { margin: 0 0 18px; font-size: 16px; line-height: 25px; color: var(--text-muted); }
.rtd-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.rtd-prices div { padding: 14px 16px; border-radius: 14px; background: #0A1124; color: #FFFFFF; }
.rtd-prices small { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5CDB95; }
.rtd-prices strong { font-family: "Dosis", sans-serif; font-size: 26px; font-weight: 700; }
.rtd-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 0 0 22px; }
.rtd-spec { padding: 10px 0; border-bottom: 1px solid var(--line); }
.rtd-spec dt { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.rtd-spec dd { margin: 2px 0 0; font-size: 15px; line-height: 21px; color: var(--text); }
.rtd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.rtd-actions .btn { padding: 12px 24px; font-size: 15px; line-height: 21px; }
.rtd-eligibility { max-width: 900px; margin: 22px auto 0; text-align: center; }
.rtd-eligibility .fa { color: #067A60; }

/* Reji Display use cases */
.dsp-uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.dsp-uses li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 15px;
  font-weight: 600;
  line-height: 21px;
  color: var(--text);
}
.dsp-uses .fa {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(10, 192, 148, 0.14);
  color: #067A60;
}
.rx-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }

/* Seasonal steps: five across */
.sea-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rx-table--example th small { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); }

@media (max-width: 991px) {
  .rtd-product { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .dsp-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sea-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .rtd-product { padding: 18px; gap: 22px; }
  .rtd-main img { height: 240px; }
  .rtd-specs,
  .rtd-prices,
  .rx-list--2,
  .dsp-uses,
  .sea-steps { grid-template-columns: minmax(0, 1fr); }
  .rtd-info h3 { font-size: 28px; line-height: 34px; }
}