/* Site chrome layout fixes: the navbar dropdowns and the footer link columns.
 *
 * Loaded LAST, after the Webflow export and mobile-overrides.css. Never edit the exported
 * stylesheets — corrections live here so a Webflow re-export cannot undo them.
 *
 * Andrew, 2026-07-30: "on the menu bar, when you hover over things, the spacing's kinda messed up
 * ... 'basketball sessions' is four lines versus 3x3, which is three lines. Everything should be
 * the same" and "the footer on the bottom, all of the spacing is messed up".
 */

/* ---------------------------------------------------------------------------
 * Navbar dropdowns (desktop only — under 992px Webflow collapses the nav into
 * the hamburger menu, which stacks and is already even).
 *
 * The export gives the link grid half the dropdown (1fr 1fr against the promo
 * card), which left 187px columns. Minus the 2rem icon and its gap, the text
 * had ~143px, so titles wrapped: "Basketball Sessions" ran two lines and its
 * item became four lines tall while "3x3 Sessions" was three, and the rows sat
 * at different heights. Widening the link half lets every title sit on one
 * line, and equal auto rows make every item the same height whatever its
 * description does.
 * ------------------------------------------------------------------------ */
@media screen and (min-width: 992px) {
  .nav_dropdown-content {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: stretch;
    grid-column-gap: 2.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
  }
  /* Two columns, not three. Three left an empty cell on every menu (Leagues
     showed one item alone on its own row) and stretched the rows apart, which
     is the "so much space" Andrew called out on 2026-07-30. Two columns fill
     evenly, put every title on one line, and let each item read as a real menu
     row with its own hover. */
  .nav_dropdown-link-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: unset;
    /* Natural row heights, centred against the promo card. 1fr rows stretched
       a four-item menu across the card's full height and left a canyon between
       the two rows. */
    grid-auto-rows: max-content;
    grid-row-gap: 0.4rem;
    grid-column-gap: 1rem;
    align-items: stretch;
    align-content: center;
    align-self: center;
  }
  .nav_dropdown-link {
    align-items: center;
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    transition: background-color 0.2s, color 0.2s;
  }
  .nav_dropdown-link:hover {
    background-color: var(--base-color-neutral--offwhite, #f4f4f4);
  }
  /* Titles stay on one line; the description carries the detail. */
  .nav_dropdown-link .nav_heading {
    white-space: nowrap;
  }
  .nav_dropdown-link .nav_item-text {
    justify-content: center;
    min-width: 0;
  }
  .nav_dropdown-link .nav_item-text p {
    margin-top: 0.1rem;
    line-height: 1.3;
  }
}

/* ---------------------------------------------------------------------------
 * The promo card inside a dropdown (.nav_cta on Leagues/Camps, .start_component
 * on Sessions). Andrew, 2026-07-30: "look how shitty this looks ... you need to
 * make this perfect."
 *
 * The export splits the card into two equal columns, text against photo. Inside
 * a dropdown that leaves the text roughly 200px wide, so "The HoopLife Fall
 * League is Here!" broke over five lines and the last line of the paragraph ran
 * out of the bottom of the card. The photo, locked to a 1:1 box, was cropped
 * through the players' heads.
 *
 * One column instead: the text sits over the card at a readable measure, the
 * photo is pinned to the bottom-right corner and scaled to fit whatever height
 * the card ends up at. The card stretches to the link column's height, so the
 * two halves of the dropdown always end level.
 * ------------------------------------------------------------------------ */
@media screen and (min-width: 992px) {
  .nav_cta,
  .start_organizer {
    display: block;
    min-height: 13rem;
    height: 100%;
    padding: 1.6rem 1.75rem;
    position: relative;
    overflow: hidden;
  }
  .start_component {
    display: block;
    height: 100%;
  }
  .nav_cta-content,
  .start_organizer .links_item-content-left {
    position: relative;
    z-index: 2;
    width: 58%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }
  .nav_cta-content .heading-style-h5,
  .start_heading {
    font-size: 1.3rem;
    line-height: 1.15;
  }
  .nav_cta-content p,
  .start_organizer .links_item-content-left > div:not([class]) {
    font-size: 0.86rem;
    line-height: 1.4;
  }
  /* The photo: on the right, optically centred, never cropped, never over the
     text. Andrew, 2026-08-01: pinned to the bottom-right corner it read as
     dropped out of the card - the wordmark kissed the border while a band of
     empty red sat above it. The wrapper is inset from all three edges and the
     art is centred inside it, so the gap above and below the graphic matches. */
  .nav_cta-image-wrapper,
  .nav_cta-image-wrapper.is-free,
  .start_image-wrapper {
    position: absolute;
    right: 0.9rem;
    bottom: 0.9rem;
    top: 0.9rem;
    width: 46%;
    height: auto;
    min-height: 0;
    margin-top: 0;
    aspect-ratio: auto;
    z-index: 1;
    pointer-events: none;
  }
  .nav_cta-image-wrapper img,
  .start_image-wrapper img,
  .start_image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 100% 50%;
  }
}

