/* Shared page sections. Figma: Hero | Banner, Content | Section Header, Banner | Desktop (Duo), Sections | Product. */

/* ---------- Hero banner ---------- */
.pty-hero { position: relative; overflow: hidden; background: var(--pty-paper); } /* Hub review 27 Oct: no pink behind the hero while the photo loads. Marty 4 Nov: overflow hidden so a sub-pixel sliver of the photo can't show under the bar */
.pty-hero__mark { position: absolute; left: 50%; top: calc(50% - 48px); width: min(786px, 72vw); height: auto; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 22px 11px rgba(0, 0, 0, 0.32)); } /* paper wordmark, Figma drop shadow 0/22/22 at 32% */
.pty-hero--bio .pty-hero__mark { display: none; }
.pty-hero__media { display: block; height: 420px; }
.pty-hero__media picture, .pty-hero__img, .pty-hero__media .pty-ph { display: block; width: 100%; height: 100%; }
.pty-hero__img { object-fit: cover; object-position: 50% 100%; }
.pty-hero__bar { position: relative; margin-top: -24px; background: var(--pty-paper); padding: 24px 20px 32px; border-radius: 48px 48px 0 0; } /* the bar tucks over the photo so nothing shows behind its corners */
.pty-hero__heading { margin: 0; font-family: var(--pty-font-display); font-weight: var(--pty-display-weight); font-size: 28px; line-height: 32px; letter-spacing: var(--pty-display-tracking); text-align: center; }
.pty-hero__heading a { text-decoration: none; }
@media (min-width: 768px) {
  .pty-hero { height: 540px; }
  .pty-hero__media { height: 540px; }
  .pty-hero__img { object-position: 50% 50%; }
  .pty-hero__bar { position: absolute; left: 0; right: 0; bottom: 0; margin-top: 0; height: 96px; padding: 0 32px; display: flex; align-items: center; justify-content: center; }
  .pty-hero__heading { font-size: 32px; line-height: 36px; }
}

/* New In page (Marty, Section Checks 5 Nov): title on the photo, no bar. The 20% cobalt wash from the mock was dropped once Marty colour-corrected the photo. 192px Playfair Regular at 1440, -1.5% tracking, shadow 0/16/32 at 40%. */
.pty-hero--title .pty-hero__media { position: relative; }
.pty-hero--title .pty-hero__img { object-position: 50% 50%; }
.pty-hero--title .pty-hero__title {
  position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; padding: 0 20px;
  font-family: var(--pty-font-display); font-weight: 400; font-size: clamp(64px, 13.33vw, 192px); line-height: 1.06; letter-spacing: -0.015em;
  color: var(--pty-paper); text-align: center; text-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}
.pty-hero--bio .pty-hero__media { height: 444px; }
.pty-hero--bio .pty-hero__bar { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 20px 48px; }
.pty-hero__bio { margin: 0; max-width: 900px; font-size: var(--pty-text-md); line-height: 22px; color: var(--pty-stone); text-align: center; }
@media (min-width: 768px) {
  .pty-hero--bio, .pty-hero--bio .pty-hero__media { height: 922px; }
  .pty-hero--bio .pty-hero__bar { height: auto; min-height: 224px; padding: 40px 32px 48px; }
  .pty-hero__bio { font-size: var(--pty-text-lg); line-height: 26px; }
}

/* ---------- Section header ---------- */
.pty-section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 0 20px; max-width: 1440px; margin-inline: auto; }
.pty-section-header__copy { display: grid; gap: 8px; }
.pty-section-header__heading { margin: 0; font-family: var(--pty-font-display); font-weight: var(--pty-display-weight); font-size: 28px; line-height: 32px; letter-spacing: var(--pty-display-tracking); }
.pty-section-header__body { margin: 0; font-size: var(--pty-text-md); line-height: 22px; color: var(--pty-stone); }
.pty-section-header__link { display: inline-flex; align-items: center; gap: 8px; flex: none; padding-bottom: 4px; font-size: var(--pty-text-sm); font-weight: 500; line-height: 20px; letter-spacing: var(--pty-label-tracking); text-transform: uppercase; color: var(--pty-rose); text-decoration: none; white-space: nowrap; }
.pty-section-header__link .pty-icon { width: 16px; height: 16px; }
.pty-section-header__link:hover { text-decoration: underline; }
@media (min-width: 768px) {
  .pty-section-header { padding: 0 32px; }
  .pty-section-header__heading { font-size: var(--pty-display-md); line-height: 36px; }
}
.pty-breaker { height: 64px; }

/* ---------- Duo banner ---------- */
.pty-duo { padding: 32px 20px; }
.pty-duo__inner { display: grid; max-width: 1376px; margin-inline: auto; border-radius: 8px; overflow: hidden; }
.pty-duo__media { height: 260px; background: var(--pty-shell); }
.pty-duo__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; display: block; }
.pty-duo__block { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 32px 24px; background: var(--pty-blush); text-align: center; }
.pty-duo__copy { margin: 0; font-family: var(--pty-font-display); font-weight: var(--pty-display-weight); font-size: var(--pty-display-xl); line-height: var(--pty-line-display); letter-spacing: var(--pty-display-tracking); }
.pty-duo .pty-btn .pty-icon { width: 20px; height: 20px; }
@media (min-width: 1024px) {
  .pty-duo { padding: 32px; }
  .pty-duo__inner { grid-template-columns: 624fr 752fr; height: 400px; }
  .pty-duo__media { height: 100%; }
  .pty-duo__media img { object-position: 100% 100%; } /* side by side the photo is cropped on its sides: keep the right, where the shoes are (the right shoe was cut in half at 1024) */
  .pty-duo__block { padding: 0 64px; }
  .pty-duo__copy { line-height: 68px; }
}

/* ---------- Product section ---------- */
.pty-products { padding: 32px 20px; }
.pty-products__row, .products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; max-width: 1376px; margin-inline: auto; }
@media (min-width: 768px) { .pty-products__row, .products { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (min-width: 1024px) {
  .pty-products { padding: 32px; }
  .pty-products__row, .products { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

/* ---------- Wordmark banner ---------- */
.pty-banner { padding: 32px 20px; }
.pty-banner__inner { position: relative; display: flex; align-items: center; justify-content: center; height: 220px; max-width: 1376px; margin-inline: auto; border-radius: 8px; overflow: hidden; background: var(--pty-shell); }
.pty-banner__img, .pty-banner__inner .pty-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 89%; } /* Marty's crop 4 Nov: the band from 50% to 94% down the photo */
.pty-banner__mark { position: relative; width: 280px; height: auto; }
@media (min-width: 1024px) {
  .pty-banner { padding: 32px; }
  .pty-banner__inner { height: 400px; }
  .pty-banner__mark { width: 836px; max-width: 70%; }
}