/* Subpages shared styles */

/* ───── History timeline ───── */
.timeline-section { background: var(--cream); padding: 96px 32px; }
.timeline { max-width: 1100px; margin: 0 auto; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 180px; top: 0; bottom: 0;
  width: 1px; background: var(--rule);
}
.t-item { display: grid; grid-template-columns: 180px 1fr; gap: 56px; padding: 36px 0; position: relative; }
.t-item .year {
  font-family: "Poppins", sans-serif; font-size: 56px; line-height: 1; color: var(--green);
  letter-spacing: -0.02em;
}
.t-item .year-roman { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-top: 8px; }
.t-item::before {
  content: ""; position: absolute; left: 175px; top: 50px;
  width: 11px; height: 11px; background: var(--yellow); border: 2px solid var(--cream);
  border-radius: 50%; z-index: 2;
}
.t-item.major::before { width: 15px; height: 15px; left: 173px; top: 48px; background: var(--green); }
.t-item .body h3 { font-size: 28px; margin-bottom: 8px; }
.t-item .body .tag-row { display: flex; gap: 8px; margin-bottom: 14px; }
.t-item .body p { color: var(--ink-soft); font-size: 16px; line-height: 1.65; max-width: 620px; }

.history-essay { background: var(--paper); padding: 120px 32px; }
.history-essay-inner { max-width: 720px; margin: 0 auto; }
.history-essay h2 { margin: 0 0 32px; font-size: clamp(36px, 4vw, 56px); }
.history-essay p { font-size: 18px; line-height: 1.75; color: var(--ink); margin-bottom: 22px; }
.history-essay p:first-of-type::first-letter {
  font-family: "Poppins", sans-serif; font-size: 84px; line-height: 0.9;
  float: left; margin: 6px 12px 0 0; color: var(--green);
}

/* ───── Achievements ───── */
.trophy-section { background: var(--cream); padding: 96px 32px; }
.trophy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1320px; margin: 0 auto; }
.trophy-card {
  background: var(--paper); border: 1px solid var(--rule);
  padding: 36px 28px; position: relative;
}
.trophy-card.gold { background: var(--green); color: var(--cream); border-color: var(--green); }
.trophy-card .year { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; opacity: 0.7; }
.trophy-card h3 { font-size: 26px; margin: 14px 0 8px; }
.trophy-card .comp { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; margin-bottom: 24px; }
.trophy-card .icon {
  width: 48px; height: 48px;
  background: var(--yellow); position: relative;
  display: grid; place-items: center;
  font-family: "Poppins", sans-serif; font-size: 28px; color: var(--ink);
  margin-bottom: 24px;
}
.trophy-card.gold .icon { background: var(--yellow); color: var(--green-deep); }
.trophy-card .stat-row { display: flex; gap: 20px; padding-top: 18px; border-top: 1px solid var(--rule-faint); }
.trophy-card.gold .stat-row { border-color: var(--rule-cream); }
.trophy-card .stat-row .s { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; }
.trophy-card .stat-row .v { font-family: "Poppins", sans-serif; font-size: 22px; }

.honors-section { background: var(--green-deep); color: var(--cream); padding: 96px 32px; }
.honors-section .container h2 { color: var(--cream); margin-bottom: 48px; }
.honors-table { width: 100%; border-collapse: collapse; }
.honors-table th, .honors-table td { padding: 18px 16px; text-align: left; border-bottom: 1px solid var(--rule-cream); }
.honors-table th { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--yellow); font-weight: 500; }
.honors-table td { font-size: 15px; }
.honors-table td:first-child { font-family: "JetBrains Mono", monospace; font-size: 13px; opacity: 0.7; width: 100px; }
.honors-table td:nth-child(2) { font-family: "Poppins", sans-serif; font-size: 20px; }
.honors-table tr:hover td { background: rgba(255,255,255,0.03); }

