:root {
    /* ===== Existing brand colours ===== */
    --tvv-cream: #fbf7f5;
    --tvv-purple-light1: #775984;
    --tvv-purple-light2: #856692;
    --tvv-purple: #2a1341;
    --tvv-gold: #d0984c;
    --tvv-heading: #2a1342;
    --tvv-text: #3b3b3b;

    /* ===== Card surfaces ===== */
    --color-card-top: #fffdf9;
    --color-card-bottom: #f1e7dc;
    --color-card-highlight: rgba(255, 255, 255, 0.65);
    --color-card-border: rgba(47, 31, 70, 0.22);

    /* ===== Soft lilac surfaces ===== */
    --color-soft-lilac-top: #f8eff8;
    --color-soft-lilac-bottom: #eadbea;

    /* ===== Shadows ===== */
    --shadow-card-large:
        0 14px 26px rgba(47, 31, 70, 0.16),
        0 4px 9px rgba(47, 31, 70, 0.10),
        inset 0 2px 1px rgba(255, 255, 255, 0.95),
        inset 0 -4px 10px rgba(47, 31, 70, 0.08);

    --shadow-card-small:
        0 7px 14px rgba(47, 31, 70, 0.12),
        inset 0 2px 1px rgba(255, 255, 255, 0.9),
        inset 0 -3px 7px rgba(47, 31, 70, 0.06);

    --shadow-card-hover:
        0 11px 20px rgba(47, 31, 70, 0.16),
        inset 0 2px 1px rgba(255, 255, 255, 0.95);

    /* ===== BORDER RADII ===== */
    --radius-card-large: 24px;
    --radius-card-medium: 16px;
    --radius-pill: 999px;

    /* ===== FONTS ===== */
    --font-heading: "Cormorant Garamond", serif;
    --font-text: "Lato", sans-serif;
    --font-button: "Montserrat", sans-serif;

    --content-width: min(1400px, 94%);
}

/* ===== TEXT LAYOUT ===== */

h1 {
    font-family: var(--font-heading);
    font-size: 2rem;
    text-align: center;
    color: var(--tvv-heading);
}

h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    text-align: center;
    color: var(--tvv-heading);
}

h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    text-align: center;
    color: var(--tvv-heading);
}

p {
    font-family: var(--font-text);
    font-size: 1rem;
    text-align: center;
    color: var(--tvv-text);
}

.p1 {
    font-family: var(--font-text);
    font-size: 0.85rem;
    text-align: center;
    color: var(--tvv-purple-light1);
}

/* ===== GLOBAL IMAGE RULES ===== */

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

/* ===== General Layout ===== */

