/* ==========================================================================
   Block: Photo mosaic
   ========================================================================== */

/* Two columns at the comp's own measurements: 584px frames with a 32px
   gutter between them inside the 1248 content box (584 + 32 + 584 =
   1200, and the comp sets them at x=120 and x=736 of a 1440 frame).
   Column widths come from the content box rather than those absolute
   numbers, so the mosaic keeps the page's gutter at every width. */
.awx-pm__grid {
  display: grid;
  gap: var(--awx-space-sm);
  grid-template-columns: 1fr;
}

.awx-pm__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--awx-radius);
  border: var(--awx-rule) solid var(--surface-rule);
}

.awx-pm__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The comp's arrangement, which only makes sense once there is room for
   two columns: one tall frame on the left (584x706) beside two short
   ones stacked on the right (584x337 each, 337 + 32 + 337 = 706), then a
   full row of two equal frames (584x600).

   Expressed as explicit rows rather than a masonry flow so the pairing is
   the designer's, not whatever order the photos happen to be in: the
   first photo is the tall one, the next two are the short pair, and
   anything after that fills the rows beneath at equal height. */
@media (min-width: 48rem) {
  .awx-pm__grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(0, auto);
  }

  .awx-pm--mosaic .awx-pm__item:nth-child(1) {
    grid-column: 1;
    grid-row: span 2;
    aspect-ratio: 584 / 706;
  }

  .awx-pm--mosaic .awx-pm__item:nth-child(2),
  .awx-pm--mosaic .awx-pm__item:nth-child(3) {
    grid-column: 2;
    aspect-ratio: 584 / 337;
  }

  .awx-pm--mosaic .awx-pm__item:nth-child(n + 4) {
    aspect-ratio: 584 / 600;
  }

  /* A fourth photo with nothing after it is a full-width frame, not half
     of an unfinished row — the Checkers comp draws exactly that: three
     frames in the top block and then one 1200x600 beneath it. */
  .awx-pm--mosaic .awx-pm__item:nth-child(4):last-child {
    grid-column: 1 / -1;
    aspect-ratio: 1200 / 600;
  }
}

/* Single column: every frame reads at the same shape rather than
   inheriting a desktop row's proportions. */
@media (max-width: 47.99rem) {
  .awx-pm__item {
    aspect-ratio: 584 / 440;
  }
}

/* ---- Even grid ---------------------------------------------------------
   The Gallery's own arrangement: identical 584x320 frames, two across,
   as many rows as there are photographs. */
@media (min-width: 48rem) {
  .awx-pm--grid .awx-pm__item {
    aspect-ratio: 584 / 320;
  }
}

/* A photograph the active filter excludes. display:none rather than
   visibility so the grid closes up around it. */
.awx-pm__item[hidden] {
  display: none;
}

/* ---- Filter row --------------------------------------------------------
   The comp sets these as a single row of 16px/700 labels above the grid,
   the active one carrying the brand gold. */
.awx-pm__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--awx-space-md);
  margin-bottom: var(--awx-space-md);
}

.awx-pm__filter {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: var(--surface-muted);
  cursor: pointer;
  font-family: var(--awx-font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: normal;
  transition: color var(--awx-transition);
}

.awx-pm__filter:hover,
.awx-pm__filter.is-active {
  color: var(--surface-accent);
}

.awx-pm__filter:focus-visible {
  outline: 2px solid var(--surface-accent);
  outline-offset: 4px;
}