/**
 * FILE: public/styles/clubs/calgary-blizzard.css
 *
 * PremiumSportProfiles — CALGARY BLIZZARD PUBLIC CLUB SKIN
 *
 * PURPOSE
 * -------
 * Club-specific presentation layer for Calgary Blizzard public club pages.
 *
 * STYLE MODEL
 * -----------
 * Shared club layout contracts live in:
 *
 *   app/styles/features/club-public.css
 *   app/styles/features/club-teams-directory.css
 *   app/styles/features/club-team-page.css
 *   app/styles/features/club-context-profile.css
 *
 * This file only layers Calgary Blizzard-specific treatment on top.
 *
 * SCALING RULE
 * ------------
 * This is the pattern for future clubs:
 *
 *   public/styles/clubs/calgary-blizzard.css
 *   public/styles/clubs/foothills.css
 *   public/styles/clubs/<next-club>.css
 *
 * Shared CSS owns structure and mobile safety.
 * This club skin owns visual identity.
 *
 * THIS FILE MAY OWN:
 * - Blizzard colors
 * - Blizzard typography for club site, team, and sales surfaces
 * - Blizzard card mood
 * - Blizzard background treatments
 * - Blizzard-specific visual polish
 * - Club-context player profile colors, sponsor treatment, and accents
 * - Club-context player profile typography when matching club fonts are loaded
 *
 * THIS FILE SHOULD NOT OWN:
 * - generic mobile fixes
 * - generic grid safety
 * - generic overflow fixes
 * - generic roster layout rules
 * - fixes needed by every club
 * - shared club-context player profile typography fallbacks
 */

/* ==========================================================================
   CALGARY BLIZZARD — SHARED SKIN TOKENS
   ========================================================================== */

