/* Scoped styles for the blog, layered over the Webflow export.
 *
 * Rules (docs: /regina/camps/summer is the design standard): BLACK, WHITE and
 * RED (#BF202F) only, and scoped CSS is for layout the export has no component
 * for — never for a new type scale, palette or elevation system. Everything
 * below is a box the export does not ship: the summary panel at the top of a
 * post, the FAQ block, the next-step card, and the table of contents that the
 * missing Finsweet script used to build.
 *
 * Loaded after mobile-overrides.css and before chrome-overrides.css, which
 * must stay last (see app/(marketing)/layout.tsx).
 */

/* ---------------------------------------------------------------- summary */

.text-rich-paragraph .hl-post-summary {
  border-left: 0.25rem solid #bf202f;
  background-color: #f7f7f8;
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.hl-post-summary-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #bf202f;
  margin-bottom: 0.5rem;
}

.text-rich-paragraph .hl-post-summary ul {
  margin: 0;
  padding-left: 1.1rem;
}

.text-rich-paragraph .hl-post-summary li {
  margin-bottom: 0.4rem;
}

.text-rich-paragraph .hl-post-summary li:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------- FAQ */

.text-rich-paragraph .hl-post-faq {
  border-top: 0.08rem solid #d7d9db;
  margin-top: 2.5rem;
  padding-top: 0.5rem;
}

/* The questions themselves are the shared .lp-faq accordion from landing.css,
   the same one every other page on the site uses (Andrew, 2026-08-01: all FAQs
   styled the same way). Only the spacing around the block is blog-specific. */
.text-rich-paragraph .hl-post-faq .lp-faq {
  margin-top: 1.25rem;
}
.text-rich-paragraph .hl-post-faq .lp-faq p {
  margin: 0;
}

/* -------------------------------------------------------------- next step */

.text-rich-paragraph .hl-post-next {
  background-color: #111111;
  color: #ffffff;
  border-radius: 1rem;
  padding: 1.75rem;
  margin-top: 2.5rem;
}

.hl-post-next-title {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.hl-post-next-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.text-rich-paragraph .hl-post-next-link {
  display: block;
  background-color: #ffffff;
  color: #111111;
  border-radius: 0.6rem;
  padding: 0.9rem 1.1rem;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.text-rich-paragraph .hl-post-next-link:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.75rem 1rem #00000026;
}

.hl-post-next-label {
  display: block;
  font-weight: 600;
  color: #bf202f;
  margin-bottom: 0.15rem;
}

.hl-post-next-note {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.text-rich-paragraph .hl-post-next-foot {
  margin-top: 1.1rem;
  margin-bottom: 0;
  font-size: 0.9375rem;
  color: #e6e6e6;
}

.text-rich-paragraph .hl-post-next-foot a {
  color: #ffffff;
}

@media screen and (min-width: 768px) {
  .hl-post-next-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ------------------------------------------------------ table of contents */

/* The export's blog template is a ONE-column grid at every width: the contents
   sidebar was a Finsweet widget that never shipped, so it sat empty and nobody
   noticed the column was missing. With a real table of contents in it, the
   post reads like a single column of body copy with a list of links dumped on
   top. Desktop gets the two-column layout the design clearly intended: the
   header spans both, the article takes the wide column, and the contents sit
   in a sticky rail beside it. Below 992px the export already stacks the
   sidebar above the article, which is the right mobile order.
   The grid-area rules have to be written against the export's own #w-node ids,
   because those carry ID specificity and would otherwise win. */
@media screen and (min-width: 992px) {
  .content_component {
    grid-template-columns: minmax(0, 1fr) 17rem;
    grid-column-gap: 3rem;
  }

  .content_component > .content_header {
    grid-area: 1 / 1 / 2 / 3;
  }

  /* the contents rail */
  #w-node-_0f4066e3-c581-787f-a1e9-57b4e12df472-394b7bb6 {
    grid-area: 2 / 2 / 4 / 3;
    justify-self: stretch;
    width: 100%;
    margin-left: 0;
  }

  /* the article */
  #w-node-_0f4066e3-c581-787f-a1e9-57b4e12df482-394b7bb6 {
    grid-area: 2 / 1 / 3 / 2;
  }

  .content_component > .content_organizer {
    grid-area: 3 / 1 / 4 / 2;
  }
}

.content_sidebar .content_link-content {
  gap: 0.15rem;
}

/* The sidebar is sticky on desktop and moves above the article on mobile
   (the export's own breakpoint behaviour), so it stays short there. */
.content_sidebar .content_link {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.3;
  text-decoration: none;
  color: #2f3237;
  border-left: 0.125rem solid #e3e4e6;
}

.content_sidebar .content_link:hover {
  color: #bf202f;
  border-left-color: #bf202f;
}

.content_sidebar-heading {
  border-radius: 0.75rem;
}

/* ------------------------------------------------------------- card titles */

/* Card titles clamp at two lines, which cut the middle out of the titles that
   are doing the SEO work ("How Much Does Youth Basketball Cost in Regina?").
   Three lines on the blog grids only — the class is used elsewhere too. */
.blog_list .text-style-2lines,
.blog_featured-list .text-style-2lines,
.blog_main-list .text-style-2lines {
  -webkit-line-clamp: 3;
}

/* -------------------------------------------------------------- meta rows */

/* With the author photo gone from the cards, the date/read-time pair is the
   whole meta row: keep it on one line and quiet. */
.person-wrapper .person_text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}

