/* ============================================================
   INDEX.CSS — Main Page styles (maxshirko.me)
   ============================================================
   Source of truth: mw.pen → "maxshirko.me — Main Page"
   
   This file imports the shared design system (tokens, base,
   layout, components) and defines ONLY the page-specific 
   styles for these sections:
   
   1. Hero (100vh)       — s-hero
   2. Bio / About        — s-bio
   3. Path & Principles  — s-pp
   4. Digital Trace       — s-cg
   5. Products Intro      — s-pi
   6. Courses & Services  — s-cd
   7. CTA / Outro         — s-outro
   8. Footer              — s-ft
   
   ARCHITECTURE:
   .section = edge padding container (40px sides)
   .row     = 4-column grid inside .section
   No sub-elements add their own padding-inline.
   All positioning via grid-column on .row children.
   
   PEN NODE MAPPING (x → grid-column at 1920px):
   x:0    → col 1    | x:465  → col 2
   x:930  → col 3    | x:1395 → col 4
   
   8-col grid (Digital Trace):
   x:0→c1  x:232→c2  x:464→c3  x:696→c4
   x:928→c5 x:1160→c6 x:1392→c7 x:1624→c8
   ============================================================ */

@import url('styles.css?v=force60');


/* ──────────────────────────────────────
   1 · HERO (100vh)
   pen: Section "Hero 100vh", fill=#1e1e1e, height=900
   bgImage: x:0 y:0 w:843 h:900
   heroWrap: x:970 y:40
   ────────────────────────────────────── */

.s-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    padding: 0 !important;
    background: var(--color-bg-inv);
    color: var(--color-fg-inv);
}

.s-hero h1,
.s-hero h2,
.s-hero p,
.s-hero a,
.s-hero span {
    color: var(--color-fg-inv);
}

/* pen: Image Placeholder w:843 → ~44% of 1920 */
.s-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 44%;
    /* 843/1920 */
    height: 100%;
    z-index: 0;
    background: #555;
    border-radius: 5px;
    overflow: hidden;
}

.s-hero__bg video,
.s-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* pen: heroWrap x:970 → right half, padding 40px */
.s-hero__wrap {
    position: relative;
    z-index: 1;
    margin-left: 50%;
    width: 50%;
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--ds-space-3) var(--ds-edge) var(--ds-space-3) calc(var(--ds-gap) / 2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* pen: Top group — name label + H1, gap 40px between them */
.s-hero__top {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
}

/* Born to create — custom large heading */
.s-hero__h1 {
    max-width: 900px;
    font-size: clamp(45px, 7vw, 120px);
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: -3px;
    opacity: 0.95;
}

/* pen: Bottom group — 2 columns at x:0 and x:465 (relative to wrap) */
.s-hero__bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--ds-gap);
}

.s-hero__col {
    display: flex;
    flex-direction: column;
}

.s-hero__col .icon-sq {
    margin-bottom: var(--ds-space-3);
}

/* pen: t1a/t2a width:270 */
.s-hero__col .t-body {
    max-width: 270px;
}

.s-hero__col .t-small {
    margin-top: auto;
    padding-top: var(--ds-space-3);
}

@media (max-width: 1024px) {
    .s-hero {
        min-height: auto;
    }

    .s-hero__bg {
        position: static;
        width: 100%;
        height: 42vh;
        height: 42svh;
    }

    .s-hero__wrap {
        position: static;
        margin-left: 0;
        width: 100%;
        min-height: auto;
        padding: var(--ds-space-4) var(--ds-edge);
        gap: var(--ds-space-4);
    }

    .s-hero__h1 {
        font-size: 60px;
        letter-spacing: -2px;
    }
}

