/* =====================================================
   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 ---------- */
/* Live class names, design values: 34px mark with a 7px radius and a hairline
   border instead of the episode page's 44px/8px, and the design's smaller link
   scale. .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: 16px var(--pnp-gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
[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: 34px; height: 34px;
  border-radius: 7px;
  border: 1px solid var(--pnp-dim2);
}
[data-layout="about-pnp"] .pnp-nav__links {
  display: flex; gap: 20px;
  font-family: var(--pnp-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pnp-muted);
}
[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 { color: var(--pnp-text); }
[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); }
[data-layout="about-pnp"] .duo img {
  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 img:first-child {
  object-position: 50% 34%;
  border: 2px solid var(--pnp-pink);
  margin-right: clamp(-30px, -3vw, -20px);
}
[data-layout="about-pnp"] .duo img:last-child {
  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%; }
[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, and only that one. The episode sheet's
   860px and 560px breakpoints exist for the hero and the prev/next stepper,
   neither of which this layout renders, so there was nothing to port from
   them beyond the nav sizing the design already restates here. */
@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); }
  [data-layout="about-pnp"] .pnp-nav__links { gap: 14px; font-size: 9.5px; }
}