/* ----------------------------------------------------------
   Main content & layout grid
   ---------------------------------------------------------- */
.main-content {
  position: relative;
  z-index: 15;             /* above canvas */
  /* leave room for the navbar at top (navbar is absolute) */
  padding-top: 225px;      /* space between page top and first content (adjust as needed) */
  padding-left: 80px;      /* same side inset as nav */
  padding-right: 80px;
  box-sizing: border-box;
  min-height: 100vh;
}

/* stacked blocks container */
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* each content block uses the same 12-column grid so everything lines up */
.block {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  padding-top: 0px;
}



/* column helpers (match nav columns)
   - col-1 spans 3 columns (narrow header column)
   - col-5 spans 3 columns (project names)
   - col-9 spans 2 columns (years)
*/
.col-1 { grid-column: 1 / span 3; }
.col-5 { grid-column: 5 / span 3; display: flex;
    /* Optional: adds a small space between the icons */
    gap: 12px;  }
.col-9 { grid-column: 9 / span 2; }

/* block heading styling (20px, uppercase, black) */
.block h2 {
  margin: 0;
  font-size: 20px;
  line-height: 20px;
  color:inherit;
  font-weight: 400;
  letter-spacing: 1.2px;
}

p {
  font-family: Montserrat;
    font-size: 18px;
    text-transform: none;
    line-height: 1.5;  
    color: #000;
    white-space: normal;    /* ensure normal wrapping (avoid accidental nowrap) */ 
    width:700px ;
}

.cv {
  margin-top: 0px;
}

.email-link {
  font-family: Montserrat;
  font-size: 18px;
  text-transform: none;
  text-decoration: none;
}


@media screen and (max-width: 767px) {
    
    /* --------------------------------------
       1. PADDING AND VERTICAL SPACING (Unified)
       -------------------------------------- */

    .main-content {
        padding-top: 112px; /* Matches your preferred vertical offset */
        padding-left: 10px; /* ALIGN to .div-bar left edge */
        padding-right: 10px; /* ALIGN to .div-bar right edge */
        overflow-y: auto;
        z-index: 15;
    }

    /* FIX: The .content-wrapper MUST NOT have its own horizontal padding 
       if .main-content already defined it. */
    .content-wrapper {
        /* Ensuring it fills the space provided by .main-content */
        width: 100%; 
        gap:0;
    }

    /* --------------------------------------
       3. MAIN CONTENT GRID (Identical to Navbar Grid)
       -------------------------------------- */

    .block {
        /* 100% Symmetrical Grid */
        display: grid; 
        grid-template-columns: repeat(24, minmax(0, 1fr)); 
        padding-top: 0;
        align-items: start;
        margin-bottom: 80px;
    }
    
    /* ALIGN Headings (.col-1) with 'ANA MITROVIC' - Starts at Col 1 */
    .col-1 { 
        grid-column: 1 / span 7; /* Occupies the same 4 columns as the first link */
        justify-self: start; 
        width: 100%;
        margin-left: 0; /* Ensures alignment with the .div-bar edge */
    }

    /* ALIGN Content (.col-5) with 'PROJEKTI' - Starts at Col 5 */
    .col-5 { 
        grid-column: 9 / span 15; /* Starts exactly where 'Projekti' starts */
        justify-self: start; 
        width: 100%;
        margin-left: 0; /* Ensures alignment */
         display: flex;
    /* Optional: adds a small space between the icons */
    gap: 12px; 
    }
    
    /* Other styles */
    .block h2, h2 {
    font-size: 12px; 
    line-height: 1.2; /* Allows wrapping within the 4 columns */
    letter-spacing: 0.8px;
    font-weight: 400;
    margin: 0; /* REMOVED DEFAULT TOP/BOTTOM MARGINS */
    padding: 0; /* REMOVED DEFAULT PADDINGS */
}

   .email-link {
    font-size: 12px;
    line-height: 1.5;
    margin: 0; /* REMOVED DEFAULT MARGINS */
    padding: 0; /* REMOVED DEFAULT PADDINGS */
    display: block; /* Important for block-level control */
}

    .col-5 a {
    margin: 0;
    padding: 0;
}

.col-5 img {
    margin: 0; /* REMOVED DEFAULT MARGINS */
    padding: 0; /* REMOVED DEFAULT PADDINGS */
    display: block;
}
}