/* Renewables, full width (13 Oct 2026): the 1360px band the rest of the site
   uses, the main menu restored in place of the lone back button, and the
   narrow centred columns (the 780px collection, the 680px grant checker, the
   820px FAQ) turned into layouts that use the width. Loaded after renewables.css. */
:root { --r-max: 1360px; }
.rnw-wrap, .rnw-trust .in, .rnw-cross .in, .rnw-footer .in { padding-left: 40px; padding-right: 40px; }
.container { max-width: 1360px; padding: 0 40px; }

/* the main menu, inside the page's own scroll container */
#rnwPage { padding-top: 80px; }
#rnwPage .calc-page-back { display: none; }
.rnw-topnav .nav-logo-img { height: 56px; }

/* the collection: two across instead of one 780px column */
.rnw-list { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.rnw-list-icon { width: 140px; height: 124px; }
.rnw-list-icon img { max-width: 140px; max-height: 124px; }

/* the grant checker beside its explanation */
#grant .rnw-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; align-items: start; }
#grant .rnw-wrap > :not(.gc-wrap) { grid-column: 1; }
#grant .gc-wrap { grid-column: 2; grid-row: 1 / span 3; max-width: none; margin: 0; }

/* the questions in two columns */
.rnw-faq { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }

@media (max-width: 900px) {
  .rnw-wrap, .rnw-trust .in, .rnw-cross .in, .rnw-footer .in, .container { padding-left: 20px; padding-right: 20px; }
  .rnw-list, .rnw-faq { grid-template-columns: minmax(0, 1fr); }
  #grant .rnw-wrap { display: block; }
  .rnw-topnav .nav-logo-img { height: 48px; }
}

/* One calculator for the site (16 Oct 2026): the cards price in /cost-calculator, so they are no
   longer buttons, and the old configurator is a short section that sends people there. */
.rnw-list-head { cursor: auto; }
#collection .rnw-stamp { margin-top: 20px; }
.rnw-price .ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.rnw-price .rnw-talk { margin-top: 18px; }

/* on a phone the drawing sits above the words instead of squeezing them into a strip */
@media (max-width: 560px) {
  .rnw-list-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rnw-list-icon { width: 100%; height: 120px; }
  .rnw-list-icon img { max-width: 160px; max-height: 120px; }
}