/* ==============================
   Stage Riot – Author Cards (Stacked Media Card)
   ============================== */

/* Tuning knobs */
:root{
  --srm-accent: #E11D48;           /* Stage Riot Red */
  --srm-card-bg: #151515;          /* panel background */
  --srm-card-bg-2:#111;            /* slightly darker for edges/shadow */
  --srm-text:   #ffffff;           /* main text */
  --srm-muted:  #cfcfcf;           /* meta text */
  --srm-border: rgba(255,255,255,.12);
  --srm-shadow: 0 10px 28px rgba(0,0,0,.35);

  --srm-max: 1120px;               /* page width */
  --srm-card-w: 360px;             /* target card width */
  --srm-radius: 14px;              /* card rounding */
  --srm-pad: 20px;                 /* panel padding */
  --srm-gap: 24px;                 /* card gap */
}

/* Grid: auto-fit cards close to the reference width */
.srm-authors{
  margin: 3rem auto;
  padding: 0 2rem;
  max-width: var(--srm-max);
  display: grid;
  gap: var(--srm-gap);
}
.srm-authors--stacked{
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
@media (min-width: 1100px){
  .srm-authors--stacked{
    grid-template-columns: repeat(auto-fill, minmax(var(--srm-card-w), 1fr));
  }
}

/* Card shell */
.srm-author--stacked{
  display: flex;
  flex-direction: column;
  border-radius: var(--srm-radius);
  overflow: hidden;
  background: var(--srm-card-bg-2);
  box-shadow: var(--srm-shadow);
  border: 1px solid var(--srm-border);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.srm-author--stacked:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

/* Media (top image) */
.srm-author__media img{
  width: 100%;
  aspect-ratio: 4 / 3;            /* match ref proportions */
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}

/* Text panel */
.srm-author__panel{
  background: linear-gradient(180deg, var(--srm-card-bg), var(--srm-card-bg-2));
  color: var(--srm-text);
  padding: var(--srm-pad);
}

.srm-author__name{
  margin: 0 0 .35rem;
  font-weight: 800;
  font-size: clamp(1.05rem, 1.1vw + .9rem, 1.35rem);
  line-height: 1.2;
  color: var(--srm-text);
}

.srm-author__meta{
  margin: 0 0 .6rem;
  color: var(--srm-muted);
  font-size: .95rem;
}

.srm-author__bio{
  margin: 0 0 1rem;
  color: var(--srm-text);
  line-height: 1.65;
  font-size: .98rem;
}

/* Social row – simple, readable badges */
.srm-author__social{
  display: flex; gap: .6rem; align-items: center;
}
.srm-author__social a{
  width: 34px; height: 34px;
  display: inline-grid; place-items: center;
  border-radius: 8px;
  background: #0f0f0f;
  border: 1px solid var(--srm-border);
  color: var(--srm-text);
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
}
.srm-author__social a:hover{
  outline: 2px solid var(--srm-accent);
  outline-offset: 2px;
}
/* ===== Stage Riot Readability Boost ===== */
.srm-author__name {
  font-size: clamp(1.4rem, 1.6vw + 1rem, 1.9rem);
  font-weight: 800;
  color: #fff;
}
.srm-author__meta {
  font-size: 1rem;
  color: #f5f5f5;
  margin-bottom: .8rem;
}
.srm-author__bio {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #fafafa;
}
.srm-author__social a {
  width: 38px;
  height: 38px;
  font-size: 1rem;
}