/* ==========================================================================
   data.css : the data driven pages, records, crossings, gallery, news and
   products. Everything shared lives in site.css; only what one of these
   pages needs on its own belongs here.
   ========================================================================== */

/* --- Stacked blocks on a data page ---------------------------------------- */

.data-block {
  margin-bottom: var(--s8);
}

.data-block:last-child {
  margin-bottom: 0;
}

.data-block-title {
  font-size: 1.5rem;
  margin: 0 0 var(--s4);
}

/* Long titles taken from the database, an album or article name, need more
   room than the twenty characters a short page title is set in. */
.title-long .page-title h1 {
  font-size: 2rem;
  max-width: 30ch;
}

/* --- Rows of data ----------------------------------------------------------
   The records board and the crossings ledger are the same row, laid out twice.
   A row is a grid and not a table: the time leads it, the name follows, and
   everything that is neither sits at the right in slate. What a column used to
   be called is still written in every cell, as the label a screen reader hears
   and, under 720px where the row unstacks, as the visible label of the value
   beneath it. One label, two jobs, so the two can never disagree. */

.row-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The swimmers of a relay, folded into the row. The group is a .disclosure so
   that the site's details animation opens it; these rules are only the small
   size it wears inside a row. */

.disclosure-members {
  border-bottom: 0;
}

.disclosure-members > summary {
  justify-content: flex-start;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 500;
  font-stretch: 100%;
  color: var(--slate);
}

.disclosure-members > summary:hover {
  color: var(--ink);
}

.disclosure-members > .disclosure-body {
  padding-bottom: 0;
}

.members-list {
  margin: var(--s2) 0 0;
  max-width: 70ch;
  font-size: 0.875rem;
  color: var(--slate);
}

/* --- Records board ---------------------------------------------------------
   Two sections of records, each broken into one group per stretch of coast,
   shortest first. The distance is a figure and the route name sits beside it.
   A record is one line: the time, the swimmer with the category after the name
   in slate, and the rest of what is known at the right. Nothing is boxed; the
   hairline above a row and the hairline above a group are the whole frame. */

.board-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  /* pulled up under the rule of the page title, which the links belong to */
  margin: calc(var(--s6) * -1) 0 var(--s7);
  font-size: 0.9375rem;
  font-weight: 500;
}

/* the ink rule the home page gives its two records, so the two sections of
   this page read as the same kind of thing */
.records-board {
  max-width: 62rem;
  border-top: 2px solid var(--ink);
  padding-top: var(--s5);
}

/* A board of one-line rows leaves the right half of a desk screen empty, so
   past 1024px the groups flow into two columns. Each group is kept whole, and
   every group carries the same rule above it so the two columns start level
   instead of one of them opening on a hairline the other does not have. */
@media (min-width: 1024px) {
  .records-board {
    max-width: none;
  }

  .board-columns {
    columns: 2;
    column-gap: var(--s6);
  }

  .board-group {
    break-inside: avoid;
  }
}

.board-group {
  padding-top: var(--s5);
  margin-bottom: var(--s6);
  border-top: 1px solid var(--tide);
}

.board-group:last-child {
  margin-bottom: 0;
}

.board-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s4);
  margin: 0 0 var(--s2);
}

.board-km {
  font-size: 2rem;
  font-stretch: 118%;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.board-route {
  font-size: 1.25rem;
  font-weight: 500;
  font-stretch: 108%;
  color: var(--slate);
}

.board-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The rule of a row runs the width of its group, the same width the rule above
   the group head runs, so the board is ruled on one edge from top to bottom and
   the hover ground is the whole band rather than a patch inside it. */
.board-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  column-gap: var(--s4);
  align-items: baseline;
  padding: calc(var(--s3) / 2) 0;
  border-top: 1px solid var(--tide);
}

.board-row:hover {
  background: var(--surface);
}

/* the two official records of the main route, the ones the home page carries */
.board-row-top {
  border-bottom: 2px solid var(--gold);
}

.board-row-top + .board-row {
  border-top: 0;
}

