/* ==========================================================================
   Sports  —  /page/sports-facilities/
   --------------------------------------------------------------------------
   A card per sport: a cover image with the name under it. Written here from
   nothing - the layout is a card grid, which is a shape rather than anybody's
   property, and no rule in this file came from another site.

   auto-fill, not auto-fit. auto-fit collapses the empty tracks on the last
   row and stretches the remainder full width, which makes three leftover
   cards read as a second, more important row. Twelve sports over a 4-wide
   grid is exactly three full rows today, but that is a count that will change
   the moment one is added.
   ========================================================================== */

/* ---- the About band ------------------------------------------------------
   Words beside a cover. 1.05fr on the text so the column is a touch wider
   than the picture: a paragraph needs the measure more than a photograph
   needs the width. */
.sport-about {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 34px;
  align-items: center;
  margin-bottom: 44px;
}
.sport-about__p {
  max-width: 58ch;
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.75;
}
.sport-about__p:last-child { margin-bottom: 0; }
.sport-about__img {
  display: block;
  width: 100%;
  height: auto;
  /* NO FORCED RATIO HERE, unlike the cards. This one is a collage of twelve
     photographs: cropping it to a shape takes whole pictures out of it, which
     is not what cropping is supposed to cost. It is shown at whatever
     proportion it arrives in, and the band is centred so a short image sits
     level with the text beside it rather than at the top of it. */
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  background: var(--brand);
}

/* One column below 900px, and the picture second: on a phone the reader
   wants the sentence before the photograph. */
@media (max-width: 899.98px) {
  .sport-about { grid-template-columns: 1fr; gap: 22px; margin-bottom: 34px; }
  .sport-about__img { order: 2; }
  .sport-about__text { order: 1; }
}

.sport-grid-head { margin-bottom: 20px; }

.sport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sport-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;                /* so the image takes the card's corners */
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-xs);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sport-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }

.sport-card__img {
  display: block;
  width: 100%;
  height: auto;
  /* Every cover is cropped to the same shape whatever is supplied, so one
     landscape photograph among eleven portraits cannot break the rows. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--brand);
}

/* ---- the card's text ----------------------------------------------------
   Under the image, not over it. The name shared the picture while that was
   all a card carried; with a line of description and a button beneath, text
   on the photograph would be text over text. */
.sport-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px 16px;
}
.sport-card__name {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
}
.sport-card__blurb {
  margin: 0;
  color: var(--muted);
  font-size: .87rem;
  line-height: 1.55;
}
.sport-card__more {
  margin-top: 6px;
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--accent-deep);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
}
.sport-card__more:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.sport-card__more:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .sport-card { transition: none; }
  .sport-card:hover { transform: none; }
}

@media (max-width: 575.98px) {
  .sport-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sport-card__body { padding: 11px 12px 13px; gap: 4px; }
  .sport-card__name { font-size: .9rem; }
  .sport-card__blurb { font-size: .8rem; }
}

/* ==========================================================================
   One sport  —  /page/sports/<slug>/
   ========================================================================== */
.sport-back { margin: 0 0 18px; font-size: .86rem; }
.sport-back a { color: var(--accent-deep); font-weight: 700; text-decoration: none; }
.sport-back a:hover { text-decoration: underline; }

/* ==========================================================================
   One sport's tabs  —  Our Squad, About the Coach, Achievements, Calendar
   --------------------------------------------------------------------------
   Four panels of four different shapes: a grid of faces, one person beside
   their write-up, and two dated lists. They share the empty state, because
   every one of them starts out empty and says so.
   ========================================================================== */
/* Straight under the back link now the cover band has gone, so it needs far
   less space above it than it did under a photograph. */
.sport-tabs { margin-top: 4px; }

/* The same dashed, quiet box .sport-detail__pending was, which this replaces
   - that line sat under the blurb saying more was coming, and the tabs say
   it now, per tab and in each one's own words. */
.sport-pane-empty {
  margin: 0;
  padding: 16px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--page-alt);
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
}

/* ---- our squad ---------------------------------------------------------- */
.sport-squad {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sport-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 18px 14px 20px;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-xs);
  text-align: center;
}
.sport-player__img {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--page-alt);
}
/* A player with no photograph: their initial in the house navy, rather than
   a broken frame or a stock silhouette standing in for a real student. */
.sport-player__initial {
  display: grid;
  place-items: center;
  background: var(--brand);
  color: var(--accent);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}
.sport-player__body { display: block; }
.sport-player__name {
  display: block;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.35;
}
.sport-player__role {
  display: block;
  margin-top: 3px;
  color: var(--accent-deep);
  font-size: .78rem;
  font-weight: 700;
}
.sport-player__year {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .78rem;
}

/* ---- about the coach ---------------------------------------------------- */
.sport-coach {
  display: grid;
  gap: 24px;
  align-items: start;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-xs);
}
@media (min-width: 700px) {
  .sport-coach { grid-template-columns: 260px minmax(0, 1fr); gap: 30px; }
  /* No portrait, no picture column - otherwise the write-up is laid out in
     the 260px the picture would have taken and the rest of the card is
     empty. The same trap the Chief Finance Officer's page hit. */
  .sport-coach--solo { grid-template-columns: minmax(0, 1fr); }
}
.sport-coach__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 6 / 7;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--page-alt);
}
.sport-coach__name { margin: 0; color: var(--ink); font-size: 1.2rem; font-weight: 800; }
.sport-coach__role {
  margin: 4px 0 14px;
  color: var(--accent-deep);
  font-size: .86rem;
  font-weight: 700;
}
.sport-coach__exp {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 9px;
  align-items: baseline;
  margin: 0 0 16px;
  color: var(--ink);
  font-size: .9rem;
}
.sport-coach__exp-label {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sport-coach__msg-label {
  margin: 0 0 8px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  color: var(--accent-deep);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sport-coach__bio {
  margin: 0 0 12px;
  max-width: 72ch;
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.75;
}
.sport-coach__bio:last-child { margin-bottom: 0; }

/* ---- achievements and calendar ------------------------------------------
   One shape, two lists: a date or a year on the left, what happened on the
   right. Below 560px the date goes above rather than squeezing the event
   into half a line.
   ========================================================================== */
.sport-wins,
.sport-fixtures {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-xs);
  overflow: hidden;              /* so the first and last rows take the corners */
}
.sport-win,
.sport-fixture {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 6px 18px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
}
.sport-win:last-child,
.sport-fixture:last-child { border-bottom: 0; }

.sport-win__year,
.sport-fixture__on {
  color: var(--accent-deep);
  font-size: .84rem;
  font-weight: 800;
  line-height: 1.5;
}
.sport-win__event,
.sport-fixture__event {
  display: block;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.45;
}
.sport-win__result,
.sport-fixture__venue {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .85rem;
}

@media (max-width: 559.98px) {
  .sport-win,
  .sport-fixture { grid-template-columns: minmax(0, 1fr); }
  .sport-squad { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ---- the gallery --------------------------------------------------------
   Thumbnails in the grid, the full picture in the lightbox - see data-full
   in the template and the note on it in main.js.
   ========================================================================== */
.sport-shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 14px;
}
.sport-shot {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: var(--page-alt);
  box-shadow: var(--shadow-xs);
  cursor: zoom-in;
  transition: transform .18s ease, box-shadow .18s ease;
}
.sport-shot:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.sport-shot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sport-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .sport-shot { transition: none; }
  .sport-shot:hover { transform: none; }
}

@media (max-width: 575.98px) {
  .sport-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}