/* ShotWatch /static/css/layout.css */
.wrapper { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 0.5rem 1.25rem 2rem; }
.wrapper-sm { max-width: 640px; }
.wrapper-md { max-width: 820px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.four-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.athlete-grid { display: grid; grid-template-columns: 1fr; gap: 0.55rem; }
@media (min-width: 720px) { .athlete-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .athlete-grid { grid-template-columns: repeat(3, 1fr); } }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.625rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.flex-1 { flex: 1; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.divider { height: 1px; background: var(--border-subtle); margin: 0.875rem 0; }
.section { margin-bottom: 1.25rem; }
.page-header { padding: 0.25rem 0 0.5rem; }
.page-header .eyebrow {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--green-300); margin-bottom: 0.75rem;
}
.page-header h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700; line-height: 0.95; letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}
.page-header h1 .gold {
  background: linear-gradient(90deg, var(--gold-400) 0%, var(--gold-200) 50%, var(--gold-400) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 3s linear infinite;
}
.page-header p { font-size: 1rem; color: var(--text-secondary); max-width: 500px; }
@media (max-width: 640px) {
  .two-col, .three-col, .four-col { grid-template-columns: 1fr; }
}

/* Score entry page needs tighter padding */
.wrapper.entry-page { padding: 0 0.5rem 1rem; }
@media (max-width: 640px) {
  .wrapper { padding-left: 0.625rem; padding-right: 0.625rem; }
}

/* ---------------------------------------------------------------
   Utility classes - extracted from former inline style attributes.
   Keep these alphabetised within each block.
   --------------------------------------------------------------- */

/* Display */
.d-inline { display: inline; }
.d-none { display: none; }

/* Padding */
.p-0 { padding: 0; }
.pt-2 { padding-top: 0.25rem; }
.pt-3 { padding-top: 0.5rem; }

/* Margin (small fractional values not in the standard 1/2/3/4 scale) */
.mb-0-25 { margin-bottom: 0.25rem; }
.mb-0-4 { margin-bottom: 0.4rem; }
.mb-0-5 { margin-bottom: 0.5rem; }
.mt-0-25 { margin-top: 0.25rem; }
.mt-0-4 { margin-top: 0.4rem; }
.mt-0-75 { margin-top: 0.75rem; }

/* Text alignment */
.text-center { text-align: center; }

/* Width helpers */
.w-full { width: 100%; max-width: 100%; }

/* Decoration */
.no-underline { text-decoration: none; }

/* Grid spans */
.col-span-2 { grid-column: span 2; }

/* Layout shorthands */
.flex-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}