/* ==========================================================================
   Reusable UI Sections
   Shared styles for Micah Ransom's personal website
   ========================================================================== */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: #000;
    background-color: #fff;
    min-height: 100vh;
    width: 100%;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ==========================================================================
   1. NAVBAR
   Top navigation with name + links
   ========================================================================== */
.s-navbar {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 32px 52px;
    font-size: 16px;
    letter-spacing: -0.01em;
}

.s-navbar a:hover {
    opacity: 0.6;
}

.s-navbar__name {
    font-weight: 400;
}

/* Compact variant */
.s-navbar--compact {
    font-size: 16px;
    padding: 24px 40px;
    gap: 24px;
}

/* Dark variant */
.s-navbar--dark {
    color: #fff;
}

.s-navbar--dark a {
    color: #fff;
}

/* ==========================================================================
   2. HERO
   Large serif heading section
   ========================================================================== */
.s-hero {
    padding: 160px 40px 80px;
}

.s-hero__heading {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: clamp(64px, 7vw, 112px);
    letter-spacing: -0.01em;
    line-height: 1;
}

.s-hero__subheading {
    margin-top: 24px;
    font-size: 20px;
    color: #666;
    max-width: 600px;
    line-height: 1.5;
}

/* Small hero variant */
.s-hero--small {
    padding: 80px 40px 48px;
}

.s-hero--small .s-hero__heading {
    font-size: clamp(36px, 4vw, 64px);
}

/* Centered variant */
.s-hero--center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ==========================================================================
   3. SHOWCASE
   Colored background section with project image(s)
   ========================================================================== */
.s-showcase {
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 60px;
    position: relative;
}

.s-showcase__image {
    border-radius: 4px;
    width: 100%;
    max-width: 1370px;
}

