/* ---------------------------------------------------------------------
   Partner profile page (/partners/:slug).

   Scoped entirely under .partner-page, so nothing here can reach another
   page. Every colour, radius, shadow and font below is an existing token
   from style.css's monochrome design system — this file introduces NO new
   design language, no gradients, no glass, no accent colour of its own.

   Phone-first. The profile is a single narrow column at every width; the
   desktop "version" is that same column, centred, with slightly larger
   type and a two-up product grid when the partner has enough products to
   justify one. That is deliberate: a link-in-bio page that grows into a
   full-width marketing layout on desktop stops being a profile.
   --------------------------------------------------------------------- */

.partner-page {
  background-color: var(--color-bg);
  /* Declared on the page, not on .pprofile, because the admin preview bar is
     a SIBLING of the profile and needs the same value. */
  --pprofile-header-clearance: 68px;
}

/* The column. 34rem is ~544px: wide enough for a comfortable 60-70ch bio
   line at desktop sizes, narrow enough that the page still reads as a
   profile rather than a landing page. */
.pprofile {
  --pprofile-gap: 12px;
  /* --pprofile-header-clearance (68px, set on .partner-page) clears the fixed
     site header — the same constant style.css already reserves for it via
     `.page-banner { margin-top: 68px }` on every existing inner page. The
     remainder is this page's own breathing room. Without the clearance the
     avatar renders underneath the header. */
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  /* Side padding is what guarantees no horizontal overflow at 320px: every
     child is width:100% of an already-inset column. */
  padding: calc(var(--pprofile-header-clearance) + 20px) 20px 56px;
}

@media (min-width: 576px) {
  .pprofile {
    padding: calc(var(--pprofile-header-clearance) + 32px) 24px 72px;
  }
}

/* ----------------------------- Header ----------------------------- */

.pprofile__head {
  text-align: center;
  margin-bottom: 26px;
}

.pprofile__avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  /* Explicit box before the image arrives — this is the LCP element on the
     page and must not shift when it paints. */
  flex: 0 0 auto;
}

.pprofile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* No uploaded image: the partner's initials on a brand surface. A
   deliberate-looking mark, never a broken-image icon or a grey box. */
.pprofile__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  font-family: var(--prosto-one);
}

.pprofile__name {
  font-family: var(--prosto-one);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 6px;
  /* A long single-token display name (no spaces) must wrap rather than
     widen the column and overflow the viewport. */
  overflow-wrap: anywhere;
}

.pprofile__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.pprofile__handle {
  font-size: 14px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

/* The partner-type / verified indicator. A quiet outlined chip — the brand
   is monochrome, so status is communicated with weight and a border, not a
   colour badge. */
.pprofile__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  white-space: nowrap;
}

.pprofile__badge i {
  font-size: 10px;
}

.pprofile__bio {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0 auto 16px;
  max-width: 32rem;
  overflow-wrap: break-word;
}

/* ----------------------------- Socials ----------------------------- */

.pprofile__socials {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

/* 44px is the tap-target floor, held at every breakpoint. */
.pprofile__social {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: 16px;
  transition: background-color var(--nav-dur) var(--nav-ease),
              border-color var(--nav-dur) var(--nav-ease),
              transform var(--nav-dur) var(--nav-ease);
}

.pprofile__social:hover,
.pprofile__social:focus-visible {
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

.pprofile__social:active {
  transform: scale(0.94);
}

/* ----------------------------- Sections ----------------------------- */

.pprofile__section {
  margin-top: 30px;
}

.pprofile__section-title {
  font-family: var(--prosto-one);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0 0 12px;
}

/* ----------------------------- Links ----------------------------- */

.pprofile__links {
  display: flex;
  flex-direction: column;
  gap: var(--pprofile-gap);
}

/* The shared row. Used by custom links AND by the compact product rows, so
   a profile reads as one rhythm of stacked cards rather than two systems. */
.pprofile__row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 12px 16px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  text-align: left;
  transition: transform var(--nav-dur) var(--nav-ease),
              box-shadow var(--nav-dur) var(--nav-ease),
              border-color var(--nav-dur) var(--nav-ease);
}

@media (hover: hover) {
  .pprofile__row:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(26, 26, 26, 0.18);
    color: var(--color-text);
  }
}

