/* PodFinder — Phase 2 UI. Source of truth: docs/DESIGN-SYSTEM.md
   "A friend with great taste": warm editorial-personal, blue-led, paper ground. */

:root {
  /* Color — light (the warm paper ground is the maturity move, not stark white) */
  --paper:   #FBF6EC;
  --card:    #FFFFFF;
  --ink:     #1C2530;
  --muted:   #5C6776;
  --line:    #EBE3D4;
  --tag:     #F1EADC;
  --blue:    #0070B0;
  --cyan:    #00A0D0;
  --coral:   #D02020;
  --magenta: #D01070;
  --on-accent: #FFFFFF;
  --shadow: 0 1px 2px rgba(28,37,48,.05), 0 8px 24px rgba(28,37,48,.07);
  --shadow-hover: 0 2px 4px rgba(28,37,48,.06), 0 14px 34px rgba(28,37,48,.12);

  /* Type */
  --font-display: 'Albert Sans', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;

  /* Space (8px unit) + radius */
  --s1: 8px;  --s2: 16px;  --s3: 24px;  --s4: 32px;  --s5: 48px;  --s6: 64px;
  --r-sm: 12px; --r-md: 16px; --r-pill: 999px;
  --maxw: 1080px;
}

[data-theme="dark"] {
  --paper:  #13171D;
  --card:   #1B212A;
  --ink:    #F2EEE6;
  --muted:  #9AA6B4;
  --line:   #2A323D;
  --tag:    #222A34;
  --blue:   #3FA9E2;
  --cyan:   #34B4DC;
  --coral:  #FF6B5C;  /* lifted for legibility on the dark card */
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
  --shadow-hover: 0 2px 4px rgba(0,0,0,.35), 0 14px 34px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

a { color: var(--blue); text-decoration: none; }
em { font-style: normal; color: var(--blue); }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--s3);
  flex: 1 0 auto;
}

/* ---------- Header ---------- */
.site-header {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s4) var(--s3) var(--s2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand { display: inline-flex; align-items: center; }
/* Square logos in both modes: logo_light.png (color) and logo_dark.png (white). */
.brand-logo { height: 136px; width: auto; display: block; }
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }

.theme-toggle {
  position: absolute;
  right: var(--s3);
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .18s ease, transform .18s ease;
}
.theme-toggle:hover { border-color: var(--blue); transform: translateY(-50%) scale(1.06); }
.theme-toggle-icon {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--blue);
  box-shadow: inset -4px -4px 0 0 var(--card);  /* crescent = moon (light mode) */
}
[data-theme="dark"] .theme-toggle-icon {
  background: var(--muted);
  box-shadow: inset 4px -4px 0 0 var(--card);  /* quiet crescent, no glow */
}

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  padding: var(--s2) 0 var(--s5);
}
.hero-compact { padding: var(--s4) 0 var(--s3); }
.hero-title { font-size: 44px; font-weight: 800; }
.hero-compact .hero-title { font-size: 30px; }
.hero-sub {
  color: var(--muted);
  font-size: 17px;
  margin: var(--s2) auto 0;
  max-width: 30em;
}
.hero-compact .hero-sub { display: none; }

.search {
  display: flex;
  gap: var(--s1);
  max-width: 600px;
  margin: var(--s4) auto 0;
}
.hero-compact .search { margin-top: var(--s3); }
.search-input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 17px;
  padding: 14px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 16%, transparent);
}
.search-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  padding: 0 26px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: var(--on-accent);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
.search-btn:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--blue) 88%, black); }

.examples {
  margin-top: var(--s3);
  display: flex; flex-wrap: wrap; gap: var(--s1);
  align-items: center; justify-content: center;
}
.examples-label { color: var(--muted); font-size: 14px; }
.chip {
  font-size: 14px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--tag);
  color: var(--ink);
  border: 1px solid transparent;
  transition: border-color .18s ease, transform .18s ease;
}
.chip:hover { border-color: var(--blue); transform: translateY(-1px); }

/* ---------- Results ---------- */
.results { padding: var(--s2) 0 var(--s6); }
.results-head {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s3);
}
.pod-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--line);
  object-fit: cover; flex: none;
}
.results-title { font-size: 27px; }
.results-sub { color: var(--muted); margin: 4px 0 0; font-size: 15px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
}

