/* wpins/downloads — siatka plików do pobrania (URL ręczny). Radius 0, akcent czerwony, tokeny marki.
   Front + edytor (klasa .wpins-downloads--edit). */

.wpins-downloads__title {
  margin: 0 0 1.25rem;
  font-family: var(--font-wpins-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.05;
  color: var(--color-wpins-heading);
  border-bottom: 2px solid var(--color-wpins-accent);
  display: inline-block;
  padding-bottom: 0.4rem;
}

.wpins-downloads__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
/* Desktop: po dwa w rzędzie. Poniżej (tablet/mobile) — jedna kolumna (długie nazwy mają pełną szerokość). */
@media (min-width: 1024px) {
  .wpins-downloads__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wpins-downloads__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "chip main actions";
  align-items: start;
  gap: 0 0.85rem;
  background: var(--color-wpins-canvas);
  border: 1px solid var(--color-wpins-border);
  border-left: 3px solid var(--color-wpins-border); /* widoczny też bez hover (był transparent) */
  padding: 0.85rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.wpins-downloads__card:hover {
  border-left-color: var(--color-wpins-accent);
  background: var(--color-wpins-alt);
}

/* Chip po lewej: ikona / rozszerzenie / rozmiar w SŁUPKU (desktop/tablet). */
.wpins-downloads__chip {
  grid-area: chip;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 1px;
  color: var(--color-wpins-heading);
}
.wpins-downloads__chip svg { width: 22px; height: 22px; flex: 0 0 auto; }
.wpins-downloads__ext {
  font-family: var(--font-wpins-ui);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: var(--color-wpins-accent-text);
}
.wpins-downloads__size {
  font-family: var(--font-wpins-ui);
  font-size: 0.625rem;
  line-height: 1.2;
  color: var(--color-wpins-text-muted);
  white-space: nowrap; /* „· 77 KB" w jednej linii — nie łam „·77 / KB" na wąskim */
}

.wpins-downloads__main { grid-area: main; min-width: 0; }
.wpins-downloads__actions { grid-area: actions; display: flex; gap: 0.4rem; }

/* Mobile: wiersz 1 = sama NAZWA (pełna szerokość); wiersz 2 = chip poziomy (ikona · typ · rozmiar)
   po lewej + akcje po prawej. */
@media (max-width: 520px) {
  .wpins-downloads__card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main main" "chip actions";
    align-items: center;
    gap: 0.7rem 0.85rem;
  }
  .wpins-downloads__chip { flex-direction: row; align-items: center; gap: 0.4rem; padding-top: 0; }
  .wpins-downloads__chip .wpins-downloads__ext { font-size: 0.75rem; line-height: 1; }
  /* Mobile: rozmiar UKRYTY — drugorzędny, a długie wartości (np. „120,4 MB") najeżdżały na krawędź.
     Zostaje typ (JPG/PDF) + nazwa + akcje; rozmiar dalej widać na desktop/tablet. */
  .wpins-downloads__size { display: none; }
}

/* ── Opcja „numbered": licznik 01, 02… PRZED chipem. Auto (przenumerowuje się po reorderze),
   dekoracyjny (aria-hidden semantycznie — lista zostaje <ul>). ─────────────────────────────── */
.wpins-downloads--numbered .wpins-downloads__grid { counter-reset: wpins-dl; }
.wpins-downloads--numbered .wpins-downloads__card {
  counter-increment: wpins-dl;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "num chip main actions";
}
.wpins-downloads--numbered .wpins-downloads__card::before {
  content: counter(wpins-dl, decimal-leading-zero);
  grid-area: num;
  align-self: center;
  font-family: var(--font-wpins-heading);
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1;
  color: var(--color-wpins-accent-text);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 520px) {
  /* Mobile: numer NIE jest lewą szyną (za ciasno) — schodzi do dolnego wiersza obok chipu,
     nazwa dostaje pełną szerokość u góry. */
  .wpins-downloads--numbered .wpins-downloads__card {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "main main main main"
      "num  chip .    actions";
  }
  .wpins-downloads--numbered .wpins-downloads__card::before {
    align-self: center;
    font-size: 1.2rem;
  }
}
.wpins-downloads__name {
  font-family: var(--font-wpins-ui);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--color-wpins-heading);
  text-decoration: none;
}
.wpins-downloads__name:hover {
  color: var(--color-wpins-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wpins-downloads__desc {
  margin: 0.3rem 0 0;
  font-family: var(--font-wpins-ui);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-wpins-text-muted);
}

/* Akcje: Pobierz (primary, ink) + Kopiuj (secondary). Cel dotykowy 40px. */
.wpins-downloads__actions { flex: 0 0 auto; display: flex; gap: 0.4rem; }
.wpins-downloads__btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wpins-downloads__btn svg { width: 18px; height: 18px; }
.wpins-downloads__btn--dl {
  border: 1.5px solid var(--color-wpins-heading);
  color: var(--color-wpins-heading);
  background: transparent;
}
.wpins-downloads__btn--dl:hover,
.wpins-downloads__btn--dl:focus-visible {
  background: var(--color-wpins-heading);
  color: var(--color-wpins-canvas);
}
.wpins-downloads__copy {
  /* Wyraźna ramka też BEZ hover (border domyślny był za jasny). */
  border: 1px solid color-mix(in srgb, var(--color-wpins-heading) 22%, transparent);
  color: var(--color-wpins-text-muted);
  background: transparent;
}
.wpins-downloads__copy:hover,
.wpins-downloads__copy:focus-visible {
  color: var(--color-wpins-accent-text);
  border-color: var(--color-wpins-accent);
}
.wpins-downloads__copy .wpins-downloads__ico-check { display: none; }
.wpins-downloads__copy.is-copied { color: #1d9e75; border-color: #1d9e75; }
.wpins-downloads__copy.is-copied .wpins-downloads__ico-copy { display: none; }
.wpins-downloads__copy.is-copied .wpins-downloads__ico-check { display: inline-block; }

.wpins-downloads__btn:focus-visible {
  outline: 3px solid var(--color-wpins-focus);
  outline-offset: 2px;
}

/* Komunikat dla czytnika ekranu (aria-live) — wizualnie ukryty. */
.wpins-downloads__status {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ── Edytor: RODZIC (tytuł + InnerBlocks) + bloki-dzieci wpins/download-item ── */
/* Kolejność / przeciąganie / List View / usuwanie = natywne Gutenberga (bloki-dzieci). */
.wpins-downloads__title-input {
  display: block;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0.35rem 0.5rem;
  font-family: var(--font-wpins-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.5rem;
  color: var(--color-wpins-heading);
  background: transparent;
  border: 1px dashed var(--color-wpins-border);
}

/* Karta dziecka (blok wpins/download-item) w edytorze = mini-formularz. */
.wpins-dlitem { border: 1px solid var(--color-wpins-border); padding: 0.7rem 0.75rem; }
.wpins-dlitem .wpins-downloads__chip {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin-bottom: 0.5rem;
  color: var(--color-wpins-heading);
}
.wpins-dlitem .wpins-downloads__chip svg { width: 20px; height: 20px; }
.wpins-downloads__fields { display: flex; flex-direction: column; gap: 0.35rem; }
.wpins-downloads__f {
  width: 100%;
  padding: 0.32rem 0.45rem;
  font-family: var(--font-wpins-ui);
  color: var(--color-wpins-text);
  background: var(--color-wpins-canvas);
  border: 1px solid var(--color-wpins-border);
}
.wpins-downloads__f--name { font-weight: 700; font-size: 0.95rem; }
.wpins-downloads__f--desc { font-size: 0.8125rem; resize: vertical; }
.wpins-downloads__f--url { font-size: 0.75rem; border-style: dashed; }
.wpins-downloads__f:focus { outline: 2px solid var(--color-wpins-accent); outline-offset: 0; }