@media (max-width: 640px) {
    .s-hero {
        min-height: 100vh;
        min-height: 100svh;
    }

    .s-hero__bg {
        height: 55vh;
        height: 55svh;
    }

    .s-hero__wrap {
        min-height: 40vh;
        min-height: 40svh;
        padding: var(--ds-space-3) var(--ds-edge);
        gap: var(--ds-space-3);
    }

    .s-hero__bottom {
        grid-template-columns: 1fr 1fr;
        column-gap: var(--ds-gap);
    }

    .s-hero__col .t-body {
        max-width: 165px;
    }

    .s-hero__col .icon-sq {
        width: 30px;
        height: 30px;
    }

    .s-hero__h1 {
        font-size: 45px;
        letter-spacing: -1px;
    }
}


/* ──────────────────────────────────────
   2 · BIO / ABOUT
   pen: Section "Bio / About", fill=#f9f9f9
   Label x:0 → col 1
   H1 x:465 → col 2-4
   Avatars x:465 → col 2 span 2
   Body text x:930 → col 3-4
   ────────────────────────────────────── */

.s-bio__label {
    grid-column: 1;
}

.s-bio__heading {
    grid-column: 2 / -1;
}

/* pen: avGr x:465 → col2, contains 160×160 rects */
.s-bio__avatars {
    grid-column: 2 / span 2;
    display: flex;
    gap: var(--ds-gap);
}

.s-bio__avatar {
    width: 160px;
    height: 160px;
    overflow: hidden;
}

.s-bio__avatar:nth-child(2) img {
    transform: none !important;
}

.s-bio__avatar--wide {
    width: 100%;
    height: 160px;
    flex: 1;
    border-radius: 5px;
}

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

/* pen: txtGr x:930 → col3-4, two 350px columns */
.s-bio__body {
    grid-column: 3 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--ds-gap);
}

@media (max-width: 1024px) {

    .s-bio__label,
    .s-bio__heading,
    .s-bio__avatars,
    .s-bio__body {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .s-bio__body {
        grid-template-columns: 1fr;
        gap: var(--ds-space-2);
    }

    .s-bio__avatar {
        width: 100px;
        height: 100px;
    }
}


/* ──────────────────────────────────────
   3 · PATH & PRINCIPLES
   pen: Section "Path & Principles", fill=#f9f9f9
   Vector (image) x:40 y:80 → col1, 299×255
   Sub x:465 → col2
   H2 x:465 → col2-4
   Principles: x:0→col1, x:930→col3, x:1395→col4
   ────────────────────────────────────── */

/* pen: logos.svg decorative element */
.s-pp__image {
    grid-column: 1;
    width: 238px;
    /* 183 × 1.3 = ~238 */
    height: auto;
    background: none;
    align-self: start;
}

.s-pp__gap {
    height: 40px;
}

.s-pp__label {
    grid-column: 3;
    grid-row: 1;
}

.s-pp__heading {
    grid-column: 3 / -1;
    grid-row: 3;
}

.s-pp__item h4 {
    max-width: 70%;
}

.s-pp__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--ds-gap);
}

.s-pp__item {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
}

/* pen: Principle 1 x:0→col1, Principle 2 x:930→col3, Principle 3 x:1395→col4 */
.s-pp__item:nth-child(1) {
    grid-column: 1;
}

.s-pp__item:nth-child(2) {
    grid-column: 3;
}

.s-pp__item:nth-child(3) {
    grid-column: 4;
}

/* Decorative SVG (pen: Vector Wf1V6) */
.s-pp__decor {
    display: block;
    max-width: 299px;
    margin-left: var(--ds-edge);
}