.board-time {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

/* the swimmer and everything said about the swim: the name leads and the rest
   follows it in slate, on the same line where the column is wide enough for it
   and under the name where it is not */
.board-who {
  min-width: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.board-name {
  font-weight: 500;
}

/* inline-block so the category drops to a line of its own when the name has
   taken the first one, instead of breaking in half across the two */
.board-category {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate);
}

/* a line of its own, because run in after the category the two slate phrases
   read as one and neither of them says what it is */
.board-flag {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate);
}

.board-meta {
  text-align: right;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}

.board-members {
  margin-top: var(--s1);
}

/* --- Crossings registry ----------------------------------------------------
   Every ratified swim of one type, oldest first, read down the years. The
   segmented control above picks the type; the years run down a rail at the
   left and stay with their swims while those scroll past.

   The row is the records board's row turned around: the day and month lead it,
   the swimmer and the route hold the middle, what is known about the swimmer
   sits in slate at the right, and the time closes the line. Same hairlines,
   same figures, same white tint under the pointer. No boxes and no vertical
   rules: the rail is held by alignment alone. */

.registry-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s6);
  /* pulled up under the rule of the page title, the way the board's jump links
     are: the control belongs to the title and not to the first panel */
  margin: calc(var(--s6) * -1) 0 var(--s6);
  border-bottom: 1px solid var(--tide);
}

.registry-tab {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
  padding: var(--s3) 0;
  /* the ink mark of the active tab stands on the rule of the nav, not under it */
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--slate);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.registry-tab:hover {
  color: var(--ink);
  border-bottom-color: var(--tide);
}

.registry-tab[aria-current='true'] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.registry-tab-count {
  font-size: 0.875rem;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}

/* Room above a panel the address bar jumped to: enough for the sticky header
   and for the control that chose it, so a shared link opens on the tabs and
   not on a list with no heading over it. */
.registry-panel {
  scroll-margin-top: 10rem;
}

.registry-panel + .registry-panel {
  margin-top: var(--s8);
}

.registry-panel-title {
  font-size: 1.5rem;
  margin: 0 0 var(--s3);
}

/* With the script running the tab above already names the panel, so the
   heading steps out of the page and stays for whoever is listening to it. */
.registry-switched .registry-panel-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.registry-summary {
  margin: 0 0 var(--s6);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}

.registry-year {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  column-gap: var(--s5);
}

.registry-year + .registry-year {
  margin-top: var(--s6);
}

/* clear of the sticky header, so the figure parks under it rather than behind it */
.registry-year-figure {
  position: sticky;
  top: calc(var(--s8) + var(--s4));
  align-self: start;
  margin: 0;
  padding-top: calc(var(--s3) / 2);
  font-size: 2rem;
  font-stretch: 118%;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}

.registry-rows {
  grid-column: 2;
  list-style: none;
  margin: 0;
  padding: 0;
}

.registry-row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) max-content 3.5rem;
  column-gap: var(--s5);
  align-items: baseline;
  padding: calc(var(--s3) / 2) 0;
  border-top: 1px solid var(--tide);
}

.registry-row:hover {
  background: var(--surface);
}

.registry-day {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}

.registry-who {
  min-width: 0;
}

.registry-name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}

.registry-route {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--slate);
}

.registry-meta {
  text-align: right;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--slate);
}

.registry-time {
  text-align: right;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.registry-members {
  margin-top: var(--s1);
}

/* --- Crossing disclosures ------------------------------------------------- */

.disclosure-name {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s3);
}

.disclosure-name::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 2px solid var(--slate);
  border-bottom: 2px solid var(--slate);
  transform: translateY(-2px) rotate(-45deg);
}

.disclosure[open] > summary .disclosure-name::before {
  transform: translateY(-3px) rotate(45deg);
}

.disclosure > summary:hover .disclosure-name::before {
  border-color: var(--ink);
}

/* --- Video grid ------------------------------------------------------------
   A video card is an album card with three things added: the still is 16 by 9
   rather than 4 by 3, a play glyph sits on it, and the length is stamped in the
   corner. Everything else, the frame, the hover lift, the title, comes from
   .album-card in site.css, so the two galleries read as one set. */

