/* About me page. Placeholder layout (the section moved over from the old home page) until this page is designed.
   Requires tokens.css and shell.css. */

.about-section { display: flex; flex-direction: column; gap: var(--space-24); }
.about-intro { max-width: 560px; font: var(--text-card-body); color: var(--color-secondary); }
.outside-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); align-items: start; }

.video-card { display: flex; flex-direction: column; gap: var(--space-16); }
.video-thumb, .video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; }
.video-thumb { cursor: pointer; }
.video-thumb img, .video-embed iframe { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.play-btn::before { content: ""; position: absolute; width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary); }
.play-btn svg { position: relative; margin-left: 4px; }
.play-btn svg path { fill: var(--color-page); }
.video-label { font: var(--text-card-small-body); color: var(--color-tertiary); }

.sc-stack { display: flex; flex-direction: column; gap: var(--space-24); }
.sc-card { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-48) var(--space-24); }
.sc-icon { color: var(--color-secondary); margin-bottom: var(--space-16); }
.sc-track { font: var(--text-card-title); color: var(--color-primary); }
.sc-artist { font: var(--text-card-small-body); color: var(--color-tertiary); }
.sc-link { font: var(--text-link); color: var(--color-secondary); }

@media (max-width: 1199px) {
  .outside-cards { grid-template-columns: 1fr; }
}