body {
    margin: 0;
    padding: 0;

    background-color: var(--tvv-cream);
    color: var(--tvv-text);

    font-family: var(--font-text);

    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== FOOTER ===== */

footer{
    padding: 2rem 0;
    text-align: center;

    font-family: var(--font-text);
    font-size: 0.875rem;
    color: var(--tvv-cream);

}

.footer-container {
    background: linear-gradient(
        to bottom,
        var(--tvv-purple-light2),
        var(--tvv-purple-light1)
    );

    border-radius: var(--radius-card-large);

    box-shadow: var(--card-shadow);

    padding: 1.5rem;

    text-align: center;
}

/* ===== BUTTONS ===== */

.button{
    display: inline-block;

    padding: 12px 28px;
    border: 2px solid var(--tvv-purple);
    border-radius: 999px;

    background-color: var(--tvv-purple);
    color: var(--tvv-cream);

    font-family: var(--font-button);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;

    cursor: pointer;
    transition: 
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.button-socials {
    display: inline-block;

    padding: 6px 14px;
    border: 1px solid var(--tvv-purple);
    border-radius: 999px;

    background-color: var(--tvv-purple);
    color: var(--tvv-cream);

    font-family: var(--font-button);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;

    cursor: pointer;
    transition: 
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.button:hover,
.button-socials:hover {
    background-color: var(--tvv-cream);
    border-color: var(--tvv-gold);
    color: var(--tvv-purple);
}

.button:focus-visible,
.button-socials:focus-visible {
    outline: 3px solid var(--tvv-gold);
    outline-offset: 3px;
}


.nav-button {
    display: inline-block;

    padding: 8px 18px;
    border: 2px solid var(--tvv-purple);
    border-radius: 999px;

    background-color: var(--tvv-cream);
    color: var(--tvv-heading);

    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;

    cursor: pointer;
    transition: 
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;

    margin: 0 10px;
}

.nav-button:hover {
    background-color: var(--tvv-gold);
    border-color: var(--tvv-gold);
    color: var(--tvv-purple);
}

.nav-button:focus-visible {
    outline: 3px solid var(--tvv-gold);
    outline-offset: 3px;
}

/* ===== PAGE LAYOUT ===== */

main {
    flex: 1;

    padding: 20px;
    text-align: center;
}

.container {
    max-width: 1000px;
    margin: 0 auto;

       padding-top: 30px;
}

.container-wide {
    width: var(--content-width);
    margin: 0 auto;

    border-top: 1px solid var(--tvv-gold);
    padding-top: 30px;
}

.sample-cta {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0 3rem;
}

/* ===== NAVIGATION ===== */

nav {
    margin-top: 30px;
}

.main-nav {
    width: var(--content-width);
    margin: 0 auto;
        
    border-top: 1px solid var(--tvv-gold);

    padding-top: 40px;
    padding-bottom: 10px;
}

/* ===== HEADER ===== */

header {
    padding: 40px 20px 20px;
    text-align: center;
}

.logo img {
    display: block;
    width: min(85%, 550px);
    height: auto;
    margin: 0 auto;

    filter:
        saturate(1.1)
        contrast(1.05)
        drop-shadow(0 2px 5px rgba(0,0,0,.10));
}

/* ===== MAIN CONTENT ===== */

main h1,
main h2,
main h3 {
    margin-top: 0;
    color: var(--tvv-purple);
    font-family: var(--font-heading);
}

main p {
    max-width: 650px;
    margin: 0 auto 24px;
    line-height: 1.7;
}

/* ===== INSTAGRAM ===== */

.instagram {
    margin-top: 40px;
    margin-bottom: 8px;

    font-size: 0.95rem;
}

.instagram-link {
    display: inline-block;
    margin-top: 20px;
    color: var(--tvv-purple);
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
    
}

.instagram-link:hover {
    color: var(--tvv-gold);
}

/* ===== CARDS ===== */

.form-card {
    border: 2px solid var(--tvv-purple);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
}

.form-card .button {
    margin-top: auto;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

@media (max-width: 700px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== HOME LAYOUT ===== */

.home-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "hello hello hello"
        "for-fans for-creatives for-fan-creators"
        "vertical-month vertical-month vertical-month"
        "creative-month creative-month news"        
        "information creator-month creator-month"
        "submit submit submit";

    gap: 24px;
}

@media (max-width: 1024px) {

    .home-layout {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "hello hello"
            "for-fans for-fans"
            "for-creatives for-fan-creators"
            "vertical-month vertical-month"
            "creative-month creative-month"
            "creator-month creator-month"
            "news information"
            "submit submit";

        gap: 24px;
    }

}


    .home-spotlight-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .home-spotlight-image img {
        width: 85%;
        max-width: 320px;
    }

    .home-spotlight-text {
        align-items: center;
        text-align: center;
    }

.home-for-fans {
    grid-area: for-fans;
}

.home-for-creatives {
    grid-area: for-creatives;
}

.home-for-fan-creators {
    grid-area: for-fan-creators;
}

.home-creative-month {
    grid-area: creative-month;
}

.home-hello {
    grid-area: hello;
}

.home-vertical-month {
    grid-area: vertical-month;
}

.home-news {
    grid-area: news;
}

.home-creator-month {
    grid-area: creator-month;
}

.home-information {
    grid-area: information;
}

.home-submit {
    grid-area: submit;
}

/* ===== HOME CARD STYLE ===== */

.home-creative-month,
.home-hello,
.home-vertical-month,
.home-news,
.home-creator-month,
.home-information,
.home-submit,
.home-for-fans,
.home-for-creatives,
.home-for-fan-creators {
    position: relative;
    overflow: hidden;

    padding: 32px;

    background:
        linear-gradient(
            180deg,
            var(--color-card-top) 0%,
            var(--tvv-cream) 48%,
            var(--color-card-bottom) 100%
        );

    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-card-large);

    box-shadow: var(--shadow-card-large);
}

.home-creative-month::before,
.home-hello::before,
.home-vertical-month::before,
.home-news::before,
.home-creator-month::before,
.home-information::before,
.home-submit::before,
.home-for-fans::before,
.home-for-creatives::before,
.home-for-fan-creators::before {
    content: "";

    position: absolute;
    top: 8px;
    left: 4%;

    width: 92%;
    height: 22%;

    background:
        linear-gradient(
            180deg,
            var(--color-card-highlight),
            transparent
        );

    border-radius: var(--radius-card-medium);

    pointer-events: none;
}

.home-creative-month > *,
.home-hello > *,
.home-vertical-month > *,
.home-news > *,
.home-creator-month > *,
.home-information > *, 
.home-submit > *,
.home-for-fans > *,
.home-for-creatives > *,
.home-for-fan-creators > * {
    position: relative;
    z-index: 1;
}

.home-vertical-month-image {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    overflow: hidden;
}

.home-vertical-month-image img {
    width: 60%;
    height: auto;
    display: block;
}

.home-spotlight-row {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.1fr);
    gap: 32px;
    align-items: center;
}

.home-spotlight-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-spotlight-image img {
    display: block;
    width: 75%;
    max-width: 360px;
    height: auto;
    object-fit: contain;
}

.home-spotlight-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* ===== VERTICAL DETAIL PAGE ===== */

.vertical-page {
    padding: 0;
    text-align: left;
}


/* ===== EXPLORE LAYOUTS ===== */

.explore-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "explore-search explore-search explore-search"
        "verticals-index creative-index fan-creator-index";

    gap: 24px;
}

.explore-vertical-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "explore-search"
        "verticals-index"
        "explore-submit";

    gap: 24px;
}

