/*-- -------------------------- -->
<---           Hero             -->/* Zorgt ervoor dat de pagina exact binnen het scherm blijft zonder scrollbars */





html, body {
    margin: 0;
    padding: 0;
}

body.cs-no-scroll {
    height: 100vh;
    height: 100dvh;
    overflow: hidden; /* Hier blijft hij rotsvast op slot staan! */
}

/* GECORRIGEERD: Verwijdert de blauwe strepen en link-effecten */
#jane-portfolio a {
    text-decoration: none;
    color: inherit;
    outline: none;
}

/* Mobile - Vanaf 0rem */
@media only screen and (min-width: 0rem) {
  #video-2284 {
    position: relative;
    z-index: 1;
    height: 100vh;
    height: 100dvh; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  #video-2284 .cs-container {
    width: 100%;
    max-width: calc(1280/16 * 1rem);
    margin: auto;
    padding: 0 calc(16/16 * 1rem);
    box-sizing: border-box;
    z-index: 2;
  }

  #video-2284 .cs-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 3rem);
  }

  /* H1 - Hoofdtitel */
  #video-2284 .cs-title {
    margin: 0;
    color: #ffffff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    font-size: clamp(2.5rem, 8vw, 5.5rem); 
    line-height: 1.2;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
  }

  /* H2 - Ondertitel */
  #video-2284 .cs-subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    font-size: clamp(1.1rem, 5.5vw, 3.00rem);
    line-height: 1.4;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
  }

  /* --- ACHTERGROND & OVERLAY --- */
  #video-2284 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  #video-2284 .cs-background:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.2) 0%,
      rgba(0,0,0,0.4) 60%,
      rgba(0,0,0,0.6) 100%
    );
    top: 0;
    left: 0;
    z-index: 1;
  }

  #video-2284 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

/* Desktop - Vanaf 48rem (768px) en groter */
@media only screen and (min-width: 48rem) {
  #video-2284 .cs-subtitle {
    white-space: nowrap; 
  }
}

/*-- -------------------------- -->
<---       Portfolio Grid       -->
<--- -------------------------- -*/

/* Mobile - 0rem and up */
@media only screen and (min-width: 0rem) {
    #portfolio-grid-2285 {
        padding: clamp(3.75rem, 8vw, 6rem) calc(16/16 * 1rem);
        position: relative;
        z-index: 1;
        background-color: #ffffff;
    }

    #portfolio-grid-2285 .cs-container {
        width: 100%;
        max-width: calc(1280/16 * 1rem); 
        margin: auto;
        display: flex;
        flex-direction: column;
        gap: calc(40/16 * 1rem);
    }

    /* Top Bar Utilities (<< and BE) */
    #portfolio-grid-2285 .cs-top-bar {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: calc(16/16 * 1rem);
        font-family: sans-serif;
        font-size: calc(20/16 * 1rem);
        font-weight: bold;
        color: #000000;
    }

    #portfolio-grid-2285 .cs-back {
        text-decoration: none;
        color: #000000;
    }

    /* Grid layout - Default stacks vertically on mobile */
    #portfolio-grid-2285 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: calc(48/16 * 1rem);
        list-style: none;
    }

    #portfolio-grid-2285 .cs-item {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    #portfolio-grid-2285 .cs-picture {
        width: 100%;
        background-color: none;
        display: flex;
        overflow: hidden;
        margin: 0 auto; /* Ruimte wordt nu door margin-top van de info bepaald */
        justify-content: center;
    }

    #portfolio-grid-2285 .cs-picture img {
        width: 80%;
        height: auto; /* GECORRIGEERD: Behoudt de originele ratio zonder te vervormen */
        display: block;
    }

    /* Content Typography Settings */
    #portfolio-grid-2285 .cs-info {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-top: calc(36/16 * 1rem); /* Ruimte tussen foto en titel */
    }

    #portfolio-grid-2285 .cs-project-title {
        font-size: calc(16/16 * 1rem);
        color: #000000;
        margin-bottom: calc(24/16 * 1rem); /* Ruimte tussen titel en beschrijving */
        font-family: sans-serif;
        font-style: italic;
    }

    #portfolio-grid-2285 .cs-desc {
        font-size: calc(14/16 * 1rem);
        line-height: 1.6;
        color: #000000;
        margin: 0;
        font-family: sans-serif;
    }
    
    #portfolio-grid-2285 .cs-project-link {
        color: #000000;
        text-decoration: underline;
    }

    /* Utility Helpers voor unieke uitlijning */
    #portfolio-grid-2285 .cs-center-text {
        text-align: center;
        align-items: center;
    }

    #portfolio-grid-2285 .cs-center-text .cs-desc {
        text-align: center;
    }

    #portfolio-grid-2285 .cs-title-center {
        text-align: center;
        align-self: center;
    }
}

