/* Chrome for the Background Effects demo.
 *
 * Unlike the other sub-pages this one has no designer mockup to match: the
 * block paints the whole viewport, so it can't be shown as a section in a
 * run of sections the way Flip Cards or Counter Scroll can. What it gets
 * instead is a picker -- a card of the twelve effects, laid out three across
 * on desktop and as a single column on phones, with whichever one is chosen
 * drifting over the whole page behind it.
 *
 * Sized in rem so it follows the theme scale in base.css, like the blocks.
 */

.bfx {
  max-width: 132rem;
  margin: 0 auto;
  padding: 0 2rem 6.4rem;
}

/* ===== Picker ===== */

.bfx__picker {
  background: var(--eez-white);
  border: 1px solid rgba(52, 21, 57, 0.1);
  border-radius: 1.2rem;
  overflow: hidden;
}

.bfx__picker-head {
  padding: 1.6rem 1.8rem;
  border-bottom: 1px solid rgba(52, 21, 57, 0.1);
}

.bfx__picker-title {
  margin: 0;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 1.7rem;
  letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
}

.bfx__picker-note {
  margin: 0.4rem 0 0;
  font-size: 1.35rem;
  line-height: 1.45;
  opacity: 0.65;
}

.bfx__list {
  list-style: none;
  margin: 0;
  padding: 0.6rem;
  /* Twelve effects, three across: four even rows, no scrolling. */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.2rem;
}

/* Grid items floor at min-content, and the effect descriptions are long
   enough to push the columns past their share of the row. */
.bfx__list > li { min-width: 0; }

.bfx__item {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  width: 100%;
  /* Rows are only as tall as their tallest description; filling the cell
     keeps the selected bar and hover tint even across a row. */
  height: 100%;
  padding: 1rem 1.1rem;
  border: 0;
  border-radius: 0.8rem;
  background: none;
  text-align: left;
  font-family: var(--font-body-family);
  color: var(--eez-ink);
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.bfx__item:hover { background: rgba(52, 21, 57, 0.05); }

.bfx__item:focus-visible {
  outline: 2px solid var(--eez-accent);
  outline-offset: -2px;
}

/* Selected state. The left bar is how the theme editor marks the section
   you are editing, which is the association this whole layout leans on. */
.bfx__item[aria-pressed='true'] {
  background: rgba(255, 136, 32, 0.12);
  box-shadow: inset 0.3rem 0 0 var(--eez-accent);
}

.bfx__item-icon {
  flex: none;
  font-size: 1.9rem;
  line-height: 1.3;
  /* Effects carry one to three glyphs each. Left to size themselves the
     icons come out 22, 44 or 66px wide and the names step in and out across
     the row, so hold the column at the widest of the three. */
  width: 6rem;
}

.bfx__item-name {
  display: block;
  font-size: 1.5rem;
  line-height: 1.3;
}

.bfx__item[aria-pressed='true'] .bfx__item-name { font-weight: 700; }

.bfx__item-desc {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.3rem;
  line-height: 1.4;
  opacity: 0.7;
}

/* Announcements only; the visible selected state is the picker itself. */
.bfx__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 989px) {
  .bfx {
    padding-bottom: 4rem;
  }

  /* Three columns of prose is unreadable on a phone; back to one effect per
     row, scrolling, so the list doesn't run the length of the page. */
  .bfx__list {
    grid-template-columns: 1fr;
    max-height: 30rem;
    overflow-y: auto;
  }
}