.explore-creative-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "explore-search"
        "creative-index"
        "explore-submit";

    gap: 24px;
}

.explore-fan-creator-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "explore-search"
        "fan-creator-index"
        "explore-submit";

    gap: 24px;
}

.explore-search {
    grid-area: explore-search;
    padding: 28px;
}

.explore-submit {
    grid-area: explore-submit;
    padding: 28px;
}

.verticals-index {
    grid-area: verticals-index;
    padding: 28px;
}

.creative-index {
    grid-area: creative-index;
    padding: 28px;
}

.fan-creator-index {
    grid-area: fan-creator-index;
    padding: 28px;
}

/* ===== VERTICAL LAYOUT ===== */

.vertical-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(240px, 0.75fr)
        minmax(280px, 0.5fr);

    grid-template-areas:
        "title title poster"
        "cast info poster"
        "cast info links"
        "cast notes notes"
        "change-request change-request change-request";

    gap: 24px;
    align-items: stretch;
}


/* ===== SHARED 3D CARD STYLE ===== */

.vertical-title-card,
.vertical-cast-card,
.vertical-info-card,
.vertical-poster-card,
.vertical-links-card,
.vertical-content-notes-card,
.explore-search,
.verticals-index,
.creative-index,
.fan-creator-index {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            var(--color-card-top) 0%,
            var(--tvv-cream) 48%,
            var(--color-card-bottom) 100%
        );

    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-card-large);

    box-shadow: var(--shadow-card-large);
}


/* Glossy highlight */

