/* =====================================================
   Przyjaciele na podsłuchu — "o nas" and person pages
   (/sandbox/podcasts/:show_slug/hosts and .../hosts/:host_slug)
   Dark only · top nav · no sidebar
   =====================================================

   stylesheet_link_tag :app serves every file in this directory on every
   request, so [data-layout="about-pnp"] is the ONLY thing keeping these rules
   off the rest of the site. The scope is matched EXACTLY — never by prefix,
   never widened. Note that "about-pnp" merely CONTAINS "about"; attribute
   selectors match the whole value, so about.css cannot reach these pages and
   this file cannot reach the Workshop pair.

   "about-pnp" is also deliberately outside the prefix sandbox_homepage.css
   claims, so that sheet cannot reach these pages either — which is the point
   of naming for the destination rather than for the sandbox. See
   drafts/2604141907_podcast_pages_visual_upgrade/05_sandbox_violation.md.

   Two sources, one concern each:
     - the shell (tokens, reset, skip-link, visually-hidden, nav, footer) is
       copied from podcast_episode_pnp.css, because layouts/about_pnp.html.erb
       is a copy of layouts/podcast_episode_pnp.html.erb and carries the live
       class names
     - the page design is ported from
       drafts/design/about_us_page/pnp 3/about.css onto those live names

   No font-face rules here: DM Sans and DM Mono are declared unscoped at the
   top of podcast_episode_pnp.css, which loads on every page, so both families
   are already global.

   Nothing in this file responds to the theme attribute. These three pages are
   dark-only by design, exactly like the live PnP episode page, and the layout
   renders no theme toggle — so nothing can half-repaint them. */

/* ---------- TOKENS ---------- */
/* Cross-checked against podcast_episode_pnp.css. The design file calls these
   --bg / --pink / --blue / --text / --body / --muted / --dim / --pad; every
   one of those is byte-identical to its live --pnp- counterpart, so the live
   names win and the vocabulary does not fork. The single disagreement is
   --dim2: the design says 0.16, the live sheet 0.14, and the live value is
   what ships today. --pnp-bg2, --pnp-serif and --pnp-accent are new here —
   the design needs them and the episode page has no equivalent. */
[data-layout="about-pnp"] {
  --pnp-bg:     #0a1430;
  --pnp-bg2:    #101c3d;
  --pnp-pink:   #f600ac;
  --pnp-blue:   #01acf4;
  --pnp-text:   #f0f3ff;
  --pnp-body:   #cdd5ec;
  --pnp-muted:  #8898c0;
  --pnp-dim:    rgba(255, 255, 255, 0.07);
  --pnp-dim2:   rgba(255, 255, 255, 0.14);

  --pnp-sans:   "DM Sans", system-ui, sans-serif;
  --pnp-mono:   "DM Mono", ui-monospace, "Courier New", monospace;
  --pnp-serif:  'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;

  /* Two measures, not one. The nav keeps the episode page's wide cap so it
     stays effectively full-bleed, as the design draws it; the content column
     is the design's own 1000px, shared by .wrap, .footer-row and .band-id so
     the three line up. */
  --pnp-measure: 1600px;
  --pnp-wrap:    1000px;
  --pnp-gutter:  clamp(20px, 4vw, 40px);
  --pnp-ease:    cubic-bezier(0.4, 0, 0.2, 1);

  /* Marta is the pink voice, Dawid the blue one, as the "o nas" poster has it.
     Pink is the default; the layout adds .is-accent-blue on Dawid's page from
     @host. Never an inline <style>, which is what the design file suggested. */
  --pnp-accent: var(--pnp-pink);
}
[data-layout="about-pnp"].is-accent-blue { --pnp-accent: var(--pnp-blue); }

/* ---------- RESET / BASE ---------- */
[data-layout="about-pnp"] *,
[data-layout="about-pnp"] *::before,
[data-layout="about-pnp"] *::after { box-sizing: border-box; }

