/* report-card.css
   The free report card (.sb-card), on the council hubs, the calculator index
   and the rates studies.

   Its own file, not styles.css: vercel.json serves styles.css with max-age=600
   and stale-while-revalidate=86400, so a returning visitor can get an old
   styles.css with new HTML. When the card moved into styles.css on
   22 October 2026, that showed the card unstyled. Files outside that rule are
   served max-age=0, must-revalidate, so this one is never stale. */

.sb-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: 8px 28px;
  align-items: center;
  margin: 26px 0 34px;
  padding: 26px 28px 26px 30px;
  border: 1px solid #1b394b;
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(0, 200, 200, 0.14) 0%, rgba(0, 200, 200, 0) 55%),
    linear-gradient(180deg, #0c2233 0%, #0a1d2c 100%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: #f2f6f8;
  overflow: hidden;
}
.sb-card .sb-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 11px; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
  color: #2ad9d6;
}
.sb-card p { margin: 0; }
.sb-card .sb-lead {
  font-family: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  font-weight: 400; font-size: 30px; line-height: 1.08; letter-spacing: -0.005em;
  color: #f2f6f8;
}
.sb-card .sb-sub {
  margin-top: 8px;
  font-size: 16px; line-height: 1.5; color: #b8c7d3;
  max-width: 34em;
}
.sb-card .sb-incl {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 14px 0 0; padding: 0; list-style: none;
}
.sb-card .sb-incl li {
  margin: 0; padding: 4px 10px;
  font-size: 12.5px; line-height: 1.4; color: #cfdbe4;
  border: 1px solid rgba(169, 186, 199, 0.22); border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}
.sb-card .sb-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin-top: 18px;
}
.sb-card .sb-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 22px;
  border-radius: 11px;
  font-size: 15.5px; font-weight: 650; line-height: 1; text-decoration: none;
  color: #04131c;
  background: linear-gradient(180deg, #3fe0dc 0%, #12cfcc 46%, #00b7b8 100%);
  border: 1px solid rgba(0, 120, 122, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 22px rgba(0, 200, 200, 0.18);
  transition: background 160ms ease, transform 160ms ease;
}
.sb-card .sb-btn:hover { background: linear-gradient(180deg, #5ce8e4 0%, #2ad9d6 46%, #05c3c3 100%); color: #04131c; }
.sb-card .sb-btn:focus-visible { outline: 2px solid #2ad9d6; outline-offset: 3px; }
.sb-card .sb-btn .sb-arrow { transition: transform 160ms ease; }
.sb-card .sb-btn:hover .sb-arrow { transform: translateX(3px); }
.sb-card .sb-note { font-size: 13px; color: #8fa3b3; }

/* Two report pages, fanned, on a soft glow. Decorative only. */
.sb-card .sb-visual { position: relative; height: 196px; }
.sb-card .sb-visual::before {
  content: ""; position: absolute; inset: 18% 6% 4% 6%;
  background: radial-gradient(closest-side, rgba(0, 200, 200, 0.28), rgba(0, 200, 200, 0));
  filter: blur(6px);
}
.sb-card .sb-visual img {
  position: absolute; top: 10px; width: 112px; height: auto; aspect-ratio: 180 / 255;
  object-fit: cover; object-position: top;
  border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
  transition: transform 260ms ease;
}
.sb-card .sb-visual img:first-child { left: 0; transform: rotate(-7deg); }
.sb-card .sb-visual img:last-child { right: 0; top: 22px; transform: rotate(5deg); background: #fff; }
.sb-card:hover .sb-visual img:first-child { transform: rotate(-9deg) translate(-3px, -2px); }
.sb-card:hover .sb-visual img:last-child { transform: rotate(7deg) translate(3px, -2px); }

/* On a phone the pages sit small in the top corner and the copy runs full
   width beneath and beside them. */
@media (max-width: 640px) {
  .sb-card {
    display: block;
    padding: 22px 18px 20px 20px;
    border-radius: 16px;
  }
  .sb-card .sb-eyebrow,
  .sb-card .sb-lead,
  .sb-card .sb-sub { padding-right: 84px; }
  .sb-card .sb-lead { font-size: 25px; }
  .sb-card .sb-sub { font-size: 15px; }
  .sb-card .sb-visual { position: absolute; top: 18px; right: 14px; width: 86px; height: 104px; }
  .sb-card .sb-visual img { width: 56px; top: 2px; }
  .sb-card .sb-visual img:last-child { top: 10px; }
  .sb-card .sb-actions { margin-top: 16px; }
  .sb-card .sb-btn { width: 100%; justify-content: center; }
}
.sb-card .sb-alt { margin-top: 12px; font-size: 13.5px; }
.sb-card .sb-alt a { color: #2ad9d6; text-decoration: none; border-bottom: 1px solid rgba(42, 217, 214, 0.35); }
.sb-card .sb-alt a:hover { border-bottom-color: #2ad9d6; }
@media (prefers-reduced-motion: reduce) {
  .sb-card .sb-btn, .sb-card .sb-visual img, .sb-card .sb-btn .sb-arrow { transition: none; }
}
@media print { .sb-card { box-shadow: none; } }

/* Quick report box on suburb pages (generate-suburb-pages.js): the card with
   one email field, the suburb already chosen. The button is a <button> there,
   so the rules above use .sb-btn rather than a.sb-btn. */
.sb-card button.sb-btn { font-family: inherit; cursor: pointer; }
.sb-card .quick-lead-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 8px; }
.sb-card .quick-lead-email {
  flex: 1 1 210px; min-width: 0; min-height: 46px; padding: 0 14px;
  border-radius: 11px; border: 1px solid rgba(169, 186, 199, 0.32);
  background: #061321; color: #f2f6f8; font: inherit; font-size: 16px;
}
.sb-card .quick-lead-email::placeholder { color: #8fa3b3; }
.sb-card .quick-lead-email:focus { outline: 2px solid #2ad9d6; outline-offset: 1px; border-color: transparent; }
.sb-card .quick-lead-form .lead-error { flex-basis: 100%; font-size: 13.5px; color: #ffb4a8; }
.sb-card .quick-lead-done { margin: 14px 0 0; font-size: 15px; color: #cfdbe4; }
@media (max-width: 640px) {
  .sb-card .quick-lead-form { margin-top: 14px; }
  .sb-card .quick-lead-form .sb-btn { width: 100%; justify-content: center; }
}