:root {
  /* UBD Brand Palette */
  --brand: #ef4444;       /* coral flame */
  --brand-dark: #b91c1c;
  --ink: #0f172a;         /* navy/charcoal text */
  --muted: #475569;       /* slate gray */
  --bg: #fffaf8;          /* soft cream background */
  --card: #ffffff;
  --chip: #f3f4f6;
  --border: #e5e7eb;
}

/* Base body styling */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  line-height: 1.55;
}

.podcast {
  --bg:    #fffaf5;   /* cream page bg */
  --panel: #ffffff;   /* white cards */
  --ink:   #222222;   /* main text */
  --muted: #666666;   /* secondary text */
  --ring:  #ece7df;   /* soft border */
  --brand: #ff5a3d;   /* coral */
  --hover: #e94f37;   /* coral hover */
  --accent:#1e1e1e;   /* dark headers */
}

/* Base layout (inherits 'Helvetica Neue' from style.css) */
.podcast {
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
}

.podcast a {
  color: var(--brand);
  text-decoration: none;
  transition: color .2s ease;
}
.podcast a:hover { color: var(--hover); text-decoration: underline; }

/* Outer wrapper width */
.podcast .wrap {
  max-width: 1200px;            /* a bit wider than before */
  margin: 0 auto;
  padding: 32px 20px;
}

/* Page heading */
.podcast .brand { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.podcast .brand__logo {
  width: 44px; height: 44px; border-radius: 8px;
  background: linear-gradient(135deg, var(--brand), #ff9a7a);
  box-shadow: 0 6px 24px rgba(255,90,61,.18);
}
.podcast h1 { font-size: clamp(1.8rem, 2.3vw, 2.4rem); line-height:1.1; margin:0; }
.podcast .lead { color: var(--muted); margin-top: 6px; font-size: 1.05rem; }

/* Search / filters */
.podcast .toolbar {
  display:flex; flex-wrap:wrap; gap:12px;
  margin: 24px 0 24px;
  justify-content: space-between; align-items: center;
}
.podcast .field { flex:1; min-width: 260px; }
.podcast .field input, .podcast .field select {
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--ring); background:#fff; color:var(--ink);
  font-size: .95rem; box-shadow: 0 2px 4px rgba(0,0,0,.03);
}
.podcast .count { color: var(--muted); font-size:.9rem; }

/* Full-width responsive grid layout */
.podcast .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 32px;
  align-items: start;
  width: 100%;
  margin: 2rem 0;
  padding: 0;
  box-sizing: border-box;
}

/* Episode cards span full grid width */
.podcast .card {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--ring);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.podcast .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .1);
}

/* Headings and episode info */
.podcast .ep-title {
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 6px 0;
  color: var(--accent);
}
.podcast .ep-meta {
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 10px;
}

/* Tags and guests */
.podcast .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.podcast .badge {
  border: 1px solid var(--ring);
  background: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--muted);
  font-size: .8rem;
}

/* Buttons */
.podcast .ep-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.podcast .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: all .2s ease;
}
.podcast .btn.primary {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  box-shadow: 0 6px 14px rgba(255, 90, 61, .18);
}
.podcast .btn.primary:hover {
  background: var(--hover);
  border-color: var(--hover);
}
.podcast .btn.secondary {
  background: #fff;
  color: var(--brand);
  border: 1px solid var(--brand);
}
.podcast .btn.secondary:hover {
  color: var(--hover);
  border-color: var(--hover);
}

/* Transcript section */
.podcast details {
  margin-top: 16px;
}
.podcast summary {
  cursor: pointer;
  color: var(--brand);
  font-weight: 600;
}
.podcast .transcript {
  white-space: pre-wrap;
  line-height: 1.55;
  margin-top: 12px;
  color: #333;
  background: #fff;
  padding: 14px 16px;
  border-radius: 8px;
}

/* Footer note (not main site footer) */
.podcast footer {
  margin-top: 40px;
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
}

header.site img.logo {
  width: 120px;  /* try 80–140px to fit your design */
  height: auto;
  object-fit: contain;
}

/* Put the details control in-line with buttons */
.podcast .ep-actions details.read-inline { display: inline-block; margin: 0; }
.podcast .ep-actions details.read-inline[open] { display: block; width: 100%; margin-top: 12px; }

/* Make the summary look like our buttons */
.podcast .ep-actions details.read-inline > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: all .2s ease;
  background: #fff;
  color: var(--brand);
  border: 1px solid var(--brand);
}
.podcast .ep-actions details.read-inline > summary:hover {
  color: var(--hover);
  border-color: var(--hover);
}
.podcast .ep-actions details.read-inline > summary::-webkit-details-marker { display: none; }

/* If we’re embedding the PDF */
.podcast .transcript-embed {
  margin-top: 12px;
  height: 70vh;
  border: none;
  background: transparent;
}
.podcast .transcript-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.podcast .transcript-note {
  margin-top: 8px;
  font-size: .9rem;
  color: var(--muted);
}

/* --- Remove any coloured borders around transcript views --- */
.podcast .transcript,
.podcast .transcript-embed {
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
  background: #fff; /* keep it clean on the cream page */
}

/* Optional: make the transcript container breathe a bit */
.podcast .transcript { padding: 14px 0; }

.podcast .ep-actions details.read-inline > summary {
  border: none !important;
  background: transparent;
  color: var(--brand);
  padding: 0;           /* makes it a link-style control */
  text-decoration: underline;
}