/* Extra patterns for the three secondary-suite pages (secondary-suites, permit process, requirements/bylaws).
   Loaded after site.css only on those pages. */

.b2-title-lg { font-size: 30px; }
.b2-lead {
  max-width: 900px; margin: 56px auto 0; text-align: center;
  font-size: 22px; font-weight: 600; line-height: 1.45; color: var(--ink);
}
.sec--dark .b2-lead, .sec--black .b2-lead { color: #fff; }
.b2-lead--first { margin-top: 0; }
.b2-sub { margin: 4px 0 22px; }
.b2-textlink { text-align: center; margin: 40px 0 0; }
.b2-textlink a { text-decoration: underline; text-underline-offset: 3px; }
.b2-textlink a:hover { color: var(--red); }
.sec--dark .b2-textlink a:hover, .sec--black .b2-textlink a:hover { color: #ddd; }
.b2-tight li { margin-bottom: 0; }
.split .bullets { margin-top: 2px; }

/* Grid of items with a grey check icon before the title (secondary-suites "stressful", permit steps) */
.b2-checkgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px 40px; padding: 0 20px; }
.b2-checkitem { position: relative; padding-left: 30px; }
.b2-checkitem::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 20px; height: 20px;
  background: var(--check); -webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat;
}
.b2-checkitem h2 { font-size: 21px; font-weight: 500; line-height: 1.4; margin-bottom: 12px; }
.b2-checkitem .bullets { padding-left: 50px; }
.b2-checkgrid__note { grid-column: 2 / 4; align-self: center; font-size: 21px; font-weight: 600; line-height: 1.4; padding-left: 30px; margin-top: -10px; }

/* Package cards (secondary-suites) */
.b2-packages { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1060px; margin: 0 auto; }
.b2-package { background: var(--grey-band); border-radius: 10px; padding: 22px 24px 26px; font-size: 15px; }
.b2-package__label { font: 400 38px/1.2 var(--font-display); text-align: center; color: var(--ink); }
.b2-package__name { font-size: 23px; font-weight: 600; text-align: center; margin-bottom: 18px; }
.b2-package__sub { font-size: 21px; font-weight: 600; margin: 22px 0 18px; }
.b2-package .bullets { padding-left: 32px; line-height: 1.6; }
.b2-package__plus { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 18px; }
.b2-redbox {
  max-width: 1060px; margin: 18px auto 0; background: var(--red); border-radius: 10px; padding: 22px 50px;
}
.b2-redbox h2 { color: #fff; font-size: 18px; font-weight: 500; font-style: italic; line-height: 1.5; text-align: center; }

/* Numbered process with icons (dark band) */
.b2-steps { list-style: none; margin: 0; padding: 0; }
.b2-steps li { display: flex; align-items: flex-start; gap: 30px; margin-bottom: 16px; }
.b2-steps__icon { flex: none; width: 70px; height: 70px; }
.b2-steps__icon svg { width: 100%; height: 100%; }
.b2-steps h2 { font-size: 21px; font-weight: 600; line-height: 1.4; margin: 0 0 6px; }
.b2-steps p { color: #c8c8c8; }

/* Three plain text columns */
.b2-cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 44px; max-width: 1010px; margin: 0 auto; }
.b2-cols3 h2 { font-size: 21px; font-weight: 600; line-height: 1.4; margin-bottom: 14px; }

/* FAQ width + wide buttons */
.b2-faq { max-width: 980px; }
.b2-wide-btns { margin-top: 50px; }
.b2-wide-btns .btn { min-width: 450px; }

/* Rounded grey box with bullet columns (permit "rejected") */
.b2-box { background: var(--grey-band); border-radius: 12px; padding: 22px 30px; max-width: 990px; margin: 0 auto; }
.b2-box--white { background: #fff; border-radius: 0; }
.b2-bulletgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 36px; }
.b2-bulletgrid .bullets { padding-left: 18px; }

/* Icon columns (permit "why Calgary requires") */
.b2-iconcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 38px; max-width: 1000px; margin: 0 auto; }
.b2-iconcols__item { margin-bottom: 18px; }
.b2-iconcols__icon { width: 80px; height: 80px; margin: 0 auto 14px; }
.b2-iconcols__icon svg { width: 100%; height: 100%; }
.b2-iconcols h2 { font-size: 21px; font-weight: 600; line-height: 1.4; margin-bottom: 14px; min-height: 2.8em; }