/* Tablet / Desktop - 48rem (768px) and up */
@media only screen and (min-width: 48rem) {
    #portfolio-grid-2285 .cs-card-group {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto; /* Rij 1 = foto's, Rij 2 = tekst */
        column-gap: clamp(2rem, 6vw, 5rem);
    }

    /* GECORRIGEERD: Dit heft de li-container op zodat de foto's en teksten rechtstreeks in het hoofdgrid vallen */
    #portfolio-grid-2285 .cs-item {
        display: contents; 
    }

    /* Wijst Kolom 1 (Lines) handmatig toe aan het grid raster */
    #portfolio-grid-2285 .cs-item:nth-child(1) .cs-picture {
        grid-column: 1;
        grid-row: 1;
    }
    #portfolio-grid-2285 .cs-item:nth-child(1) .cs-info {
        grid-column: 1;
        grid-row: 2;
    }

    /* Wijst Kolom 2 (Pitch) handmatig toe aan het grid raster */
    #portfolio-grid-2285 .cs-item:nth-child(2) .cs-picture {
        grid-column: 2;
        grid-row: 1;
       
    }
    #portfolio-grid-2285 .cs-item:nth-child(2) .cs-info {
        grid-column: 2;
        grid-row: 2;
    }

    /* GECORRIGEERD: Centreert de foto's verticaal ten opzichte van elkaar in rij 1 */
    #portfolio-grid-2285 .cs-picture {
        align-self: center; 
        justify-self: center;
    }

    /* GECORRIGEERD: Dwingt de tekst om strak bovenaan te beginnen in rij 2 (gelijke hoogte!) */
    #portfolio-grid-2285 .cs-info {
        align-self: start; 
        margin-top: calc(36/16 * 1rem); /* Afstand tussen de fotorij en de tekstrij */
    }

    #portfolio-grid-2285 .cs-desc {
        text-align: justify; 
    }
}
/*-- -------------------------- -->
<---       Discover Works       -->
<--- -------------------------- -*/

/* Mobiel - 0rem en groter */
@media only screen and (min-width: 0rem) {
    #discover-works-2286 {
        padding: calc(16/16 * 1rem) calc(16/16 * 1rem) clamp(3.75rem, 8vw, 6rem) calc(16/16 * 1rem);
        background-color: #ffffff;
        position: relative;
        z-index: 1;
    }

    #discover-works-2286 .cs-container {
        width: 100%;
        max-width: calc(1280/16 * 1rem); 
        margin: auto;
        display: flex;
        flex-direction: column;
        gap: calc(32/16 * 1rem); 
    }

    #discover-works-2286 .cs-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-top: calc(32/16 * 1rem);
    }

    /* Merknaam / Hoofdtitel helemaal bovenaan */
    #discover-works-2286 .cs-brand-title {
        font-family: sans-serif;
        font-size: clamp(2rem, 5vw, 3rem);
        font-weight: 500;
        color: #000000;
        text-decoration: none;
        margin-bottom: calc(32/16 * 1rem);
        display: block;
    }

    /* Sub-sectie verpakking */
    #discover-works-2286 .cs-nav-group {
        width: 100%;
        margin-bottom: calc(24/16 * 1rem);
    }

    /* "Mijn werk", "Over Jane Coppin" EN "Contact" delen exact dezelfde styling */
    #discover-works-2286 .cs-section-header,
    #discover-works-2286 .cs-main-nav-link {
        font-family: sans-serif;
        font-size: clamp(1.5rem, 4vw, 2.2rem);
        font-weight: 400;
        color: #000000;
        text-decoration: none;
        display: block;
    }

    /* Afstanden tussen de hoofd-items */
    #discover-works-2286 .cs-section-header {
        margin-bottom: calc(16/16 * 1rem);
    }

    #discover-works-2286 .cs-main-nav-link {
        margin-bottom: calc(16/16 * 1rem);
    }

    /* Lijst met landen onder 'Mijn werk' */
    #discover-works-2286 .cs-sub-list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: calc(12/16 * 1rem); 
    }

    #discover-works-2286 .cs-nav-item {
        display: flex;
        align-items: center; 
        position: relative;
        padding-left: calc(110/16 * 1rem); /* Ruimte voor de pijl */
    }

    #discover-works-2286 .cs-nav-link {
        font-family: sans-serif;
        font-size: clamp(1.2rem, 3.5vw, 1.8rem); 
        color: #000000;
        text-decoration: none;
        font-weight: 400;
    }

    /* Actieve pijl voor het gekozen land */
    #discover-works-2286 .cs-arrow {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%); 
        white-space: nowrap;
        font-family: sans-serif;
        font-size: clamp(1rem, 2.5vw, 1.5rem);
        color: #000000;
        line-height: 1;
    }

    #discover-works-2286 .cs-picture {
        width: 100%;
        display: block;
    }

    #discover-works-2286 .cs-picture img {
        width: 100%;
        max-height: 50vh; 
        height: auto;
        display: block;
        object-fit: contain; 
    }
}