/* Touch devices get a press state instead of a hover state — a hover
   transform on a phone sticks after the tap and reads as a stuck card. */
.pprofile__row:active {
  transform: scale(0.985);
  box-shadow: var(--shadow-sm);
}

.pprofile__row-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: var(--color-surface-2);
  color: var(--color-text);
  font-size: 14px;
}

.pprofile__row-body {
  flex: 1 1 auto;
  min-width: 0; /* lets long titles ellipsize instead of widening the row */
}

.pprofile__row-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.pprofile__row-sub {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-muted);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.pprofile__row-chev {
  flex: 0 0 auto;
  color: var(--color-text-faint);
  font-size: 13px;
}

/* ----------------------- Featured / primary CTA ----------------------- */

/* The one filled, full-width action above the fold. Uses the site's
   existing filled-button treatment (near-black, pill, white ink) rather
   than a new one. */
.pprofile__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 14px 24px;
  background-color: var(--color-primary);
  color: #ffffff;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--nav-dur) var(--nav-ease),
              transform var(--nav-dur) var(--nav-ease),
              box-shadow var(--nav-dur) var(--nav-ease);
}

.pprofile__cta:hover,
.pprofile__cta:focus-visible {
  background-color: var(--color-primary-hover);
  color: #ffffff;
  box-shadow: var(--shadow-md);
}

.pprofile__cta:active {
  transform: scale(0.985);
}

/* `color: inherit` is load-bearing, not tidying. style.css has a global
   `span { color: var(--span) }` (near-black), which beats the colour set on
   the anchor — so this label rendered near-black ON the near-black button
   and the CTA read as an arrow with no text. Any span this file places on a
   filled surface needs the same treatment. */
.pprofile__cta-label {
  color: inherit;
  overflow-wrap: anywhere;
}

/* ----------------------- Featured product card ----------------------- */

.pprofile__feature {
  display: block;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  transition: transform var(--nav-dur) var(--nav-ease),
              box-shadow var(--nav-dur) var(--nav-ease);
}

@media (hover: hover) {
  .pprofile__feature:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--color-text);
  }
}

.pprofile__feature:active {
  transform: scale(0.99);
}

/* 3:4 (portrait) matches the hero deck's plate and the real catalog, whose
   covers cluster at 0.667/0.708/0.800 — the same ratio decision already made
   elsewhere on the site, not a new one.

   This was briefly 4/3, which is the same two numbers meaning the opposite
   thing: a landscape box around a portrait poster, so chooseFit fell back to
   `contain` and every featured cover sat letterboxed on a grey field with
   the column's width wasted either side. */
.pprofile__feature .pmedia {
  --pmedia-ratio: 3 / 4;
  --pmedia-radius: 0;
  width: 100%;
}

.pprofile__feature-body {
  padding: 14px 16px 16px;
}

.pprofile__feature-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: 6px;
}