.vertical-title-card::before,
.vertical-cast-card::before,
.vertical-info-card::before,
.vertical-poster-card::before,
.vertical-links-card::before,
.vertical-content-notes-card::before,
.explore-search::before,
.verticals-index::before,
.creative-index::before,
.fan-creator-index::before {
    content: "";

    position: absolute;
    top: 8px;
    left: 4%;

    width: 92%;
    height: 22%;

    background:
        linear-gradient(
            180deg,
            var(--color-card-highlight),
            transparent
        );

    border-radius: var(--radius-card-medium);

    pointer-events: none;
}


/* Content must sit above the glossy highlight */

.vertical-title-card > *,
.vertical-cast-card > *,
.vertical-info-card > *,
.vertical-poster-card > *,
.vertical-links-card > *,
.vertical-content-notes-card > *,
.explore-search > *,
.verticals-index > *,
.creative-index > *,
.fan-creator-index > * {
    position: relative;
    z-index: 1;
}


/* ===== GRID POSITIONING ===== */

.vertical-title-card {
    grid-area: title;

    display: flex;
    align-items: center;

    min-height: 90px;
    padding: 28px 34px;
}

.vertical-cast-card {
    grid-area: cast;
    padding: 30px;
}

.vertical-info-card {
    grid-area: info;
    padding: 28px;
}

.vertical-poster-card {
    grid-area: poster;
    padding: 14px;
}

.vertical-links-card{
    grid-area: links;
    padding: 28px;
}

.vertical-content-notes-card {
    grid-area: notes;
    padding: 28px;
}

.change-request {
    grid-area: change-request;
    padding: 28px;
}

/* ===== TITLE ===== */

.vertical-title-card h1 {
    margin: 0;

    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 4vw, 4rem);
    line-height: 1.05;

    color: var(--tvv-heading);
    text-align: left;
}


/* ===== GENERAL VERTICAL TYPOGRAPHY ===== */

.vertical-layout h2 {
    margin: 0 0 18px;

    font-family: var(--font-heading);
    color: var(--tvv-purple);
}

.vertical-layout p {
    max-width: none;
    margin: 0;

    color: var(--tvv-text);
    line-height: 1.6;
}

.vertical-layout ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.vertical-layout a {
    color: var(--tvv-purple);
}


/* ===== POSTER ===== */

.vertical-poster-card {
    align-self: start;
}

.vertical-poster-card img {
    display: block;

    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;

    object-fit: cover;

    border-radius: var(--radius-card-medium);
}


/* Temporary appearance before a real poster is available */

.vertical-poster-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 2 / 3;

    border-radius: var(--radius-card-medium);

    color: var(--tvv-text);
    font-family: var(--font-button);
    text-align: center;
}


/* ===== CAST ===== */

.cast-section + .cast-section {
    margin-top: 38px;
    padding-top: 30px;

    border-top: 1px solid var(--color-card-border);
}

.cast-list {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(145px, 1fr));

    gap: 16px;
}


/* Individual cast member */

.cast-member {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 68px;
    padding: 14px 16px;

    background:
        linear-gradient(
            180deg,
            var(--color-card-top),
            var(--color-card-bottom)
        );

    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-card-medium);

    box-shadow: var(--shadow-card-small);

    color: var(--tvv-purple);
    font-family: var(--font-button);
    font-weight: 600;
    text-align: center;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.cast-member:hover {
    transform: translateY(-3px);

    border-color: var(--tvv-gold);
    box-shadow: var(--shadow-card-hover);

    color: var(--tvv-purple);
}

.cast-member:focus-visible {
    outline: 3px solid var(--tvv-gold);
    outline-offset: 3px;
}


/* ===== INFORMATION ===== */

.vertical-info-group {
    margin-bottom: 26px;
}

.vertical-info-group:last-child {
    margin-bottom: 0;
}

.vertical-info-group + .vertical-info-group {
    padding-top: 22px;

    border-top: 1px solid var(--color-card-border);
}


/* Genre and release year next to each other */

.vertical-info-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;
    margin-bottom: 26px;
}

.vertical-info-row .vertical-info-group {
    height: 100%;
    margin: 0;
    padding: 18px;

    background:
        linear-gradient(
            180deg,
            var(--color-card-top),
            var(--color-card-bottom)
        );

    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-card-medium);

    box-shadow: var(--shadow-card-small);
}