@media (max-width: 1024px) {
    .s-pp__image {
        grid-column: 1;
        grid-row: 1;
        width: 120px;
        height: 120px;
    }

    .s-pp__label {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .s-pp__heading {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .s-pp__list {
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--ds-space-3);
    }

    .s-pp__item:nth-child(1),
    .s-pp__item:nth-child(2),
    .s-pp__item:nth-child(3) {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .s-pp__gap {
        display: none;
    }

    .s-pp__image {
        width: 120px;
        height: 120px;
    }

    .s-pp__list {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ds-space-2) var(--ds-gap);
    }

    .s-pp__item:nth-child(3) {
        grid-column: 1 / -1;
    }

    .s-pp__item h4 {
        max-width: 100%;
    }

    .s-pp__decor {
        max-width: 150px;
    }
}


/* ──────────────────────────────────────
   4 · DIGITAL TRACE
   pen: Section "Digital Trace", fill=#1e1e1e
   H2 x:930 → col3-4 (in 4-col .row)
   Grid items: 8-col layout, each item 212px wide
   3 rows of items with gap=40 between rows
   ────────────────────────────────────── */

.s-cg__heading {
    grid-column: 3 / -1;
}

/* 8-column grid for trace items */
.s-cg__row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    column-gap: var(--ds-gap);
    margin-bottom: var(--ds-space-3);
    align-items: start;
}

.s-cg__row:last-of-type {
    margin-bottom: 0;
}

.s-cg__item {
    display: flex;
    flex-direction: column;
    gap: 8px !important;
}

/* Thumbnail — natural proportions per source */
.s-cg__img {
    width: 100%;
    aspect-ratio: auto !important;
    max-width: none !important;
    overflow: hidden;
    border-radius: 5px;
}

/* Instagram: all cropped to 4:5 (posts + reels unified) */
.s-cg__img--ig {
    aspect-ratio: 4 / 5 !important;
}

.s-cg__img--ig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* YouTube: natural 16:9 */
.s-cg__img--yt img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

/* Clickable card link — no underline */
a.s-cg__item {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Source badge — small label, not underlined */
.s-cg__badge {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.4;
}

@media (max-width: 1024px) {
    .s-cg__heading {
        grid-column: 1 / -1;
    }

    .s-cg__row {
        grid-template-columns: repeat(3, 1fr);
        row-gap: var(--ds-space-3);
    }

    .s-cg__item {
        grid-column: auto !important;
    }
}

@media (max-width: 640px) {
    .s-cg__row {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ──────────────────────────────────────
   5 · PRODUCTS INTRO
   pen: Section "Products Intro", fill=#1e1e1e
   Label x:930 → col3
   Icon (vector) x:0 → col1, 226×130
   H1 x:508 → col2-4
   Subtitle x:930 → col3-4
   ────────────────────────────────────── */

.s-pi__label {
    grid-column: 3 / -1;
}

/* pen: Vector JKJ8j at x:0, 226×130 */
.s-pi__icon {
    grid-column: 1;
    max-width: 226px;
}

.s-pi__icon svg {
    display: block;
    width: 100%;
    height: auto;
}

.s-pi__heading {
    grid-column: 2 / -1;
}

.s-pi__sub {
    grid-column: 3 / -1;
    max-width: 450px;
    /* pen: Subtitle width:450 */
}

@media (max-width: 1024px) {

    .s-pi__label,
    .s-pi__icon,
    .s-pi__heading,
    .s-pi__sub {
        grid-column: 1 / -1;
    }

    .s-pi__icon {
        max-width: 100px;
    }
}

@media (max-width: 640px) {
    .s-pi__icon {
        max-width: 60px;
    }
}


/* ──────────────────────────────────────
   6 · COURSES & SERVICES
   pen: Section "Courses & Services", fill=#1e1e1e
   H2 x:930 → col3-4
   Features: 4 items, gap=115px
   Each: Image 260×260, Title w:230, Desc fill
   ────────────────────────────────────── */

.s-cd__heading {
    grid-column: 3 / -1;
}

.s-cd__features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--ds-gap);
}

.s-cd__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--ds-gap);
    row-gap: var(--ds-space-3);
}

.s-cd__feature {
    display: flex;
    flex-direction: column;
}

.s-cd__feature .t-h4 {
    max-width: 75%;
}

/* pen: Image Placeholder 260×260 */
.s-cd__img {
    width: 100%;
    aspect-ratio: 1;
    max-width: 260px;
    overflow: hidden;
    border-radius: 5px;
}