.pprofile__feature-title {
  font-family: var(--prosto-one);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.pprofile__feature-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pprofile__price {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.pprofile__feature-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

/* ----------------------- Compact product rows ----------------------- */

/* Below the featured slot, products are dense rows rather than full cards.
   On a phone, four stacked 4:3 cards is four screens of scrolling for what
   is essentially a list — the brief explicitly asks for density here. */
.pprofile__row--product {
  padding: 10px 14px 10px 10px;
  gap: 12px;
}

.pprofile__thumb {
  flex: 0 0 auto;
  width: 64px;
}

.pprofile__thumb .pmedia {
  --pmedia-ratio: 1 / 1;
  --pmedia-radius: 8px;
  width: 64px;
}

.pprofile__row-price {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

/* The optional two-up grid (Appearance -> layout: grid). Only above 576px:
   two columns of product rows at 375px would put both below the comfortable
   tap-target and legibility floor. */
@media (min-width: 576px) {
  .pprofile--grid .pprofile__links--products {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pprofile-gap);
  }
}

/* ----------------------------- Footer mark ----------------------------- */

.pprofile__mark {
  margin-top: 36px;
  text-align: center;
}

/* Padded to a 44px tap target rather than sized to its 22px mark — this is
   a real link (back to the storefront) at the very bottom of a page that is
   scrolled with a thumb, so it has to be as tappable as every row above it. */
.pprofile__mark a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  transition: color var(--nav-dur) var(--nav-ease);
}

.pprofile__mark a:hover {
  color: var(--color-text);
}

/* Same global-span override as the CTA label above — without this the
   wordmark ignores the faint colour and renders at full contrast. */
.pprofile__mark a span {
  color: inherit;
}

.pprofile__mark img {
  height: 22px;
  /* Height-only sizing: the FA mark must never be given a width, or it
     distorts. See the branding notes. */
  width: auto;
  display: block;
  opacity: 0.55;
}

/* ----------------------------- Motion ----------------------------- */

/* One subtle entrance, staggered by position, and nothing else.

   The stagger is a fixed set of delay CLASSES rather than an inline
   custom property, for a hard reason: this site's CSP sends
   `style-src-attr 'self'` with an exception only for /admin, so a
   style="" attribute on a storefront page is silently dropped and the
   stagger would never apply. Classes also mean the entrance needs no
   JavaScript at all — the server assigns the class by index and the page
   animates on first paint, with nothing to wait for.

   The ramp deliberately stops at 8: past ~320ms the stagger stops reading
   as one movement, and a profile with 20 links would otherwise take two
   seconds to finish arriving. Everything after the 8th shares the last
   delay. */
.pprofile__reveal {
  opacity: 0;
  transform: translateY(8px);
  animation: pprofile-in 420ms var(--nav-ease) forwards;
}

.pprofile__reveal--1 { animation-delay: 40ms; }
.pprofile__reveal--2 { animation-delay: 80ms; }
.pprofile__reveal--3 { animation-delay: 120ms; }
.pprofile__reveal--4 { animation-delay: 160ms; }
.pprofile__reveal--5 { animation-delay: 200ms; }
.pprofile__reveal--6 { animation-delay: 240ms; }
.pprofile__reveal--7 { animation-delay: 280ms; }
.pprofile__reveal--8 { animation-delay: 320ms; }

@keyframes pprofile-in {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pprofile__reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .pprofile__row,
  .pprofile__cta,
  .pprofile__feature,
  .pprofile__social {
    transition: none;
  }
  .pprofile__row:active,
  .pprofile__cta:active,
  .pprofile__feature:active,
  .pprofile__social:active {
    transform: none;
  }
}

/* ----------------------------- Admin preview ----------------------------- */

/* Shown when an admin opens an unpublished profile through the preview
   route. Deliberately loud — it is the only thing distinguishing a draft
   from the live page, and the page it sits on is otherwise identical. */
/* The bar sits ABOVE .pprofile in the document, so it — not the profile —
   is what has to clear the fixed header. Its own top padding carries the
   68px, and the sibling rule below then drops the profile's clearance so
   the two don't stack into 156px of dead space. */
.pprofile__preview-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: calc(var(--pprofile-header-clearance, 68px) + 10px) 16px 10px;
  background-color: var(--color-text);
  color: var(--color-bg);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.pprofile__preview-bar + .pprofile {
  padding-top: 20px;
}

@media (min-width: 576px) {
  .pprofile__preview-bar + .pprofile {
    padding-top: 32px;
  }
}

.pprofile__preview-bar i {
  font-size: 12px;
}

/* --------------------------- Larger screens --------------------------- */

@media (min-width: 768px) {
  .pprofile__avatar {
    width: 120px;
    height: 120px;
  }
  .pprofile__avatar--initials {
    font-size: 38px;
  }
  .pprofile__name {
    font-size: 30px;
  }
  .pprofile__bio {
    font-size: 16px;
  }
  .pprofile__feature-title {
    font-size: 19px;
  }
}