.clubPublicHeader,
.clubRecruitingPage,
.clubTeamsDirectoryPage,
.clubTeamPage,
.clubContextProfilePage--calgary-blizzard {
  --blizzard-heading-font:
    var(--font-club-space-grotesk), "Space Grotesk", "Raleway", Arial,
    sans-serif;
  --blizzard-body-font: var(--font-club-raleway), "Raleway", Arial, sans-serif;

  color: var(--club-public-black, #050505);
  font-family: var(--blizzard-body-font);
}

.clubPublicHeader {
  --club-sales-module-accent: var(
    --club-public-menu-font,
    var(--club-public-white, #ffffff)
  );
  --club-sales-module-accent-hover: var(
    --club-public-control-accent,
    var(--club-public-white, #ffffff)
  );
  --club-sales-module-active-line: var(
    --club-public-menu-underline,
    var(--club-public-white, #ffffff)
  );
  --blizzard-menu-dropdown-bg: var(
    --club-public-dropdown-surface,
    rgba(5, 5, 5, 0.86)
  );
  --blizzard-menu-dropdown-text: var(
    --club-public-dropdown-text,
    var(--club-public-white, #ffffff)
  );
  --blizzard-menu-dropdown-divider: color-mix(
    in srgb,
    var(--blizzard-menu-dropdown-text) 42%,
    transparent
  );
  --blizzard-site-max-width: 2000px;
  --blizzard-site-gutter: 4vw;
  --blizzard-header-logo-height: 120px;
  --blizzard-header-vertical-padding: 2vw;
  --blizzard-mobile-header-logo-height: 70px;
  --blizzard-mobile-header-vertical-padding: 6vw;
  --blizzard-menu-font: var(--blizzard-body-font);
  --blizzard-nav-gap: 2vw;
  --blizzard-nav-font-size-value: 1.2;
  --blizzard-nav-font-size: 1.2rem;
  --blizzard-nav-font-weight: 500;
  --blizzard-nav-letter-spacing: 0.01em;
  --blizzard-nav-line-height: 1.5em;

  font-family: var(--blizzard-heading-font);
}

.clubPublicHeader--brand-bar .clubPublicAnnouncement {
  display: none;
}

.clubPublicHeader--brand-bar .clubPublicNavShell {
  background: var(--club-public-nav-bg, var(--club-public-orange, #e8750d));
}

.clubPublicHeader--brand-bar .clubPublicNavInner {
  align-items: center;
  column-gap: clamp(1rem, 2.4vw, 2.6rem);
  margin: 0 auto;
  max-width: var(--blizzard-site-max-width);
  min-height: calc(
    var(--blizzard-header-logo-height) +
      (var(--blizzard-header-vertical-padding) * 2)
  );
  padding: var(--blizzard-header-vertical-padding) var(--blizzard-site-gutter);
  width: 100%;
}

.clubPublicHeader--brand-bar .clubPublicDesktopNav {
  flex: 0 1 auto;
  gap: 0;
  min-width: 0;
}

.clubPublicHeader--brand-bar .clubPublicLogoLink {
  flex: 0 0 auto;
}

.clubPublicHeader--brand-bar .clubPublicLogoLink img {
  height: var(--blizzard-header-logo-height);
}

/* Match the Calgary Blizzard website menu typography, not PSP module nav. */
.clubPublicHeader--brand-bar .clubPublicDesktopNav a,
.clubPublicHeader--brand-bar .clubPublicMobileToggle,
.clubPublicHeader--brand-bar .clubPublicMobilePanel > a,
.clubPublicHeader--brand-bar .clubPublicMobileRecruitingTop > a {
  font-family: var(--blizzard-menu-font);
}

.clubPublicHeader--brand-bar .clubPublicDesktopNav a {
  color: var(--club-public-menu-font, var(--club-public-white, #ffffff));
  font-size: var(--blizzard-nav-font-size);
  font-weight: var(--blizzard-nav-font-weight);
  letter-spacing: var(--blizzard-nav-letter-spacing);
  line-height: var(--blizzard-nav-line-height);
  margin-left: calc(var(--blizzard-nav-gap) / 2);
  margin-right: calc(var(--blizzard-nav-gap) / 2);
  text-transform: none;
}

.clubPublicHeader--brand-bar .clubPublicDesktopNav a:hover,
.clubPublicHeader--brand-bar .clubPublicDesktopNav a.is-active {
  color: var(
    --club-public-control-accent,
    var(--club-public-menu-font, var(--club-public-white, #ffffff))
  );
}

@media screen and (min-width: 768px), screen and (orientation: landscape) {
  .clubPublicHeader--brand-bar .clubPublicDesktopNav a {
    font-size: min(
      calc((var(--blizzard-nav-font-size-value) - 1) * 1.2vw + 1rem),
      max(
        calc(
          (var(--blizzard-nav-font-size-value) - 1) * 0.012 *
            var(--blizzard-site-max-width) + 1rem
        ),
        calc(var(--blizzard-nav-font-size-value) * 1rem)
      )
    );
  }
}

@media screen and (max-width: 767px) and (orientation: portrait) {
  .clubPublicHeader--brand-bar .clubPublicMobileToggle,
  .clubPublicHeader--brand-bar .clubPublicMobilePanel > a,
  .clubPublicHeader--brand-bar .clubPublicMobileRecruitingTop > a {
    font-size: calc(
      (var(--blizzard-nav-font-size-value) - 1) *
        calc(0.012 * min(100vh, 900px)) + 1rem
    );
    font-weight: var(--blizzard-nav-font-weight);
    letter-spacing: var(--blizzard-nav-letter-spacing);
    line-height: var(--blizzard-nav-line-height);
  }
}

.clubPublicHeader--brand-bar.clubPublicHeader--psp-module-nav
  .clubPublicDesktopNav
  .is-psp-module {
  color: var(--club-public-menu-font, var(--club-public-white, #ffffff));
  font-weight: var(--blizzard-nav-font-weight);
}

.clubPublicHeader--brand-bar.clubPublicHeader--psp-module-nav
  .clubPublicDesktopNav
  .is-psp-module:hover,
.clubPublicHeader--brand-bar.clubPublicHeader--psp-module-nav
  .clubPublicDesktopNav
  .is-psp-module.is-active {
  color: var(
    --club-public-control-accent,
    var(--club-public-menu-font, var(--club-public-white, #ffffff))
  );
  font-weight: var(--blizzard-nav-font-weight);
}

.clubPublicHeader--brand-bar .clubPublicDesktopNav a:hover::after,
.clubPublicHeader--brand-bar .clubPublicDesktopNav a.is-active::after,
.clubPublicHeader--brand-bar.clubPublicHeader--psp-module-nav
  .clubPublicDesktopNav
  .is-psp-module.is-active::after {
  background: var(--club-public-menu-underline, currentColor);
  bottom: -0.18em;
  display: block;
  height: 1px;
}

.clubPublicHeader--brand-bar .clubPublicNavDropdown {
  background: var(--blizzard-menu-dropdown-bg);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--blizzard-menu-dropdown-text);
  gap: 0;
  left: auto;
  max-width: none;
  min-width: 240px;
  padding: 0.5em 1em;
  right: -1em;
  text-align: right;
  top: 100%;
}

.clubPublicHeader--brand-bar .clubPublicDesktopNav .clubPublicNavDropdown a {
  border-radius: 0;
  color: var(--blizzard-menu-dropdown-text);
  display: flex;
  font-family: var(--blizzard-menu-font);
  font-size: var(--blizzard-nav-font-size);
  font-weight: 500;
  justify-content: flex-end;
  letter-spacing: var(--blizzard-nav-letter-spacing);
  line-height: 1.3;
  min-height: 0;
  padding: 0;
  text-align: right;
  white-space: nowrap;
}

.clubPublicHeader--brand-bar
  .clubPublicDesktopNav
  .clubPublicNavDropdown
  a:hover,
.clubPublicHeader--brand-bar
  .clubPublicDesktopNav
  .clubPublicNavDropdown
  a.is-active {
  background: transparent;
  color: var(--club-public-dropdown-accent, var(--blizzard-menu-dropdown-text));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.clubPublicHeader--brand-bar
  .clubPublicDesktopNav
  .clubPublicNavDropdown
  a::after {
  display: none;
}

.clubPublicHeader--brand-bar .clubPublicMegaPanel--site-dropdown {
  background: var(--blizzard-menu-dropdown-bg);
  border: 0;
  box-shadow: none;
  color: var(--blizzard-menu-dropdown-text);
  gap: 0;
  left: auto;
  min-width: 200px;
  padding: 0.5em 1em;
  right: -1em;
  text-align: right;
  top: 100%;
  transform: none;
  width: max-content;
}

.clubPublicHeader--brand-bar
  .clubPublicMegaPanel--site-dropdown
  .clubPublicMegaTeamList {
  gap: 0;
}

.clubPublicHeader--brand-bar
  .clubPublicMegaPanel--site-dropdown
  .clubPublicMegaFooter {
  display: none;
}

.clubPublicHeader--brand-bar
  .clubPublicMegaPanel--site-dropdown
  .clubPublicMegaTeamLink {
  color: var(--blizzard-menu-dropdown-text);
  display: flex;
  font-family: var(--blizzard-menu-font);
  font-size: var(--blizzard-nav-font-size);
  font-weight: 500;
  justify-content: flex-end;
  letter-spacing: var(--blizzard-nav-letter-spacing);
  line-height: 1.3;
  min-height: 0;
  padding: 0;
  text-align: right;
}

.clubPublicHeader--brand-bar
  .clubPublicMegaPanel--site-dropdown
  .clubPublicMegaTeamLink:hover {
  background: transparent;
  color: var(--club-public-dropdown-accent, var(--blizzard-menu-dropdown-text));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.clubPublicHeader--brand-bar
  .clubPublicMegaPanel--site-dropdown
  .clubPublicMegaTeamLink:hover::after {
  display: none;
}

.clubPublicHeader--brand-bar
  .clubPublicMegaPanel--site-dropdown
  .clubPublicMegaTeamLink:first-child {
  border-top: 0;
  padding-top: 0;
}

.clubPublicHeader--brand-bar
  .clubPublicMegaPanel--site-dropdown
  .clubPublicMegaTeamLink
  span {
  font-weight: inherit;
}

.clubContextProfilePage--calgary-blizzard {
  /* Club-context athlete profiles inherit the PSP global profile typography.
     This skin only supplies Calgary-specific colors and accents. */
  --club-context-primary: var(--club-public-orange);
  --club-context-secondary: var(--club-public-pale-blue);
  --club-context-text: var(--club-public-black);
  --club-context-surface: var(--club-public-white);
  --club-context-hero-text: var(--club-public-white);
  --club-context-page-max: var(--an-page-max);
  --club-context-page-background: var(--club-context-surface);
  --club-context-hero-background: var(--club-context-primary);
  --club-context-hero-avatar-border: 0;
  --club-context-breadcrumb-color: var(--club-context-secondary);
  --club-context-breadcrumb-hover-color: var(--club-context-secondary);
  --club-context-module-accent: var(
    --club-context-secondary,
    var(--club-context-primary)
  );
  --an-primary: var(--club-context-primary);
  --an-primary-contrast: var(--club-context-text);
  --an-module-accent: var(--club-context-module-accent);
  --an-accent: var(--club-context-primary);
  --an-btn-bg: var(--club-context-primary);
  --an-btn-border: var(--club-context-primary);
  --an-btn-hover-bg: color-mix(
    in srgb,
    var(--club-context-primary) 88%,
    var(--club-context-text)
  );
  --an-accent-soft: color-mix(
    in srgb,
    var(--club-context-module-accent) 10%,
    var(--club-context-surface)
  );
}

.an-sponsorPortal--club-calgary-blizzard {
  /*
   * Sponsor proposals use admin-controlled club branding as the source of
   * truth. This skin maps those admin values into the proposal token contract
   * so the proposal shell can look like Calgary Blizzard while still falling
   * back to PSP defaults when an admin value is missing.
   */
  --proposal-primary: var(--club-admin-primary, var(--an-primary));
  --proposal-secondary: var(
    --club-admin-accent,
    var(--club-admin-primary, var(--an-accent))
  );
  --proposal-accent: var(--proposal-secondary);
  --proposal-on-primary: var(--club-public-white, var(--an-primary-contrast));
}

.clubRecruitingPage h1,
.clubRecruitingPage h2,
.clubRecruitingPage h3,
.clubRecruitingPage h4,
.clubTeamsDirectoryPage h1,
.clubTeamsDirectoryPage h2,
.clubTeamsDirectoryPage h3,
.clubTeamsDirectoryPage h4,
.clubTeamPage h1,
.clubTeamPage h2,
.clubTeamPage h3,
.clubTeamPage h4,
.clubRecruitingPage .clubRecruitingEyebrow,
.clubTeamsDirectoryPage .clubRecruitingEyebrow,
.clubTeamPage .clubRecruitingEyebrow,
.clubRecruitingPage .clubRecruitingButton {
  font-family: var(--blizzard-heading-font);
}

.clubRecruitingPage p,
.clubRecruitingPage small,
.clubTeamsDirectoryPage p,
.clubTeamsDirectoryPage small,
.clubTeamPage p,
.clubTeamPage small {
  font-family: var(--blizzard-body-font);
}

/* ==========================================================================
   CALGARY BLIZZARD — TEAMS DIRECTORY SKIN
   ========================================================================== */

.clubTeamsDirectoryPage {
  background:
    radial-gradient(
      circle at top left,
      rgba(249, 115, 22, 0.08),
      transparent 28rem
    ),
    radial-gradient(
      circle at 92% 18%,
      rgba(219, 234, 242, 0.62),
      transparent 24rem
    ),
    linear-gradient(180deg, #ffffff 0%, #f5f7f8 48%, #eef3f5 100%);
}

.clubTeamsDirectoryGroup h1,
.clubTeamsDirectoryGroup h2 {
  color: rgba(5, 5, 5, 0.7);
  font-family: var(--blizzard-heading-font);
  font-weight: 700;
}

.clubTeamsDirectoryList {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(5, 5, 5, 0.075);
  box-shadow:
    0 1rem 2.8rem rgba(5, 5, 5, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.clubTeamsDirectoryTeamLink {
  background: #ffffff;
}

.clubTeamsDirectoryTeamLink:hover {
  background:
    linear-gradient(90deg, rgba(249, 115, 22, 0.08), rgba(219, 234, 242, 0.18)),
    #ffffff;
}

.clubTeamsDirectoryTeamText strong {
  font-family: var(--blizzard-heading-font);
  font-weight: 700;
}

.clubTeamsDirectoryTeamText small {
  font-family: var(--blizzard-body-font);
  font-weight: 500;
}

.clubTeamsDirectoryCta {
  font-family: var(--blizzard-heading-font);
  font-weight: 700;
}

/* ==========================================================================
   CALGARY BLIZZARD — TEAM PAGE SKIN
   ========================================================================== */

.clubTeamPage {
  background:
    radial-gradient(
      circle at top left,
      rgba(249, 115, 22, 0.08),
      transparent 28rem
    ),
    radial-gradient(
      circle at 92% 24%,
      rgba(219, 234, 242, 0.58),
      transparent 22rem
    ),
    linear-gradient(180deg, #ffffff 0%, #f5f7f8 48%, #eef3f5 100%);
}

.clubTeamSimpleBreadcrumbs {
  color: rgba(5, 5, 5, 0.58);
  font-family: var(--blizzard-heading-font);
  font-weight: 700;
}

.clubTeamSimpleBreadcrumbs a {
  color: var(--club-public-black, #050505);
}

.clubTeamSimpleBreadcrumbs a:hover {
  color: var(--club-public-orange, #f97316);
}

.clubTeamPhotoCard,
.clubTeamPhotoPlaceholder,
.clubTeamRoster,
.clubTeamSponsorSlot {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(5, 5, 5, 0.075);
  border-radius: 1.05rem;
  box-shadow:
    0 1rem 2.8rem rgba(5, 5, 5, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.clubTeamPhotoCard {
  background:
    linear-gradient(
      135deg,
      rgba(249, 115, 22, 0.07),
      rgba(219, 234, 242, 0.25)
    ),
    #ffffff;
}

.clubTeamRosterHeader h1,
.clubTeamRosterIdentity strong {
  color: var(--club-public-black, #050505);
  font-family: var(--blizzard-heading-font);
  font-weight: 700;
}

.clubTeamRosterHeader p,
.clubTeamRosterIdentity small {
  color: rgba(5, 5, 5, 0.56);
  font-weight: 500;
}

.clubTeamRosterNumber {
  background: var(--club-public-black, #050505);
  color: var(--club-public-white, #ffffff);
  font-family: var(--blizzard-heading-font);
  font-weight: 700;
}

.clubTeamRosterPlayerLink:hover {
  color: var(--club-public-orange, #f97316);
}

.clubTeamRosterCta {
  color: var(--club-public-orange, #f97316);
  font-family: var(--blizzard-heading-font);
  font-weight: 700;
}

.clubTeamSponsorSlotEmpty {
  border-color: rgba(249, 115, 22, 0.55);
  color: rgba(249, 115, 22, 0.76);
}

.clubTeamSponsorSlotEmpty span {
  font-family: var(--blizzard-heading-font);
  font-weight: 700;
}

/* ==========================================================================
   CALGARY BLIZZARD — CONTEXT PROFILE PAGE
   ========================================================================== */

.clubContextProfilePage--calgary-blizzard {
  background:
    radial-gradient(
      circle at top left,
      rgba(249, 115, 22, 0.08),
      transparent 28rem
    ),
    radial-gradient(
      circle at 92% 24%,
      rgba(219, 234, 242, 0.58),
      transparent 22rem
    ),
    linear-gradient(180deg, #ffffff 0%, #f5f7f8 48%, #eef3f5 100%);
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileHero {
  background:
    radial-gradient(
      circle at 73% 18%,
      rgba(255, 255, 255, 0.7),
      transparent 18rem
    ),
    radial-gradient(
      circle at 18% 88%,
      rgba(249, 115, 22, 0.14),
      transparent 16rem
    ),
    linear-gradient(
      115deg,
      var(--club-public-pale-blue, #dbeaf2) 0%,
      #d7e7ef 44%,
      #edf6fa 100%
    );
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileHero::before {
  background:
    radial-gradient(
      circle at 16% 22%,
      rgba(255, 255, 255, 0.42),
      transparent 10rem
    ),
    radial-gradient(
      circle at 72% 18%,
      rgba(255, 255, 255, 0.34),
      transparent 16rem
    ),
    radial-gradient(
      circle at 90% 84%,
      rgba(249, 115, 22, 0.1),
      transparent 13rem
    );
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileHeroInner {
  max-width: 1220px;
  padding-bottom: 1.7rem;
  padding-top: 1.1rem;
}

.clubContextProfilePage--calgary-blizzard .clubTeamBreadcrumbs {
  color: var(--club-context-breadcrumb-color);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 0.95rem;
}

.clubContextProfilePage--calgary-blizzard .clubTeamBreadcrumbs a {
  color: inherit;
}

.clubContextProfilePage--calgary-blizzard .clubTeamBreadcrumbs a:hover {
  color: var(--club-context-breadcrumb-hover-color);
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileHeroGrid {
  align-items: center;
  gap: clamp(1.15rem, 3vw, 2.4rem);
  grid-template-columns: minmax(0, 1fr) minmax(190px, 260px);
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileCopy {
  max-width: 860px;
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileCopy h1 {
  color: var(--club-public-black, #050505);
  font-size: clamp(2.75rem, 7.2vw, 5.95rem);
  font-weight: 500;
  letter-spacing: -0.085em;
  line-height: 0.84;
  max-width: 860px;
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileHeroMetrics {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(5, 5, 5, 0.12);
  border-radius: 1rem;
  box-shadow:
    0 1.1rem 2.8rem rgba(5, 5, 5, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 1.1rem;
  max-width: 880px;
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileHeroMetrics > div {
  border-right: 1px solid rgba(5, 5, 5, 0.1);
  padding: 0.72rem 0.78rem;
}

.clubContextProfilePage--calgary-blizzard
  .clubContextProfileHeroMetrics
  > div:last-child {
  border-right: 0;
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileHeroMetrics span {
  color: var(--club-public-black, #050505);
  font-size: clamp(0.92rem, 1.5vw, 1.12rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileHeroMetrics p {
  color: rgba(5, 5, 5, 0.58);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-top: 0.24rem;
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileMedia {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.72),
    rgba(255, 255, 255, 0.42)
  );
  border-color: rgba(255, 255, 255, 0.78);
  border-radius: 1.05rem;
  box-shadow: 0 1.5rem 3.2rem rgba(5, 5, 5, 0.16);
  justify-self: end;
  max-width: 250px;
  padding: 0.55rem;
  width: 100%;
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileMedia img {
  border: 3px solid rgba(255, 255, 255, 0.68);
  border-radius: 0.78rem;
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileMediaPlaceholder {
  border-radius: 0.78rem;
}

.clubContextProfilePage--calgary-blizzard
  .clubContextProfileMediaPlaceholder
  span {
  font-size: 4.6rem;
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileContent {
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr) 360px;
  max-width: 1220px;
  padding-bottom: 3rem;
  padding-top: 1.25rem;
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileVideoFull {
  grid-column: 1 / -1;
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileMain,
.clubContextProfilePage--calgary-blizzard .clubContextProfileSidebarStack {
  gap: 1.25rem;
}

/* ==========================================================================
   CALGARY BLIZZARD — CONTEXT PROFILE CARDS / MODULE HEADERS
   ========================================================================== */

.clubContextProfilePage--calgary-blizzard .clubContextProfileCard,
.clubContextProfilePage--calgary-blizzard .clubContextProfileMetrics {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(5, 5, 5, 0.075);
  border-radius: 1.05rem;
  box-shadow:
    0 1rem 2.8rem rgba(5, 5, 5, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileCard {
  padding: 1rem;
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileCard > p {
  color: rgba(5, 5, 5, 0.66);
  font-size: 0.94rem;
  line-height: 1.62;
}

.clubContextProfilePage--calgary-blizzard .clubContextModuleHeader {
  margin-bottom: 0.75rem;
}

.clubContextProfilePage--calgary-blizzard .clubContextModuleHeader h2 {
  color: var(--club-public-black, #050505);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.clubContextProfilePage--calgary-blizzard
  .clubContextModuleHeader
  p:last-child {
  color: rgba(5, 5, 5, 0.58);
  font-size: 0.86rem;
  line-height: 1.55;
  margin-top: 0.28rem;
  max-width: 680px;
}

.clubContextProfilePage--calgary-blizzard .clubContextModuleHeader > span {
  background: rgba(249, 115, 22, 0.1);
  border-color: rgba(249, 115, 22, 0.18);
  color: var(--club-public-orange, #f97316);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.clubContextProfilePage--calgary-blizzard .clubContextModuleEmpty {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(5, 5, 5, 0.03) 0,
      rgba(5, 5, 5, 0.03) 8px,
      rgba(5, 5, 5, 0.012) 8px,
      rgba(5, 5, 5, 0.012) 16px
    ),
    #ffffff;
  border: 1px dashed rgba(5, 5, 5, 0.16);
  border-radius: 0.85rem;
  color: rgba(5, 5, 5, 0.54);
  font-size: 0.88rem;
  font-weight: 500;
  margin: 0;
  padding: 1rem;
}

/* ==========================================================================
   CALGARY BLIZZARD — CONTEXT PROFILE METRICS
   ========================================================================== */

.clubContextProfilePage--calgary-blizzard .clubContextProfileMetrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileMetrics > div {
  padding: 0.92rem;
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileMetrics span {
  color: var(--club-public-black, #050505);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileMetrics p {
  color: rgba(5, 5, 5, 0.5);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
}

/* ==========================================================================
   CALGARY BLIZZARD — TABLES / LISTS
   ========================================================================== */

.clubContextProfilePage--calgary-blizzard .clubContextTable th {
  color: rgba(5, 5, 5, 0.48);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.clubContextProfilePage--calgary-blizzard .clubContextTable td {
  color: rgba(5, 5, 5, 0.78);
  font-size: 0.84rem;
  font-weight: 500;
}

.clubContextProfilePage--calgary-blizzard .clubContextListRow {
  background: #ffffff;
  border-color: rgba(5, 5, 5, 0.075);
  border-radius: 0.85rem;
}

.clubContextProfilePage--calgary-blizzard .clubContextListRow:hover {
  border-color: rgba(249, 115, 22, 0.32);
}

.clubContextProfilePage--calgary-blizzard .clubContextListRow strong {
  font-size: 0.86rem;
  font-weight: 700;
}

.clubContextProfilePage--calgary-blizzard .clubContextListRow small {
  color: rgba(5, 5, 5, 0.55);
  font-size: 0.72rem;
  font-weight: 500;
}

.clubContextProfilePage--calgary-blizzard .clubContextListRow > span {
  color: var(--club-public-orange, #f97316);
  font-size: 0.66rem;
  font-weight: 700;
}

/* ==========================================================================
   CALGARY BLIZZARD — SPONSOR
   ========================================================================== */

.clubContextProfilePage--calgary-blizzard
  .clubContextProfileSponsorPlaceholder {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(249, 115, 22, 0.048) 0,
      rgba(249, 115, 22, 0.048) 9px,
      rgba(5, 5, 5, 0.014) 9px,
      rgba(5, 5, 5, 0.014) 18px
    ),
    #ffffff;
  border-style: dashed;
}

.clubContextProfilePage--calgary-blizzard
  .clubContextProfileSponsorPlaceholder
  p {
  color: rgba(5, 5, 5, 0.54);
  font-size: 0.82rem;
  line-height: 1.55;
}

/* ==========================================================================
   CALGARY BLIZZARD — RESPONSIVE SKIN TUNING
   ========================================================================== */

@media (max-width: 767px) {
  .clubPublicHeader--brand-bar .clubPublicNavInner {
    min-height: calc(
      var(--blizzard-mobile-header-logo-height) +
        (var(--blizzard-mobile-header-vertical-padding) * 2)
    );
    padding: var(--blizzard-mobile-header-vertical-padding)
      var(--blizzard-site-gutter);
  }

  .clubPublicHeader--brand-bar .clubPublicLogoLink img {
    height: var(--blizzard-mobile-header-logo-height);
    width: auto;
  }
}

@media (max-width: 1100px) {
  .clubContextProfilePage--calgary-blizzard .clubContextProfileContent {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .clubContextProfilePage--calgary-blizzard .clubContextProfileHeroMetrics,
  .clubContextProfilePage--calgary-blizzard .clubContextProfileMetrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .clubContextProfilePage--calgary-blizzard
    .clubContextProfileHeroMetrics
    > div:nth-child(3n) {
    border-right: 0;
  }

  .clubContextProfilePage--calgary-blizzard
    .clubContextProfileHeroMetrics
    > div:nth-child(n + 4) {
    border-top: 1px solid rgba(5, 5, 5, 0.1);
  }
}

@media (max-width: 980px) {
  .clubContextProfilePage--calgary-blizzard .clubContextProfileHeroGrid,
  .clubContextProfilePage--calgary-blizzard .clubContextProfileContent {
    grid-template-columns: 1fr;
  }

  .clubContextProfilePage--calgary-blizzard .clubContextProfileMedia {
    justify-self: start;
    max-width: 220px;
  }

  .clubContextProfilePage--calgary-blizzard .clubContextProfileSidebarStack {
    order: 2;
  }
}

@media (max-width: 720px) {
  .clubContextProfilePage--calgary-blizzard .clubContextProfileHeroInner {
    padding: 1rem 1rem 1.45rem;
  }

  .clubContextProfilePage--calgary-blizzard .clubContextProfileCopy h1 {
    font-size: clamp(2.65rem, 17vw, 4.35rem);
  }

  .clubContextProfilePage--calgary-blizzard .clubContextProfileHeroMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clubContextProfilePage--calgary-blizzard
    .clubContextProfileHeroMetrics
    > div,
  .clubContextProfilePage--calgary-blizzard
    .clubContextProfileHeroMetrics
    > div:nth-child(3n) {
    border-right: 1px solid rgba(5, 5, 5, 0.1);
  }

  .clubContextProfilePage--calgary-blizzard
    .clubContextProfileHeroMetrics
    > div:nth-child(2n) {
    border-right: 0;
  }

  .clubContextProfilePage--calgary-blizzard
    .clubContextProfileHeroMetrics
    > div:nth-child(n + 3) {
    border-top: 1px solid rgba(5, 5, 5, 0.1);
  }

  .clubContextProfilePage--calgary-blizzard .clubContextProfileMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clubContextProfilePage--calgary-blizzard .clubContextProfileMetrics > div {
    border-bottom: 1px solid rgba(5, 5, 5, 0.075);
  }
}

/* ==========================================================================
   CALGARY BLIZZARD - CURRENT CONTEXT PROFILE SKIN
   ==========================================================================

   Club-context player profiles now reuse the canonical PSP profile layout.
   This layer keeps Calgary-specific visual identity in the club skin while
   leaving shared structure in app/styles/features/club-context-profile.css.
   ========================================================================== */

.clubContextProfilePage--calgary-blizzard {
  --blizzard-heading-font:
    var(--font-club-space-grotesk), "Space Grotesk", "Raleway", Arial,
    sans-serif;
  --blizzard-body-font: var(--font-club-raleway), "Raleway", Arial, sans-serif;

  background: var(--club-context-page-background);
  font-family: var(--blizzard-body-font);
}

.clubContextProfilePage--calgary-blizzard .an-heroShell {
  background: var(--club-context-hero-background);
}

.clubContextProfilePage--calgary-blizzard .an-heroAvatarFrame {
  border: var(--club-context-hero-avatar-border);
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileBreadcrumbBand,
.clubContextProfilePage--calgary-blizzard .clubContextProfileContent {
  max-width: var(--club-context-page-max);
}

.clubContextProfilePage--calgary-blizzard .clubTeamBreadcrumbs {
  color: var(--club-context-breadcrumb-color);
  font-family: var(--blizzard-body-font);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.clubContextProfilePage--calgary-blizzard .clubTeamBreadcrumbs a {
  color: inherit;
}

.clubContextProfilePage--calgary-blizzard .clubTeamBreadcrumbs a:hover {
  color: var(--club-context-breadcrumb-hover-color);
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileContent {
  gap: clamp(14px, 2vw, 18px);
  grid-template-columns: 1fr;
  padding: 14px 18px 18px;
}

.clubContextProfilePage--calgary-blizzard .an-heroName,
.clubContextProfilePage--calgary-blizzard .an-heroVitalValue {
  font-family: var(--blizzard-heading-font);
  font-weight: 700;
}

.clubContextProfilePage--calgary-blizzard .an-heroVitalLabel {
  font-family: var(--blizzard-body-font);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileVideoFull {
  grid-column: auto;
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileModuleGrid {
  width: 100%;
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileMain,
.clubContextProfilePage--calgary-blizzard .clubContextProfileSidebarStack,
.clubContextProfilePage--calgary-blizzard .an-publicCol {
  gap: 16px;
}

.clubContextProfilePage--calgary-blizzard .clubContextProfileCard,
.clubContextProfilePage--calgary-blizzard .clubContextProfileMetrics {
  border-radius: 6px;
  border-top-color: var(--club-context-module-accent);
}

.clubContextProfilePage--calgary-blizzard .clubContextListRow > span {
  color: var(--club-context-module-accent);
}

.clubContextProfilePage--calgary-blizzard
  .clubContextProfileSponsorPlaceholder {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--club-context-primary) 8%, transparent),
      color-mix(in srgb, var(--club-context-secondary) 30%, transparent)
    ),
    var(--club-context-surface);
}

@media (max-width: 980px) {
  .clubContextProfilePage--calgary-blizzard .clubContextProfileContent {
    grid-template-columns: 1fr;
  }
}