/* App and external links */

.platform-list,
.external-link-list {
    display: grid;
    gap: 12px;
}

.platform-list li,
.external-link-list li {
    background:
        linear-gradient(
            180deg,
            var(--color-card-top),
            var(--color-card-bottom)
        );

    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-card-medium);

    box-shadow: var(--shadow-card-small);
}

.platform-list a,
.external-link-list a {
    display: block;

    padding: 12px 14px;

    font-family: var(--font-button);
    font-weight: 600;
    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.platform-list a:hover,
.external-link-list a:hover {
    color: var(--tvv-gold);
    transform: translateY(-1px);
}

.platform-list a:focus-visible,
.external-link-list a:focus-visible {
    outline: 3px solid var(--tvv-gold);
    outline-offset: 3px;
}


/* ===== CONTENT NOTES ===== */

.content-note-list {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(180px, 1fr));

    gap: 12px;
}

.content-note-list li {
    padding: 12px 16px;

    background:
        linear-gradient(
            180deg,
            var(--color-soft-lilac-top),
            var(--color-soft-lilac-bottom)
        );

    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-card-medium);

    box-shadow: var(--shadow-card-small);

    color: var(--tvv-purple);
    text-align: left;
}


/* ===== TABLET LAYOUT ===== */

@media (max-width: 1050px) {

    .vertical-layout {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(230px, 0.85fr);

        grid-template-areas:
            "title poster"
            "cast poster"
            "cast info"
            "cast links"
            "notes notes";
    }

}


/* ===== MOBILE LAYOUT ===== */

@media (max-width: 700px) {

    .vertical-page {
        width: min(94%, 620px);
        margin-top: 35px;
    }

    .vertical-layout {
        grid-template-columns: 1fr;

        grid-template-areas:
            "title"
            "poster"
            "info"
            "links"
            "cast"
            "notes";

        gap: 18px;
    }

    .vertical-title-card,
    .vertical-cast-card,
    .vertical-info-card,
    .vertical-links-card,
    .vertical-content-notes-card {
        padding: 22px;
    }

    .vertical-title-card {
        min-height: auto;
    }

    .vertical-title-card h1 {
        font-size: 2.3rem;
    }

    .vertical-poster-card img {
        height: auto;
        min-height: 0;
        max-height: 700px;
    }

    .vertical-poster-placeholder {
        min-height: 400px;
    }

    .vertical-info-row {
        grid-template-columns: 1fr;
    }

    .cast-list {
        grid-template-columns:
            repeat(auto-fit, minmax(125px, 1fr));
    }

    .content-note-list {
        grid-template-columns: 1fr;
    }

}

/* ===== VERIFIED PROFILE ===== */

.verified-profile {
    margin-top: 10px;
    padding: 0;

    text-align: left;
}

/* ===== GENERAL PROFILE TYPOGRAPHY ===== */

.creative-layout h1,
.creative-layout h2,
.fan-creator-layout h1,
.fan-creator-layout h2 {
    margin: 0 0 18px;

    font-family: var(--font-heading);
    color: var(--tvv-purple);
}

.creative-layout p,
.fan-creator-layout p {
    max-width: none;
    margin: 0;

    color: var(--tvv-text);
    line-height: 1.6;
}

.creative-layout ul,
.fan-creator-layout ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.creative-layout a,
.fan-creator-layout a {
    color: var(--tvv-purple);
}

.creative-layout a.button-socials,
.fan-creator-layout a.button-socials {
    color: var(--tvv-cream);
}

.creative-layout a.button-socials:hover,
.fan-creator-layout a.button-socials:hover,
.creative-layout a.button-socials:focus-visible,
.fan-creator-layout a.button-socials:focus-visible {
    color: var(--tvv-purple);
}

/* ===== CREATIVE PROFILE GRID ===== */

.creative-layout {
    display: grid;

    grid-template-columns:
        minmax(220px, 1fr)
        minmax(0, 2.5fr)
        minmax(72px, 0.35fr);

    grid-template-areas:
    "identity main social-column";

    gap: 24px;
    align-items: start;
}

