/* Simple responsive styles for strangecase.fm */
:root{
  --bg:#0f0f11;
  --surface:#111216;
  --text:#e6e6e6;
  --muted:#9aa0a6;
  --accent:#1db954; /* Spotify green */
  --max-width:1000px;
  --radius:10px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#070708,var(--surface));
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:1.5rem;
}

.site-header{
  border-bottom:1px solid rgba(255,255,255,0.03);
  background:transparent;
}
.site-header .container{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
}
.brand{
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  font-size:1.1rem;
}
nav a{
  color:var(--muted);
  margin-left:1rem;
  text-decoration:none;
  font-size:0.95rem;
}
nav a:hover{color:var(--text)}

.hero{padding:1.5rem 0}
.hero h1{margin:.2rem 0; font-size:2rem}
.lead{color:var(--muted); margin-top:0.25rem}

.spotify-account, .featured-playlists, .playlist-list, .podcast-list{
  margin-top:1.25rem;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  padding:1rem;
  border-radius:var(--radius);
}

.embed-wrap{
  margin:0.6rem 0;
  background:#000;
  border-radius:8px;
  overflow:hidden;
}

/* Grid for featured playlists */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
  align-items:start;
  margin-top:1rem;
}

.card{
  background:transparent;
  border:1px solid rgba(255,255,255,0.03);
  border-radius:8px;
  padding:0;
  transition:transform .15s ease;
}
.card-link{display:block; color:inherit; text-decoration:none;}
.card:hover{transform:translateY(-4px)}
.embed-thumb iframe{display:block}
.card-title{margin:0.6rem 0 0 0; padding:0 0.8rem; font-size:1rem}
.card-sub{margin:0 0 0.8rem 0; padding:0 0.8rem; color:var(--muted); font-size:0.9rem}

.more{margin-top:0.75rem}
.muted{color:var(--muted); font-size:0.9rem}

.site-footer{
  margin-top:2rem;
  padding:1rem 0;
  border-top:1px solid rgba(255,255,255,0.03);
  color:var(--muted);
  text-align:center;
}

/* Responsive tweaks */
@media (max-width:640px){
  .site-header .container{flex-direction:column; align-items:flex-start; gap:0.5rem}
  nav{display:flex; gap:0.6rem}
}

/* Instagram / social icon styling */
.social-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 1rem; /* match spacing of other nav links */
  color: var(--muted);
  text-decoration: none;
  line-height: 0; /* remove extra inline gap around svg */
}
.social-icon {
  fill: currentColor; /* uses the link color */
  transition: transform .12s ease, color .12s ease;
  display: block;
}
.social-icon-link:hover,
.social-icon-link:focus {
  color: var(--text);
  transform: translateY(-1px);
  outline: none;
}
.social-icon--instagram { width: 18px; height: 18px; }