/* Desktop - 48rem (768px) en groter */
@media only screen and (min-width: 48rem) {
    #discover-works-2286 .cs-container {
        display: grid;
        grid-template-columns: minmax(0, 38%) 1fr; 
        column-gap: clamp(3rem, 8vw, 6rem); 
        align-items: start; 
    }

    #discover-works-2286 .cs-picture img {
        width: 100%;
        max-height: 85vh; 
        height: auto;
        object-fit: contain;
    }
}

/*-- -------------------------- -->
<---          CV PAGE           -->
<--- -------------------------- -*/

#cv-page-2287 {
    /* ============================================================== */
    /*  DASHBOARD: PAS HIER ELK LETTERTYPE EN ELKE GROOTTE APART AAN  */
    /* ============================================================== */
    
    /* --- LINKERKOLOM --- */
    --title-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --title-size: clamp(2.5rem, 6vw, 4rem);

    --bio-font: "Georgia", Times, serif; 
    --bio-size: calc(14/16 * 1rem);

    /* --- RECHTERKOLOM (Kopjes) --- */
    --section-title-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --section-title-size: calc(13/16 * 1rem);

    /* --- SPECIFIEK VOOR DE DIKKE LIJST (De 3 kolommen) --- */
    --year-font: "Courier New", Courier, monospace; 
    --year-size: calc(13/16 * 1rem);

    --details-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --details-size: calc(13/16 * 1rem);

    --location-font: "Georgia", Times, serif; 
    --location-size: calc(12/16 * 1rem);

    /* --- OVERIGE LIJSTEN (Publications, etc.) --- */
    --list-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --list-size: calc(13/16 * 1rem);
    /* ============================================================== */
}

/* Mobiele Basis (0rem en groter) */
@media only screen and (min-width: 0rem) {
    #cv-page-2287 {
        padding: calc(40/16 * 1rem) calc(24/16 * 1rem);
        background-color: #ffffff;
        color: #000000;
    }

    #cv-page-2287 .cs-container {
        width: 100%;
        max-width: calc(1340/16 * 1rem); 
        margin: auto;
    }

    #cv-page-2287 .cs-back {
        font-family: var(--title-font);
        font-size: calc(24/16 * 1rem);
        color: #000000;
        text-decoration: none;
        display: inline-block;
        margin-bottom: calc(24/16 * 1rem);
        font-weight: bold;
    }

    #cv-page-2287 .cs-title {
        font-family: var(--title-font);
        font-size: var(--title-size); 
        font-weight: bold;
        margin: 0 0 calc(32/16 * 1rem) 0;
        letter-spacing: -0.02em;
    }

    /* Mobiele layout voor de content (alles onder elkaar) */
    #cv-page-2287 .cs-content-layout {
        display: flex;
        flex-direction: column;
        gap: calc(48/16 * 1rem);
    }

    #cv-page-2287 .cs-bio p {
        font-family: var(--bio-font);
        font-size: var(--bio-size); 
        line-height: 1.6;
        margin: 0 0 calc(20/16 * 1rem) 0;
        text-align: justify;
    }

    #cv-page-2287 .cs-right-col {
        display: flex;
        flex-direction: column;
        gap: calc(40/16 * 1rem);
    }

    #cv-page-2287 .cs-cv-grid {
        display: grid;
        grid-template-columns: calc(60/16 * 1rem) 1.2fr 1fr;
        gap: calc(12/16 * 1rem) calc(24/16 * 1rem);
        line-height: 1.4;
    }

    #cv-page-2287 .cs-year {
        font-family: var(--year-font);
        font-size: var(--year-size);
    }

    #cv-page-2287 .cs-details {
        font-family: var(--details-font);
        font-size: var(--details-size);
    }

    #cv-page-2287 .cs-location {
        font-family: var(--location-font);
        font-size: var(--location-size);
        font-style: italic;
    }

    #cv-page-2287 .cs-section-title {
        font-family: var(--section-title-font);
        font-size: var(--section-title-size); 
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin: 0 0 calc(16/16 * 1rem) 0;
        border-bottom: 1px solid #000;
        padding-bottom: calc(4/16 * 1rem);
        display: inline-block;
    }

    #cv-page-2287 .cs-text-list p {
        font-family: var(--list-font);
        font-size: var(--list-size); 
        line-height: 1.5;
        margin: 0 0 calc(8/16 * 1rem) 0;
    }
}

/* Desktop Schermen (768px / 48rem en groter) */
@media only screen and (min-width: 48rem) {
    /* WIJZIGING: Het grid wordt nu toegepast op de content-layout in plaats van de container */
    #cv-page-2287 .cs-content-layout {
        display: grid;
        grid-template-columns: minmax(0, 38%) 1fr;
        column-gap: clamp(4rem, 8vw, 8rem);
        
        /* Dwingt de biografie ("Jane") en het eerste jaar ("2025") om op exact dezelfde hoogte te starten */
        align-items: start; 
    }

    #cv-page-2287 .cs-right-col {
        margin-top: 0; 
    }
}