<?php
require __DIR__ . '/../bootstrap.php';
?>
<!doctype html>
<html lang="fi">
<head>
<meta charset="utf-8">
<title>MaJu Player Card Concept</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root{--orange:#f58220;--orange2:#ef6b0b;--black:#050505;--white:#f5f5f3}
*{box-sizing:border-box}
body{margin:0;background:#030303;color:#fff;font-family:'Manrope',Arial,sans-serif}
.page{max-width:1480px;margin:0 auto;padding:28px 36px 44px}
.label,.title{border-left:5px solid var(--orange);padding-left:14px;font-weight:800}
.label{font-size:18px;margin-bottom:10px}
.title{font-size:34px;line-height:1;margin-bottom:22px}
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:28px}
.player-card{height:372px;background:#111214;border:1px solid rgba(255,255,255,.38);border-radius:7px;overflow:hidden;display:flex;flex-direction:column}
.player-card.active{border-color:var(--orange)}
.pc-photo{height:208px;overflow:hidden;background:#000;border-bottom:2px solid var(--orange)}
.pc-photo img{width:100%;height:100%;object-fit:cover;object-position:center 16%;display:block}
.pc-body{padding:12px 18px 0;flex:1;display:flex;flex-direction:column;background:linear-gradient(180deg,#15161a,#101114)}
.pc-name{font-size:19px;line-height:1.08;font-weight:700;letter-spacing:-.02em;min-height:42px;margin:12px 0 10px}
.pc-sponsor{flex:1;display:flex;align-items:center;margin-bottom:10px}
.pc-sponsor img{max-width:145px;max-height:34px;display:block}
.pc-cta{margin:0 -18px;height:34px;background:linear-gradient(180deg,#ff8a24,#ea6709);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}

.profile{display:grid;grid-template-columns:650px 1fr;border:1px solid rgba(255,255,255,.45);border-radius:8px;overflow:hidden;background:#111;min-height:580px}
.profile-left{display:grid;grid-template-columns:52% 48%;background:#101114}
.profile-photo{min-height:580px;background:#24262b;overflow:hidden}
.profile-photo img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
.profile-info{padding:34px 28px;position:relative}
.bg-script{position:absolute;right:18px;top:14px;font-size:64px;opacity:.08;font-style:italic;font-weight:800}
.number{color:var(--orange);font-size:44px;font-weight:800;margin-bottom:20px}
.profile-name{font-size:42px;line-height:.98;font-weight:800;margin-bottom:34px}
.info-list{display:grid;gap:15px;margin-bottom:30px}
.info-row{display:grid;grid-template-columns:28px 1fr;gap:12px;font-size:15px;line-height:1.25}
.info-icon{color:var(--orange);font-weight:800;font-size:20px}
.info-label{color:#cfcfd2;font-size:13px}
.info-value{font-weight:700}
.kummi-title{color:var(--orange);font-size:15px;font-weight:800;text-transform:uppercase;margin-bottom:12px}
.kummi-box{border-top:1px solid rgba(255,255,255,.28);border-bottom:1px solid rgba(255,255,255,.28);padding:18px 0}
.kummi-box img{max-width:220px;max-height:60px;display:block}
.share{margin-top:24px;display:flex;align-items:center;gap:10px;color:#ddd;font-size:14px}
.share-dot{width:30px;height:30px;border:1px solid var(--orange);border-radius:999px;display:grid;place-items:center;color:var(--orange);font-weight:800}
.profile-right{background:var(--white);color:#111;padding:24px 28px;position:relative}
.close{position:absolute;right:16px;top:12px;font-size:34px;line-height:1;color:#333}
.stat-panel{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:5px;overflow:hidden;margin-bottom:13px}
.stat-header{height:52px;background:linear-gradient(180deg,#ff7d17,#ef670a);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-weight:800;font-size:18px}
.stat-summary{display:grid;grid-template-columns:repeat(6,1fr);padding:18px 12px;text-align:center}
.small{font-size:11px;font-weight:800;text-transform:uppercase;color:#444;margin-bottom:6px}
.big{color:var(--orange2);font-size:27px;font-weight:800}
.table{margin:0 16px 16px;border-collapse:collapse;width:calc(100% - 32px);font-size:14px}
.table th{background:#111;color:#fff;text-transform:uppercase;font-size:12px;padding:8px}
.table td{padding:9px 8px;border-bottom:1px solid rgba(0,0,0,.08);text-align:center}
.table td:first-child,.table th:first-child{text-align:left}
.table tfoot td{font-weight:800}
.table tfoot td:not(:first-child){color:var(--orange2)}
.closed-panel{height:54px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:5px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-weight:800}

@media(max-width:1200px){.cards{grid-template-columns:repeat(3,1fr)}.profile{grid-template-columns:1fr}}
@media(max-width:800px){.page{padding:20px}.cards{grid-template-columns:1fr}.profile-left{grid-template-columns:1fr}.profile-photo{min-height:360px}.stat-summary{grid-template-columns:repeat(2,1fr);gap:14px}}

/* --- Player card tuning v6 --- */

.player-card{
  height:372px;
}

.pc-photo{
  height:224px;
}

.pc-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 18%;
  display:block;
}

.pc-body{
  padding:13px 16px 0;
}

.pc-name{
  font-size:20px;
  line-height:1.1;
  font-weight:700;
  text-transform:none;
  min-height:auto;
  margin-bottom:16px;
  text-align:center;
  white-space:nowrap;
}

.pc-sponsor{
  justify-content:center;
  align-items:center;
  min-height:44px;
  margin-bottom:12px;
}

.pc-sponsor img{
  max-width:178px;
  max-height:34px;
  display:block;
}

.pc-cta{
  margin:0 -16px;
  height:34px;
  font-size:12px;
  font-weight:700;
}

.profile-name{
  font-size:42px;
  line-height:.96;
  font-weight:850;
  text-transform:none;
  margin-top:88px;
}

.profile-info{
  padding-top:34px;
}

.profile-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}

.kummi-box img{
  max-width:230px;
  max-height:58px;
  display:block;
}


/* --- Profile layout tuning v7 --- */

.profile{
  grid-template-columns:720px 1fr;
  max-height:88vh;
}

.profile-left{
  grid-template-columns:58% 42%;
}

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

.profile-right{
  max-height:88vh;
  overflow-y:auto;
}

.profile-info{
  padding-left:30px;
  padding-right:26px;
}

.profile-name{
  font-size:40px;
  line-height:.98;
}

@media(max-width:1200px){
  .profile{
    grid-template-columns:1fr;
  }

  .profile-right{
    max-height:none;
    overflow-y:visible;
  }
}


/* --- Basic info alignment v8 --- */

.profile-info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:20px;
  padding-bottom:20px;
}

.profile-name{
  margin-top:0 !important;
  margin-bottom:28px;
  font-size:40px;
  line-height:.96;
}

.info-list{
  gap:13px;
  margin-bottom:28px;
}

.info-row{
  grid-template-columns:24px 1fr;
  gap:10px;
  align-items:center;
}

.info-icon{
  font-size:17px;
  line-height:1;
}

.info-label{
  font-size:12px;
  line-height:1.1;
}

.info-value{
  font-size:15px;
  line-height:1.18;
}

.kummi-title{
  margin-top:4px;
}

.kummi-box{
  padding:14px 0;
}

.share{
  margin-top:20px;
}

</style>
</head>
<body>
<div class="page">
  <div class="label">MaJun B-tytöt</div>
  <div class="title">Joukkueen pelaajat</div>

  <section class="cards">
    <article class="player-card active">
      <div class="pc-photo"><img src="/pesisportaali/assets/demo/Helmi_Mato-oja_Mailajuniorit.jpg" alt="Helmi Mato-oja"></div>
      <div class="pc-body">
        <div class="pc-name">Helmi Mato-oja</div>
        <div class="pc-sponsor"><img src="/pesisportaali/assets/demo/WWW_Desig_logo_hopea.webp" alt="WWW Design"></div>
        <div class="pc-cta">Katso pelaajaprofiili →</div>
      </div>
    </article>
    <article class="player-card"><div class="pc-photo"></div><div class="pc-body"><div class="pc-name">Ella<br>Korhonen</div><div class="pc-sponsor">Rakennusliike A. Nieminen Oy</div><div class="pc-cta">Katso pelaajaprofiili →</div></div></article>
    <article class="player-card"><div class="pc-photo"></div><div class="pc-body"><div class="pc-name">Aino<br>Lahtinen</div><div class="pc-sponsor">OP Keski-Suomi</div><div class="pc-cta">Katso pelaajaprofiili →</div></div></article>
    <article class="player-card"><div class="pc-photo"></div><div class="pc-body"><div class="pc-name">Julia<br>Mäkelä</div><div class="pc-sponsor">Kuljetus M. Lahtinen Oy</div><div class="pc-cta">Katso pelaajaprofiili →</div></div></article>
    <article class="player-card"><div class="pc-photo"></div><div class="pc-body"><div class="pc-name">Milla<br>Salo</div><div class="pc-sponsor">K-Supermarket</div><div class="pc-cta">Katso pelaajaprofiili →</div></div></article>
  </section>

  <section class="profile">
    <div class="profile-left">
      <div class="profile-photo"><img src="/pesisportaali/assets/demo/Helmi_Mato-oja_Mailajuniorit.jpg" alt="Helmi Mato-oja"></div>
      <div class="profile-info">
        
        
        <div class="profile-name">Helmi<br>Mato-oja</div>
        <div class="info-list">
          <div class="info-row"><div class="info-icon">▣</div><div><div class="info-label">Syntynyt</div><div class="info-value">12.04.2009 (15 v.)</div></div></div>
          <div class="info-row"><div class="info-icon">●</div><div><div class="info-label">Joukkue</div><div class="info-value">MaJun B-tytöt</div></div></div>
          <div class="info-row"><div class="info-icon">◆</div><div><div class="info-label">Kätisyys</div><div class="info-value">Oikeakätinen</div></div></div>
          <div class="info-row"><div class="info-icon">⌖</div><div><div class="info-label">Kotipaikka</div><div class="info-value">Kankaanpää</div></div></div>
        </div>
        <div class="kummi-title">Kummiyritys</div>
        <div class="kummi-box"><img src="/pesisportaali/assets/demo/WWW_Desig_logo_hopea.webp" alt="WWW Design"></div>
        <div class="share"><span>Jaa profiili</span><span class="share-dot">f</span><span class="share-dot">x</span><span class="share-dot">↗</span></div>
      </div>
    </div>

    <div class="profile-right">
      <div class="close">×</div>
      <div class="stat-panel">
        <div class="stat-header"><span>▌ Sarjan tilastot 2025</span><span>⌃</span></div>
        <div class="stat-summary">
          <div><div class="small">Ottelut</div><div class="big">18</div></div>
          <div><div class="small">Lyödyt</div><div class="big">24</div></div>
          <div><div class="small">Tuodut</div><div class="big">20</div></div>
          <div><div class="small">Kärpälyönnit</div><div class="big">6</div></div>
          <div><div class="small">Palkitut</div><div class="big">5</div></div>
          <div><div class="small">Virheet</div><div class="big">2</div></div>
        </div>
        <table class="table">
          <thead><tr><th>Tilanne</th><th>Lyödyt</th><th>Yritykset</th><th>Lyöntiprosentti</th><th>Kpl</th></tr></thead>
          <tbody>
            <tr><td>0-1</td><td>6</td><td>16</td><td>38 %</td><td>2</td></tr>
            <tr><td>1-1</td><td>8</td><td>20</td><td>40 %</td><td>3</td></tr>
            <tr><td>2-0</td><td>5</td><td>10</td><td>50 %</td><td>1</td></tr>
            <tr><td>2-1</td><td>5</td><td>12</td><td>42 %</td><td>2</td></tr>
          </tbody>
          <tfoot><tr><td>Yhteensä</td><td>24</td><td>58</td><td>38 %</td><td>8</td></tr></tfoot>
        </table>
      </div>
      <div class="closed-panel"><span>▌ Kauden tilastot 2025</span><span>⌄</span></div>
      <div class="closed-panel"><span>★ Uratilastot</span><span>⌄</span></div>
      <div class="closed-panel"><span>▣ Otteluhistoria</span><span>⌄</span></div>
      <div class="closed-panel"><span>★ Saavutukset</span><span>⌄</span></div>
    </div>
  </section>
</div>
</body>
</html>
