/* ==========================================================================
   SHORTS — dark distribution scene
   ========================================================================== */

.shorts {
  background:
    radial-gradient(110% 80% at 15% 100%, #2c1f14 0%, transparent 55%),
    var(--ink);
  color: var(--cream-on-dark);
  padding: clamp(4.5rem, 10vh, 8rem) 0;
  overflow: visible;
}

.shorts-inner {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: center;
  overflow: visible;
}

.shorts-copy, .shorts-phones { min-width: 0; }
.shorts-copy .section-title { margin-top: 1.2rem; }

.shorts-dek {
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted-on-dark);
  margin-top: 1rem;
}

.shorts-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-dark);
}

/* iPad/desktop only: plain "auto" grid tracks can still shrink under
   pressure, which is what wrapped "Week" onto its own line even though
   there was room — minmax(max-content, auto) stops a column from being
   squeezed narrower than its label's natural width. Left off on mobile,
   where the stat grid switches to a fixed 2-col layout (utils.css) with
   less spare width, and forcing nowrap there would overflow instead. */
@media (min-width: 861px) {
  .shorts-stats { grid-template-columns: repeat(3, minmax(max-content, auto)); }
  .shorts-stats dt { white-space: nowrap; }
}

.shorts-platforms {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-top: 1.2rem;
}
.shorts-platforms li {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  position: relative;
  padding-left: 1rem;
}
.shorts-platforms li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translateY(-50%);
  background: var(--orange);
}

.shorts-phones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1rem, 2.5vw, 1.5rem);
  overflow: visible;
}
.phone {
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.phone img { width: 100%; display: block; object-fit: cover; aspect-ratio: 9 / 16; }
.phone-a { transform: rotate(-2.5deg) translateY(14px); }
.phone-b { transform: translateY(-10px); }
.phone-c { transform: rotate(2.5deg) translateY(18px); }
.phone .ph-label { font-size: 0.56rem; }

/* Solid dark overlay + orange play button on each phone card */
.phone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  pointer-events: none;
  z-index: 1;
}
.phone::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='rgba(237%2C85%2C15%2C0.22)' stroke='%23ed550f' stroke-width='1.5'/%3E%3Cpath d='M10 8.5l7 3.5-7 3.5z' fill='%23ed550f'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}
.phone-a::after { transform: translate(-50%, -50%) rotate(2.5deg); }
.phone-c::after { transform: translate(-50%, -50%) rotate(-2.5deg); }