.s-showcase__image--shadow {
    border-radius: 8px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* Floating label */
.s-showcase__label {
    position: absolute;
    right: 15%;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border-radius: 8px;
    padding: 4px 20px;
    display: inline-flex;
    align-items: center;
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* Background color variants */
.s-showcase--green  { background-color: #e8ebe4; }
.s-showcase--beige  { background-color: #f6f2ef; }
.s-showcase--pink   { background-color: #f6eff3; }
.s-showcase--gray   { background-color: #f4f4f5; }
.s-showcase--dark   { background-color: #1a1a1a; }

/* Multi-image grid (e.g. mobile screens) */
.s-showcase__grid {
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: flex-start;
    max-width: 1100px;
}

.s-showcase__grid img {
    width: 30%;
    max-width: 348px;
}

/* ==========================================================================
   4. TEXT SECTION
   Body copy / about section
   ========================================================================== */
.s-text {
    padding: 80px 40px;
    max-width: 800px;
}

.s-text--wide {
    max-width: 1100px;
}

.s-text--center {
    margin: 0 auto;
    text-align: center;
}

.s-text__title {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 48px;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
}

.s-text__body {
    font-size: 18px;
    line-height: 1.7;
    color: #333;
}

.s-text__body + .s-text__body {
    margin-top: 16px;
}

/* ==========================================================================
   5. PHOTO GRID
   Vertical stack of photos
   ========================================================================== */
.s-photos {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 40px;
}

.s-photos img {
    max-height: 95vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Horizontal scroll variant */
.s-photos--horizontal {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.s-photos--horizontal img {
    flex-shrink: 0;
    width: 80vw;
    max-width: 800px;
    max-height: 70vh;
    scroll-snap-align: start;
}

/* ==========================================================================
   6. TWO-COLUMN
   Side-by-side layout for image + text
   ========================================================================== */
.s-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding: 80px 40px;
    align-items: center;
}

.s-two-col--reverse {
    direction: rtl;
}

.s-two-col--reverse > * {
    direction: ltr;
}

.s-two-col__image {
    border-radius: 8px;
    width: 100%;
}

.s-two-col__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.s-two-col__title {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 40px;
    letter-spacing: -0.01em;
}

.s-two-col__body {
    font-size: 18px;
    line-height: 1.7;
    color: #333;
}

/* ==========================================================================
   7. STATS ROW
   Highlighted numbers / metrics
   ========================================================================== */
.s-stats {
    display: flex;
    justify-content: center;
    gap: 80px;
    padding: 64px 40px;
}

.s-stats__item {
    text-align: center;
}

.s-stats__number {
    font-family: 'Playfair Display', serif;
    font-size: 56px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.s-stats__label {
    margin-top: 8px;
    font-size: 16px;
    color: #666;
}

/* ==========================================================================
   8. DIVIDER
   Horizontal rule / spacing
   ========================================================================== */
.s-divider {
    border: none;
    border-top: 1px solid #e5e5e5;
    margin: 0 40px;
}

.s-divider--thick {
    border-top-width: 2px;
    border-color: #000;
}

.s-divider--spacer {
    border: none;
    height: 80px;
}

/* ==========================================================================
   9. FOOTER
   Simple bottom section
   ========================================================================== */
.s-footer {
    padding: 40px 52px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #999;
}

.s-footer a {
    color: #999;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.s-footer a:hover {
    color: #000;
}

.s-footer__links {
    display: flex;
    gap: 24px;
}

/* ==========================================================================
   10. BACK LINK
   Navigation link back to a previous page
   ========================================================================== */
.s-back {
    display: inline-block;
    padding: 16px 40px;
    font-size: 16px;
    color: #000;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.s-back:hover {
    opacity: 0.6;
}

/* ==========================================================================
   11. CONTAINER
   Wrapper for section stacking
   ========================================================================== */
.s-stack {
    display: flex;
    flex-direction: column;
    padding: 0 40px;
    gap: 60px;
}

.s-stack--tight {
    gap: 24px;
}

.s-stack--flush {
    padding: 0;
}

/* ==========================================================================
   11b. ABOUT
   Dark two-column layout — large image left, text right
   ========================================================================== */
.s-about {
    display: grid;
    grid-template-columns: 65% 1fr;
    min-height: 100vh;
    background: #000;
    color: #fff;
    padding: 32px 44px;
    gap: 60px;
}

.s-about__image {
    overflow: hidden;
}

.s-about__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s-about__text {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    max-width: 433px;
}

.s-about__text p + p {
    margin-top: 8px;
}

@media (max-width: 768px) {
    .s-about {
        grid-template-columns: 1fr;
        padding: 60px 24px;
        gap: 32px;
    }

    .s-about__text {
        font-size: 18px;
        max-width: none;
    }
}

/* ==========================================================================
   12a. DARK HERO
   Full-width intro text on black background
   ========================================================================== */
body.s-body--dark {
    background-color: #000;
    color: #fff;
}

.s-hero-dark {
    padding: 160px 40px 80px;
}

.s-hero-dark__text {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #fff;
    max-width: 900px;
}

/* ==========================================================================
   12b. PROJECT CARDS
   Colored card sections with pill labels
   ========================================================================== */
.s-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 8px;
}

.s-card {
    border-radius: 8px;
    min-height: 900px;
    position: relative;
    padding: 24px 32px;
}

.s-card__pill {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.01em;
    padding: 8px;
    border-radius: 4px;
    white-space: nowrap;
    position: absolute;
    top: 24px;
    left: 32px;
}

.s-card__pill--right {
    left: auto;
    right: 32px;
}

/* Centered single image (dashboard) */
.s-card__image-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    width: 58%;
    max-width: 1000px;
}

.s-card__image-center img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* Row of mobile screenshots */
.s-card__image-row {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 40px;
    justify-content: center;
    padding: 0 40px;
}

.s-card__image-row img {
    width: 100%;
    max-width: 305px;
    max-height: 641px;
    object-fit: contain;
}

/* --- Cards responsive --- */
@media (max-width: 768px) {
    .s-hero-dark {
        padding: 100px 24px 60px;
    }

    .s-hero-dark__text {
        font-size: 28px;
    }

    .s-cards {
        padding: 0 4px;
    }

    .s-card {
        min-height: 400px;
        padding: 16px 20px;
    }

    .s-card__pill {
        top: 16px;
        left: 20px;
        font-size: 14px;
    }

    .s-card__pill--right {
        left: auto;
        right: 20px;
    }

    .s-card__image-center {
        width: 85%;
    }

    .s-card__image-row {
        gap: 16px;
        padding: 0 20px;
    }

    .s-card__image-row img {
        max-width: 28%;
    }
}

/* ==========================================================================
   12. DARK PANEL
   Full-viewport black sections (Figma homepage design)
   ========================================================================== */
.s-panel {
    background: #000;
    color: #fff;
    min-height: 100vh;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.s-panel + .s-panel {
    margin-top: 0;
}

/* Hero content — two-column layout */
.s-panel__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 88px);
    padding: 0 40px 40px;
    align-items: center;
}

.s-panel__left {
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding-right: 40px;
}

.s-panel__intro {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    max-width: 400px;
}

.s-panel__intro--right {
    text-align: right;
    align-self: flex-end;
}

.s-panel__right {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Placeholder frame (white border rectangle from Figma) */
.s-panel__frame {
    width: 100%;
    max-width: 816px;
    aspect-ratio: 816 / 773;
    border: 2px solid #fff;
}

/* Project showcase section */
.s-panel__project {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    padding: 40px;
    min-height: 100vh;
    align-items: start;
}

.s-panel__project-left {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.s-panel__phone {
    width: 100%;
    max-width: 305px;
    border-radius: 0;
}

.s-panel__project-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-self: center;
}

.s-panel__dash {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* Dark footer variant */
.s-footer--dark {
    background: #000;
    color: #666;
}

.s-footer--dark a {
    color: #666;
}

.s-footer--dark a:hover {
    color: #fff;
}

/* --- Panel responsive --- */
@media (max-width: 768px) {
    .s-panel__content {
        grid-template-columns: 1fr;
        padding: 60px 24px 40px;
    }

    .s-panel__left {
        padding-right: 0;
        gap: 48px;
    }

    .s-panel__right {
        margin-top: 48px;
    }

    .s-panel__project {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .s-panel__intro {
        font-size: 20px;
    }
}

/* ==========================================================================
   13. ARTICLE
   Editorial blog / case study layout inspired by Klim-style typography
   ========================================================================== */
.s-article {
    --article-width: 680px;
    --article-wide: 960px;
    --article-gutter: 40px;
}

/* Header */
.s-article__header {
    max-width: var(--article-width);
    margin: 0 auto;
    padding: 120px var(--article-gutter) 48px;
}

.s-article__meta {
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 24px;
}

.s-article__meta-sep {
    margin: 0 8px;
    color: #ccc;
}

.s-article__title {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: clamp(40px, 5vw, 72px);
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.s-article__subtitle {
    margin-top: 24px;
    font-size: 20px;
    line-height: 1.5;
    color: #555;
}

/* Hero image — full bleed */
.s-article__hero {
    margin: 0 var(--article-gutter) 64px;
}

.s-article__hero img {
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    border-radius: 4px;
}

/* Body content */
.s-article__body {
    max-width: var(--article-width);
    margin: 0 auto;
    padding: 0 var(--article-gutter) 80px;
    font-family: 'Source Serif 4', 'Georgia', serif;
    font-size: 19px;
    line-height: 1.65;
    color: #1a1a1a;
    font-feature-settings: 'onum', 'liga', 'calt';
}

.s-article__body h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 32px;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin-top: 64px;
    margin-bottom: 24px;
    color: #000;
}

.s-article__body h2:first-child {
    margin-top: 0;
}

.s-article__body p {
    margin-bottom: 24px;
}

.s-article__body p:last-child {
    margin-bottom: 0;
}

/* Links */
.s-article__body a {
    color: #000;
    text-decoration: underline;
    text-decoration-color: #ccc;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s;
}

.s-article__body a:hover {
    text-decoration-color: #e4001c;
}

/* Blockquotes */
.s-article__body blockquote {
    border-left: 2px solid #000;
    margin: 40px 0;
    padding: 0 0 0 28px;
}

.s-article__body blockquote p {
    font-style: italic;
    font-size: 21px;
    line-height: 1.55;
    color: #000;
}

.s-article__body blockquote cite {
    display: block;
    margin-top: 12px;
    font-style: normal;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #888;
}

/* Lists */
.s-article__body ol,
.s-article__body ul {
    margin-bottom: 24px;
    padding-left: 1.4em;
}

.s-article__body li {
    margin-bottom: 12px;
    padding-left: 0.4em;
}

.s-article__body li:last-child {
    margin-bottom: 0;
}

/* Figures */
.s-article__figure {
    margin: 48px 0;
}

.s-article__figure img {
    width: 100%;
    border-radius: 4px;
}

.s-article__figure figcaption {
    margin-top: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #888;
    line-height: 1.5;
}

/* Wide figure — breaks out of the body column */
.s-article__figure--wide {
    max-width: var(--article-wide);
    margin-left: calc((var(--article-width) - var(--article-wide)) / 2);
    margin-right: calc((var(--article-width) - var(--article-wide)) / 2);
}

/* Sidenotes */
.s-article__sidenote {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #888;
    margin: 32px 0;
    padding: 16px 0;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

/* Inline stats row */
.s-article__stats {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    margin: 48px 0;
    padding: 48px 0;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}

.s-article__stat {
    text-align: center;
    flex: 1;
}

.s-article__stat-number {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #000;
}

.s-article__stat-label {
    display: block;
    margin-top: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #666;
}

/* Keyboard shortcuts */
.s-article__body kbd {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background: #f4f4f5;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 2px 8px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .s-article__header {
        padding-top: 80px;
    }

    .s-article__hero {
        margin: 0 0 48px;
    }

    .s-article__hero img {
        border-radius: 0;
    }

    .s-article__figure--wide {
        margin-left: calc(-1 * var(--article-gutter));
        margin-right: calc(-1 * var(--article-gutter));
    }

    .s-article__figure--wide img {
        border-radius: 0;
    }

    .s-article__stats {
        flex-direction: column;
        gap: 24px;
    }

    .s-article__stat-number {
        font-size: 36px;
    }
}