/* Keep the reading rhythm consistent from the hero to the release details. */
.tab-panel {
  padding-top: 20px;
}

.section-description {
  margin-top: 6px;
  margin-bottom: 16px;
}

.file-manifest {
  border-radius: var(--radius-surface);
}

#panel-release > .file-manifest {
  margin-top: 14px;
}

.screenshot-grid {
  gap: 12px;
}

.screenshot {
  border-radius: var(--radius-surface);
}

.screenshots-panel .screenshot,
.screenshots-panel .screenshot:hover {
  background-image: none;
  transform: none;
  filter: none;
  transition: none;
}

.screenshots-panel .screenshot::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--gallery-image);
  background-size: var(--sprite-size);
  background-position: var(--sprite-position);
  background-repeat: no-repeat;
  transition: transform .32s ease;
}

.screenshots-panel .screenshot:is(:hover, :focus-visible)::before {
  transform: scale(1.045);
}

/* Use the video proportions for both media tabs. */
.release-content {
  --media-columns: minmax(0, 1fr) minmax(283px, 36%);
  --media-column-gap: 24px;
  container: release-media / inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.release-content > .tabs { grid-area: 1 / 1; }
.release-content > .tab-panel { grid-area: 2 / 1; }

.screenshots-panel .screenshots { margin-top: 0; }

.screenshots-panel .screenshot-grid {
  grid-template-columns: var(--media-columns);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px var(--media-column-gap);
  overflow: visible;
  padding-bottom: 0;
}

.screenshots-panel .screenshot-grid > .screenshot {
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
  border-radius: var(--radius-surface);
}

.screenshots-panel .screenshot-grid > .screenshot:first-child {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  height: auto;
  aspect-ratio: 16 / 9;
}

.screenshots-panel .screenshot-grid[data-count="2"] > .screenshot:nth-child(2) {
  grid-column: 2;
  grid-row: 1 / span 2;
}

@container release-media (min-width: 701px) {
  /* The inactive media panel reserves the caption/queue height, but remains
     invisible and excluded from keyboard navigation and the accessibility tree. */
  .release-content:has(#tab-screenshots[aria-selected="true"], #tab-videos[aria-selected="true"])
    > :is(.screenshots-panel, .videos-panel)[hidden] {
    display: block;
    visibility: hidden;
    pointer-events: none;
  }

  .screenshots-panel[hidden] .screenshot-extra-grid { display: none; }
}

@container release-media (max-width: 700px) {
  .screenshots-panel .screenshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 12px;
  }

  .screenshots-panel .screenshot-grid > .screenshot:first-child {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .screenshots-panel .screenshot-grid > .screenshot:not(:first-child) {
    grid-column: auto;
    grid-row: auto;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

.screenshot-more { margin-top: 8px; }
.screenshot-more-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  min-height: 32px;
  margin-left: auto;
  padding: 4px 0 4px 12px;
  list-style: none;
  color: #526b7b;
  cursor: pointer;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.5;
}
.screenshot-more-toggle::-webkit-details-marker { display: none; }
.screenshot-more-toggle:hover { color: #213746; }
.screenshot-more-toggle:focus-visible { outline: 2px solid #7890a0; outline-offset: 3px; border-radius: var(--radius-control); }
.screenshot-more-count { color: #80909c; font-weight: 400; }
.screenshot-more-chevron {
  width: 6px;
  height: 6px;
  margin: -3px 3px 0 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}
.screenshot-more-hide, .screenshot-more[open] .screenshot-more-show { display: none; }
.screenshot-more[open] .screenshot-more-hide { display: inline; }
.screenshot-more[open] .screenshot-more-chevron { transform: rotate(225deg); margin-top: 3px; }
.screenshot-extra-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.screenshots-panel .screenshot-extra {
  aspect-ratio: 16 / 9;
  padding: 0;
  background: #f1f3f4;
}
.screenshots-panel .screenshot-extra::before { display: none; }
.screenshot-extra img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.screenshot-extra:is(:hover, :focus-visible) img { transform: scale(1.035); }
.screenshots-empty { margin: 0; font-size: 13px; color: #728393; }
@media (max-width: 700px) {
  .screenshot-extra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screenshot-more-toggle { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .screenshot-extra img { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .screenshots-panel .screenshot:is(:hover, :focus-visible)::before {
    transform: none;
  }
}

@media (min-width: 541px) {
  .file-row {
    min-height: 40px;
  }

  .root-row {
    min-height: 44px;
  }

  .file-row.depth-two {
    min-height: 38px;
  }
}

/* Five navigation labels fit cleanly up to the two-column breakpoint. */
@media (min-width: 901px) and (max-width: 1000px) {
  .tabs {
    gap: 16px;
  }
}

/* A tablet keeps the release panel close to its desktop proportions. */
@media (max-width: 900px) {
  .release-column {
    margin-bottom: 32px;
  }

  .release-card {
    width: min(100%, 560px);
    margin-inline: auto;
  }

}

@media (max-width: 540px) {
  .tab-panel {
    padding-top: 20px;
  }

}