/* Price-tag cards on dark band (permit "get help") */
.b2-pricecards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1095px; margin: 0 auto; }
.b2-pricecard { background: #fff; border-radius: 12px; padding: 24px 22px 40px; color: var(--ink); }
.b2-pricecard h6 { font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--ink); }
.b2-pricecard__tag {
  background: var(--red); border-radius: 10px; padding: 4px 12px; margin-bottom: 30px;
  font: 700 25px/1.5 var(--font-display) !important; color: #fff !important; text-align: center;
}
.b2-pricecard__tag--left { text-align: left; }
.b2-pricecard ul { padding-left: 52px; }
.b2-pricecard h6.b2-pricecard__lead { font-weight: 700; padding-left: 34px; }
.b2-pricecard__lead + ul { padding-left: 62px; }

/* Choice boxes (permit "which service") */
.b2-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 990px; margin: 0 auto; }
.b2-choice { background: var(--grey-band); padding: 22px 24px 40px; }
.b2-choice__head { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; }
.b2-choice__head svg { flex: none; width: 66px; height: 66px; }
.b2-choice__head h2 { font-size: 23px; font-weight: 600; }
.b2-choice .bullets { padding-left: 38px; }

/* Requirements page */
.b2-reqgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 80px; max-width: 840px; margin: 0 auto; }
.b2-reqgrid li { margin: 0; line-height: 1.4; }
.b2-reqgrid strong { font-weight: 600; color: var(--ink); }
.b2-band {
  position: relative; background: var(--red); color: #fff; text-align: center; padding: 14px 20px; margin-top: 50px;
}
.b2-band::before, .b2-band::after { content: ""; position: absolute; top: 50%; width: 11%; border-top: 1px solid #fff; }
.b2-band::before { left: 0; }
.b2-band::after { right: 0; }
.b2-band h1 { color: #fff; font-size: 18px; font-weight: 300; line-height: 1.5; max-width: 1000px; margin: 0 auto; }
.sec--band-after { padding-bottom: 46px; }
.b2-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 14px; max-width: 990px; margin: 0 auto; }
.b2-rule { display: flex; align-items: center; gap: 22px; background: #fff; color: var(--text); padding: 15px 22px; min-height: 120px; }
.b2-rule svg { flex: none; width: 60px; height: 60px; }
.b2-oldsuites { max-width: 685px; margin: 0 auto; background: #fff; padding: 22px 24px 32px; }
.b2-oldsuites h2 { font-size: 23px; font-weight: 500; margin-bottom: 18px; }
.b2-oldsuites .bullets { padding-left: 38px; }
.b2-process { max-width: 420px; margin: 34px auto 0; font-size: 15px; }
.b2-process > p { font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.b2-process .checklist li { margin-bottom: 10px; }

@media (max-width: 900px) {
  .b2-checkgrid, .b2-cols3, .b2-iconcols, .b2-bulletgrid { grid-template-columns: 1fr 1fr; }
  .b2-checkgrid__note { grid-column: 1 / -1; padding-left: 0; margin-top: 0; }
}
@media (max-width: 760px) {
  .b2-title-lg { font-size: 24px; }
  .b2-lead { font-size: 19px; margin-top: 40px; }
  .b2-checkgrid, .b2-cols3, .b2-iconcols, .b2-bulletgrid, .b2-packages, .b2-pricecards, .b2-choices, .b2-reqgrid, .b2-rules { grid-template-columns: 1fr; }
  .b2-checkgrid { padding: 0; gap: 28px; }
  .b2-iconcols__item h2 { min-height: 0; }
  .b2-package { padding: 20px 18px 24px; }
  .b2-redbox { padding: 20px 22px; }
  .b2-steps li { gap: 18px; }
  .b2-steps__icon { width: 52px; height: 52px; }
  .b2-wide-btns .btn { min-width: 0; }
  .b2-pricecard__tag { font-size: 21px !important; }
  .b2-pricecard ul, .b2-pricecard__lead + ul { padding-left: 24px; }
  .b2-pricecard h6.b2-pricecard__lead { padding-left: 0; }
  .b2-choice__head h2 { font-size: 20px; }
  .b2-choice .bullets { padding-left: 20px; }
  .b2-band::before, .b2-band::after { display: none; }
  .b2-rule { padding: 15px; gap: 16px; }
}

/* Permit page bits */
.b2-lead--near { margin-top: 34px; }
.b2-plain { font-size: 16px; font-weight: 400; line-height: 1.6; margin-bottom: 30px; }
.b2-btn-w { min-width: 330px; }
.b2-btn-m { min-width: 200px; }
.b2-split-permits { grid-template-columns: 1fr 400px; gap: 50px; }
.b2-split-timing { grid-template-columns: 477px 1fr; gap: 24px; }
.b2-checkgrid--steps { gap: 30px 34px; }
.b2-checkgrid--steps .b2-checkitem h2 { margin-bottom: 18px; }
.b2-checkgrid--steps .bullets { padding-left: 20px; }
.b2-cta-btns .btn { min-width: 200px; }
@media (max-width: 900px) {
  .b2-split-permits, .b2-split-timing { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .b2-split-permits, .b2-split-timing { grid-template-columns: 1fr; }
  .b2-btn-w, .b2-btn-m { min-width: 0; }
}

/* Requirements page bits */
.b2-reqgrid { grid-template-rows: repeat(4, auto); grid-auto-flow: column; }
.b2-intro-narrow { max-width: 340px; margin: 0 auto; }
.b2-plain--intro { margin: 0; color: #fff; }
.b2-split-fail { grid-template-columns: 1fr minmax(0, 555px); gap: 30px; }
.b2-faillist { padding-left: 30px; max-width: 330px; margin-top: 30px; }
.b2-faillist li { line-height: 1.4; margin-bottom: 12px; }
.b2-btn-xl { min-width: 0; padding: 0 26px; }
.b2-btn-s { min-width: 143px; }
@media (max-width: 900px) { .b2-split-fail { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .b2-reqgrid { grid-template-rows: none; grid-auto-flow: row; gap: 14px; }
  .b2-split-fail { grid-template-columns: 1fr; }
  .b2-faillist { padding-left: 0; max-width: none; }
  .b2-btn-xl { padding: 10px 18px; }
}

/* ---- Fitting to the Wix captures (desktop) ---- */
main .hero__content { padding-top: 180px; }
main .hero__title { max-width: 760px; }
/* Wix line breaks: permit title 2 lines (break after "PROCESS:"), bylaws title breaks before "& BUILDING BYLAWS" */
main .hero__title.b2-t-permit { width: 740px; max-width: calc(100vw - 40px); }
main .hero__title.b2-t-bylaws { width: 695px; max-width: calc(100vw - 40px); }
main .sec-head { max-width: 980px; }
.b2-lead { max-width: 960px; }
.b2-w480 { max-width: 480px; margin-left: auto; margin-right: auto; }
.b2-w600 { max-width: 610px; margin-left: auto; margin-right: auto; }
.b2-w700 { max-width: 700px; margin-left: auto; margin-right: auto; }
.b2-w740 { max-width: 745px; margin-left: auto; margin-right: auto; }
.b2-w790 { max-width: 790px; margin-left: auto; margin-right: auto; }
.b2-w840 { max-width: 840px; margin-left: auto; margin-right: auto; }
.b2-checkgrid { max-width: 1040px; margin: 0 auto; padding: 0; gap: 42px 14px; }
.b2-package { font-size: 16px; }
.b2-iconcols h2 { margin-bottom: 6px; }
.b2-rule svg { width: 74px; height: 74px; }
.b2-split-fail { grid-template-columns: 1fr minmax(0, 555px); gap: 20px; }
.b2-split-fail .sec-title { font-size: 28px; }
.b2-faillist { max-width: 420px; }
.container--wide { max-width: 1140px; }
@media (max-width: 760px) {
  main .hero__content { padding-top: calc(var(--header-h) + 40px); }
  .b2-split-fail { grid-template-columns: 1fr; }
  .b2-split-fail .sec-title { font-size: 24px; }
  .b2-rule svg { width: 56px; height: 56px; }
}
@media (max-width: 760px) { .b2-wide-btns .btn, .b2-btn-w { padding-top: 10px; padding-bottom: 10px; } }

/* Permit page: these two red buttons keep their red on hover on Wix (only letter-spacing changes) */
.btn.b2-btn-keep:hover { background: var(--red); }

/* Permit page section spacing as measured on Wix (headings ~70px below the section top, ~70px bottom) */
@media (min-width: 1061px) { .b2-permit > .sec:is(:nth-child(2), :nth-child(3), :nth-child(5), :nth-child(6)) { padding-top: 70px; padding-bottom: 70px; } }
.b2-permit .b2-lead { max-width: 1017px; }
.b2-permit .sec-head:has(+ .b2-box) { margin-bottom: 14px; }

/* Wix: section headings ~70px below the section top (measured) */
@media (min-width: 1061px) { .sec70 > .sec { padding-top: 70px; } }