/* Reusable athlete profile page: profile hero, goals, funds, merch, and media layout. */
.profile-page {
      background:
        radial-gradient(900px 520px at 72% 14%, rgba(0, 90, 255, .18), transparent 66%),
        linear-gradient(rgba(0, 8, 235, .035) 1px, transparent 1px) 0 0 / 100% 44px,
        linear-gradient(90deg, rgba(0, 8, 235, .035) 1px, transparent 1px) 0 0 / 44px 100%,
        var(--bg);
    }

    .profile-hero {
      padding: 72px 0 54px;
      background:
        url("../images/hero-gym.png") center center / cover no-repeat,
        radial-gradient(1000px 600px at 82% -15%, rgba(0,8,235,.42), transparent 60%),
        radial-gradient(820px 520px at -10% 115%, rgba(0,8,235,.22), transparent 55%),
        var(--bg);
    }

    .profile-hero-grid {
      display: grid;
      grid-template-columns: minmax(330px, 380px) 1fr;
      gap: 42px;
      align-items: center;
    }

    .profile-photo {
      min-height: 460px;
      overflow: hidden;
    }

    .profile-photo.has-athlete-photo {
      background: #05070d;
      border-color: rgba(58, 72, 255, .48);
      box-shadow: 0 22px 60px rgba(0, 0, 0, .48), 0 0 32px rgba(0, 8, 235, .16);
    }

    .profile-photo.has-athlete-photo::before {
      display: none;
    }

    .profile-photo.has-athlete-photo img {
      display: block;
      width: 100%;
      height: 100%;
      min-height: inherit;
      object-fit: cover;
      object-position: center top;
      border-radius: inherit;
    }

    .profile-photo .tag b {
      font-size: 34px;
    }

    .profile-kicker {
      color: #5566ff;
      font-size: 13px;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 800;
      text-shadow: 0 0 14px rgba(0,8,235,.55);
    }

    .profile-title {
      font-size: clamp(48px, 8vw, 92px);
      margin: 14px 0;
    }

    .profile-title span {
      color: #3243d8;
      display: block;
      text-shadow: 0 0 8px rgba(0,8,235,.9), 0 0 34px rgba(0,8,235,.7);
    }

    .profile-meta {
      display: grid;
      grid-template-columns: repeat(3, minmax(130px, 1fr));
      gap: 12px;
      margin: 22px 0 0;
      max-width: 640px;
    }

    .profile-stat {
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
      color: var(--text);
      background: rgba(0,0,0,.2);
    }

    .profile-stat span {
      display: block;
      margin-bottom: 4px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .profile-stat strong {
      color: var(--text);
      font-size: 15px;
    }

    .profile-section {
      padding: 70px 0;
    }

    .profile-layout {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 24px;
      align-items: stretch;
    }

    .profile-panel {
      display: flex;
      flex-direction: column;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 26px;
    }

    .profile-panel h2,
    .profile-panel h3 {
      margin-bottom: 16px;
    }

    .profile-panel p,
    .profile-panel li {
      color: var(--muted);
      font-size: 15px;
    }

    .profile-list {
      list-style: none;
      display: grid;
      gap: 10px;
    }

    .profile-list li {
      position: relative;
      padding-left: 22px;
    }

    .profile-list li::before {
      content: "•";
      position: absolute;
      left: 0;
      color: var(--accent-2);
      font-weight: 800;
    }

    .fund-bar {
      height: 14px;
      overflow: hidden;
      border-radius: 999px;
      background: var(--bg);
      border: 1px solid var(--line);
      margin: 16px 0 10px;
    }

    .fund-fill {
      position: relative;
      overflow: hidden;
      width: 0;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #1fa66a, var(--ok));
      box-shadow: 0 0 20px rgba(52,211,154,.42);
      transition: width 1.2s cubic-bezier(.2,.8,.2,1);
    }

    .fund-fill::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
      transform: translateX(-100%);
      animation: fundShine 2.4s ease-in-out infinite;
    }

    @keyframes fundShine {
      0% { transform: translateX(-100%); opacity: 0; }
      35% { opacity: 1; }
      70%, 100% { transform: translateX(100%); opacity: 0; }
    }

    .fund-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: var(--text);
      font-weight: 800;
    }

    .fund-current {
      color: var(--ok);
    }

    .fund-goal {
      color: var(--accent-2);
    }

    .merch-grid,
    .media-grid {
      display: grid;
      gap: 12px;
    }

    .media-grid {
      grid-template-columns: repeat(3, 1fr);
    }

    .media-slot {
      min-height: 240px;
      display: grid;
      align-content: end;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 16px;
      background:
        linear-gradient(180deg, transparent, rgba(0,0,0,.72)),
        repeating-linear-gradient(45deg, rgba(0,8,235,.08) 0 10px, transparent 10px 20px),
        var(--bg);
    }

    .media-slot span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .media-slot strong {
      color: var(--text);
      margin-top: 4px;
    }

    .profile-panel .btn {
      margin-top: auto;
      align-self: flex-start;
    }

    .mini-card {
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 16px;
      background: var(--bg);
    }

    .mini-card strong {
      color: var(--text);
      display: block;
      margin-bottom: 4px;
    }

    .profile-empty {
      display: none;
      padding: 90px 0;
      text-align: center;
    }

    @media (max-width: 980px) {
      .profile-hero-grid,
      .profile-layout {
        grid-template-columns: 1fr;
      }

      .profile-photo {
        width: min(330px, 100%);
        min-height: 420px;
      }
    }

    @media (max-width: 520px) {
      .profile-hero {
        padding: 54px 0 42px;
      }

      .profile-title {
        font-size: clamp(42px, 15vw, 66px);
      }

      .profile-panel {
        padding: 20px;
      }

      .profile-meta {
        grid-template-columns: 1fr;
      }

      .profile-photo {
        min-height: 360px;
      }

      .media-grid {
        grid-template-columns: 1fr;
      }

      .fund-row {
        flex-direction: column;
      }
    }