/* base_site.css styles a bare `body`/`section` and is served on EVERY page by
   stylesheet_link_tag :app, so its rules land here whether or not they make
   sense. The same four that wrecked the episode page wreck these, and each has
   to be answered explicitly — an attribute selector only beats an element
   selector for the properties it actually names:

     body { text-align: center }   → the person pages' prose centred
     body { align-items: center }  → flex body shrink-wraps its children
     body { padding: 2rem }        → a second gutter on top of --pnp-gutter
     section { max-width: 700px }  → any <section> capped below --pnp-wrap

   display:flex + flex-direction:column here is also what pins the footer to
   the bottom, with .wrap taking flex:1 below. The design file did the same
   thing with the same two rules; this is one mechanism, not two. */
[data-layout="about-pnp"] {
  margin: 0;
  padding: 0;
  text-align: left;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--pnp-bg);
  color: var(--pnp-text);
  font-family: var(--pnp-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
[data-layout="about-pnp"] section { max-width: none; margin-bottom: 0; }

/* fade.js observes 'header, section, footer' on every page and animates them
   in from opacity:0. Same neutralisation the episode page carries. */
[data-layout="about-pnp"] header,
[data-layout="about-pnp"] section,
[data-layout="about-pnp"] footer {
  opacity: 1 !important;
  transform: none !important;
}
[data-layout="about-pnp"] img,
[data-layout="about-pnp"] svg { display: block; max-width: 100%; }

/* The episode page sets a { color: var(--pnp-link) }, a blue that would repaint
   every link in these designs — the poster's host links, the cross-link, the
   chips and the nav all set their own colour and expect to inherit otherwise.
   This one line comes from the design file rather than the live sheet, and
   --pnp-link / --pnp-link-h are consequently not defined above. */
[data-layout="about-pnp"] a { color: inherit; text-decoration: none; }
[data-layout="about-pnp"] a:hover { color: var(--pnp-text); }
[data-layout="about-pnp"] button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
[data-layout="about-pnp"] ul { margin: 0; padding: 0; list-style: none; }
[data-layout="about-pnp"] p,
[data-layout="about-pnp"] h1,
[data-layout="about-pnp"] h2,
[data-layout="about-pnp"] h3 { margin: 0; }

[data-layout="about-pnp"] .visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[data-layout="about-pnp"] .skip-link {
  position: absolute; top: -60px; left: 8px; z-index: 20;
  background: var(--pnp-text); color: var(--pnp-bg);
  padding: 8px 14px; border-radius: 4px;
  font-family: var(--pnp-mono); font-size: 12px;
}
[data-layout="about-pnp"] .skip-link:focus { top: 8px; }

[data-layout="about-pnp"] :focus-visible {
  outline: 2px solid var(--pnp-blue);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- TOP NAV ---------- */
/* Top bar shared with the list and episode pages; podcast_show_pnp.css is the
   blueprint (was the design's own: 34px mark, 16px padding, 10.5px links).
   .pnp-nav__episodes / .pnp-nav__ep are deliberately not ported — the
   prev/next stepper markup is gone from this layout. */
[data-layout="about-pnp"] .pnp-nav {
  width: 100%; max-width: var(--pnp-measure); margin: 0 auto;
  padding: 18px var(--pnp-gutter) 10px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
}
[data-layout="about-pnp"] .pnp-nav__left {
  display: flex; align-items: center; gap: 18px; min-width: 0;
}
[data-layout="about-pnp"] .pnp-nav__logo { display: flex; align-items: center; }
[data-layout="about-pnp"] .pnp-nav__logo img {
  width: 45px; height: 45px;
  border-radius: 8px;
  border: 1px solid var(--pnp-dim2);
}
[data-layout="about-pnp"] .pnp-nav__links {
  display: flex; gap: 20px;
  font-family: var(--pnp-mono); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
}
[data-layout="about-pnp"] .pnp-nav__links a { color: var(--pnp-muted); transition: color .15s var(--pnp-ease); }
[data-layout="about-pnp"] .pnp-nav__links a:hover,
[data-layout="about-pnp"] .pnp-nav__links a[aria-current="page"] { color: var(--pnp-text); }

/* ---------- PAGE SHELL ---------- */
/* .wrap takes flex:1 so the footer sits at the bottom of short pages. */
[data-layout="about-pnp"] .wrap {
  width: 100%; max-width: var(--pnp-wrap); margin: 0 auto;
  padding: 0 var(--pnp-gutter);
  flex: 1;
}
[data-layout="about-pnp"] .kicker {
  font-family: var(--pnp-mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pnp-muted);
}

/* ---------- FOOTER ---------- */
/* Starts from the episode page's .pnp-footer and takes the design's row
   layout: left-aligned, space-between, wrapping, mono 10px. */
[data-layout="about-pnp"] .pnp-footer {
  width: 100%; max-width: var(--pnp-measure); margin: 52px auto 0;
  border-top: 1px solid var(--pnp-dim);
  text-align: left;
  padding: 22px var(--pnp-gutter);
}
[data-layout="about-pnp"] .footer-row {
  width: 100%; max-width: var(--pnp-wrap); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap;
  font-family: var(--pnp-mono); font-size: 10px;
  letter-spacing: 0.06em; color: var(--pnp-muted);
}
[data-layout="about-pnp"] .footer-row a:hover { color: var(--pnp-text); }

/* ---------- ICONS ---------- */
/* The sprite in shared/_about_icon_sprite.html.erb is solid fill, not the
   stroke outlines the design file assumed (D4). On navy this is the difference
   between visible and invisible, so every icon rule sets fill and never
   stroke, hover included. */
[data-layout="about-pnp"] .icon-round svg,
[data-layout="about-pnp"] .chip svg,
[data-layout="about-pnp"] .links svg {
  fill: currentColor;
  stroke: none;
}

/* ---------- PLATFORM / SOCIAL CHIPS ---------- */
[data-layout="about-pnp"] .listen-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-top: 26px;
}
[data-layout="about-pnp"] .listen-row .kicker { margin-right: 2px; }
[data-layout="about-pnp"] .icon-round {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--pnp-dim);
  display: grid; place-items: center;
  color: var(--pnp-body);
  transition: background-color .15s var(--pnp-ease), color .15s var(--pnp-ease);
}
[data-layout="about-pnp"] .icon-round:hover { background: var(--pnp-dim2); color: #fff; }
[data-layout="about-pnp"] .chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--pnp-dim2); border-radius: 999px;
  font-family: var(--pnp-mono); font-size: 11.5px;
  color: var(--pnp-body);
  transition: border-color .15s var(--pnp-ease), color .15s var(--pnp-ease);
}
[data-layout="about-pnp"] .chip:hover { border-color: rgba(255, 255, 255, 0.36); color: #fff; }

/* ═══════════════════════════════════════════════════════
   O NAS · PLAKAT — design 5
   ═══════════════════════════════════════════════════════ */

[data-layout="about-pnp"] .poster {
  text-align: center;
  padding: clamp(28px, 6vh, 64px) 0 0;
  display: flex; flex-direction: column; align-items: center;
}
[data-layout="about-pnp"] .poster-title {
  font-weight: 700;
  font-size: clamp(40px, 7.2vw, 74px); line-height: 0.98;
  letter-spacing: -0.035em;
}
[data-layout="about-pnp"] .poster-title .pink { color: var(--pnp-pink); }
[data-layout="about-pnp"] .poster-title .blue { color: var(--pnp-blue); }
[data-layout="about-pnp"] .poster-title .na { font-style: italic; font-weight: 400; font-size: 0.72em; }
[data-layout="about-pnp"] .poster .kicker { margin-top: 18px; }

/* The negative margin on the first image is what overlaps the two faces, and
   the two object-position values are what stops them cropping badly. Both are
   carried across exactly. */
[data-layout="about-pnp"] .duo { display: flex; justify-content: center; margin-top: clamp(28px, 5vh, 44px); }
/* Each avatar is wrapped in a link to that host's page, so first/last is
   counted on the links, not the images (each image is its link's only child). */
[data-layout="about-pnp"] .duo a { display: block; flex-shrink: 0; border-radius: 50%; }
[data-layout="about-pnp"] .duo img {
  display: block;
  width: clamp(120px, 17vw, 172px); height: clamp(120px, 17vw, 172px);
  border-radius: 50%; object-fit: cover;
  background: var(--pnp-bg);
}
[data-layout="about-pnp"] .duo a:first-child { margin-right: clamp(-30px, -3vw, -20px); }
[data-layout="about-pnp"] .duo a:first-child img {
  object-position: 50% 34%;
  border: 2px solid var(--pnp-pink);
}
[data-layout="about-pnp"] .duo a:last-child img {
  object-position: 50% 18%;
  border: 2px solid var(--pnp-blue);
}
[data-layout="about-pnp"] .poster-lede {
  font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6;
  max-width: 30ch; margin: clamp(26px, 4vh, 38px) auto 0;
}
[data-layout="about-pnp"] .hosts {
  display: grid; grid-template-columns: 1fr 1px 1fr;
  gap: clamp(20px, 3vw, 34px);
  width: 100%; max-width: 660px;
  margin: clamp(30px, 5vh, 46px) auto 0;
  text-align: left;
}
[data-layout="about-pnp"] .hosts-rule { background: var(--pnp-dim2); }
[data-layout="about-pnp"] .host-name {
  font-family: var(--pnp-mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
[data-layout="about-pnp"] .host-name.pink { color: var(--pnp-pink); }
[data-layout="about-pnp"] .host-name.blue { color: var(--pnp-blue); }
[data-layout="about-pnp"] .host-bio { font-size: 13.5px; line-height: 1.7; color: var(--pnp-body); margin-top: 8px; }
[data-layout="about-pnp"] .host-links {
  display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 14px;
  font-family: var(--pnp-mono); font-size: 11.5px; color: var(--pnp-muted);
}
[data-layout="about-pnp"] .host-links a:hover { color: var(--pnp-text); }
[data-layout="about-pnp"] .poster .listen-row { justify-content: center; margin-top: clamp(26px, 4vh, 38px); }

/* ═══════════════════════════════════════════════════════
   STRONA OSOBY · PORTRET — designs 3 and 4
   ═══════════════════════════════════════════════════════ */

[data-layout="about-pnp"] .band {
  position: relative; width: 100%;
  height: clamp(260px, 40vh, 420px);
  overflow: hidden;
}
[data-layout="about-pnp"] .band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
/* Dawid's face sits lower in his photo than Marta's; at 26% the band shows
   only his hair. 48% centres the strip on his eyes and nose. */
[data-layout="about-pnp"] .band--dawid img { object-position: 50% 48%; }
/* Zoomed out: both photos are far taller than the band, so full-width cover
   is the tightest they can be. The sharp copy takes 64% of the width and
   fades at its sides into a blurred copy that fills the rest. */
[data-layout="about-pnp"] .band .band-photo {
  position: absolute; top: 0; left: 18%; width: 64%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
[data-layout="about-pnp"] .band-backdrop {
  position: absolute; inset: 0;
  filter: blur(16px) brightness(0.75);
  transform: scale(1.08);
}
/* Left of Marta's face is a bright window, but the stretched blurred copy
   puts a streak of her hair there. Her backdrop fades out on the left onto
   the window's own colours, sampled from the photo's left edge. */
[data-layout="about-pnp"] .band--marta { background: linear-gradient(#c8dadc 20%, #8d9794 70%); }
[data-layout="about-pnp"] .band--marta .band-backdrop {
  -webkit-mask-image: linear-gradient(to right, transparent 30%, #000 60%);
          mask-image: linear-gradient(to right, transparent 30%, #000 60%);
}
/* Two steps further out than Dawid's: 40% of the width. */
[data-layout="about-pnp"] .band--marta .band-photo { left: 30%; width: 40%; }
[data-layout="about-pnp"] .band-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--pnp-bg) 3%, rgba(10, 20, 48, 0.34) 46%, rgba(246, 0, 172, 0.13) 100%);
}
[data-layout="about-pnp"] .band-scrim--blue {
  background: linear-gradient(to top, var(--pnp-bg) 3%, rgba(10, 20, 48, 0.34) 46%, rgba(1, 172, 244, 0.14) 100%);
}
[data-layout="about-pnp"] .band-id {
  position: absolute; left: 0; right: 0; bottom: 14px;
  width: 100%; max-width: var(--pnp-wrap); margin: 0 auto;
  padding: 0 var(--pnp-gutter);
  text-shadow: 0 1px 14px rgba(10, 20, 48, .55);
}
[data-layout="about-pnp"] .band-id .kicker { color: var(--pnp-accent); }
[data-layout="about-pnp"] .band-id h1 {
  font-weight: 700; font-size: clamp(42px, 7vw, 72px);
  line-height: 0.98; letter-spacing: -0.035em; margin-top: 8px;
}

[data-layout="about-pnp"] .person {
  display: grid; grid-template-columns: 1fr 268px;
  gap: clamp(24px, 4vw, 44px);
  padding-top: clamp(22px, 4vh, 32px);
}
[data-layout="about-pnp"] .pull {
  font-family: var(--pnp-serif); font-weight: 400;
  font-size: clamp(21px, 2.4vw, 27px); line-height: 1.3;
  letter-spacing: -0.01em;
}
[data-layout="about-pnp"] .person-prose p + p {
  margin-top: 16px; font-size: 14.5px; line-height: 1.75;
  color: var(--pnp-body);
}

/* Prose that is knowingly unwritten, not prose that failed to load. Marta's
   bio is one sentence where the design wants a pull-quote plus two paragraphs,
   so the gap is marked rather than hidden (D8, 7.5). These paragraphs come out
   when 10.2 is done. */
[data-layout="about-pnp"] .person-prose p.is-placeholder {
  color: var(--pnp-muted);
  font-style: italic;
  border-left: 2px dashed var(--pnp-dim2);
  padding-left: 14px;
}

[data-layout="about-pnp"] .links-label {
  font-family: var(--pnp-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pnp-accent);
}
[data-layout="about-pnp"] .links { margin-top: 4px; }
[data-layout="about-pnp"] .links a,
[data-layout="about-pnp"] .links .is-blank {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--pnp-dim);
  color: var(--pnp-body); transition: color .15s var(--pnp-ease);
}
[data-layout="about-pnp"] .links a:hover { color: #fff; }
/* A Host field with no URL renders as plain text, not an href="#" anchor (D8).
   It reads as a gap rather than a broken link, and the row becomes a working
   link with no view change the moment the URL is seeded. */
[data-layout="about-pnp"] .links .is-blank { color: var(--pnp-muted); }
[data-layout="about-pnp"] .links .lbl { font-family: var(--pnp-mono); font-size: 11.5px; }
[data-layout="about-pnp"] .links .arrow { margin-left: auto; font-size: 11px; color: var(--pnp-muted); }

[data-layout="about-pnp"] .cross-link {
  display: inline-block; margin-top: 16px;
  font-family: var(--pnp-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pnp-blue);
}
[data-layout="about-pnp"] .cross-link--pink { color: var(--pnp-pink); }

/* ---------- RESPONSIVE ---------- */
/* The design's own 720px collapse for the page body. The top bar follows the
   shared 560px breakpoint below instead. */
@media (max-width: 720px) {
  [data-layout="about-pnp"] .hosts { grid-template-columns: 1fr; gap: 24px; }
  [data-layout="about-pnp"] .hosts-rule { height: 1px; width: 100%; }
  [data-layout="about-pnp"] .person { grid-template-columns: 1fr; gap: 26px; }
  [data-layout="about-pnp"] .band { height: clamp(220px, 32vh, 300px); }
}
/* Top bar on narrow screens — same breakpoint and values as the list and
   episode pages. */
@media (max-width: 560px) {
  [data-layout="about-pnp"] .pnp-nav { flex-wrap: wrap; gap: 12px; }
  [data-layout="about-pnp"] .pnp-nav__links { gap: 14px; font-size: 10px; }
}