/**
 * Channel Wall — responsive logo grid navigation into Channel Details + EPG.
 *
 * OWNERSHIP: resources/css/frontend/channel_wall.css
 * Template type: channel_wall
 *
 * Width contract:
 * - Root .alignwide participates in the Theme Page wide column.
 * - Do not hard-code plugin max-widths (e.g. legacy 1400px).
 * - Do not add horizontal inset that doubles theme container padding.
 *
 * Tile sizing:
 * - Base logo/tile stage is 200×200 (1:1).
 * - Columns use auto-fit + minmax(min(100%, 200px), 1fr) so each row fills
 *   the content width; tiles shrink below 200px when the row is narrow and
 *   grow equally to absorb leftover space before wrapping.
 *
 * Isolation rules:
 * - Do not enqueue Channel Player / Bitmovin / EPG assets with this stylesheet.
 * - Scope every rule under .zype-channel-wall.
 */

.zype-channel-wall {
  --zype-channel-wall-gap: clamp(0.75rem, 1.5vw, 1.25rem);
  /* Preferred square logo stage; rows flex from this base via 1fr tracks. */
  --zype-channel-wall-tile-base: 200px;
  --zype-channel-wall-tile-pad: 0.75rem;
  --zype-channel-wall-surface: var(--zype-color-surface-muted, #1a1a1a);
  --zype-channel-wall-surface-hover: var(--zype-color-surface, #242424);
  --zype-channel-wall-border: rgba(255, 255, 255, 0.08);
  --zype-channel-wall-border-focus: var(--zype-color-accent, #f6c800);
  --zype-channel-wall-wide: var(
    --wp--style--global--wide-size,
    var(--zype-wide-width, var(--wp--style--global--content-size, 100%))
  );

  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  color: inherit;
}

/*
 * Theme Page wide-content contract: root.alignwide participates in the Theme
 * wide column. Component layout stays width/max-width 100% inside that host.
 */
.zype-channel-wall.alignwide {
  width: 100%;
  max-width: min(100%, var(--zype-channel-wall-wide));
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
}

.zype-channel-wall *,
.zype-channel-wall *::before,
.zype-channel-wall *::after {
  box-sizing: border-box;
}

.zype-channel-wall__title {
  margin: 0 0 0.75rem;
}

.zype-channel-wall__message,
.zype-channel-wall__error {
  margin: 0;
  color: inherit;
}

.zype-channel-wall__grid {
  display: grid;
  /*
   * Pack ~200px square tracks, then stretch with 1fr so the row consumes the
   * full content width. min(100%, 200px) lets a single column shrink on narrow
   * viewports without overflowing.
   */
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--zype-channel-wall-tile-base)), 1fr)
  );
  gap: var(--zype-channel-wall-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.zype-channel-wall__item {
  margin: 0;
  padding: 0;
  min-width: 0;
}

.zype-channel-wall__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: var(--zype-channel-wall-tile-pad);
  text-decoration: none;
  color: inherit;
  background: var(--zype-channel-wall-surface);
  border: 1px solid var(--zype-channel-wall-border);
  border-radius: 0.5rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

a.zype-channel-wall__tile:hover {
  background: var(--zype-channel-wall-surface-hover);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

a.zype-channel-wall__tile:focus {
  outline: none;
}

a.zype-channel-wall__tile:focus-visible {
  border-color: var(--zype-channel-wall-border-focus);
  box-shadow: 0 0 0 2px var(--zype-channel-wall-border-focus);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.zype-channel-wall__tile--unavailable {
  opacity: 0.55;
  cursor: not-allowed;
}

.zype-channel-wall__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
}

.zype-channel-wall__logo-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  aspect-ratio: 1 / 1;
}

.zype-channel-wall__logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0.25rem;
  text-align: center;
  font-size: clamp(0.75rem, 2.2vw, 0.95rem);
  font-weight: 600;
  line-height: 1.25;
  word-break: break-word;
}

.zype-channel-wall__name {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.3;
  font-weight: 500;
}

/* Visually hidden but available to assistive tech (when logo carries the visual). */
.zype-channel-wall .screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}