.person-wrapper .person_text .text-weight-semibold {
  font-size: 0.875rem;
  font-weight: 500;
  color: #55585d;
}

/* .blog_date-wrapper stays hidden by chrome-overrides.css (no published dates
   on this blog) — the read time lives in the line above it. */

/* ---------------------------------------------------- read-this-first strip */

/* The link back from a selling page into the guide that explains it (see
   _lib/blog/related-reading.ts). Three cards, black type on white, red only on
   the call to action — the same restraint as the rest of the site. */

.hl-read-head {
  margin-bottom: 2rem;
  max-width: 40rem;
}

.hl-read-head .text-style-tagline {
  margin-bottom: 0.5rem;
}

.hl-read-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

a.hl-read-card {
  display: block;
  border: 0.08rem solid #e3e4e6;
  border-radius: 1rem;
  padding: 1.5rem;
  text-decoration: none;
  color: #111111;
  background-color: #ffffff;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

a.hl-read-card:hover {
  border-color: #bf202f;
  transform: translateY(-0.125rem);
  box-shadow: 0 0.75rem 1.25rem #00000014;
}

.hl-read-title {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.hl-read-dek {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #55585d;
}

.hl-read-more {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #bf202f;
}

@media screen and (min-width: 768px) {
  .hl-read-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -------------------------------------------------------- category strip */

/* The row of category chips above the article grid on /blog, /regina/blog and
   each /blog/category/<slug> page. Black and white, red only for the one you
   are on. */

.hl-cat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

a.hl-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 0.08rem solid #d7d9db;
  border-radius: 100px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  color: #111111;
  text-decoration: none;
  background-color: #ffffff;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

a.hl-cat-chip:hover {
  border-color: #bf202f;
  color: #bf202f;
}

a.hl-cat-chip.is-active {
  background-color: #bf202f;
  border-color: #bf202f;
  color: #ffffff;
}

.hl-cat-count {
  font-size: 0.8125rem;
  font-weight: 600;
  opacity: 0.6;
}

/* The chip at the top of a post is a link to its category page. The pill is
   24px tall, which is under the 44px tap floor, so it grows an invisible hit
   area rather than padding (padding would push the whole header down).
   Measured by npm run audit:mobile. */
a.hl-tag-link {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

a.hl-tag-link:after {
  content: "";
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: 0;
  right: 0;
}

/* The byline names the company, and links to the people behind it. */
a.hl-byline-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 0.06rem solid #c9ccd0;
}

a.hl-byline-link:hover {
  color: #bf202f;
  border-bottom-color: #bf202f;
}