/* Shared public navigation and portrait cards. */
.site-connected .site-menu { position: relative; }
.site-connected .site-menu summary { cursor: pointer; padding: 9px 0; font-size: 16px; font-weight: 700; color: #f4e8ff; }
.site-connected .site-menu summary::marker { color: #d7a9ed; }
.site-connected .site-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); display: grid; min-width: 245px; padding: 12px; gap: 4px; border: 1px solid #a981bd; border-radius: 14px; background: #21122f; box-shadow: 0 18px 50px #0007; z-index: 200; }
.site-connected .hub-header { position: relative; z-index: 100; }
.site-connected .hub-header .site-menu-panel a { display: block; padding: 11px 14px; border-radius: 8px; color: #fff; font-size: 14px; white-space: normal; text-decoration: none; }
.site-connected .site-menu-panel a:hover, .site-connected .site-menu-panel a:focus-visible { background: #432357; }
.site-connected .site-context { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 0 0 20px; margin: 0 0 12px; color: #ddcbe8; font-size: 14px; }
.site-connected .site-context a { color: #ebc3ff; text-underline-offset: 4px; }
.site-connected .site-context [aria-current] { color: #fff; font-weight: 700; }
.site-connected .site-context .site-context-switch { margin-left: auto; }
.site-connected .site-service { background: #261735; border: 1px solid #9164ae; border-radius: 16px; padding: clamp(22px, 3vw, 34px); margin: 28px 0; color: #f9f2ff; max-width: 900px; }
.site-connected .site-service h2 { color: #f0d1ff; font-size: clamp(25px, 3vw, 34px); line-height: 1.15; margin: 0 0 14px; }
.site-connected .site-service p { color: #e7d8f0; font-size: 16px; line-height: 1.65; margin: 12px 0 20px; }
.site-connected .site-service .site-service-note { color: #cbb4d9; font-size: 13px; margin-bottom: 0; }
.site-connected .site-service a, .site-connected .site-link-button { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; padding: 12px 20px; border-radius: 8px; background: #8650c4; border: 1px solid #d2a9ec; color: #fff; font-size: 15px; line-height: 1.4; font-weight: 700; text-decoration: none; }
.site-connected a:focus-visible, .site-connected summary:focus-visible, .site-connected button:focus-visible { outline: 3px solid #f1c4ff; outline-offset: 4px; }
.site-connected .site-directory { margin-top: 56px; }
.site-connected .site-directory h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.12; color: #ebc7ff; }
.site-connected .site-directory > p { color: #e1cee9; font-size: 17px; line-height: 1.6; margin: 16px 0 28px; }
.site-connected :is(.program-menu, .menu-location-grid, .travel-grid, .sp-paths, .sp-content-grid, .season-choice-grid) {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px; align-items: start;
}
.site-connected :is(.program-menu, .season-choice-grid):has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 880px; margin-inline: auto; }
.site-connected :is(.program-menu-card, .menu-location-card, .travel-card, .sp-path, .sp-feature, .season-choice-card) {
  position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; width: 100%; aspect-ratio: 4 / 5 !important; height: auto !important; min-height: 0 !important; padding: 0; overflow: hidden; border: 1px solid #a477bf66; border-radius: 16px; background: #21142e; color: #fff; text-decoration: none; align-items: stretch; transition: transform .2s, border-color .2s;
}
.site-connected :is(.program-menu-card, .menu-location-card, .travel-card, .sp-path, .sp-feature) > img,
.site-connected .season-choice-image {
  grid-row: 1; grid-column: 1; width: 100% !important; height: 100% !important; min-height: 0 !important; aspect-ratio: auto !important; margin: 0; object-fit: cover !important; object-position: var(--card-photo-position, 50% 40%) !important; overflow: hidden;
}
.site-connected .season-choice-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-connected :is(.program-menu-copy, .menu-location-card > div, .travel-card-copy, .sp-path > div, .sp-card-copy, .season-choice-copy) {
  grid-row: 2; grid-column: 1; position: static !important; inset: auto; width: 100%; min-width: 0; padding: 18px 20px 22px; background: #21142e; display: flex; flex-direction: column;
}
.site-connected :is(.program-menu-copy, .menu-location-card, .sp-path, .sp-card-copy, .season-choice-copy) :is(h2,h3) { font-size: clamp(23px, 2.1vw, 29px); line-height: 1.12; margin: 8px 0 12px; }
.site-connected :is(.program-menu-copy, .menu-location-card, .sp-path, .sp-card-copy, .season-choice-copy) p { font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.site-connected :is(.program-menu-number, .sp-path-number) { font-size: 12px; }
.site-connected .program-menu-open { font-size: 12px; line-height: 1.4; padding-top: 12px; }
.site-connected .travel-card h3 { font-size: clamp(46px, 5vw, 72px); line-height: 1.05; margin: 12px 0; }
.site-connected .travel-card h3.travel-college { font-size: clamp(34px, 4vw, 54px); }
.site-connected .travel-card-shade, .site-connected .sp-path::after, .site-connected .sp-feature::after { display: none; }
.site-connected .season-choice-copy .product-button { padding: 10px 12px; font-size: 13px; min-height: 40px; }
.site-connected .paid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; margin-inline: auto; align-items: start; }
.site-connected .paid-grid .paid-card { aspect-ratio: 4 / 5; padding: 20px; min-height: 0; }
.site-connected .paid-grid .paid-card::before { flex: 1 1 auto; min-height: 120px; aspect-ratio: auto; width: calc(100% + 40px); margin: -20px -20px 20px; }
.site-connected .paid-grid .paid-card h2 { font-size: clamp(25px, 2.4vw, 32px); line-height: 1.1; margin-bottom: 12px; }
.site-connected .paid-grid .paid-card p:not(.product-kicker) { flex: none; font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
.site-connected .paid-grid .paid-card .paid-number { font-size: 14px; margin-bottom: 8px; }
.site-connected .paid-grid .paid-card .paid-lock { font-size: 12px; padding: 8px 10px; }
.site-connected .menu-location-card img[src*="32feb64e6d204be9bb6b7b1b783c1686"] { object-position: 50% 20% !important; }
@media (hover:hover) { .site-connected :is(.program-menu-card, .menu-location-card, .travel-card, .sp-path, .sp-feature, .season-choice-card):hover { transform: translateY(-4px); border-color: #e1affb; } }
@media (max-width: 1100px) {
  .site-connected :is(.program-menu, .menu-location-grid, .travel-grid, .sp-paths, .sp-content-grid, .season-choice-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  .site-connected :is(.program-menu, .menu-location-grid, .travel-grid, .sp-paths, .sp-content-grid, .season-choice-grid, .paid-grid),
  .site-connected :is(.program-menu, .season-choice-grid):has(> :last-child:nth-child(2)) { grid-template-columns: minmax(0, 1fr) !important; max-width: 440px; margin-inline: auto; gap: 20px; }
  .site-connected .site-context-switch { margin-left: 0; }
  .site-connected .hub-header .site-menu summary { font-size: 14px; }
  .site-connected .site-menu-panel { position: fixed; top: auto; right: 18px; left: 18px; max-height: 65vh; overflow: auto; }
}
@media (prefers-reduced-motion: reduce) { .site-connected * { scroll-behavior: auto !important; } .site-connected :is(.program-menu-card, .menu-location-card, .travel-card, .sp-path, .sp-feature, .season-choice-card) { transition: none; transform: none !important; } }

/* Use a different athlete photo from the recruiting hero. */
.site-connected .paid-grid .paid-card:nth-child(4) { --paid-photo: url("https://ttg32sports.fitclub32.chatgpt.site/assets/maryland-feature-trio.jpg"); --paid-position: 50% 35%; }