/* Pas pochodzenia „Wyprodukowano w Polsce" — arkusz `template-parts/polska-pas.php`.
 *
 * Canvas `docs/canvas/polska-znak/`, wariant C, artboardy C1/C2 (wytwórca),
 * C5/C7 (samo miasto), C6/C8 (bez miejsca). Wartości przepisane 05.10.2026.
 *
 * Telefon (≤ 640 px): wariant M1 „zwarty pas" z canvasu
 * `docs/canvas/polska-znak-mobile/` (13.10.2026) — flaga obok napisu, mapa
 * 108 px obok opisu, podpis w mapie zdjęty. Znacznik ten sam co na desktopie;
 * układ robi siatka dwóch kolumn na `__uklad`.
 *
 * Pas jest dzieckiem `.product`, tło idzie od krawędzi do krawędzi, a treść
 * siedzi w `.szewko-produkt__kolumna` (`single-product.css`) — tym samym
 * kontenerze 1400 px / 80 px, co zakup i zakładki, więc lewe krawędzie się
 * zgadzają. */

.szewko-polska {
  margin-top: var(--space-xl);
  background: var(--color-smoked-tent);
  color: var(--color-parchment);
  border-block: 4px solid var(--color-sand-gold);

  /* Odstęp do zakładek bierze na siebie `margin-top` zakładek (72 px) —
     pas nie dokłada własnego dołu. */
}

.szewko-polska__uklad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
  padding-block: 40px;

  /* M1: wiersz 1 — znak na obie kolumny; wiersz 2 — mapa | opis. Odstęp
     kolumn siedzi w `padding-left` opisu, nie w `column-gap`, żeby linia
     nad wierszem 2 (border mapy + border opisu) szła bez przerwy. */
  @media (max-width: 640px) {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    align-items: stretch;
    gap: 20px 0;
    padding-block: var(--space-lg);
  }
}

/* ─── FLAGA I NAPIS ─────────────────────────────────────────────────────── */

.szewko-polska__znak {
  flex: 1 1 340px;
  display: flex;
  align-items: center;
  gap: var(--space-lg);

  /* M1: flaga 52 px OBOK napisu w 26 px — „WYPRODUKOWANO" to ~270 px,
     mieści się w 292 px, które zostają obok flagi przy 390 px. */
  @media (max-width: 640px) {
    grid-column: 1 / -1;
    gap: 14px;
  }

  /* Zmierzone 13.10: „WYPRODUKOWANO" w 26 px ma 276 px, a 52 + 14 + 276 +
     2 × 24 = 390 — przy węższym ekranie słowo wystaje poza pas. Mniejszego
     Cinzela nie wolno (26 px to próg kroju), więc poniżej 390 px flaga wraca
     NAD napis, jak w zatwierdzonym C2; wystarcza do ~324 px. */
  @media (max-width: 389px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

.szewko-polska__flaga {
  flex: none;
  width: 120px;
  height: auto;
  filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--color-smoked-tent) 70%, transparent));

  @media (max-width: 640px) {
    width: 52px;
    filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--color-smoked-tent) 70%, transparent));
  }
}

.szewko-polska__flaga-biel {
  fill: var(--color-flaga-biel);
}

.szewko-polska__flaga-czerwien {
  fill: var(--color-flaga-czerwien);
}

/* Fałdy: cień i blask nałożone na całą flagę, krycie w `stop-opacity`. */
.szewko-polska__falda-cien {
  stop-color: var(--color-smoked-tent);
}

.szewko-polska__falda-blask {
  stop-color: var(--color-flaga-biel);
}

.szewko-polska__napisy {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);

  @media (max-width: 640px) {
    min-width: 0;
    gap: var(--space-xs);
  }
}

.szewko-polska__nadtytul {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-sand-gold);
}

/* Dwa wiersze jak na canvasie („Wyprodukowano" / „w Polsce") — przez
   szerokość, nie przez `<br>` w napisie z `inc/`: 11em mieści samo
   „WYPRODUKOWANO" (~10,4em w Cinzelu), a z kolejnym słowem już nie. */
.szewko-polska__naglowek {
  max-width: 11em;
  margin: 0;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--color-parchment);

  @media (max-width: 640px) {
    font-size: 26px;
  }
}

/* ─── MAPA ──────────────────────────────────────────────────────────────── */

.szewko-polska__mapa {
  flex: none;
  width: 240px;
  margin: 0;

  & svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  @media (max-width: 640px) {
    width: 108px;
    padding-top: 20px;
    border-top: 1px solid color-mix(in srgb, var(--color-sand-gold) 30%, transparent);
  }
}

/* Na telefonie mapa ma 108 px (skala 1 : 3), więc kontur, pierścień
   i pinezka grubieją — wartości M1: kreska 4, pierścień r 30 / kreska 4,
   pinezka r 15 / kreska 5 w jednostkach `viewBox`. Promień przez `scale()`
   wokół własnego środka (`transform-box: fill-box`); kreska pierścienia
   2,3 × 1,76 ≈ 4. */
.szewko-polska__kontur {
  fill: color-mix(in srgb, var(--color-sand-gold) 16%, transparent);
  stroke: var(--color-sand-gold);
  stroke-width: 2;
  stroke-linejoin: round;

  @media (max-width: 640px) {
    stroke-width: 4;
  }
}

.szewko-polska__pierscien {
  fill: none;
  stroke: color-mix(in srgb, var(--color-brass-lantern) 55%, transparent);
  stroke-width: 1.5;

  @media (max-width: 640px) {
    stroke-width: 2.3;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1.76);
  }
}

.szewko-polska__pinezka {
  fill: var(--color-brass-lantern);
  stroke: var(--color-smoked-tent);
  stroke-width: 2.5;

  @media (max-width: 640px) {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(2);
  }
}

/* Rozmiar w jednostkach `viewBox` — 19 z 324 przy mapie 240 px daje ~14 px.
   Na telefonie zdjęty: przy 108 px wyszłoby ~6 px, a miasto stoi w opisie. */
.szewko-polska__podpis {
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 700;
  fill: var(--color-parchment);

  @media (max-width: 640px) {
    display: none;
  }
}

/* ─── WYTWÓRCA, MIEJSCE, ZDANIE ─────────────────────────────────────────── */

.szewko-polska__opis {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  @media (max-width: 640px) {
    min-width: 0;
    justify-content: center;
    gap: var(--space-xs);
    padding: 20px 0 0 var(--space-md);
    border-top: 1px solid color-mix(in srgb, var(--color-sand-gold) 30%, transparent);

    /* Komórki siatki się rozciągają, żeby linia nad wierszem 2 stała na
       jednej wysokości; samo miasto wyśrodkowane przy mapie, zdanie od góry. */
    &:has(.szewko-polska__zdanie) {
      justify-content: flex-start;
      gap: 2px;
    }
  }
}

.szewko-polska__wytworca {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-parchment);

  @media (max-width: 640px) {
    font-size: 17px;
  }
}

.szewko-polska__miejsce {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--color-bleached-linen);

  @media (max-width: 640px) {
    font-size: 14px;
  }
}

.szewko-polska__zdanie {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-accent);
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-bleached-linen);

  @media (max-width: 640px) {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.45;
  }
}