.s-cd__img video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1024px) {
    .s-cd__heading {
        grid-column: 1 / -1;
    }

    .s-cd__features {
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--ds-space-3);
    }
}

@media (max-width: 640px) {
    .s-cd__features {
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--ds-space-3);
    }

    .s-cd__grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--ds-space-3);
    }

    /* Reset explicit grid-column/row placements set inline */
    .s-cd__grid .s-cd__feature {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .s-cd__feature .t-h4 {
        max-width: 100%;
    }

    .s-cd__img {
        max-width: 165px;
    }
}


/* ──────────────────────────────────────
   7 · CTA / OUTRO
   pen: Section "CTA / Outro", fill=#f9f9f9
   Image 843×580 x:0 → col1-2
   Content x:970 → col3-4
   H2: color #fa3433, CTA Text opacity 0.5
   Body Bottom x:928 → col3
   ────────────────────────────────────── */

.s-outro__image {
    grid-column: 1 / span 2;
    grid-row: 1;
    width: 100%;
    height: 348px;
    overflow: hidden;
    border-radius: 5px;
}

.s-outro__image video,
.s-outro__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.s-outro__content {
    grid-column: 3 / -1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
}

.s-outro__content .t-h2 {
    max-width: 600px;
    /* pen: H2 width:600 */
}

.s-outro__cta-text {
    opacity: 0.5;
    max-width: 350px;
    /* pen: CTA Text width:350 */
    margin-top: 10px;
}

.s-outro__sub {
    margin-top: 10px;
    max-width: 350px;
    /* pen: Body Bottom width:350 */
    opacity: 0.7;
}

@media (max-width: 1024px) {
    .s-outro__image {
        grid-column: 1 / -1;
        min-height: 350px;
    }

    .s-outro__content {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-top: var(--ds-space-3);
    }
}

@media (max-width: 640px) {
    .s-outro__image {
        min-height: 260px;
    }

    .s-outro__content .t-h2,
    .s-outro__cta-text,
    .s-outro__sub {
        max-width: 100%;
    }
}


/* ──────────────────────────────────────
   8 · FOOTER
   pen: Section "Footer", fill=#f9f9f9
   City x:0 → col1
   Links (Youtube/Instagram/Telegram/Behance) x:930 → col3
   Figma Community x:930 → col3 (below links)
   Message x:1395 → col4
   Copyright x:1740 → col4 end
   Shape x:934 → col3
   ────────────────────────────────────── */

.s-ft__city {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
}

.s-ft__links {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    align-self: start;
}

.s-ft__msg {
    grid-column: 4;
    grid-row: 1;
    align-self: start;
}

.s-ft__copy {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    align-self: start;
}

.s-ft__logo {
    grid-column: 3;
    width: 50px;
    height: 50px;
    background: none;
}

@media (max-width: 1024px) {
    .s-ft__city {
        grid-column: 1;
        grid-row: 1;
    }

    .s-ft__links {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--ds-space-2);
    }

    .s-ft__msg {
        grid-column: 1;
        grid-row: 3;
    }

    .s-ft__copy {
        grid-column: 2;
        grid-row: 3;
        justify-self: start;
    }

    .s-ft__logo {
        grid-column: 1;
        grid-row: 4;
    }
}

@media (max-width: 640px) {
    footer .row {
        display: grid !important;
        grid-template-columns: 1fr;
        row-gap: 8px;
    }

    .s-ft__links {
        grid-column: 1;
        grid-row: 1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        width: 100%;
        margin-bottom: 24px;
    }

    .s-ft__links .t-link {
        font-size: 13px;
    }

    .s-ft__msg {
        grid-column: 1;
        grid-row: 2;
    }

    .s-ft__city {
        grid-column: 1;
        grid-row: 3;
    }

    .s-ft__copy {
        grid-column: 1;
        grid-row: 4;
        justify-self: start;
    }

    .s-ft__logo {
        grid-column: 1;
        grid-row: 5;
        width: 40px;
        height: 40px;
        margin-top: 16px;
    }
}