.profile-details-grid {
    display: grid;

    grid-template-columns: 
        minmax(220px, 1fr)
        minmax(300px, 1.5fr);

    grid-template-areas: 
    "name name"
    "about-column credits";

    gap: 24px;
    align-items: start;
}

/* ===== FAN CREATOR PROFILE GRID ===== */

.fan-creator-layout {
    display: grid;

    grid-template-columns: 
        minmax(220px, 1.25fr)
        minmax(300px, 1.25fr);

    grid-template-areas: 
    "name name"
    "about-column credits-column";

    gap: 24px;
    align-items: start;
}

/* ===== SHARED CREATOR CARD STYLE ===== */

.profile-identity-column,
.profile-picture-card,
.profile-name-card,
.profile-badge-card,
.profile-social-column,
.profile-role-card,
.profile-about-column,
.profile-project-card,
.profile-about-card,
.profile-beyond-card,
.profile-credits-card,
.profile-socials-card,
.profile-upclose-card,
.profile-credits-column {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            var(--color-card-top) 0%,
            var(--tvv-cream) 48%,
            var(--color-card-bottom) 100%
        );

    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-card-large);

    box-shadow: var(--shadow-card-large);
}

.profile-identity-column::before,
.profile-picture-card::before,
.profile-main-column::before,
.profile-name-card::before,
.profile-badge-card::before,
.profile-social-column::before,
.profile-role-card::before,
.profile-about-column::before,
.profile-project-card::before,
.profile-about-card::before,
.profile-beyond-card::before,
.profile-credits-card::before,
.profile-socials-card::before,
.profile-upclose-card::before 
.profile-credits-column::before {
    content: "";

    position: absolute;
    top: 8px;
    left: 4%;

    width: 92%;
    height: 22%;

    background:
        linear-gradient(
            180deg,
            var(--color-card-highlight),
            transparent
        );

    border-radius: var(--radius-card-medium);

    pointer-events: none;
}

.profile-identity-column > *,
.profile-picture-card > *,
.profile-main-column > *,
.profile-name-card > *,
.profile-badge-card > *,
.profile-social-column > *,
.profile-role-card > *,
.profile-about-column > *,
.profile-project-card > *,
.profile-about-card > *,
.profile-beyond-card > *,
.profile-credits-card > *,
.profile-socials-card > *,
.profile-upclose-card > * 
.profile-credits-column > * {
    position: relative;
    z-index: 1;
}

.profile-project-card,
.profile-about-card,
.profile-beyond-card,
.profile-upclose-card,
.profile-role-card {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 28px;
}

.profile-socials-card {
    padding: 18px 12px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 14px;
}

.profile-social-list {
    display: grid;
    gap: 12px;
    justify-items: center;

    margin: 0;
    padding: 0;

    list-style: none;
}

.profile-role-card h2:not(:first-child),
.profile-beyond-card h3:not(:first-child),
.profile-upclose-card h2:not(:first-child) {
    margin-top: 20px;
}

/* ===== CREATOR GRID POSITIONING ===== */

.profile-identity-column {
    grid-area: identity;

    display: flex;
    flex-direction: column;
    gap: 24px;

    align-self: start;
}

.profile-picture-card {
    grid-area: picture;
    padding: 14px;
    align-self: start;
}

.profile-role-card {
    grid-area: role;
    padding: 28px;
}

.profile-main-column {
    grid-area: main;

    display: flex;
    flex-direction: column;
    gap: 24px;

    min-width: 0;
}

.profile-name-card {
    grid-area: name;

    display: flex;
    align-items: center;

    min-height: 0;
    padding: 18px 28px;

    align-self: start;
}

.profile-name-card h1 {
    margin: 0;

    font-family: var(--font-heading);
    font-size: clamp(2rem, 3vw, 3.2rem);
    line-height: 1;
}

.profile-social-column {
    grid-area: social-column;

    display: flex;
    flex-direction: column;
    gap: 24px;

    align-self: start;
}

