/* css/about.css — About page: character cards, author panel, social showcase */

/* ===== About Page Layout ===== */

/* About page card styling */
.card {
  position: relative;
  background: var(--offwhite);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card-body {
  display: grid;
  grid-template-columns: clamp(84px, 24vw, 120px) minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 1.1rem;
  align-items: flex-start;
}

/* Long text / buttons can wrap instead of forcing the grid wider */
.blurb,
.btns .btn,
.links .btn {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.portrait {
  width: clamp(84px, 24vw, 120px);
  height: clamp(84px, 24vw, 120px);
  border-radius: var(--radius-xl);
  border: 3px solid var(--ink);
  object-fit: cover;
  background: var(--offwhite);
  box-shadow: 0 6px 0 var(--ink);
}

.portrait:hover {
  animation: wiggle 0.8s ease-in-out;
}

.portrait-link {
  display: block;
  line-height: 0;
  text-decoration: none;
}

.card h2 {
  margin: 0.2rem 0 0.4rem;
  font-family: "Grandstander";
}

/* Narrow viewports: stack cards comfortably */
@media (max-width: 560px) {
  .card-body,
  .author {
    grid-template-columns: 1fr;
  }

  .portrait {
    width: 96px;
    height: 96px;
    margin-bottom: 0.5rem;
  }

  /* Keep social grid single column and avoid side scrolling */
  .social-grid {
    grid-template-columns: 1fr;
    padding: 0 0.5rem;
  }
}

.blurb {
  margin: 0.25rem 0 0.6rem;
}

.btns {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btns .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Author panel */
.author {
  display: grid;
  grid-template-columns: clamp(96px, 28vw, 140px) minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 1.1rem;
  align-items: flex-start;
}

.author .portrait {
  width: 140px;
  height: 140px;
  border-radius: var(--radius-circle);
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.links .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* .icon base + named classes now in style.css */

/* ===== Social Showcase ===== */
.social-showcase {
  max-width: var(--maxw);
  margin: 1rem auto 2rem;
  padding: 0 1rem;
}

.social-title {
  font-family: "Grandstander";
  margin: 0.2rem 0 0.8rem;
  text-align: center;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.5rem;
  /* space between panels */
  max-width: var(--maxw, 1100px);
  margin: 0 auto;
  padding: 1rem;
}

.sm-card {
  background: var(--offwhite);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.9rem 1rem 1rem;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium),
    background-color var(--transition-medium), border-color var(--transition-medium);
}

.sm-card:hover {
  transform: translateY(-3px);
  background-color: var(--offwhite);
  border-color: var(--ink-dark);
  box-shadow: 0 14px 0 var(--ink), 0 16px 28px rgba(0, 0, 0, 0.28);
}

.sm-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
}

.sm-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: var(--offwhite);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 0 var(--ink);
}

.sm-meta .sm-name {
  font-weight: 800;
}

.sm-meta .sm-handle {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

.sm-desc {
  margin: 0.25rem 0 0.6rem;
}

.sm-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  margin: 0.2rem 0 0.7rem;
}

.sm-thumbs a {
  display: block;
}

.sm-thumbs img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border: 3px solid var(--ink, #1c1b22);
  border-radius: var(--radius-md);
  background: var(--offwhite);
}

/* Call-to-action button */
.sm-cta {
  display: flex;
  justify-content: flex-end;
}

.sm-cta .btn {
  white-space: nowrap;
  background: var(--elliot);
  color: var(--offwhite);
}

.sm-cta .btn:hover {
  background: var(--accent-2);
  color: var(--offwhite);
}

.sm-cta .btn:active {
  background: var(--elliot-dark);
  color: var(--offwhite);
}

/* Accent hints per platform (optional) */
.sm-bsky .sm-icon {
  background: var(--blue-tint);
}

.sm-ig .sm-icon {
  background: var(--pink-tint);
}

/* Mobile tweak */
@media (max-width: 520px) {
  .sm-cta {
    justify-content: stretch;
  }

  .sm-cta .btn {
    width: 100%;
    text-align: center;
  }
}

/* Force Instagram embeds to be fully responsive */
.sm-card.sm-ig {
  overflow: hidden;
  /* hide any overflow */
}

.sm-card.sm-ig blockquote.instagram-media {
  min-width: 0 !important;
  /* remove the 326px Instagram min-width */
  width: 100% !important;
  /* always fit the parent */
  max-width: 100% !important;
  box-sizing: border-box;
}

.sm-card.sm-ig iframe,
.sm-card.sm-ig blockquote.instagram-media > div {
  max-width: 100% !important;
  width: 100% !important;
}