/* Laptops. The card is narrower here, so the split moves in two steps rather
   than one: 1080-1199px keeps the photo but gives the card more of the
   dropdown and drops the type a notch; under 1080px the photo comes off
   entirely rather than shrinking to a postage stamp, and the copy takes the
   whole card (the card's own background graphic carries the look). */
@media screen and (min-width: 1080px) and (max-width: 1199px) {
  .nav_dropdown-content {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-column-gap: 2rem;
  }
  .nav_cta,
  .start_organizer {
    padding: 1.4rem 1.5rem;
  }
  .nav_cta-content,
  .start_organizer .links_item-content-left {
    width: 60%;
  }
  .nav_cta-content .heading-style-h5,
  .start_heading {
    font-size: 1.15rem;
  }
  .nav_cta-content p,
  .start_organizer .links_item-content-left > div:not([class]) {
    font-size: 0.82rem;
  }
  .nav_cta-image-wrapper,
  .nav_cta-image-wrapper.is-free,
  .start_image-wrapper {
    width: 40%;
  }
}

@media screen and (min-width: 992px) and (max-width: 1079px) {
  .nav_cta,
  .start_organizer {
    padding: 1.35rem 1.4rem;
  }
  .nav_cta-content,
  .start_organizer .links_item-content-left {
    width: 100%;
  }
  .nav_cta-content .heading-style-h5,
  .start_heading {
    font-size: 1.15rem;
  }
  .nav_cta-content p,
  .start_organizer .links_item-content-left > div:not([class]) {
    font-size: 0.82rem;
  }
  .nav_cta-image-wrapper,
  .nav_cta-image-wrapper.is-free,
  .start_image-wrapper {
    display: none;
  }
}

