/* ---------- Submenu filters: sliding tabs ---------- */
.filters {
  display: flex;
  justify-self: right;
  position: relative;
  background: var(--color-surface, #efefef);
  border-radius: 999px;
  padding: 3px;
  margin: 0 0 1.5rem;
  top: 0;
}

/* sliding pill */
.filters::before {
  content: '';
  position: absolute;
  inset-block: 3px;
  left: var(--tab-left, 3px);
  width: var(--tab-width, 4rem);
  border-radius: 999px;
  background: var(--color-code-yellow, #E5E8A1);
  transition: left .28s cubic-bezier(.4, 0, .2, 1),
    width .28s cubic-bezier(.4, 0, .2, 1);
  z-index: 0;
  pointer-events: none;
}

.filters .layout-btn {
  position: relative;
  z-index: 1;
  background: none;
  border: 0;
  padding: .35rem 1rem;
  border-radius: 999px;
  font: inherit;
  font-size: .8rem;
  letter-spacing: .04em;
  color: #999;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s;
}

.filters .layout-btn:hover {
  color: #000;
}

.filters .layout-btn.active {
  color: #000;
  text-decoration: none;
}

/* ---------- Layout visibility & transition ---------- */
.layout-list,
.layout-grid {
  display: none;
}

.layout-list.is-active {
  display: table;
}

.layout-grid.is-active {
  display: grid;
}

.layout-list.is-active,
.layout-grid.is-active {
  animation: layout-fade-in .2s ease both;
}

@keyframes layout-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ---------- Layout 1: Numbered table ---------- */
.layout-list {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(.9rem, 1.2vw, 1.3rem);
  table-layout: auto;

}

.cls-1,
.cls-2,
.cls-3,
.cls-4,
.cls-5 {
  mix-blend-mode: multiply;
  opacity: .47;
  fill: yellow
}

.layout-list thead th {
  text-align: left;
  font-weight: inherit;
  color: #999;
  padding: .75rem .75rem;
  border-bottom: 1px solid #000;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.layout-list thead th:hover {
  color: #000;
}

.layout-list thead th[data-active]::after {
  content: '';
  display: inline-block;
  margin-left: .35em;
  border: .3em solid transparent;
  vertical-align: middle;
}

.layout-list thead th[data-active="asc"]::after {
  border-bottom-color: currentColor;
  border-top: 0;
}

.layout-list thead th[data-active="desc"]::after {
  border-top-color: currentColor;
  border-bottom: 0;
}

.layout-list tbody tr.album {
  border-bottom: 1px solid #e5e5e5;
}

.layout-list td {
  padding: 0;
  vertical-align: baseline;
  color: #999;
  font-variant-numeric: tabular-nums;
}

.layout-list td a {
  display: block;
  padding: .75rem .75rem;
  color: inherit;
  text-decoration: none;
  transition: opacity .2s;
}

.layout-list .col-title a {
  color: #000;
}

.layout-list .col-num {
  width: 3rem;
}

.layout-list .col-date {
  width: 5rem;
}

.layout-list .col-area {
  width: 7rem;
  text-align: right;
}

.layout-list tbody tr.album:hover {
  background-color: #E5E8A1;
  transition: all .2s;

}

/* dim all other rows when any row is hovered */
.layout-list tbody:has(tr:hover) tr:not(:hover) {
  opacity: .35;
  transition: opacity .2s;
}

/* hovered row: all columns go to black / full opacity */
.layout-list tbody tr.album:hover td a {
  color: #000;
  opacity: 1;
  transition: opacity .2s;
}


@media screen and (max-width: 800px) {

  .layout-list .col-area,
  .layout-list .col-cat,
  .layout-list .col-date {
    display: none;
  }
}

/* ---------- Shared grid (svg / cover / plano) ---------- */
.layout-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1.5rem;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-flow: dense;
}

@media screen and (min-width: 800px) {
  .layout-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1150px) {
  .layout-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (min-width: 1800px) {
  .layout-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.layout-grid .album {
  line-height: 1.2;
  transition: opacity .2s;
}

.layout-grid a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.layout-grid figure {
  margin: 0;
}

.layout-grid .cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #ececec;
  overflow: hidden;
}

.layout-grid img.cover {
  object-fit: cover;
  opacity: 0;
  transition: opacity .3s ease;
}

.layout-grid img.cover.is-loaded {
  opacity: 1;
}

.layout-grid figcaption {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  gap: .5rem;
  align-items: baseline;
  margin-top: .5rem;
  color: #666;
  font-size: .9em;
}

.layout-grid figcaption .num {
  color: #999;
  font-variant-numeric: tabular-nums;
}

.layout-grid figcaption .title {
  color: #000;
}

.layout-grid figcaption .meta {
  color: #999;
}

.layout-grid:has(.album:hover) .album:not(:hover) {
  opacity: .35;
}

/* ---------- Mode-specific cover variants ---------- */

.layout-svg .cover.svg-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  color: #333;
}

.layout-svg .svg-wrap>svg {
  width: 60%;
  height: 60%;
  max-width: 100%;
  max-height: 100%;
}

.layout-svg .svg-placeholder {
  color: #ccc;
}

/*
.layout-cover .album:hover img.cover {
  transform: scale(1.02);
  transition: opacity .3s, transform .4s;
}*/

.layout-plano .cover {
  background: #fafafa;
  border: 1px solid #eee;
}

.layout-plano img.cover {
  object-fit: contain;
  padding: .5rem;
}

.layout-plano .plano-placeholder {
  background-image:
    linear-gradient(#eee 1px, transparent 1px),
    linear-gradient(90deg, #eee 1px, transparent 1px);
  background-size: 16px 16px;
}