/* ---------- Card ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
  animation: card-in .28s ease both;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.card-cover { aspect-ratio: 1 / 1; background: var(--tag); }
.card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-missing {
  background: linear-gradient(135deg, var(--cyan), var(--blue));
}
.cover-missing img { display: none; }  /* hide the broken-image glyph over the gradient */

.card-body { padding: var(--s2); display: flex; flex-direction: column; gap: var(--s1); flex: 1; }
.card-title { font-size: 18px; }
.card-meta { margin: -2px 0 0; font-size: 12.5px; color: var(--muted); }

.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 12px; color: var(--muted);
  background: var(--tag);
  padding: 3px 10px; border-radius: var(--r-pill);
}

.card-why {
  margin: 0; color: var(--ink); font-size: 14.5px; line-height: 1.5;
  flex: 1;
}

.trailer { margin-top: 2px; }
.trailer-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--coral);
  background: color-mix(in srgb, var(--coral) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--coral) 30%, transparent);
  padding: 7px 14px; border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.trailer-btn:hover { background: color-mix(in srgb, var(--coral) 14%, transparent); transform: translateY(-1px); }
.trailer-btn.playing { color: var(--on-accent); background: var(--coral); border-color: var(--coral); }
.trailer-icon { font-size: 11px; }
.trailer audio { width: 100%; margin-top: var(--s1); }

.subscribe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s1); }
.sub {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  padding: 7px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--ink);
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.sub:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }
.sub-apple:hover { border-color: var(--magenta); color: var(--magenta); }
.sub-rss:hover { border-color: #E8732B; color: #E8732B; }  /* RSS orange */

/* Pocket Casts is an iOS app scheme — only useful on mobile (see DESIGN-SYSTEM). */
.mobile-only { display: none; }
body[data-mobile="1"] .mobile-only { display: inline-block; }

/* ---------- Show more ---------- */
.more-wrap { text-align: center; margin-top: var(--s4); }
.more-btn {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  padding: 13px 28px; border-radius: var(--r-pill);
  background: transparent; color: var(--blue);
  border: 1.5px solid var(--blue); cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.more-btn:hover { background: var(--blue); color: var(--on-accent); transform: translateY(-1px); }
.more-btn[hidden] { display: none; }

/* ---------- Footer ---------- */
.site-footer {
  flex: none;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: var(--s4) var(--s3);
  border-top: 1px solid var(--line);
  margin-top: var(--s5);
}
.footer-tagline { margin: 0; }
.footer-links { margin: var(--s2) 0 6px; display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--blue); }
.footer-sep { color: var(--line); }
.footer-copy { margin: 0; color: var(--muted); }

/* Long-form legal documents (privacy, terms) */
.legal-doc { max-width: 720px; margin: 0 auto; padding: var(--s5) 0 var(--s6); }
.legal-doc h1 { font-size: 34px; }
.legal-doc h2 { font-size: 20px; margin: var(--s4) 0 var(--s1); }
.legal-doc h3 { font-size: 16px; margin: var(--s2) 0 4px; }
.legal-doc p { margin: 0 0 var(--s1); }
.legal-doc ul { margin: 0 0 var(--s2); padding-left: var(--s3); }
.legal-doc li { margin: 3px 0; }
.legal-doc .legal-updated { color: var(--muted); margin-bottom: var(--s3); }
.legal-doc a { color: var(--blue); }
.legal-doc .legal-back { margin-top: var(--s4); }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-title { font-size: 36px; }
}
@media (max-width: 560px) {
  .container { padding: 0 var(--s2); }
  .site-header { padding: var(--s3) var(--s2) var(--s1); }
  .theme-toggle { right: var(--s2); }
  .brand-logo { height: 54px; }
  .card-grid { grid-template-columns: 1fr; gap: var(--s2); }
  .hero { padding: var(--s5) 0 var(--s4); }
  .hero-title { font-size: 30px; }
  .search { flex-direction: column; border-radius: var(--r-md); }
  .search-input, .search-btn { width: 100%; }
  .search-btn { padding: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}