.video-frame {
  display: block;
  position: relative;
  margin-bottom: var(--s3);
}

.video-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-surface);
  background: var(--sea);
  margin-bottom: 0;
}

/* A video ffmpeg could not read keeps a frame of the right shape: the wave
   pattern on the dark sea, which is the site's own mark, rather than the grey
   rectangle a missing image leaves. */
.video-cover-empty {
  background-color: var(--sea);
  background-image: url(../img/wave.svg);
  background-size: 160px 40px;
  background-repeat: repeat;
}

.video-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 18px solid var(--surface);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  transform: translate(-40%, -50%);
  transition: border-left-color var(--hover-step) ease;
}

.video-card:hover .video-glyph {
  border-left-color: var(--gold);
}

/* The badge sits on the still, so it carries its own dark ground rather than
   trusting whatever the frame happens to be at that corner. */
.video-time {
  position: absolute;
  right: var(--s2);
  bottom: var(--s2);
  padding: 2px var(--s2);
  border-radius: var(--r-control);
  background: rgba(15, 39, 64, 0.82);
  color: var(--sea-text);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
}

/* --- The line above the player -------------------------------------------- */

.video-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin: 0 0 var(--s5);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate);
}

/* --- News list and article ------------------------------------------------ */

.news-page-list {
  max-width: 68ch;
}

.article-date {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate);
  margin: 0 0 var(--s5);
}

/* The article body is written in the admin editor, so it arrives with its own
   markup: images keep the column, tables and embeds do not overflow it. */
.article-body img {
  max-width: 100%;
  height: auto;
}

.article-body iframe,
.article-body video {
  max-width: 100%;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
}

/* --- Products ------------------------------------------------------------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s6) var(--s5);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 1000px;
}

/* Every product arrives with a photo of its own shape, so each one sits in the
   same square white frame with the same padding and the tiles read as a set. */
.product-photo-link {
  display: block;
  border-radius: var(--r-surface);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--tide);
  padding: var(--s4);
}

.product-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--surface);
}

.product-name {
  margin: var(--s3) 0 var(--s1);
  font-weight: 500;
  line-height: 1.35;
}

.product-price {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--slate);
}

/* --- Narrow screens ------------------------------------------------------- */

/* A row is too wide to be squeezed, so under 720px it breaks in two: the
   figures keep the first line, the swimmer and everything said about the swim
   take the block under it. The year rail has nowhere to stand at this width,
   so it comes out of the margin and becomes the heading of its own swims.
   Nothing scrolls sideways and nothing is dropped. */

@media (max-width: 719px) {
  .row-label {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--slate);
  }

  .board-row,
  .registry-row {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--s4);
    row-gap: var(--s1);
    padding: var(--s3) 0;
  }

  .board-time,
  .registry-day {
    grid-column: 1;
    grid-row: 1;
  }

  .board-meta,
  .registry-time {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    white-space: normal;
  }

  .board-who,
  .registry-who {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .registry-meta {
    grid-column: 1 / -1;
    grid-row: 3;
    text-align: left;
  }

  /* stacked rather than run together, because the category of a record and
     the name of a swimmer are two different things to read */
  .board-name,
  .board-category {
    display: block;
  }

  .board-km {
    font-size: 1.75rem;
  }

  .board-route {
    font-size: 1.0625rem;
  }

  .registry-tabs {
    gap: 0 var(--s5);
  }

  .registry-tab {
    font-size: 0.9375rem;
  }

  .registry-year {
    display: block;
  }

  .registry-year-figure {
    position: static;
    padding-top: 0;
    margin-bottom: var(--s2);
    font-size: 1.5rem;
  }
}

@media (max-width: 700px) {
  .title-long .page-title h1 {
    font-size: 1.5rem;
  }

  .video-glyph {
    border-left-width: 14px;
    border-top-width: 9px;
    border-bottom-width: 9px;
  }
}