/* A wrapped label inside a pill button always reads as broken. */
@media screen and (min-width: 992px) {
  .nav_cta .button,
  .start_organizer .button {
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------------
 * The hamburger menu (under 992px). Andrew, 2026-07-30, looking at the open
 * Sessions menu on a phone: "on mobile, this looks terrible, so bad ... it's so
 * big and not designed properly."
 *
 * Two things were wrong. The link grid kept its DESKTOP three columns (two
 * under 480px), so every title wrapped - "Basketball Sessions" over two lines
 * next to a 2rem icon in a 120px cell. And the Sessions menu's promo card is a
 * .start_component, not the .nav_cta the export hides on mobile, so a 500px
 * red panel sat in the middle of the menu and pushed Leagues and Camps off the
 * screen entirely.
 *
 * On a phone the menu is for getting somewhere: one full-width row per link,
 * title on one line, and no promo panel in the way (exactly what Webflow
 * already does with the other two menus' cards).
 * ------------------------------------------------------------------------ */
@media screen and (max-width: 991px) {
  .nav_dropdown-link-list {
    grid-template-columns: 1fr;
    grid-row-gap: 0.25rem;
  }
  .nav_dropdown-link {
    align-items: center;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
  .nav_dropdown-link .nav_heading {
    white-space: nowrap;
  }
  .nav_dropdown-content > .start_component {
    display: none;
  }
  /* Every top-level row reads the same: left aligned on the same margin as the
     dropdown toggles. The export centred Memberships and Get Started, which
     made the stack look accidental. */
  .navbar_menu .navbar_link,
  .navbar_menu-right .button.is-link {
    justify-content: flex-start;
    text-align: left;
    padding: 0.5rem 0.75rem;
    width: 100%;
  }
  .navbar_menu-right {
    align-items: stretch;
  }
}

/* Tablets have the width for two columns; phones do not. */
@media screen and (min-width: 600px) and (max-width: 991px) {
  .nav_dropdown-link-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* The three dropdown promo cards are the same component now (the converter
 * rebuilds the Sessions one), so the last difference is height: each card grew
 * to its own copy. One fixed height on the desktop menu makes all three
 * identical (Andrew, 2026-07-31: "make sure all of these are exactly the same
 * size"). Left alone below 992px, where the menu is a stacked drawer. */
@media screen and (min-width: 992px) {
  .nav_cta {
    height: 15.75rem;
    min-height: 0;
  }
}
/* The Get Started graphic is a composite that reads as broken when it is
 * cropped to fill; the league and camp cards are full-bleed art and are not. */
.nav_cta-image-wrapper.is-get-started img {
  object-fit: contain;
  object-position: right center;
}

/* ---------------------------------------------------------------------------
 * THE FOOTER (Andrew, 2026-07-30, after two failed passes: "make sure the
 * footer is exactly the same across all pages. Everything should be perfectly
 * spaced out").
 *
 * The markup is now authored by the converter (installCanonicalFooter), so
 * these rules describe one known structure rather than papering over whatever
 * Webflow shipped. Three bands, each on its own baseline grid:
 *
 *   .footer_brand-row     brand + contact + socials | newsletter
 *   .footer_menu-wrapper  four .footer_menu-column stacks holding the seven
 *                         link groups
 *   .footer_bottom-wrapper  copyright | John 3:16 + Privacy Policy
 *
 * Earlier attempts failed because seven groups were flowed into a 4-wide grid
 * (a canyon of white space under the short columns) and then into CSS
 * multi-column (balanced by height, so every group started at its own y).
 * Pairing the groups into four fixed stacks removes both failure modes: the
 * stacks come out 9 / 11 / 10 / 11 rows tall, all starting on one line.
 * smoke-marketing.ts fails the run if the stacks ever go out of line.
 * ------------------------------------------------------------------------ */

/* Even vertical rhythm inside every group, on every breakpoint. */
.section_footer .footer_link-column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0;
}
.section_footer .footer_link-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  align-items: flex-start;
}
.section_footer .footer_heading {
  margin: 0;
}
.section_footer .footer_container {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  align-items: flex-start;
}
.section_footer .footer_left-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.section_footer .footer_logo {
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 285;
}
.section_footer .footer_newsletter {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.section_footer .newsletter_form-block {
  max-width: 30rem;
  margin-bottom: 0;
  width: 100%;
}
.section_footer .newsletter_form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.section_footer .newsletter_form .is-wide {
  grid-column: 1 / -1;
}

/* Band 1: brand and newsletter side by side once there is room for both. */
.footer_brand-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

/* Band 2: the four stacks. Two columns on a phone (one column ran the footer
 * past 3000px of scrolling), all four from tablet up. */
.footer_menu-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: 2rem;
  row-gap: 2.5rem;
  margin-top: 3.5rem;
}
.footer_menu-column {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Band 3: one line, copyright left, the rest right. */
.section_footer .line-divider {
  margin-top: 3.5rem;
}
/* flex-direction is set explicitly: the exported CSS flips this row to
 * column-reverse under 992px, which put the fine print above the copyright. */
.section_footer .footer_bottom-wrapper {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 1.5rem;
}
.section_footer .footer_disclosure-wrapper {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.section_footer .footer_disclosure-text {
  margin: 0;
}

/* Below 992px mobile-overrides.css grows every .footer_link to a 44px tap
 * target with padding, which already supplies the rhythm — stacking a gap on
 * top of it would double the spacing. */
@media screen and (max-width: 991px) {
  .section_footer .footer_link-list,
  .section_footer .footer_container {
    gap: 0;
  }
}

@media screen and (min-width: 768px) {
  .footer_brand-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: stretch;
  }
  /* The brand side is a tall stack (logo, tagline, contact, socials) and the
     signup is short, which left the whole bottom-right corner empty (Andrew,
     2026-07-31: "there's all that white space"). The signup is a card: it
     fills the band's height and centres its own content, so the two sides
     finish level and the space reads as the card, not as a hole. From 768px,
     which is where the band becomes two columns — scoped to 992px it left the
     same hole on a tablet. */
  .section_footer .footer_newsletter {
    justify-content: center;
    background: #f7f7f7;
    border: 0.0875rem solid var(--base-color-neutral--neutral-lightest);
    border-radius: 0.9rem;
    padding: 1.75rem;
  }
  .footer_menu-wrapper {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 4rem;
  }
  .section_footer .line-divider {
    margin-top: 4rem;
  }
}

@media screen and (min-width: 992px) {
  .footer_brand-row {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 4rem;
    align-items: stretch;
  }
  /* The signup fills its half of the band; a narrower cap left a hole in the
     top-right corner of the footer. */
  .section_footer .newsletter_form-block {
    max-width: none;
  }
  /* Tighter link rows on desktop (Andrew, 2026-07-31: "the footer needs to be
     more compact"). Untouched below 992px, where every link has to stay a
     44px tap target. */
  .section_footer .footer_link {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .section_footer .footer_link-list {
    gap: 0.25rem;
  }
  .section_footer .footer_container {
    gap: 0.25rem;
  }
  .footer_menu-column {
    gap: 2rem;
  }
  .footer_menu-wrapper,
  .section_footer .line-divider {
    margin-top: 3rem;
  }
}

/* ---------------------------------------------------------------------------
 * COMMUNITY SIGNUP (the three travel pages, 2026-07-31). It used to be a
 * second red band with the fields squeezed into the right-hand corner of the
 * card. It is its own light section now: centred copy, one white card, a real
 * full-width button. Same rhythm as every other signup on the site.
 * ------------------------------------------------------------------------ */
.section_community-signup {
  background: #f7f7f7;
  padding: 4rem 0;
}
.community-signup {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}
.community-signup_copy h2 {
  margin: 0 0 0.75rem;
}
.community-signup_copy p {
  margin: 0 auto 1.75rem;
  max-width: 34em;
  color: #555;
}
.community-signup_form {
  background: #fff;
  border: 0.0875rem solid #e6e6e6;
  border-radius: 1.1rem;
  box-shadow: 0 1rem 2rem -0.05rem rgba(0, 0, 0, 0.06);
  padding: 1.75rem;
  margin: 0;
}
.community-signup_fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.community-signup_fields .is-wide,
.community-signup_fields .button {
  grid-column: 1 / -1;
}
.community-signup_fields .form_input {
  margin-bottom: 0;
  min-height: 3rem;
  font-size: 1rem;
}
.community-signup_fields .button {
  width: 100%;
  min-height: 3rem;
}
.community-signup_fine {
  font-size: 0.82rem;
  color: #666;
  margin-top: 0.9rem;
}
@media screen and (max-width: 40rem) {
  .community-signup_fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .community-signup_form {
    padding: 1.25rem 1.1rem;
  }
}

/* ---------------------------------------------------------------------------
 * THE CLINICS OFFER CARD (travel pages). Andrew, 2026-07-31: "look at the
 * spacing on this. It looks terrible." The checklist rows sat on top of each
 * other, the button was jammed against the last one, and the copy hugged the
 * top of a card that is as tall as its photograph.
 * ------------------------------------------------------------------------ */
.offer_card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
}
.offer_card-content .text-rich-checklist-white {
  margin-top: 0.75rem;
}
.offer_card-content .text-rich-checklist-white li,
.offer_card-content .text-rich-checklist-white p {
  margin-bottom: 0.7rem;
  line-height: 1.4;
}
.offer_card-content .text-rich-checklist-white li:last-child,
.offer_card-content .text-rich-checklist-white p:last-child {
  margin-bottom: 0;
}
.offer_card-content .margin-top.margin-xsmalls {
  margin-top: 1.75rem;
}

/* --------------------------------------------------------------------------
 * BLOG POSTS SHOW NO PUBLISHED DATE (Andrew, 2026-08-01: "maybe remove the
 * dates that we write... because we don't write often. I plan to come back and
 * do some more writing on it").
 *
 * The cards were stamped "April 28, 2025" — over a year old — on the blog
 * listings and at the top of every post, which makes a perfectly good article
 * read as abandoned. Hidden rather than deleted for two reasons: the CMS
 * fillers in _lib/cms.ts are POSITIONAL, so removing the slot would fail the
 * build on a slot-count mismatch; and the date still ships inside the
 * BlogPosting JSON-LD, where Google wants it and no visitor sees it.
 *
 * To bring dates back, delete this block.
 * ------------------------------------------------------------------------ */
.blog_date-wrapper {
  display: none;
}

/* --------------------------------------------------------------------------
 * DESIGN AUDIT FIXES (npm run audit:design, 2026-08-01)
 *
 * Andrew: "you need to look through this whole site and make sure that you're
 * not having any design flaws. That's very important to me."
 *
 * 1. SQUASHED ICONS. The export's icon-1x1-* classes force a square box, but
 *    several of the SVGs behind them are not square: the Skills and Confidence
 *    icons on Get Started are 64x99 shown at 48x48 (a 1.55x distortion), and
 *    the "+" on every Company Bios card is a 1080x1080 square shown at 14x24.
 *    object-fit: contain letterboxes instead of stretching.
 * 2. HALF-HEIGHT STAR ROWS. .stars-logo sets width and no height on a flex
 *    img, so some testimonial star rows on the travel pages render at 25px
 *    tall and their neighbours at 17px, in the same list.
 * 3. ORPHANED WORDS IN HEADINGS. Andrew, same message: "you have the title in
 *    two different lines... you can't be doing design areas like that."
 *    landing.css balances the hand-built pages; this covers the 30-odd
 *    converted ones too.
 * ------------------------------------------------------------------------ */
img.icon-1x1-xsmall,
img.icon-1x1-small,
img.icon-1x1-medium,
img.icon-1x1-large,
img.icon-1x1-xlarge {
  object-fit: contain;
}

img.stars-logo {
  height: auto;
  align-self: center;
}

h1,
h2,
h3,
h4,
.heading-style-h1,
.heading-style-h2,
.heading-style-h3,
.heading-style-h4,
.heading-style-h5,
.heading-style-h6 {
  text-wrap: balance;
}

/* ---------------------------------------------------------------------------
 * THE CLOSING RED BAND (Andrew, 2026-08-01: "look at the placement of this.
 * How shitty this looks ... it's in a shitty placement").
 *
 * The export gives .padding_cta `margin-bottom: -32px` and no vertical padding
 * at all, so the card is pulled DOWN into the footer — the footer's top border
 * runs straight through it — and it also touches whatever section sits above.
 * The band gets real air on both sides instead, on every page that has one.
 * ------------------------------------------------------------------------ */
.section_cta .padding_cta {
  margin-bottom: 0;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
/* The fine-print line under the card belongs to the band, not to the footer. */
.section_cta .padding_cta .lp-cta-extra {
  margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
  .section_cta .padding_cta {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ---------------------------------------------------------------------------
 * THE SCHEDULE BUTTON (Andrew, 2026-08-01: "I wonder if we have one button,
 * maybe a third button up there, that says Schedule, and then that leads to the
 * session schedule page").
 *
 * In the top strip it is NOT a button (Andrew, 2026-08-01: "the schedule button
 * you have at the very top is way too much ... I like the little schedule icon
 * you have, but it should just be in the same font, color, everything as the
 * phone number"). It carries no styling of its own at all up there: the
 * converter gives it the same navbar_link is-icon classes the phone number
 * uses, so it inherits that type, colour, padding and red icon exactly.
 *
 * Below 992px Webflow hides that whole strip, so the same link is repeated in
 * the mobile bar beside Register (see the converter's CHROME_MOBILE_EDITS),
 * where it does need to read as a button.
 * ------------------------------------------------------------------------ */

/* Both buttons in the mobile bar clear the 44px tap floor (npm run audit:mobile
   measured them at 43). */
.button.is-nav-mobile {
  min-height: 44px;
}

/* Webflow paints the link for the page you are on in red. The phone number
   beside it is never red, and "the same colour as the phone number" is the
   whole instruction, so the Schedule link keeps its normal colour even on the
   schedule page. */
.navbar_link.is-schedule.w--current {
  color: var(--link-color--link-primary);
}

/* The mobile copy sits beside Register, so it is the quieter of the two. */
.button.is-nav-mobile.is-schedule {
  border-color: var(--base-color-brand--primary, #bf202f);
  background-color: #0000;
  color: var(--base-color-brand--primary, #bf202f);
  margin-right: 0.4rem;
  white-space: nowrap;
}
.button.is-nav-mobile.is-schedule:hover {
  background-color: var(--base-color-brand--primary, #bf202f);
  color: #fff;
}
@media screen and (max-width: 26.25rem) {
  /* Small phones: the logo, both buttons and the hamburger have to share one
     row, so the two buttons tighten rather than wrap. */
  .button.is-nav-mobile {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
    font-size: 0.9rem;
  }
  .button.is-nav-mobile.is-schedule {
    margin-right: 0.25rem;
  }
}

/* --------------------------------------------------------------------------
 * THE NATIONAL FOOTER'S RIGHT-HAND SIDE (Andrew, 2026-08-01: "you have a huge
 * white space").
 *
 * The travel pages take the slim footer with no menu columns, and their Regina
 * newsletter is deliberately removed, which left the brand row with one child
 * and most of the footer empty. The Community Updates block fills it. These
 * rules only apply where that block exists, so every other footer is untouched.
 * ------------------------------------------------------------------------ */
.footer_travel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer_travel-copy {
  margin: 0;
  max-width: 34rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #666;
}
.footer_travel .newsletter_form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.footer_travel .newsletter_form .is-wide,
.footer_travel .newsletter_form input[type="submit"],
.footer_travel .newsletter_form .text-size-tiny {
  grid-column: 1 / -1;
}
/* 16px floor: below it iOS zooms the page the moment a field is focused. */
.footer_travel .form_input {
  width: 100%;
  font-size: 16px;
  min-height: 2.75rem;
}
.footer_travel .w-button {
  min-height: 2.75rem;
}
.footer_travel-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 0.35rem;
}
.footer_travel-links a {
  position: relative;
  font-size: 0.92rem;
  color: #333;
  text-decoration: none;
  /* Invisible growth to a 44px hit area without moving the text. */
  padding: 0.7rem 0;
}
.footer_travel-links a:hover {
  color: #bf202f;
  text-decoration: underline;
}
@media (max-width: 47.9375rem) {
  .footer_travel .newsletter_form {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
 * THE TRAVEL-CLINIC ENTRY IN THE CAMPS MENU (Andrew, 2026-08-01: "it's got to
 * look a little bit different than the other ones ... It's clearly kind of not
 * a Regina service, but when people click Camps, it's Bring HoopLife to You").
 *
 * Every other entry in that panel is a Regina camp with a wordmark tile. This
 * one carries no tile at all, sits behind a red rule and leads with an eyebrow,
 * so it reads as a different kind of thing without leaving the menu.
 * ------------------------------------------------------------------------ */
.nav_dropdown-link.is-travel {
  border-left: 0.1875rem solid var(--base-color-brand--primary, #bf202f);
  background-color: #fbf3f4;
  border-radius: 0.5rem;
}
.nav_dropdown-link.is-travel:hover {
  background-color: #f7e7e9;
}
.nav_travel-eyebrow {
  color: var(--base-color-brand--primary, #bf202f);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}

/* Review slides sat at three different heights in the same row because each
   card sized itself to its own quote. Equal height, ragged text (2026-08-01). */
.swiper-wrapper:has(.swiper-slide.is-tesimonial) {
  align-items: stretch;
}
.swiper-slide.is-tesimonial {
  height: auto;
}
.swiper-slide.is-tesimonial .testimonial_card,
.swiper-slide.is-tesimonial .testimonial_card-content {
  height: 100%;
}

/* Stand-in avatar for a review whose author has no portrait we are allowed to
   use. Their initial, in brand red -- obviously a placeholder rather than a
   photograph of somebody who is not them. */
.hl-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 3rem;
  min-height: 3rem;
  border-radius: 100px;
  background: #bf202f;
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
}

/* ===========================================================================
   THE SESSION PACK PRICE (2026-08-02)

   On /regina/sessions/buy-sessions the price card lays "$650 / 20 SESSION
   CREDITS" in white straight over a photo of a gym full of kids. The top of the
   numerals sits on a bright white wall with the painted hooplife logo showing
   through them, so the single number a buyer is on that page to read is the
   hardest thing on it to read.

   A scrim between the photo behind and the words in front. The photo still
   reads; the price now wins.
   =========================================================================== */
.pack_content-left::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.6) 55%,
    rgba(0, 0, 0, 0.75) 100%
  );
  pointer-events: none;
}
/* .z-index-1 in the export is exactly that, which would leave the copy level
   with the scrim. It goes one above. */
.pack_content-left .z-index-1 {
  z-index: 2;
}