/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

.layer {
  block-size: 100%;
  display: grid;
  --gap: 20px;
  gap: var(--gap);
  --grid-slot-width: 180px;
  grid-template-columns: 1fr var(--grid-slot-width);
  grid-template-rows: minmax(1fr, auto);
  padding-inline: var(--gap);
}

.spotlight {
  container: spotlight / size;
  display: grid;
  place-items: center;
}

/* CSS makes us put a condition here, even though all we want to do is
unconditionally select the container so we can use cq units */
@container spotlight (width > 0) {
  .spotlight > .slot {
    inline-size: min(100cqi, 100cqb * (17 / 9));
    block-size: min(100cqb, 100cqi / (4 / 3));
  }
}

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center;
  align-content: center;
}

.grid > .slot {
  inline-size: 180px;
  block-size: 135px;
}

/* On a landscape phone the fixed 180px filmstrip rail squeezes the spotlight to
   a sliver; shrink the rail (keeping the 4:3 tile ratio) to give the spotlight
   room. Desktop landscape (height > 400px) is unaffected.
   [lotus #32] `max-height: 400px` alone also matches a short-but-wide desktop
   or PiP window that has nothing to do with a phone, so require a coarse
   (touch) pointer too — a resized desktop/PiP window kept its mouse pointer,
   so it won't match this and keeps the full-size rail. */
@media (max-height: 400px) and (pointer: coarse) {
  .layer {
    --grid-slot-width: 132px;
  }

  .grid > .slot {
    inline-size: 132px;
    block-size: 99px;
  }
}