/* ============================================================
   Block: USP / Wyróżniki (.usp)
   Dulce de Leche Design System
   ============================================================ */

.usp {
  background: var(--cream-50);
  padding: var(--section-y) 0;
  position: relative;
}

.usp .wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- Header ---- */
.usp-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: clamp(60px, 8vw, 120px);
}

.usp-title {
  font-family: var(--display);
  font-weight: 350;
  font-variation-settings: "opsz" 144;
  font-size: clamp(40px, 5.4vw, 80px);
  line-height: 1.02;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.usp-title em {
  font-style: italic;
  color: var(--karmel);
  font-weight: 300;
}

.usp-intro {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--espresso);
  max-width: 44ch;
}

/* ---- Rail ---- */
.usp-rail {
  position: relative;
}

.usp-rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--karmel) 22%, transparent);
}

/* ---- Item ---- */
.usp-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(36px, 5vw, 72px) 0;
  align-items: start;
  border-top: var(--border-subtle);
}

.usp-item:last-child {
  border-bottom: var(--border-subtle);
}

/* Duża cyfra */
.usp-item .num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(72px, 10vw, 144px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--karmel);
}

/* Item z zdjęciem — szersza kolumna + wyrównanie pionowe */
.usp-item.has-media {
  grid-template-columns: 1.65fr 1fr;
  align-items: center;
}

.usp-item.has-media:nth-child(even) {
  grid-template-columns: 1fr 1.65fr;
}

/* Explicit grid-column dla .usp-media (analogicznie do .num) */
.usp-item:nth-child(odd) .usp-media {
  grid-column: 1;
  grid-row: 1;
}

.usp-item:nth-child(even) .usp-media {
  grid-column: 2;
  grid-row: 1;
}

/* ---- Zdjęcie (zastępuje dużą cyfrę) ---- */
.usp-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--cream-200);
}

.usp-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s var(--ease-out-expo);
}

.usp-item:hover .usp-media img {
  transform: scale(1.03);
}

/* Numer jako overlay w rogu */
.usp-num-badge {
  position: absolute;
  bottom: 16px;
  right: 20px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cream-50);
  text-shadow: 0 2px 12px rgba(26, 20, 16, 0.5);
  pointer-events: none;
  user-select: none;
}

/* Parzyste: badge po lewej (mirror pozycji) */
.usp-item:nth-child(even) .usp-num-badge {
  right: auto;
  left: 20px;
}

/* Treść */
.usp-item .body h4 {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "opsz" 60;
  font-size: var(--text-h4);
  margin: 6px 0 16px;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
}

.usp-item .body p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--espresso);
  max-width: 38ch;
}

.usp-item .body .tag {
  display: inline-block;
  margin-top: 16px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--karmel);
  padding: 4px 10px;
  border: var(--border-mid);
}

/* ---- Naprzemienna pozycja num/body ---- */
/* Nieparzyste: num po lewej, body po prawej (domyślne) */
.usp-item:nth-child(odd) .num {
  grid-column: 1;
  text-align: left;
}

.usp-item:nth-child(odd) .body {
  grid-column: 2;
}

/* Parzyste: body po lewej, num po prawej */
.usp-item:nth-child(even) .num {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
}

.usp-item:nth-child(even) .body {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
}

.usp-item:nth-child(even) .body p {
  margin-left: auto;
}

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .usp-head {
    grid-template-columns: 1fr;
  }

  .usp-item {
    grid-template-columns: 1fr !important;
  }

  .usp-item .num,
  .usp-item .body {
    grid-column: 1 !important;
    grid-row: auto !important;
    text-align: left !important;
    padding: 0 !important;
  }

  .usp-item:nth-child(even) .body p {
    margin-left: 0;
  }

  .usp-rail::before {
    display: none;
  }
}

/* ============================================================
   Sprint 2 — Wariant tła espresso (.usp--on-dark)
   Backward-compatible: dodawane tylko przy bg=espresso w ACF
============================================================ */
.usp.usp--on-dark {
	background: var(--espresso);
	color: var(--cream-50);
	position: relative;
}

.usp.usp--on-dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 60% at 0% 0%, rgba(201, 162, 74, 0.10), transparent 60%),
		radial-gradient(50% 50% at 100% 100%, rgba(122, 42, 46, 0.16), transparent 60%);
	pointer-events: none;
	z-index: 0;
}

.usp.usp--on-dark .wrap {
	position: relative;
	z-index: 1;
}

.usp.usp--on-dark .usp-title {
	color: var(--cream-50);
}

.usp.usp--on-dark .usp-title em {
	color: var(--gold);
}

.usp.usp--on-dark .usp-intro {
	color: color-mix(in srgb, var(--cream-50) 75%, transparent);
}

.usp.usp--on-dark .usp-item .num {
	color: var(--gold);
	opacity: 0.7;
}

.usp.usp--on-dark .usp-item h4 {
	color: var(--cream-50);
}

.usp.usp--on-dark .usp-item h4 em {
	color: var(--gold);
}

.usp.usp--on-dark .usp-item p {
	color: color-mix(in srgb, var(--cream-50) 75%, transparent);
}

.usp.usp--on-dark .usp-item .tag {
	color: var(--gold);
	border-color: color-mix(in srgb, var(--gold) 40%, transparent);
}