/* ───── Players ───── */
.players-section { background: var(--cream); padding: 96px 32px; }
.players-filters { display: flex; gap: 8px; margin-bottom: 48px; flex-wrap: wrap; }
.players-filters button {
  padding: 10px 18px; background: transparent; border: 1px solid var(--rule);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; transition: 0.2s; color: var(--ink);
}
.players-filters button.active { background: var(--green); color: var(--cream); border-color: var(--green); }
.players-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1320px; margin: 0 auto; }
.player-card {
  background: var(--paper); border: 1px solid var(--rule);
  display: flex; flex-direction: column;
  transition: 0.2s;
}
.player-card:hover { transform: translateY(-3px); border-color: var(--green); }
.player-card .photo {
  aspect-ratio: 1 / 1.15;
  background: var(--green); position: relative; overflow: hidden;
}
.player-card .photo .placeholder {
  width: 100%; height: 100%;
  background: 
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(245, 197, 24, 0.05) 10px 11px),
    var(--green);
  display: grid; place-items: center;
  font-family: "Poppins", sans-serif; font-size: 96px; color: rgba(245, 197, 24, 0.4);
  letter-spacing: -0.02em;
}
.player-card .photo .num {
  position: absolute; top: 16px; right: 16px;
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em;
  color: var(--yellow); opacity: 0.8;
}
.player-card .photo .role-tag {
  position: absolute; bottom: 16px; left: 16px;
  background: var(--yellow); color: var(--ink);
  padding: 4px 10px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
}
.player-card .info { padding: 20px 22px; }
.player-card .info .name { font-family: "Poppins", sans-serif; font-size: 22px; line-height: 1.1; }
.player-card .info .meta { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-top: 8px; }
.player-card .stats { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 0 22px 22px; gap: 8px; }
.player-card .stats .s { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.player-card .stats .v { font-family: "Poppins", sans-serif; font-size: 20px; line-height: 1.1; margin-top: 2px; }

.captains-row { background: var(--green); color: var(--cream); padding: 64px 32px; }
.captains-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 28px; }
.captain { padding: 18px 22px; border-left: 2px solid var(--yellow); }
.captain .role { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--yellow); }
.captain .name { font-family: "Poppins", sans-serif; font-size: 22px; margin-top: 8px; line-height: 1.2; }
.captain .since { font-size: 12px; opacity: 0.7; margin-top: 6px; }
@media (max-width: 1100px) { .captains-grid { grid-template-columns: repeat(2, 1fr); } }

/* ───── Gallery ───── */
.gallery-section { background: var(--cream); padding: 96px 32px; }
.gallery-masonry {
  max-width: 1320px; margin: 0 auto;
  columns: 3; column-gap: 16px;
}
.gallery-item {
  break-inside: avoid; margin-bottom: 16px;
  background: var(--green-deep); position: relative;
  overflow: hidden;
}
.gallery-item img { width: 100%; display: block; }
.gallery-item .placeholder {
  width: 100%;
  background: 
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(245, 197, 24, 0.05) 10px 11px),
    var(--green);
  display: grid; place-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--yellow); opacity: 0.7;
  text-align: center; padding: 40px 20px;
}
.gallery-item .caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 18px;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, transparent 100%);
  color: var(--cream); opacity: 0; transition: opacity 0.2s;
}
.gallery-item:hover .caption { opacity: 1; }
.gallery-item .caption .t { font-family: "Poppins", sans-serif; font-size: 18px; }
.gallery-item .caption .s { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; margin-top: 4px; }

/* ───── Contact ───── */
.contact-section { background: var(--cream); padding: 96px 32px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; max-width: 1320px; margin: 0 auto; }
.contact-info-card { padding: 32px; background: var(--paper); border: 1px solid var(--rule); }
.contact-info-card + .contact-info-card { margin-top: 16px; }
.contact-info-card .label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
.contact-info-card .value { font-family: "Poppins", sans-serif; font-size: 28px; margin-top: 10px; line-height: 1.1; }
.contact-info-card .sub { font-size: 14px; color: var(--ink-soft); margin-top: 6px; }

.contact-form { display: flex; flex-direction: column; gap: 18px; }
.form-row { display: flex; flex-direction: column; gap: 8px; }
.form-row label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.form-row input, .form-row textarea, .form-row select {
  background: var(--paper); border: 1px solid var(--rule);
  padding: 14px 16px; font-size: 15px;
  font-family: inherit; color: var(--ink);
  outline: none; transition: 0.2s;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { border-color: var(--green); }
.form-row textarea { resize: vertical; min-height: 140px; }
.form-row.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row.split label { display: none; }

.map-strip { background: var(--green-deep); color: var(--cream); padding: 0; }
.map-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 360px; }
.map-info { padding: 64px 48px; }
.map-info h3 { font-size: 36px; margin-bottom: 18px; color: var(--cream); }
.map-info p { opacity: 0.7; line-height: 1.6; }
.map-visual {
  background: 
    repeating-linear-gradient(45deg, transparent 0 16px, rgba(245, 197, 24, 0.04) 16px 17px),
    var(--green);
  display: grid; place-items: center;
  position: relative;
}
.map-visual .pin {
  width: 16px; height: 16px; background: var(--yellow); border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(245, 197, 24, 0.2), 0 0 0 16px rgba(245, 197, 24, 0.08);
  animation: pulse 2s infinite;
}
.map-visual .label-pin {
  position: absolute; padding: 8px 14px; background: var(--cream); color: var(--ink);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  transform: translateY(-40px);
}

@media (max-width: 980px) {
  .trophy-grid, .players-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-masonry { columns: 2; }
  .contact-grid, .map-grid, .captains-grid { grid-template-columns: 1fr; }
  .timeline::before { left: 8px; }
  .t-item { grid-template-columns: 1fr; gap: 12px; padding-left: 32px; }
  .t-item::before { left: 3px; top: 18px; }
  .t-item .year { font-size: 36px; }
}
@media (max-width: 640px) {
  .trophy-grid, .players-grid { grid-template-columns: 1fr; }
  .gallery-masonry { columns: 1; }
}