.profile-badge-card {
    grid-area: badge;
    width: 100%;
    aspect-ratio: 1;
    padding: 8px;

    align-self: start;
    justify-self: center;

    border-radius: 50%;
}

.profile-badge-card img {
    display: block;

    width: 100%;
    height: 100%;
    filter: 
    saturate(0.85) 
    contrast(0.95)
    drop-shadow(0 2px 6px rgba (0, 0, 0, 0.10));

    object-fit: contain;
    border-radius: 50%;
}

.profile-about-column{
    grid-area: about-column;

    display: flex;
    flex-direction: column;
    gap: 24px;

    align-self: start;
}

.profile-project-card {
    grid-area: project;
    padding: 28px;
}

.profile-about-card {
    grid-area: about;
    padding: 28px;
}

.profile-beyond-card {
    grid-area: beyond;
    padding: 28px;
}

.profile-credits-column{
    grid-area: credits-column;

    display: flex;
    flex-direction: column;
    gap: 24px;

    align-self: start;
}
.profile-upclose-card {
    grid-area: upclose;
    padding: 28px;
}

.profile-credits-card {
    grid-area: credits;
    padding: 28px;
}

.profile-socials-card {
    grid-area: socials;
    padding: 14px;
}

.profile-picture-card img {
    display: block;

    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;

    object-fit: cover;

    border-radius: var(--radius-card-medium);
}

/* ===== CREATOR TABLET LAYOUT ===== */

@media (max-width: 1050px) {

    .creative-layout {
        grid-template-columns:
            minmax(220px, 1fr)
            minmax(110px, 140px);

        grid-template-areas:
            "identity social-column"
            "main main";
    }

   .fan-creator-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "name"
            "about-column"
            "credits-column";

        gap: 18px;
    }

    .profile-about-column,
    .profile-credits-column {
        width: 100%;
        min-width: 0;
    }

    .explore-layout {
        grid-template-columns: 
            minimax(auto, 1fr)
            minimax(auto, 1fr);

        grid-template-areas: 
            "search search"
            "vertical-index creative-index"
            "fan-creator-index  submit";
    }
}

/* ===== CREATOR MOBILE LAYOUT ===== */

@media (max-width: 700px) {

    .verified-profile {
        width: min(94%, 620px);
        margin-top: 35px;
    }

   .creative-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "identity"
            "main"
            "social-column";

        gap: 18px;
    }

    .profile-identity-column,
    .profile-main-column,
    .profile-social-column {
        width: 100%;
        min-width: 0;
    }

    .fan-creator-layout {
    grid-template-columns: minmax(0, 1fr);

    grid-template-areas:
        "name"
        "about-column"
        "credits-column";

    gap: 18px;
    }

    .profile-name-card,
    .profile-about-column,
    .profile-credits-column {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

    .profile-name-card,
    .profile-picture-card,
    .profile-role-card,
    .profile-project-card,
    .profile-beyond-card,
    .profile-credits-card,
    .profile-socials-card {
        padding: 22px;
    }

    .profile-badge-card {
        justify-self: center;
        width: 120px;
        height: 120px;
        padding: 0;
    }

    .profile-picture-card {
        align-self: stretch;
    }

    .profile-picture-card img {
        width: 100%;
        height: auto;
    }

}

/* ===== mobile Home version ===== */

@media (max-width: 768px) {

    .home-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "hello"
            "for-fans"
            "for-creatives"
            "for-fan-creators"
            "vertical-month"
            "creative-month"
            "creator-month"
            "news"
            "information"
            "submit";

        gap: 20px;
    }

    .home-spotlight-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .home-spotlight-image,
    .home-spotlight-text {
        min-width: 0;
        width: 100%;
    }

    .home-spotlight-image img {
        width: 85%;
        max-width: 320px;
    }

    .home-spotlight-text {
        text-align: center;
    }

    .explore-layout {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "explore-search"
            "verticals-index"
            "creative-index"
            "fan-creator-index";

        gap: 20px;
    }
}